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

Run cd my-app before installing Starwind. Skip this step if you already have a project.

Requirements

Keep the standard src/App.vue, src/router, src/layouts, src/pages, and src/css layout. Use the starter’s quasar.config.ts or .js, with defineConfig from #q-app/wrappers. Keep the settings in the object returned by that function so the CLI can update them.

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

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 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 remember the chosen theme.

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.

Custom Project Setup

The CLI can set up Quasar with Vite in SPA or SSR mode. Use manual setup for other modes, Webpack, or a config that calculates its settings with custom code.

Next Steps

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