Vite Vue Installation

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

Requirements

Use the official Vue Vite plugin, an object-form defineConfig({ ... }) config, src/App.vue, and a src/main.ts or src/main.js entry. Follow the starter’s Node.js requirements.

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

Initialize Starwind

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 beta adapter 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>

Framework Wiring

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";

Follow Vue dark mode setup to apply the saved theme before paint and connect the theme controller.

Support Boundaries

Automatic setup expects a static Vite config with a plugins array. Follow the manual wiring above when a custom config needs edits. Vue Router within a Vite app uses this guide.

Next Steps

Select the Vue tab on component examples. See Dialog for controlled state and Input for form binding. The Styled Image component is Astro-only.