"render function or template not defined in component: vue-tel-input" in Nuxt.js

[leonelsanchesdasilva]

Steps to simulate:

• Start a new Nuxt.js project;

• Install vue-tel-input package, version 4.3.0;

• In plugins, configure the following:

  import Vue from 'vue';
  import VueTelInput from 'vue-tel-input';
  
  Vue.component('vue-tel-input', VueTelInput);
  // or Vue.use(VueTelInput);

• Add the plugin in plugins section (nuxt.config.js):

  plugins: [
      ...
      { src: '~/plugins/vue-tel-input.js', mode: 'client' }
  ]

• Add the component in some page:

  <template>
      <vue-tel-input v-model="phone"></vue-tel-input>
  </template>

Error message:

Render function or template not defined in component: vue-tel-input

Notes:

• Component works normally at version 4.0.0. The problem is at version 4.3.0.

[iamstevendao]

Do you have your code available somewhere? Everything is fine in the demo from codesandbox: https://codesandbox.io/s/vue-tel-input-nuxt-demo-1l93b

[yofade3]

You have to put VueTelInput into brackets like this. import { VueTelInput } from 'vue-tel-input';

[andreynazarov3]

component is not working on SSR, have to wrap it with <client-only>

[clouedoc]

@yofade3 thank you

[elvinguti]

Hey guys, it seems the component no longer works on newer versions in nuxt. I think it's happening since this PR: https://github.com/iamstevendao/vue-tel-input/pull/172

Forked with "vue-tel-input": "5.6.2": https://codesandbox.io/s/vue-tel-input-nuxt-demo-forked-z8n7p any idea on how to solve this?

thanks.