Quasar Module for Nuxt

✨ Release Notes

Features

Automatically import components
Automatically import directives
Automatically import svg icon sets provided by @quasar/extras
Configure used animations, webfonts and icon sets via nuxt.config
Configure Sass/Scss variables used by quasar
Nuxt DevTools support

Quick Setup

Add nuxt-quasar-ui dependency to your project

# Using pnpm
pnpm add quasar @quasar/extras
pnpm add -D nuxt-quasar-ui

# Using yarn
yarn add quasar @quasar/extras
yarn add --dev nuxt-quasar-ui

# Using npm
npm install quasar @quasar/extras
npm install --save-dev nuxt-quasar-ui

Add nuxt-quasar-ui to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-quasar-ui'
  ],
  quasar: { /* */ }
})

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

Options

plugins

Type: string[]
Default: []

List of quasar plugins to apply.

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

Requires sass installed.

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

config

Type: object
Default: {}

Configurate default settings of UI related plugins and directives (Dialog, Ripple etc).

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: {}

Experimental

Set default prop values for quasar components. Uses magicast to modify component prop definitions. Does not support props that accepts function values.

components.deepDefaults

Type: boolean
Default: false

Experimental

When true, defaults will be applied to components that aren't used directly. For example, if defaults for QBtn are set, it will affect all components that use QBtn. (For example: QBtnDropdown, QEditor)

Currently not very stable in development environment since vite will set Cache-Control headers for files located in node_modules and changes made may not take effect without resetting the cache.

CSS Import Ordering

Module will import css in following order:

Fonts
Icons
Animations
Quasar CSS
Brand

It is possible to change this order via css option.

Example

export default defineNuxtConfig({
  css: [
    // ...
    'quasar/fonts',
    'quasar/animations',
    'quasar/icons',
    'quasar/css',
    'quasar/brand' // If config.brand is used
    // ...
  ]
})

Notes

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

List of known plugins/composables that do this:

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

quasar