I recently came across the NPM package, vue-tel-input, and decided to create a separate component for it in my project. Here's how I structured it:
components/NPMPackages/VueTelInput/Index.vue
<script setup lang="ts">
import { VueTelInput } from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>
<template>
<VueTelInput
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>
</VueTelInput>
</template>
After setting up the component, I tried importing it into my App.vue file as follows:
<script setup lang="ts">
import NPMPackageVueTelInput from '@/components/NPMPackages/VueTelInput/Index.vue'
const phone = ref('');
</script>
<template>
<NPMPackageVueTelInput v-model="phone"></NPMPackageVueTelInput>
</template>
Unfortunately, I encountered an issue where I was unable to type inside the input box and nothing was displaying on the screen.
If you're interested, here is the types-definition for this package.
The environment specifications under which I faced this problem are as follows-
Vue- 3.3.4
vite - 4.4.9
typescript - 5.1.6
Interestingly, when I directly used vue-tel-input within App.vue without creating a common component, everything worked perfectly fine.
I would greatly appreciate any assistance or insights on resolving this matter.