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>

Please read nuxtjs doc. Modules is for nuxt modules, not random node package. You need plugin with ssr false option. It's all covered in nuxt docs — Aldarund
– Aldarund, Commented Feb 5, 2019 at 1:34
Unfortunately it doesnt look like this package can be used in nuxt please see this open issue on there github github.com/cngu/vue-typer/issues/1 this may give you some more information - With saying that though this functionality would be easy to implement yourself, You could look at this stackOverflow question for inspiration stackoverflow.com/questions/34380037/… — Smokey Dawson
– Smokey Dawson, Commented Feb 5, 2019 at 23:10
Makes sense. Thank you very much, really appreciate the help! — Kelvin Fernando
– Kelvin Fernando, Commented Feb 6, 2019 at 2:45

Yashwardhan Pauranik · Accepted Answer · 2021-11-24 13:33:22Z

33

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>

edited Nov 24, 2021 at 13:33

Yashwardhan Pauranik

5,5865 gold badges45 silver badges78 bronze badges

answered Feb 17, 2019 at 2:56

Jalasem

28.5k3 gold badges23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CodeSpent Over a year ago

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 Over a year ago

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

kissu Over a year ago

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/…

Collectives™ on Stack Overflow

How to Install Vue Packages in nuxt.js

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related