• ✨  Release Notes

• 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

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

2. 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 ✨

StackBlitz

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

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

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.

• Type: object
• Default: {}

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

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

Experimental

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

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

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: [
    // ...
    'quasar/fonts',
    'quasar/animations',
    'quasar/icons',
    'quasar/css',
    // ...
  ]
})

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

List of known plugins/composables that do this:

• AddressbarColor

• Meta

• useMeta

• 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