bug: CSS issues on how v-phone-input is being displayed

[PeterBrais]

Expected Behavior

Actual Behavior

Steps to Reproduce the Problem

app.js

import { createApp } from 'vue'
import App from './App.vue'
import Vue3Lottie from 'vue3-lottie'
import '@mdi/font/css/materialdesignicons.css' 

import router from '@/router/index.js';

import VueCookies from 'vue-cookies'

import 'flag-icons/css/flag-icons.min.css';
import 'v-phone-input/dist/v-phone-input.css';
import { createVPhoneInput } from 'v-phone-input';

import { aliases, mdi } from 'vuetify/iconsets/mdi'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vPhoneInput = createVPhoneInput({
  countryIconMode: 'svg',
})

const vuetify = createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    },
  },
  components,
  directives
})

const app = createApp(App)

app.use(Vue3Lottie)
app.use(vuetify)
app.use(router)
app.use(vPhoneInput);
app.use(VueCookies, { expires: '365d'})
app.mount('#app')

Component

<template>
  <form @submit.prevent="signUp">
    <h1 style="font-size: 29px; margin-bottom: 1.5rem; color: rgb(94, 142, 157);">Create Account</h1>
    <v-text-field density="compact" v-model="signUpusername.value.value"
      :error-messages="signUpusername.errorMessage.value" label="Username" autocomplete="username"></v-text-field>

      <v-phone-input country-icon-mode="svg" label="Your Phone number" />

    <v-text-field density="compact" v-model="signUpemail.value.value" :error-messages="signUpemail.errorMessage.value"
      label="E-mail"></v-text-field>
    <v-text-field density="compact" type="password" v-model="signUppassword.value.value"
      :error-messages="signUppassword.errorMessage.value" label="Password" autocomplete="new-password"></v-text-field>
    <v-text-field density="compact" type="password" v-model="signUpconfirmPassword.value.value"
      :error-messages="signUpconfirmPassword.errorMessage.value" label="Confirm Password"
      autocomplete="new-password"></v-text-field>
    <v-select density="compact" v-model="signUpselect.value.value" :items="items"
      :error-messages="signUpselect.errorMessage.value" label="Country"></v-select>
    <vue-recaptcha ref="recaptcha" @verify="verifyMethod" @expired="expiredMethod"
      sitekey="6Ldlm9goAAAAAIwOi34CmusGSkYb2kLRWRUEIu0e" />

    <div v-if="recaptchaError" class="v-input__details">
      <div class="v-messages" role="alert" aria-live="polite" id="input-22-messages"
        style="color: #B00020; font-weight: 500;">
        <div class="v-messages__message">Please complete the reCAPTCHA challenge</div>
      </div>
      <span></span>
    </div>

    <v-checkbox v-model="signUpcheckbox.value.value" :error-messages="signUpcheckbox.errorMessage.value" value="1"
      label="I Agree With Terms And Conditions" type="checkbox"></v-checkbox>
    <a style="margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; display: block; text-align: left;" href="#"
      @click="$emit('switch-to-signin')">Already a member? Sign in here</a>
    <v-btn type="submit" height="50" class="w-100" style="background: rgb(94, 142, 157); color: white;">Sign Up</v-btn>
  </form>
</template>

Looks like something wrong with CSS. Not sure if it conflicts with dependencies

Specifications

• OS: Mint 21.3
• Browser: Firefox
• Browser version: 123.0
• Package version: 4.1.2
• Vuetify version: 3.5.5

[paul-thebaud]

Hello, looks like the CSS for the component is not loaded, even if you got this line: import 'v-phone-input/dist/v-phone-input.css';. Could you check if there is the style in your HTML page please?

[PeterBrais]

CSS is not loading even when I add the line: import 'v-phone-input/dist/v-phone-input.css'; in the component itself. However, at the same time, import 'flag-icons/css/flag-icons.min.css'; loads and works fine. I have tried a few things. I was able to apply the CSS by copying the contents of node_modules/v-phone-input/dist/v-phone-input.css and inserting them into the component's <style scoped></style>. I am not sure if this is somehow related to configuration.

[paul-thebaud]

I'm not experiencing this, so it might be a configuration issue (on your side or on the package side). Could you provide a minimal reproduction repository please? This can be tricky to find the issue without it.

[PeterBrais]

The issue was apparently with Laravel Mix. After migrating to Vite 5.1.4, the problem has been resolved.

[paul-thebaud]

Great news! Thanks a lot for investing on your side!