Quasar 用于 Nuxt 的模块
功能
- 自动导入组件
- 自动导入指令
- 自动导入
@quasar/extras提供的 svg 图标集 - 通过
nuxt.config配置使用的 动画、网页字体和图标集 - 配置
quasar使用的 Sass/Scss 变量 - 支持 Nuxt DevTools
快速设置
将 nuxt-quasar-ui 依赖添加到您的项目中
# 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
就是这样！您现在可以在您的 Nuxt 应用程序中使用 Quasar Nuxt 啦 ✨
演示
使用
<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
}
}
}
}
})
在 playground 查看详细用法
选项
plugins
- 类型：
string[] - 默认值：
[]
要应用的 quasar 插件列表。（Dialog、Notify 等）
sassVariables
- 类型：
boolean | string - 默认值：
false
启用 Quasar Sass/SCSS 变量的使用。也可以选择一个字符串，指向包含这些变量的文件。
需要安装
sass。
quietSassWarnings
- 类型：
boolean - 默认值：
false（如果quasar版本 <=2.13，则为true）
Quasar 锁定到特定版本的 sass（1.32.12），这会导致弃用警告，在运行 Nuxt 时污染控制台日志。启用此选项可消除这些弃用警告。
lang
- 类型：
string - 默认值：
'en-US'
Quasar 组件使用的默认语言包。
iconSet
- 类型：
string | QuasarIconSet - 默认值：
'material-icons'
Quasar 组件使用的图标集。也应该包含在 extra.fontIcons 中才能生效。
cssAddon
- 类型：
boolean - 默认值：
false
启用后，它为所有 flex（和 display）相关的 CSS 类提供支持断点感知版本。
警告 请注意，启用此功能后，CSS 占用空间会显著增加。因此，只有在您确实需要时才启用它。
appConfigKey
- 类型：
string - 默认值：
nuxtQuasar
用于配置 quasar 插件的配置键。
config
- 类型：
object - 默认值：
{}
配置 UI 相关插件和指令（Dialog、Ripple 等）的默认设置。此对象也可以通过 app.config.ts 进行配置。
config.brand
- 类型：
object - 默认值：
{}
修改 Quasar 使用的 CSS 变量。是 sassVariables 的替代方案。此选项基本上会附加一个包含在根级别定义的变量的 CSS 文件。
extras.font
- 类型：
'roboto-font' | 'roboto-font-latin-ext' | null - 默认值：
null
需要 @quasar/extras。
extras.fontIcons
- 类型：
string[] - 默认值：
[]
导入 @quasar/extras 提供的网络字体图标集。
extras.svgIcons
- 类型：
string[] - 默认值：
[]
自动导入 @quasar/extras 提供的 svg 图标集。
extras.animations
- 类型：
string[] | "all" - 默认值：
[]
导入 @quasar/extras 提供的动画。
components.autoImport
- 类型：
boolean - 默认值：
true
自动导入 quasar 组件
components.defaults
- 类型：
object - 默认值：
{}
设置 quasar 组件的默认 prop 值。不支持接受函数值的 prop。
CSS 导入顺序
模块将按以下顺序导入 css
- 字体
- 图标
- 动画
- Quasar CSS
可以通过 css 选项更改此顺序。
示例
export default defineNuxtConfig({
css: [
// ...
'quasar/fonts',
'quasar/animations',
'quasar/icons',
'quasar/css',
// ...
]
})
注意事项
避免使用操作 <meta> 标签的 quasar 插件和可组合项。请改用 useHead。
执行此操作的已知插件/可组合项列表
Quasar 2.15.0 引入了 useId 和 useHydrate 函数，这些函数也由 nuxt 提供。这些函数不会自动导入，以支持 nuxt。如果出于某种原因要使用它们，则需要显式导入它们。
开发
# 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