nuxt-quasar-ui
v2.1.7
Published
Quasar Module for Nuxt (Unofficial)
Downloads
16,898
Readme
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 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
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
(ifquasar
version is <=2.13, thentrue
)
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:
- 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',
// ...
]
})
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