Vuetify 2 module for Nuxt.js

Infos

• 📖 Release Notes
• 🏀 Online playground
• 🏷 Module for Vuetify 1.5.x [master]

Setup

• Add @nuxtjs/vuetify@next dependency to your project

npm install --save-dev @nuxtjs/vuetify@next # or yarn add --dev @nuxtjs/vuetify@next

• Add @nuxtjs/vuetify to devModules section of your nuxt.config.js

{
  devModules: [
    '@nuxtjs/vuetify'
  ],

  // Vuetify options
  vuetify: {
    //  theme: { }
  }
}

Module 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
@import '~vuetify/src/styles/styles.sass';

// The variables you want to modify
$font-size-root: 14px;
// For updating SASS lists
$material-light: map-merge($material-light, ( cards: blue ));
$btn-border-radius: 0px;

// nuxt.config.js
export default {
  vuetify: {
    customVariables: ['~/assets/variables.scss']
  }
}

defaultAssets

• Type: Object or Boolean
• Default:

{
  font: true,
  icons: true
}

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 automatically adds the Roboto font stylesheet from official google fonts to load the font with font-display: swap. You can disable it if you plan to use different font or manually handle font loading.

defaultAssets.icons automatically adds the icons stylesheet from Material Design Icons CDN to load all the icons. You can disable it and choose and setup your preferred icons preset by following Vuetify Icons documentation

You can also set defaultAssets to false to prevent any automatic add of these two assets.

treeShake

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

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

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