@newtui/nuxt

Nuxt module for newt/ui — auto-imports the Discord-native components you copied into your project with newtui and injects the --newt-* design tokens.

Installation

pnpm add -D @newtui/nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@newtui/nuxt"],
})

Then add components as usual:

npx newtui add button

<template>
  <Button variant="primary">Send</Button>
</template>

No import needed — everything under components/ui/** is registered.

Options

export default defineNuxtConfig({
  modules: ["@newtui/nuxt"],
  newt: {
    prefix: "Newt", // <NewtButton /> instead of <Button />. Default: "".
    componentDir: "components", // relative to srcDir. `<componentDir>/ui/**` is registered.
    css: true, // inject the --newt-* tokens stylesheet. Default: true.
  },
})

| Option | Type | Default | Description | | -------------- | --------- | -------------- | ------------------------------------------------------------------------ | | prefix | string | "" | Prefix applied to every auto-imported component name. | | componentDir | string | "components" | Component directory relative to srcDir; ui/** inside it is used. | | css | boolean | true | Adds runtime/tokens.css (the --newt-* tokens) to nuxt.options.css. |

Set css: false if your global stylesheet already contains the tokens (for example when newtui init appended them to assets/css/tailwind.css).

Tailwind

The module only ships the tokens. Utilities such as bg-newt-bg-surface come from the newt/ui Tailwind preset — see the nuxt-template for a ready-made tailwind.config.ts.

Development

pnpm build       # nuxt-module-build -> dist
pnpm typecheck   # tsc --noEmit