Vite Vue Installation

This guide covers Vue 3.5 or newer in a Vite application.

Requirements

Start with a Vite app that has src/App.vue and src/main.ts or src/main.js. Your Vite config should use defineConfig({ ... }) with the Vue plugin listed in plugins. Use the Node.js version required by your starter.

Create a Vite Vue Project

Use the official Vue starter. Choose TypeScript and name the project my-app. Skip this step for an existing project.

pnpm create vue@latest

npm create vue@latest

yarn create vue

Enter the project and install its dependencies:

cd my-app
pnpm install

cd my-app
npm install

cd my-app
yarn install

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 and configures Tailwind, the @/* alias, and a stylesheet import in src/main.*. It records vue as the framework in starwind.config.json.

Add and Render Button

pnpx starwind@latest add button

npx starwind@latest add button

yarn dlx starwind@latest add button

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

<template>
  <Button>Hello from Vue</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.

For manual setup, complete the shared setup with the Vue adapter. Preserve any existing plugins when adding Tailwind and the alias:

import { fileURLToPath } from "node:url";
import tailwindcss from "@tailwindcss/vite";
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [vue(), tailwindcss()],
  resolve: {
    alias: { "@": fileURLToPath(new URL("./src", import.meta.url)) },
  },
});

Add the matching "@/*": ["./src/*"] paths entry in tsconfig.app.json and import the stylesheet:

import "./styles/starwind.css";

The Vue dark mode guide shows how to apply the saved theme before the page appears.

Custom Project Setup

List your Vite plugins directly in the plugins array so the CLI can update them. If your config builds that list with custom code, use the manual steps above. This guide also works for Vite apps that use Vue Router.

Next Steps

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