---
title: "Nuxt"
description: "Install newt/ui in a Nuxt 4 project, with the module that auto-imports the components and injects the tokens."
---

Create the project with `npx newtui@latest init` — `--template <name>` scaffolds Next.js, Vite and Nuxt from nothing, and `--preset <code>` applies a preset from https://newtui.dev/create — or wire it into a project you already have:

1. **Create the app**

    ```bash
    npm create nuxt@latest my-app
    ```

2. **Add Tailwind**

    ```bash
    npm install tailwindcss @tailwindcss/vite
    ```

    ```ts title="nuxt.config.ts"
    import tailwindcss from "@tailwindcss/vite"

    export default defineNuxtConfig({
      css: ["~/assets/css/tailwind.css"],
      vite: { plugins: [tailwindcss()] },
    })
    ```

    ```css title="app/assets/css/tailwind.css"
    @import "tailwindcss";
    ```

3. **Run init**

    ```bash
    npx newtui@latest init --framework vue --bundler nuxt
    ```

    `init` guesses the bundler from a `nuxt.config`, so the flags are only needed
    when it guesses wrong.

4. **Add a component**

    ```bash
    npx newtui@latest add button
    ```

    ```vue title="app/pages/index.vue"
    <script setup lang="ts">
    import { Button } from "@/components/ui/button"
    </script>

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

    Put `.newt-root` on the wrapper in `app.vue`.

## The module [#module]

`@newtui/nuxt` saves you the imports. It registers your `components/ui`
directory with Nuxt, so `Button.vue` is available as `<Button />` anywhere
without the directory name in front of it, and it prepends the token stylesheet
to your CSS so the variables exist before your own styles run. It needs Nuxt 4.

```bash
npx --yes @newtui/nuxt
```

```ts title="nuxt.config.ts"
export default defineNuxtConfig({
  modules: ["@newtui/nuxt"],
  newt: {
    prefix: "", // "Newt" gives you <NewtButton />
    componentDir: "components",
    css: true, // false if you already ship the tokens
  },
})
```

All three options are optional. `prefix` namespaces the auto-imported names if a
bare `<Button />` would collide with something you already have,
`componentDir` points at your components directory relative to the Nuxt source
directory, and `css: false` turns the injected tokens off when your own CSS
entry already carries them.

## What init writes [#written]

```text
components.json                          the config, shared with shadcn
app/assets/css/tailwind.css              the --newt-* token block
app/lib/utils.ts                         cn()
app/components/ui/button/Button.vue      add button
app/components/ui/button/index.ts
```

See [Dark mode](/docs/dark-mode#nuxt) for the theme toggle, and [RTL](/docs/rtl)
if the app has to run right to left.