Usage with nuxt

[paulvonber]

Awesome idea, but I can't manage how to correctly use it with nuxt, do you have any hints?

[okazdal]

Check out the other issue. https://github.com/yogakurniawan/vue-tel-input-vuetify/issues/2

[AEQPAC]

Can you please be more specific ? I don't understand how to use the nuxt vuetify instance (from @nuxt/vuetify) in a nuxt plugin.

[okazdal]

This is how I used in a nuxt project...

Added this to nuxt.config.js plugins section:

My plugins:

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

Within plugins directory, I added vue-tel-input-vuetify.js which looks like:

import Vue from 'vue'
import VueTelInputVuetify from 'vue-tel-input-vuetify'

// Vue.use(VueTelInputVuetify)
Vue.component('VueTelInputVuetify', VueTelInputVuetify)

Then in a component or page

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

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

And within template I used it like 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"
/>

[AEQPAC]

Ok, it works. I though using vuetify as a parameter was needed but no, he can find it itself from nuxt. In fact, writing only this in my component is enough to make it works. No need to use the plugins section.

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

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

Thanks !

[e-lobo]

it doesnt work. @okazdal & @AEQPAC

Cannot use 'in' operator to search for 'URLSearchParams' in undefined

[e-lobo]

ok it works if you wrap the component in

<client-only>

[VirAlex]

hi @e-lobo I have the same concerns as you

Cannot use 'in' operator to search for 'URLSearchParams' in false

you talk about wrap the component in

<client-only>

Would you mind explaining to me how you do that thank you very much

[q00u]

I'm still getting errors when trying to use this with Nuxt.

[Vue warn]: Failed to resolve directive: modal
[Vue warn]: Failed to resolve directive: modal
[Vue warn]: Unknown custom element: <v-select>
[Vue warn]: Unknown custom element: <v-text-field>

All on the same line, which is: <VueTelInputVuetify v-model="phoneHome" label="Home Phone" />

Everything is setup as above.

Nuxt: 2.14.7 vue-tel-input-vuetify: 1.2.15

[lna1989]

@VirAlex @q00u i'm use this import VueTelInputVuetify from 'vue-tel-input-vuetify/lib/vue-tel-input-vuetify' in component and everything fine in nuxt.js

but i'm not include component globally to project, only in one target. Although I think no problems will arise globally connect it via the plugin on the same path point to the component itself

[todpale]

@lna1989, it works! Thank you!

[Jessydan1]

hi @e-lobo I have the same concerns as you

Cannot use 'in' operator to search for 'URLSearchParams' in false

you talk about wrap the component in

<client-only>

Would you mind explaining to me how you do that thank you very much

Hey, did you manage to fix that ? I don't understand why I'm getting this error

[e-lobo]

@JessyChenavas we ended up copying the entire src code to our project to make ssr work. please try it out you may run into few errors but nothing too complicated to fix.

[akashrajum]

hi @e-lobo I have the same concerns as you Cannot use 'in' operator to search for 'URLSearchParams' in false you talk about wrap the component in <client-only> Would you mind explaining to me how you do that thank you very much

Hey, did you manage to fix that ? I don't understand why I'm getting this error

@JessyChenavas and @VirAlex , by wrapping in <client-only>, he just means you have to wrap the component in that tag while writing in the template, for example

<template>
  <client-only>
    <VueTelInputVuetify />
  </client-only>
</template>

You do this in nuxt to render the component only on client-side.

[Jessydan1]

Still doesn't work for me, always have the Cannot use 'in' operator to search for 'URLSearchParams' in undefined error

[infinity899]

I'm still getting errors when trying to use this with Nuxt.

[Vue warn]: Failed to resolve directive: modal
[Vue warn]: Failed to resolve directive: modal
[Vue warn]: Unknown custom element: <v-select>
[Vue warn]: Unknown custom element: <v-text-field>

All on the same line, which is: <VueTelInputVuetify v-model="phoneHome" label="Home Phone" />

Everything is setup as above.

Nuxt: 2.14.7 vue-tel-input-vuetify: 1.2.15

I'm getting exactly the same. Looks like it no longer automatically picks up vuetify.

import VueTelInputVuetify from 'vue-tel-input-vuetify/lib/vue-tel-input-vuetify'

  <client-only>
    <VueTelInputVuetify />
  </client-only>

Did the trick for me

[kissu]

Not sure where this issue may come from, but here is an in-depth solution to this problem with various ideas and a working example: https://stackoverflow.com/a/68573459/8816585

[damilarekoiki]

Not sure where this issue may come from, but here is an in-depth solution to this problem with various ideas and a working example: https://stackoverflow.com/a/68573459/8816585

Not sure where this issue may come from, but here is an in-depth solution to this problem with various ideas and a working example: https://stackoverflow.com/a/68573459/8816585

This helped me out. Thanks! Kissu

[yaki4]

Anyone got ssr issue? It's really weird and first time i see that. Despite being nest in client-only tag i've got an ssr issue

[kissu]

@yaki4 here it's a DOM missmatch. Btw, put the plugin as mode: 'client' only.

[yaki4]

Sorry for not using the right term. I've always called that ssr issue but you're right DOM mismatch is the right way to call this error.

My plugin is already set with client mode, that's why i find this error really weird. But i'll check my config and code maybe it's something else that provoke it.

[KhaledOmara]

I got this error: node_modules/awesome-phonenumber/index.js?v=62420725' does not provide an export named 'default'

here is my usage:

<script setup lang="ts">
import VueTelInputVuetify from 'vue-tel-input-vuetify/lib/vue-tel-input-vuetify';
</script>   

<template>
<client-only>
  <VueTelInputVuetify />
</client-only>
</template>

[kissu]

Probably because this package is not compatible with Vue3.