Learn Nuxt with a Collection of 100+ Tips!

quasar
quasar

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

Quasar Framework logo

Quasar Module for Nuxt

npm versionnpm downloadsLicense

Features

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 ✨

Demo

StackBlitz

Usage

<template>
  <q-btn color="primary" label="Primary" />
  <QBtn color="secondary" label="Secondary" />
  <LazyQBtn color="amber" glossy label="Amber" />
</template>
// 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

Options

plugins

  • Type: string[]
  • Default: []

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

sassVariables

  • 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.

quietSassWarnings

  • 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.

lang

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

Default language pack used by Quasar Components.

iconSet

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

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

cssAddon

  • 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.

appConfigKey

  • Type: string
  • Default: nuxtQuasar

Config key used to configure quasar plugin.

config

  • 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.

config.brand

  • 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.

extras.font

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

Requires @quasar/extras.

extras.fontIcons

  • Type: string[]
  • Default: []

Import webfont icon sets provided by @quasar/extras.

extras.svgIcons

  • Type: string[]
  • Default: []

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

extras.animations

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

Import animations provided by @quasar/extras.

components.defaults

  • 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.

Example

export default defineNuxtConfig({
  css: [
    // ...
    'quasar/fonts',
    'quasar/animations',
    'quasar/icons',
    'quasar/css',
    // ...
  ]
})

Notes

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.

Development

# 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