Nuxt Installation

This guide covers Nuxt 3 and Nuxt 4 with Vue 3.5 or newer.

Create a Nuxt Project

Use the official Nuxt starter for a new Nuxt 4 app. Skip this step for an existing Nuxt 3 or 4 project.

pnpm create nuxt@latest my-app

npm create nuxt@latest my-app

yarn create nuxt my-app

Enter my-app and finish dependency installation with the package manager chosen in the starter.

Requirements

Keep nuxt.config.ts in your project folder and write its settings inside defineNuxtConfig({ ... }). Use app/app.vue for Nuxt 4 or app.vue for Nuxt 3.

Install with the CLI

pnpx starwind@latest init --framework vue --defaults

npx starwind@latest init --framework vue --defaults

yarn dlx starwind@latest init --framework vue --defaults

Starwind installs the Vue package, registers the stylesheet in Nuxt’s css array, and adds Tailwind to vite.plugins. The Nuxt component scan excludes Starwind’s TypeScript helper files. Use explicit imports from each component’s index.ts as shown below.

Add Button

pnpx starwind@latest add button

npx starwind@latest add button

yarn dlx starwind@latest add button

Nuxt 4

<script setup lang="ts">
import { Button } from "~/components/starwind/button";
</script>

<template>
  <Button>Hello from Nuxt</Button>
</template>

Nuxt 3

<script setup lang="ts">
import { Button } from "~/components/starwind/button";
</script>

<template>
  <Button>Hello from Nuxt</Button>
</template>

Optional: Set Up Dark Mode

To remember a visitor’s theme choice or follow their system setting, use the Vue dark mode guide. Add the theme script yourself after CLI setup.

Manual Setup

Follow these steps to set up Starwind by hand. You can also use them to check the files changed by the CLI.

Complete the shared manual setup with the Vue package and the paths for your Nuxt version. Merge these entries into the existing config:

import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  css: ["~/assets/css/starwind.css"],
  components: [
    { path: "~/components", ignore: ["starwind/**/*.ts", "starwind-primitives/**/*.ts"] },
  ],
  vite: { plugins: [tailwindcss()] },
});

Nuxt already provides the ~ and @ import shortcuts. Follow Vue dark mode setup for the theme script.

Custom Project Setup

The CLI works with the usual Nuxt 3 and 4 folder structure. If you changed srcDir, use Nuxt layers through extends, or use a different builder, follow the manual steps above. A config that calculates its settings with custom code also needs manual setup.

Next Steps

Choose the Vue tab on a component page to see its examples.