# Quasar Installation

> **Info:** Vue 3.5 support is in public beta. It includes Primitive adapters and editable Styled components.
APIs can change during the `0.x` release series. Report beta issues through the
[Starwind UI issue tracker](https://github.com/starwind-ui/starwind-ui/issues).

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](https://quasar.dev/start/quick-start/). Select Quasar CLI with
Vite and TypeScript, name the app `my-app`, and install dependencies when prompted.

```bash
npm init quasar@latest
```

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

```bash
npx 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.

| Purpose | Path |
| --- | --- |
| Styled components | `src/components/starwind` |
| Shared utilities | `src/lib/utils` |
| Starwind stylesheet | `src/css/starwind.css` |

## Add and Render Button

```bash
npx starwind@latest add button
```

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

```vue title="src/pages/IndexPage.vue"
<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](/docs/getting-started/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`:

```ts title="quasar.config.ts"
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](/docs/getting-started/dark-mode/#vue-beta) 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](https://quasar.dev/quasar-cli-vite/developing-ssr/preparation/).

## 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](/docs/components/dialog/) for controlled
state and [Input](/docs/components/input/) for form binding. The Styled Image component is Astro-only.