How to use vue-tel-input-vuetify in Nuxt?

user_8668816 0
Viewed 1130

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

vue-tel-input nuxt.js vue.js frontend javascript
1 Answers

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