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

Posted 2023-02-22

【中文标题】如何在 Nuxt 中使用 vue-tel-input-vuetify？

【英文标题】：How to use vue-tel-input-vuetify in Nuxt?

【发布时间】：2021-10-04 11:37:43

【问题描述】：

我一直在尝试在 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"
/>

【问题讨论】：

你能给我们一些代码吗？仅靠这个很难调试。

@kissu，我已经编辑了问题。

<VueTelInputVuetify/> 组件周围有什么？

我将它包裹在<client-only> 标签上，但仍然是同样的错误

是的，我也试过了，还是不行 src: '~/plugins/vue-tel-input-vuetify', mode: 'client'

【参考方案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
  ],

【讨论】：

@KoikiDamilare 更新了更深入的解决方案，不需要transpile。

只要插件设置为仅客户端，以上对我有用...插件：[ src：'@/plugins/phone-input'，模式：'client']，

只是好奇，为什么使用骆驼案不起作用？ VueTelInputVuetify

@NelsonLaRocca 应该是。检查您的 vue devtools 是如何解释的。还有，具体怎么写？检查它的样式指南：vuejs.org/v2/style-guide/…