Nuxt 2 reached End-of-Life on June 30th, 2024.


Effortlessly build high-performance & high-quality Vue.js 3 user interfaces in record time

Quasar Framework logo

Quasar Module for Nuxt

npm versionnpm downloadsLicense


Quick Setup

Add nuxt-quasar-ui dependency to your project

# Using pnpm
pnpm add quasar @quasar/extras
npx nuxi@latest module add quasar

# Using yarn
yarn add quasar @quasar/extras
npx nuxi@latest module add quasar

# Using npm
npm install quasar @quasar/extras
npx nuxi@latest module add quasar

That's it! You can now use Quasar Nuxt in your Nuxt app ✨




  <q-btn color="primary" label="Primary" />
  <QBtn color="secondary" label="Secondary" />
  <LazyQBtn color="amber" glossy label="Amber" />
// app.config.ts
export default defineAppConfig({
  // Configure Quasar's Vue plugin (with HMR support)
  nuxtQuasar: {
    brand: {
      primary: '#3993DD'
// nuxt.config.ts
export default defineNuxtConfig({
  quasar: {
    // Configurable Component Defaults
    components: {
      defaults: {
        QBtn: {
          dense: true,
          flat: true,
        QInput: {
          dense: true

See detailed usage at playground



  • Type: string[]
  • Default: []

List of quasar plugins to apply. (Dialog, Notify etc.)


  • Type: boolean | string
  • Default: false

Enables usage of Quasar Sass/SCSS variables. Can optionally be a string which points to a file that contains the variables.

Requires sass installed.


  • Type: boolean
  • Default: false (if quasar version is <=2.13, then true)

Quasar is pinned to a specific version (1.32.12) of sass, which is causing deprecation warnings, polluting the console log when running Nuxt. Enabling this option silences these deprecation warnings.


  • Type: string
  • Default: 'en-US'

Default language pack used by Quasar Components.


  • Type: string | QuasarIconSet
  • Default: 'material-icons'

Icon set used by Quasar Components. Should also be included in extra.fontIcons to take effect.


  • Type: boolean
  • Default: false

When enabled, it provides breakpoint aware versions for all flex (and display) related CSS classes.

Warning Note that there will be a noticeable bump in CSS footprint when enabling it. So only do it if you really need it.


  • Type: string
  • Default: nuxtQuasar

Config key used to configure quasar plugin.


  • Type: object
  • Default: {}

Configurate default settings of UI related plugins and directives (Dialog, Ripple etc). This object can also be configured via app.config.ts.


  • Type: object
  • Default: {}

Modify css variables used by Quasar. Alternative to sassVariables. This option basicly appends a css file with variables defined at root level.


  • Type: 'roboto-font' | 'roboto-font-latin-ext' | null
  • Default: null

Requires @quasar/extras.


  • Type: string[]
  • Default: []

Import webfont icon sets provided by @quasar/extras.


  • Type: string[]
  • Default: []

Auto-import svg icon sets provided by @quasar/extras.


  • Type: string[] | "all"
  • Default: []

Import animations provided by @quasar/extras.


  • Type: object
  • Default: {}

Set default prop values for quasar components. Does not support props that accepts function values.

CSS Import Ordering

Module will import css in following order:

  1. Fonts
  2. Icons
  3. Animations
  4. Quasar CSS

It is possible to change this order via css option.


export default defineNuxtConfig({
  css: [
    // ...
    // ...


Avoid using quasar plugins and composables that manipulate <meta> tags. Use useHead instead.

List of known plugins/composables that do this:

Quasar 2.15.0 introduces useId and useHydrate functions which are also provided by nuxt. These functions are not auto-imported in favor of nuxt. If you want to use them for some reason, you need to explicity import them.


# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch