Quasar Installation

This guide covers Quasar CLI with @quasar/app-vite v3 and Vue 3.5 or newer, in SPA or SSR mode.

Create a Quasar Project

Use the official Quasar starter. Select Quasar CLI with Vite and TypeScript, name the app my-app, and install dependencies when prompted.

pnpm create quasar@latest

npm init quasar@latest

yarn create quasar

Enter my-app before running Starwind. Skip creation for an existing supported app.

Requirements

Keep the standard src/App.vue, src/router, src/layouts, src/pages, and src/css layout. Use quasar.config.ts or .js with a static defineConfig callback imported from #q-app/wrappers.

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 registers its stylesheet in Quasar’s css array. It adds Tailwind through build.vitePlugins for both the server and client builds.

Add and Render Button

pnpx starwind@latest add button

npx starwind@latest add button

yarn dlx starwind@latest add button

Add Button inside an existing Quasar page so it stays within the application’s layout:

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

<template>
  <q-page padding>
    <Button>Hello from Quasar</Button>
  </q-page>
</template>

Framework Wiring

Complete the shared manual setup with Vue and the paths above. Merge these settings into the existing Quasar config. Keep its existing CSS entry, shown here as app.scss, after starwind.css:

import { defineConfig } from "#q-app/wrappers";

export default defineConfig(() => ({
  css: ["starwind.css", "app.scss"],
  build: {
    vitePlugins: [
      ["@tailwindcss/vite", {}, { server: true, client: true }],
    ],
  },
}));

Use Quasar’s src/ alias for application imports. Follow Vue dark mode setup to connect theme behavior.

SPA and SSR

The same component source works in SPA and SSR mode. The CLI recognizes the SSR layout through src-ssr. Keep the Tailwind plugin enabled for both builds. Use the mode commands in the Quasar SSR guide.

Support Boundaries

The beta supports Quasar CLI with Vite in SPA and SSR mode. Other Quasar modes and the Webpack builder fall outside automatic setup. Dynamic config shapes require manual wiring.

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.