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 了✨

演示

StackBlitz

用法

<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 被固定到特定版本 (1.32.12) 的 sass，这会导致弃用警告，在运行 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 提供的 webfont 图标集。

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 插件和 composable。请改用 useHead。

执行此操作的已知插件/composables 列表

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