Nuxt, Meet Vuetify

This article is part of a series on my experiences with Nuxt.js that I built into the nuxt-toolkit by OverScore Media

See a live example at https://nuxt-toolkit.overscore.media! :]

Well, Nuxt is great. It's my favourite JS framework for the web. Based on the awesome Vue.js, you can't really go wrong. Nuxt is my go-to for building websites and web apps alike, these days, since it can also function as a Static Site Generator.

You probably already know about Nuxt.js, so let's begin. Now, let's add support for the wonderful Vuetify CSS/Vue framework to our Nuxt app.

If you're using yarn create nuxt-app, you can easily select Vuetify.js from the list of options for UI frameworks during the interactive installation process. It could take a while, but the process is fairly straightforward. I personally recommend the following options, but your mileage may vary:

? Choose programming language JavaScript
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support
? Choose linting tools ESLint, Prettier, Lint staged files, StyleLint
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)

Frankly, I'd choose Jest as a test framework (if I felt like I needed it).

Once that process is all done, you'll have a bunch of defaults available to you (most of which are really quite good). One caveat is that the default font is Roboto, and I actually haven't been able to effectively change it, which is a bit of a shame (though I don't mind Roboto, so I'm not complaining all that much).

There really isn't much more to say at this point. Vuetify's documentation is pretty comprehensive (though you'll likely be looking things up every few minutes until you get used to it).

I particularly like the v-card, v-icon, v-stepper, v-row, v-col, v-dialog, v-btn, and v-divider components. Check 'em out if you have the chance.

If I'm not mistaken, the @nuxtjs/vuetify module imports basically all of the Vuetify components, so you'll have access to the full gamut of its capabilities. Vuetify is OP, IMO, so it gives you plenty to work with, and looks great!

That aside, though, don't expect building with Vuetify to be a complete breeze. It's an adventure, if you know what I mean. One particular nuisance, IMO, is that a lot of the CSS uses !important's, so you'll probably end up having to make your own classes with more specificity than Vuetify's... Though, https://vuetifyjs.com/en/customization/theme/ is cool, as it offers a ton of customization options out-of-the-box (in nuxt.config.js in your Nuxt app). Overall, Vuetify's an excellent choice for really any web project, so by all means take it for a spin. Love it or hate it, you can't deny that it's powerful and useful in the right hands.

Some Iconography (Optional and hacky)

Something I noticed about Vuetify is that it loads in either Material Design Icons or Material Icons (yes, there's a difference; the former includes some non-Google community icons - it's our favourite at OverScore), I kinda forget, from the icon font. Personally, I doubt you'll need to change this, but if you do, this is how you can load in icons programmatically.

Material Design Icons from @mdi/js

Step 1: Disable Loading of Icon Font from CDN

In nuxt.config.js, add the following code to the vuetify: { } object:

defaultAssets: {
  icons: false
},

Step 2: Load in the Icon Package of your Choice

This is where you can BYOI (Bring Your Own Icons). Pick your favourite icon set, and assuming it has an NPM package with SVG paths you can load in dynamically (like @mdi/js). Then add it to your dependencies list with something like yarn add @mdi/js or npm install --save @mdi/js.

Step 3: Put 'em in your Components

Granted, you really don't have to do it this way; the default does work, and it's actually less work. You'll also probably end up breaking some Vuetify components that expect icons... But, this way of doing it gives you a bit more flexibility in terms of what you load in. Since Webpack supports tree-shaking (and assuming the icon package you use does too), you can just load in the icons you need and are using - no more, no less.

Here's my code (you'll have to repeat this same kind of thing for every component - I never said it was easier/better):

<template>
<!-- -->
<v-app-bar :clipped-left="clipped" fixed app>
  <v-icon
    class="mr-5"
    color="#C9C3B2"
    @click.stop="drawer = !drawer"
  >
    {{ burgerSVG }}
  </v-icon>
  <v-toolbar-title v-text="title" />
</v-app-bar>
<!-- -->
</template>

<script>
import { mdiMenu } from '@mdi/js'

export default {
// ...
  data () {
    return {
      burgerSVG: mdiMenu
    }
  }
}
// ...
</script>

Basically, you load in an icon, return it as a named data variable, and insert it inside a <v-icon> component. Pretty cool, huh? Or not. Take it or leave it. Hopefully it's helpful. TTYL all. Stay { home, safe } everybody, and keep on coding!