question: changing invalid message

[warrence]

The "Phone" field is not a valid phone number (example: 03-2385 6789).

Hi may i know if i could change the default message for this? Actually I'm building multi language site, and i would like to change it to use vueI18n as below

$t('The "Phone" field is not a valid phone number (example: 03-2385 6789).')

[paul-thebaud]

Hello @warrence, As stated in the V3 documentation localization guide (you didn't specify the version you are using, so I'm answering for the last version), you can pass custom messages to the input or the global configuration to customize labels.

[paul-thebaud]

Since this is a question, I'm closing as answered. Feel free to open a new issue if needed.

[warrence]

Hi there thanks for the response.Yes it was the latest 3.0.5. I tried to follow the documentation, and I'm getting error

TypeError: n.component is not a function

I'm using the example from the docs

const VPhoneInput = createVPhoneInput({
  label: 'Phone number',
  countryLabel: 'Country',
  countryAriaLabel: ({ label }) => `Country for ${label}`,
  invalidMessage: ({ label, example }) =>
    `${label} must be a valid phone number (example: ${example}).`,
})

However, i ended up using solution below and it works

<VPhoneInput
                    ref="phoneInput"
                    v-model="form.phone"
                    guess-country
                    :country-label="$t('Country')"
                    :label="$t('Phone')"
                    :placeholder="$t('Phone')"
                    country-icon-mode="svg"
                    enable-searching-country
                    default-country="MY"
                    :invalid-message="(options) => `${options.label} ${$t('must be a valid phone number (example:')} ${options.example}).`"
                    @update:country="focusOnPhoneInput"
                  >

Thanks!

[paul-thebaud]

The only place where a .component is used by the package is inside the Vue plugin registration, so maybe this part of your code is wrong. As a reminder, the VPhoneInput plugin created by createVPhoneInput should be "used" in your Vue app creation, such as:

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

// Vue app creation.
const app = createApp(App);

// VPhoneInput plugin creation.
const VPhoneInput = createVPhoneInput({
  // ... your options ...
});

// VPhoneInput plugin registration.
app.use(vPhoneInput);

// Vue app mounting.
app.mount('#app');

In all cases, it looks like this error has nothing related to the messages customization feature or the package. Tell me if I can do anything else.