vue-intl

import { createApp } from 'vue'; import App from './App.vue'; import { createIntl, useIntl } from 'vue-intl'; // 1. Define your messages for a locale const messages = { en: { greeting: 'Hello, {name}!', current_date: 'Today is {ts, date, ::yyyyMMdd}', photo_count: '{count, plural, one {# photo} other {# photos}} taken.' }, fr: { greeting: 'Bonjour, {name}!', current_date: 'Aujourd'hui, c'est le {ts, date, ::yyyyMMdd}', photo_count: '{count, plural, one {# photo} other {# photos}} pris.' } }; // 2. Create the Vue app instance const app = createApp(App); // 3. Install the vue-intl plugin app.use(createIntl({ locale: 'en', defaultLocale: 'en', messages: messages.en, // Load locale data dynamically in a real app // For production, consider using @formatjs/cli or babel-plugin-formatjs for message compilation })); // 4. Example Vue component using useIntl hook const MyComponent = { template: ` <div> <p>{{ formattedGreeting }}</p> <p>{{ $formatDate(new Date(), { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }}</p> <p>{{ $formatMessage({ id: 'photo_count', defaultMessage: 'No photos.', description: 'Number of photos' }, { count: photoCount }) }}</p> </div> `, setup() { const intl = useIntl(); const photoCount = 5; // Example dynamic value const formattedGreeting = intl.formatMessage({ id: 'greeting', defaultMessage: 'Hello, world!' }, { name: 'Vue User' }); return { formattedGreeting, photoCount }; }, }; app.component('MyComponent', MyComponent); app.mount('#app');