Adding Vuetify 2.0 in a existing Nuxt.js project

Sabbir Ahmed
3 min readJul 25, 2019

--

There are two ways to add Vuetify 2.0 in a existing Nuxt project.

  1. With Nuxt.js module (Recommended)
  2. With a plugin

I will explain both but the nuxt module is the recommended way as it’s maintained by the core group of Nuxt js. So the probability is higher that you would get reliable updates. And you should obviously if possible update to 2.0. And yes, Vuetify is way cooler now ;) .

The Nuxt module way

The official GitHub module page was hard for me to understand at first. So I hope this helps.

So considering you have a running Nuxt application. You would already know how to install through npm/yarn.

So first add vuetify module through the following code:

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

The Plugin Way

  1. First, Install Vuetify 2.0.0
npm install vuetify@2.0.0
// OR
yarn add vuetify@2.0.0
  1. Vuetify uses Material Design Icons as its default iconfont. Let’s install it first:
npm install @mdi/font -D
// OR
yarn add @mdi/font -D

2. Create plugin called vuetify.js in plugins folder and add this code.

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader version "^2.1.1" ,
Vue.use(Vuetify)

export default ctx => {
const vuetify = new Vuetify({
theme: {
dark: false // From 2.0 You have to select the theme dark or light here
}
})

ctx.app.vuetify = vuetify
ctx.$vuetify = vuetify.framework
}

You can change the value of dark to true to change it to dark mode, and also you can add your common color variables here. It will make the code complicated. I will include an example at the end of the article in the bonus section :D .

3. Then add the plugin in the nuxt.config.js

plugins: [
'@plugins/vuetify'
],

Okay, that’s it. Done. :)

You can now play with the new components which have been added in version 2. Include any v-components in the template under v-app:

<template>
<v-app>
//Include new components here and see the magics.
//BTW,you must have v-app in the root file encompassing all the
//Vuetify components
</v-app>
</template>

I really liked the color picker. Here’s an image of the color picker you will get with this simple code <v-color-picker></v-color-picker> :

Color Picker

Pro Tip: If Vuetify gets updated to a new version e.g 2.0.x something, you can npm update vuetify to upgrade easily. That’s the only 1 line of code you need.

Bonus:

Here’s how your code will look like, if you set common color. This is recommended as you can change the colors in one sweep.

You have to add it in the plugin section. plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.css'
import colors from "vuetify/es5/util/colors";
Vue.use(Vuetify)

export default ctx => {
const vuetify = new Vuetify({
theme: {
dark: false,
themes: {
dark: {
primary: colors.deepPurple.lighten3,
accent: colors.deepPurple.accent3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent4
}
}
},
})

ctx.app.vuetify = vuetify
ctx.$vuetify = vuetify.framework
}

Don’t forget to import colors :)

To get notifications about articles like this or for suggestions follow me on twitter. Originally published here.

--

--

Sabbir Ahmed
Sabbir Ahmed

Written by Sabbir Ahmed

Follow me to read about GO, Nuxt.js, GraphQL and Blockchain.

Responses (5)