Vite plugin for Quasar

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.

Warning! Limitation ahead:

  • Are you sure that you’ve landed correctly? This page will teach you to use our Vite plugin, but it’s not the same as our full-fledged Quasar CLI with Vite under the hood.
  • SSR builds with our Vite plugin are not supported (only through our Quasar CLI with Vite).

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.


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


  • Notice that @quasar/extras is optional.
  • Also, add sass@1.32.12 (notice the pinned version) only if you want to use the Quasar Sass/SCSS variables.
$ 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

// FILE: vite.config.js

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

export default defineConfig({
  plugins: [
      template: { transformAssetUrls }

      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 {