Why donate
API Explorer
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 using Quasar CLI with Vite instead.

Creating a Vite project


$ yarn 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.

TIP

  • Notice that @quasar/extras is optional.
  • Also, if you want to use the Quasar Sass/SCSS variables then you need to add the sass dependency, based on your version of Quasar UI:
    • For Quasar >= v2.14 then add sass@^1.33.0
    • For Quasar <= v2.13 add sass@1.32.12 (notice the exact pinned version)

$ yarn add quasar @quasar/extras
$ yarn add --dev @quasar/vite-plugin sass@^1.33.0

Using Quasar

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

Roboto font
Roboto font extended
Animations from Animate.css

Material Icons
Material Icons (Outlined)
Material Icons (Round)
Material Icons (Sharp)
Material Symbols (Outlined)
Material Symbols (Rounded)
Material Symbols (Sharp)
MDI v7
Fontawesome v6
Fontawesome v5
Ionicons v4
Eva Icons
Themify
Line Awesome
Bootstrap Icons

Quasar Sass/SCSS variables
Quasar Config Object


// 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/plugin-vite options list:
    // https://github.com/quasarframework/quasar/blob/dev/vite-plugin/index.d.ts
    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

@quasar/vite-plugin options

The full list of options can be found here.

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 {