quasar
Go to documentationEffortlessly build high-performance & high-quality Vue.js 3 user interfaces in record time
Quasar Module for Nuxt
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 pnpmpnpm add quasar @quasar/extraspnpm add -D nuxt-quasar-ui# Using yarnyarn add quasar @quasar/extrasyarn add --dev nuxt-quasar-ui# Using npmnpm install quasar @quasar/extrasnpm install --save-dev nuxt-quasar-ui
- Add
nuxt-quasar-ui
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({ modules: [ 'nuxt-quasar-ui' ], quasar: { /* */ }})
That's it! You can now use Quasar Nuxt in your Nuxt app ✨
Demo
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:
- Fonts
- Icons
- Animations
- 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.tsexport default { quasar: { extras: { fontIcons: ['material-icons'] } }}
Development
# Install dependenciesnpm install# Generate type stubsnpm run dev:prepare# Develop with the playgroundnpm run dev# Build the playgroundnpm run dev:build# Run ESLintnpm run lint# Run Vitestnpm run testnpm run test:watch# Release new versionnpm run release