How to Install Vue Packages in nuxt.js

Question

I'm trying to install Vue Typer in my Nuxt js app but no luck. I keep getting "document not defined". I tried importing it in my nuxt.config.js as a plugin but it doesn't work.

I got it working in my VueCLI 3, seems to work fine with this method.

Appreciate it!

Getting

NuxtServerError render function or template not defined in component: anonymous

////plugins///

import Vue from vue;

if (process.client) {
   const VueTyper = require('vue-typer');
   Vue.use(VueTyper);
}

///nuxt.config.js///

plugins: [
    {src: '~/plugins/vue-typer.js', ssr: false}
  ],

<template>
    <vue-typer text='Hello World! I was registered locally!'></vue-typer>
</template>

<script>
const VueTyper = processs.client ? require('vue-typer'): '';
export default {
    components: {
       VueTyper
    }
}
</script>

Solution

To fix this, create a file called vueTyper.client.js under plugin folder then type this;

import Vue from 'vue';
import { VueTyper } from 'vue-typer';

Vue.component('vue-typer', VueTyper);

then in your nuxt.config.js add this to your plugin

plugins: [
  {src: '~/plugins/vueTyper.client.js', mode: 'client',}
]

after doing this you can easily use it anywhere in your application without error:

<vue-typer text='Hello World! I was registered locally!'></vue-typer>

Comments

[CodeSpent]

Just a note it should be import Vue from 'vue';. Too small for an edit, most will figure it out but worth noting. :)

[Jonathan Arias]

What if I just want to use it in a page and dont want to register it as a plugin?

[kissu]

Since Nuxt.js 2.4, ssr : false is deprecated and mode: 'client' should be used instead as shown here: nuxtjs.org/docs/2.x/configuration-glossary/…