javascript - How to Install Vue Packages in nuxt.js - Stack Overflow

admin管理员组

文章数量:1186689

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>

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>

• javascript
• vue.js
• vuejs2
• nuxt.js

Share Improve this question Follow edited Feb 4, 2020 at 11:24 mhrabiee 8151010 silver badges2323 bronze badges asked Feb 4, 2019 at 23:29 Kelvin FernandoKelvin Fernando 12111 gold badge11 silver badge44 bronze badges 3

• 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 Commented Feb 5, 2019 at 1:34
• 1 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 Commented Feb 5, 2019 at 23:10
• Makes sense. Thank you very much, really appreciate the help! – Kelvin Fernando Commented Feb 6, 2019 at 2:45

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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>

本文标签： javascriptHow to Install Vue Packages in nuxtjsStack Overflow