10

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>
mhrabiee
  • 805
  • 10
  • 23
Kelvin Fernando
  • 111
  • 1
  • 1
  • 4
  • 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 Feb 05 '19 at 01:34
  • 1
    Unfortunately it doesnt look like this package can be used in nuxt please see this open issue on there github https://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 https://stackoverflow.com/questions/34380037/how-to-style-typing-animation-in-javascript – Smokey Dawson Feb 05 '19 at 23:10
  • Makes sense. Thank you very much, really appreciate the help! – Kelvin Fernando Feb 06 '19 at 02:45

1 Answers1

32

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>
Yashwardhan Pauranik
  • 5,370
  • 5
  • 42
  • 65
Jalasem
  • 27,261
  • 3
  • 21
  • 29
  • Just a note it should be `import Vue from 'vue';`. Too small for an edit, most will figure it out but worth noting. :) – CodeSpent Dec 04 '19 at 17:45
  • 5
    What if I just want to use it in a page and dont want to register it as a plugin? – Jonathan Arias Jun 06 '20 at 06:26
  • 2
    Since Nuxt.js 2.4, `ssr : false` is deprecated and `mode: 'client'` should be used instead as shown here: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-plugins – kissu Feb 22 '21 at 17:33