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

Question

我一直在尝试在 Nuxt 中使用 vue-tel-input-vuetify，但我遇到了如下图所示的问题，我也尝试了此链接 Github 中的所有解决方案，但我得到了同样的错误。

安装后，我创建了一个插件文件plugins/vue-tel-input-vuetify.js，并在其中添加了以下代码。

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

之后，我将其添加到 nuxt.config.js

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

在我的组件的脚本标签之间，我这样做了：

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

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

我在组件的模板标签之间添加了这个：

<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

更新答案

我自己试过了，效果很好：

• Nuxt 在2.15.7
• @nuxtjs/vuetify1.12.1（vuetify2.5.7）
• vue-tel-input-vuetify1.3.0。

必须在我的 phone-input 插件中写这个

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

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

我已经像这样在nuxt.config.js中导入了它

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

使用以下模板

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

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

如果您想自己尝试一下，这里有一个有效的github repo。

---

另类想法

查看documentation，它说您需要转译它（用于 Vue）。

在nuxt.config.js，您可以尝试以下方法来复制相同的需求

build: {
  transpile: [
    'vue-tel-input-vuetify',
    // 'vuetify' // this one may also be needed, try with and without
  ],
}