👨‍🏫 The Mastering Nuxt 3 course is now completed!

Discover the course
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

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

Demo

StackBlitz

Usage

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

See detailed usage at playground

Options

plugins

  • Type: [QuasarPlugin](https://github.com/Maiquu/nuxt-quasar/blob/main/src/types.ts#L6-L18)[]
  • 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.

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.

iconSet

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

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

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[]
  • Default: []

Import animations provided by @quasar/extras.

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',
// ...
]
})

Regarding Meta tags

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

List of known plugins/composables that do this:

Regarding Component Icons

By default, icons are not packaged with quasar module. You will have to install @quasar/extras and append 'material-icons' (or value used in iconSet if defined) to extras.fontIcons in your nuxt.config.ts file for icons to take effect.

// nuxt.config.ts
export default {
quasar: {
extras: {
fontIcons: ['material-icons']
}
}
}

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
# Release new version
npm run release