iamstevendao / vue-tel-input

International Telephone Input with Vue
https://iamstevendao.com/vue-tel-input/
MIT License
818 stars 342 forks source link

component not rendering in production [Vue3 + Vite] #438

Open rmarques90 opened 10 months ago

rmarques90 commented 10 months ago

Hi!

I'm having some trouble to render the component after building it to production. I'm using Vue3, and the latest package of the lib. I'm using VITE also.

In dev mode, is rendering normally. But, when I run the process to build, the output file does not render the component. I've checked the files, and it has been imported correctly.

My application use it in a lot of places, so I've imported in the main.js file.

My component:

<template>
    <div class="input__container">
        <vue-tel-input :inputOptions="vueTelInputOptions.inputOptions"
                      mode="national"
                      v-bind:value="modelValue"
                      v-model="internalValue"
                      :class="[ error ? 'border-2 border-red-500 rounded' : '' ]"
                      @change="onChange"
                      @validate="onValidate"
                      @blur="onBlur"
                      @focus="onFocus">
        </vue-tel-input>
        <label v-if="label" class="input__label" :class="{'input__label-focused' : focused}">{{ label }}</label>
    </div>
</template>

<script>

export default {
    name: "InputTelephone",
    props: {
        modelValue: String,
        placeholder: String,
        label: String,
    },
    emits: ['on-validate', 'update:modelValue'],
    data() {
        return {
            valid: null,
            error: false,
            internalValue: this.modelValue,
            focused: false,
            vueTelInputOptions: {
                inputOptions: {
                    placeholder: this.placeholder,
                    styleClasses: 'tel-input'
                }
            }
        };
    },
    methods: {
        onFocus() {
            this.error = false;
        },
        onBlur() {
            if (!this.valid) {
                this.error = true;
            }
        },
        onChange(phoneObject) {
            this.$emit('update:modelValue', phoneObject.number);
        },
        onValidate(event) {
            this.valid = event?.valid;

            this.$emit('on-validate', {number: event.number, valid: event.valid});

            if (this.valid) {
                this.$emit('update:modelValue', event.number);
            }
        }
    }
}
</script>

Someone had the same problem? Can I get some help, please?