NuxtJS with Vue components

One of the things I love about the NuxtJS framework is that it does so much of the routine work for you - things like declaring components, for example - just create your components\user\account.vue file and magically you can access that anywhere in your project as <UserAccount />. But not all of the libraries that you could want to use are natively NuxtJS-ified but they ARE available as Vue libraries. So there's an easy way to use just about any Vue library in your NuxtJS project by declaring it as a plugin.

First we're going to add the Vue component to our project with npm - in this case, let's add the v-mask plugin for helping with form fields.

npm install v-mask

Next we create a simple little plugin file in the plugins folder


import Vue from 'vue'

import VMask from 'v-mask'


Declare the plugin in your nuxt.config.js - in this case, v-mask does not apply (or work!) on the server, so we declare it as a client only plugin


plugins: [

  • { src: '~/plugins/vue-mask.js', mode: 'client' }


And finally, use the plugin - in this case for a phone number field in an address form.

  • <input

    • v-model="phone"

    • v-mask="'(###) ###-####'"

    • type="text"

  • >