如何在 Nuxt 中使用 vue-tel-input-vuetify？

Question

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 linkGithub 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"
/>

Answer 1

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 .

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
  ],
}