4

I have been trying to use vue-tel-input-vuetify in Nuxt and I have been having the issue as it is in the image below, I have also tried all the solutions in this link Github but I get the same error.

After installation, I created a plugin file plugins/vue-tel-input-vuetify.js and added the following code to it.

import Vue from 'vue'
import VueTelInputVuetify from 'vue-tel-input-vuetify'
Vue.use(VueTelInputVuetify)

After that, I added this to nuxt.config.js

plugins: [
    '~/plugins/vue-tel-input-vuetify',
    { src: '~/plugins/vue-google-charts', mode: 'client' }
  ]

Between my component's script tags, I did this:

import { VueTelInputVuetify } from 'vue-tel-input-vuetify'

export default {
  components: {
    VueTelInputVuetify,
  },
...

And between my component's template tags I added this:

<VueTelInputVuetify
  ref="phoneInput"
  v-model="phoneNumber"
  hint="Enter your phone number..."
  :rules="phoneNumberRules"
  placeholder=""
  label="Phone"
  :required="true"
  :validate-on-blur="true"
  :input-options="{showDialCode: true, tabIndex: 0}"
  :valid-characters-only="true"
  mode="international"
/>

ssues

kissu
  • 40,416
  • 14
  • 65
  • 133
Damilare Koiki
  • 341
  • 3
  • 11

1 Answers1

3

Updated answer

I've tried it myself, working perfectly fine with:

  • Nuxt at 2.15.7
  • @nuxtjs/vuetify at 1.12.1 (vuetify at 2.5.7)
  • vue-tel-input-vuetify at 1.3.0.

enter image description here

Had to write this in my phone-input plugin

import Vue from 'vue';
import vuetify from "vuetify";
import VueTelInputVuetify from 'vue-tel-input-vuetify/lib';

Vue.use(VueTelInputVuetify, {
  vuetify,
});

And I've imported it like this in nuxt.config.js

plugins: ['@/plugins/phone-input'],

With the following template

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

<script>
export default {
  data() {
    return {
      phone: ''
    }
  },
}
</script>

Here is a working github repo if you want to try it out by yourself.

Alternative idea

Looking at the documentation, it says that you need to transpile it (for Vue).

In nuxt.config.js, you could try the following to replicate the same need

build: {
  transpile: [
    'vue-tel-input-vuetify',
    // 'vuetify' // this one may also be needed, try with and without
  ],
}
kissu
  • 40,416
  • 14
  • 65
  • 133
  • @KoikiDamilare updated with a more in-depth solution, no `transpile` needed. – kissu Jul 29 '21 at 09:43
  • Above works for me as long as plugin set to client only... plugins: [{ src: '@/plugins/phone-input', mode: 'client' }], – user1803975 Sep 19 '21 at 08:17
  • just curious, why that does not work using camel case ? VueTelInputVuetify – Nelson La Rocca Oct 10 '21 at 20:11
  • @NelsonLaRocca should be. Check in your vue devtools how this is interpreted. Also, how do you write it exactly? Check the style guide for it: https://vuejs.org/v2/style-guide/#Component-name-casing-in-templates-strongly-recommended – kissu Oct 10 '21 at 21:12