@nuxtjs/vuetify
    TypeScript icon, indicating that this package has built-in type declarations

    1.12.1 • Public • Published

    nuxt-tailwindcss

    npm downloads npm version circle ci coverage License

    Vuetify 2 module for Nuxt.js

    Infos

    Setup

    1. Add @nuxtjs/vuetify dependency to your project
    yarn add --dev @nuxtjs/vuetify # or npm install --save-dev @nuxtjs/vuetify
    1. Add @nuxtjs/vuetify to the buildModules section of nuxt.config.js

    ⚠️ If you are using Nuxt < 2.9.0, use modules instead.

    {
      buildModules: [
        // Simple usage
        '@nuxtjs/vuetify',
    
        // With options
        ['@nuxtjs/vuetify', { /* module options */ }]
      ]
    }

    Using top level options

    {
      buildModules: [
        '@nuxtjs/vuetify'
      ],
      vuetify: {
        /* module options */
      }
    }

    Options

    customVariables

    • Type: Array
      • Items: String
    • Default: []

    Provide a way to customize Vuetify SASS variables.
    Only works with tree-shaking.

    Usage example :

    // assets/variables.scss
    
    // Variables you want to modify
    $btn-border-radius: 0px;
    
    // If you need to extend Vuetify SASS lists
    $material-light: ( cards: blue );
    
    @import '~vuetify/src/styles/styles.sass';
    // nuxt.config.js
    export default {
      vuetify: {
        customVariables: ['~/assets/variables.scss']
      }
    }

    The list of customizable variables can be found by looking at the files here.

    defaultAssets

    • Type: Object or Boolean
    • Default:
    {
      font: {
        family: 'Roboto' 
      },
      icons: 'mdi'
    }

    By default, automatically handle Roboto font & Material Design Icons.

    These assets are handled automatically by default to provide a zero-configuration which let you play directly with Vuetify.

    defaultAssets.font.family automatically adds the specified font (default Roboto) stylesheet from official google fonts to load the font with font-display: swap. If you have nuxt-webfontloader in your modules, it will use it automatically.

    defaultAssets.font.size allows you to specify the root font size in your application.

    ⚠️ If you choose a custom font family (i.e. not Roboto), it will automatically override Vuetify SASS variables ($body-font-family & font-size-root), but you will need tree-shaking to be enabled to have them correctly applied.

    defaultAssets.icons automatically adds the icons stylesheet from a CDN to load all the icons (not optimized for production).
    Here are the accepted values for this option :

    Value Icons
    'mdi' (default) Material Designs Icons (CDN)
    'md' Material Icons (CDN)
    'fa' Font Awesome 5 (CDN)
    'fa4' Font Awesome 4 (CDN)
    false Disable auto add of the icons stylesheet

    This option (if not set to false) will automatically override icons.iconfont Vuetify option so that Vuetify components use these icons.

    Please refer to Vuetify Icons documentation for more information about icons, notably for using only bunch of SVG icons instead of including all icons in your app.

    You can also set the whole defaultAssets option to false to prevent any automatic add of these two assets. You can read more about adding your own assets in the Offline applications section.

    optionsPath

    • Type: String

    Location of the Vuetify options that will be passed to Vuetify.

    This file will be compiled by webpack, which means you'll benefit fast hot reload when changing these options, but also be able to use TypeScript without being forced to use TypeScript runtime.

    // nuxt.config.js
    export default {
      vuetify: {
        optionsPath: './vuetify.options.js'
      }
    }

    Note that you can also use Directory Aliases like '~/path/to/option.js'

    All vuetify options are supported, it includes :

    // vuetify.options.js
    export default {
      breakpoint: {},
      icons: {},
      lang: {},
      rtl: true,
      theme: {}
    }

    Notice that passing the Vuetify options directly to Module options is still supported, but it will trigger Nuxt entire rebuild if options are changed.

    If you need to access Nuxt context within the options file, you need to export a function instead :

    // vuetify.options.js
    export default function ({ app }) {
      return {
        lang: {
          t: (key, ...params) => app.i18n.t(key, params)
        }
      }
    }

    treeShake

    • Type: Object or Boolean
    • Default: process.env.NODE_ENV === 'production'

    Uses vuetify-loader to enable automatic tree-shaking. Enabled only for production by default.

    You can set object as a set of options to manually import Vuetify modules globally:

    Key Type Value
    components string[] array of name of Vuetify components to import globally
    directives string[] array of name of Vuetify directives to import globally
    loaderOptions function loader option which applies to VuetifyLoaderPlugin
    transitions string[] array of name of Vuetify transitions to import globally

    TypeScript

    If you're using TypeScript, you'll need to add @nuxtjs/vuetify in your compilerOptions of your tsconfig.json :

    {
      "compilerOptions": {
        "types": [
          "@types/node",
          "@nuxt/vue-app",
          "@nuxtjs/vuetify"
        ]
      }
    }

    You'll then be able to have autocompletion in Context (ctx.$vuetify) and Vue instances (this.$vuetify).

    Offline applications

    If you're building an application that will need to work offline (more likely a PWA), you will need to bundle your fonts and icons in your app instead of using online resources.

    It means you must set defaultAssets option to false.

    For fonts, you may leverage CSS @font-face rule with local path of your fonts. You may find the google webfonts helper site useful for generating @font-face rules and sourcing replacement files for the default CDNs.

    For icons, you can either use the same way than above, or leverage tree-shaken SVG libraries like Material Design Icons SVG or Font Awesome 5 SVG.

    Migration Guide from Vuetify 1.5.x

    You'll find a step by step guide to upgrade from 1.5.x to 2.x here

    Development

    • Clone this repository
    • Install dependencies using yarn install or npm install
    • Start development server using yarn dev or npm run dev

    License

    MIT License

    Copyright (c) Nuxt Community

    Keywords

    none

    Install

    npm i @nuxtjs/vuetify

    DownloadsWeekly Downloads

    70,320

    Version

    1.12.1

    License

    MIT

    Unpacked Size

    46.3 kB

    Total Files

    27

    Last publish

    Collaborators

    • clarkdo
    • pi0
    • atinux
    • alexchopin
    • aldarund
    • kevinmarrec