Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

jason-nuxt-quasar-ui

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

jason-nuxt-quasar-ui

Quasar Module for Nuxt (Unofficial)

  • 2.3.0
  • unpublished
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
Maintainers
1
Weekly downloads
 
Created
Source

Quasar Framework logo

Quasar Module for Nuxt

npm version npm downloads License

Features

Quick Setup

  1. Add nuxt-quasar-ui dependency to your project
# Using pnpm
pnpm add quasar @quasar/extras
pnpm add -D nuxt-quasar-ui

# Using yarn
yarn add quasar @quasar/extras
yarn add --dev nuxt-quasar-ui

# Using npm
npm install quasar @quasar/extras
npm install --save-dev nuxt-quasar-ui
  1. Add nuxt-quasar-ui to the modules section of nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'nuxt-quasar-ui'
  ],
  quasar: { /* */ }
})

That's it! You can now use Quasar Nuxt in your Nuxt app ✨

Demo

StackBlitz

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:

  1. Fonts
  2. Icons
  3. Animations
  4. 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.ts
export default {
  quasar: {
    extras: {
      fontIcons: ['material-icons']
    }
  }
}

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

# Release new version
npm run release

FAQs

Package last updated on 24 Mar 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc