If you want to embed Quasar into your existing Vite project then follow this guide to install and use the @quasar/vite-plugin. What our Vite plugin offers out of the box is tree-shaking for Quasar and also Quasar Sass variables integration.

Cross-platform support with Vite is handled by community plugins. These are not tightly integrated with Quasar as with Quasar CLI and may have issues. This is why for the best developer experience we recommend to use Quasar CLI with Vite instead.

Creating a Vite project

# yarn
$ yarn create vite my-vue-app --template vue

# or npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm init vite@latest my-vue-app -- --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

For the official (and full) guide, please visit the Vite guide for scaffolding a Vite project. Select “Vue” when asked.

Installation

Navigate to your Vite project folder and install the necessary packages.

$ yarn add quasar @quasar/extras
$ yarn add -D @quasar/vite-plugin sass@1.32.12

# or
$ npm install quasar @quasar/extras
$ npm install -D @quasar/vite-plugin sass@1.32.12

# or
$ pnpm add quasar @quasar/extras
$ pnpm add -D @quasar/vite-plugin sass@1.32.12

Using Quasar

We have built a configurator to help you get started as quick as possible:

// FILE: main.js

import { createApp } from 'vue'
import { Quasar } from 'quasar'

// Import icon libraries
import '@quasar/extras/material-icons/material-icons.css'

// Import Quasar css
import 'quasar/src/css/index.sass'

// Assumes your root component is App.vue
// and placed in same folder as main.js
import App from './App.vue'

const myApp = createApp(App)

myApp.use(Quasar, {
  plugins: {}, // import Quasar plugins and add here
})

// Assumes you have a <div id="app"></div> in your index.html
myApp.mount('#app')

// FILE: vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: { transformAssetUrls }
    }),

    quasar({
      sassVariables: 'src/quasar-variables.sass'
    })
  ]
})

// FILE (create it): src/quasar-variables.sass

$primary   : #1976D2
$secondary : #26A69A
$accent    : #9C27B0

$dark      : #1D1D1D

$positive  : #21BA45
$negative  : #C10015
$info      : #31CCEC
$warning   : #F2C037

RTL support

For enabling, please check out our RTL Support page and follow the instructions.

Warning when building for production

When building for production, you may notice the warning below. You can safely ignore it. This is a known Vite issue.

warnings when minifying css:
 > <stdin>:32:0: warning: "@charset" must be the first rule in the file
    32 │ @charset "UTF-8";
       ╵ ~~~~~~~~
   <stdin>:9:0: note: This rule cannot come before a "@charset" rule
     9 │ .material-icons {