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