{"id":12512,"library":"vue-intl","title":"Vue Intl (FormatJS)","description":"Vue Intl is the official FormatJS binding for Vue.js applications, providing comprehensive internationalization (i18n) and localization (l10n) capabilities. Currently at version 7.2.3, it is actively maintained as part of the broader FormatJS monorepo, which sees frequent updates across its packages. The library leverages web standards like the JavaScript `Intl` API, ECMA-402, Unicode CLDR, and ICU Message syntax for robust and accurate formatting of messages, dates, numbers, and more. It offers seamless integration with Vue 3's Composition API via `useIntl()` and also supports injection patterns, distinguishing itself by being part of a well-established, standards-compliant internationalization ecosystem with extensive tooling for message extraction and compilation.","status":"active","version":"7.2.3","language":"javascript","source_language":"en","source_url":"https://github.com/formatjs/formatjs","tags":["javascript","formatjs","i18n","internationalization","intl","vue","typescript"],"install":[{"cmd":"npm install vue-intl","lang":"bash","label":"npm"},{"cmd":"yarn add vue-intl","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-intl","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue.js 3 integration.","package":"vue","optional":false}],"imports":[{"note":"Used to initialize the Vue Intl plugin with locale configuration. Vue Intl is primarily designed for ESM.","wrong":"const createIntl = require('vue-intl')","symbol":"createIntl","correct":"import { createIntl } from 'vue-intl'"},{"note":"A Composition API hook to access the intl formatters and methods within a Vue 3 component. No direct CommonJS equivalent for hooks.","symbol":"useIntl","correct":"import { useIntl } from 'vue-intl'"},{"note":"TypeScript type for configuring the Intl plugin. Useful for strict type checking during setup.","symbol":"IntlConfig","correct":"import type { IntlConfig } from 'vue-intl'"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport App from './App.vue';\nimport { createIntl, useIntl } from 'vue-intl';\n\n// 1. Define your messages for a locale\nconst messages = {\n  en: {\n    greeting: 'Hello, {name}!',\n    current_date: 'Today is {ts, date, ::yyyyMMdd}',\n    photo_count: '{count, plural, one {# photo} other {# photos}} taken.'\n  },\n  fr: {\n    greeting: 'Bonjour, {name}!',\n    current_date: 'Aujourd'hui, c'est le {ts, date, ::yyyyMMdd}',\n    photo_count: '{count, plural, one {# photo} other {# photos}} pris.'\n  }\n};\n\n// 2. Create the Vue app instance\nconst app = createApp(App);\n\n// 3. Install the vue-intl plugin\napp.use(createIntl({\n  locale: 'en',\n  defaultLocale: 'en',\n  messages: messages.en,\n  // Load locale data dynamically in a real app\n  // For production, consider using @formatjs/cli or babel-plugin-formatjs for message compilation\n}));\n\n// 4. Example Vue component using useIntl hook\nconst MyComponent = {\n  template: `\n    <div>\n      <p>{{ formattedGreeting }}</p>\n      <p>{{ $formatDate(new Date(), { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }}</p>\n      <p>{{ $formatMessage({ id: 'photo_count', defaultMessage: 'No photos.', description: 'Number of photos' }, { count: photoCount }) }}</p>\n    </div>\n  `,\n  setup() {\n    const intl = useIntl();\n    const photoCount = 5; // Example dynamic value\n\n    const formattedGreeting = intl.formatMessage({ id: 'greeting', defaultMessage: 'Hello, world!' }, { name: 'Vue User' });\n\n    return {\n      formattedGreeting,\n      photoCount\n    };\n  },\n};\n\napp.component('MyComponent', MyComponent);\n\napp.mount('#app');","lang":"typescript","description":"Demonstrates how to install `vue-intl`, configure it as a Vue plugin with messages, and use the `useIntl` Composition API hook for message formatting, alongside template-based formatters like `$formatDate` and `$formatMessage`."},"warnings":[{"fix":"Add a space inside the ICU MessageFormat's double curly braces, e.g., change `{{#}}` to `{ {#} }` or `{{ more}}` to `{ { more} }`.","message":"Vue's template interpolation (`{{ ... }}`) can conflict with ICU MessageFormat's double curly brace syntax (e.g., `{count, plural, one {#}}`). This can lead to parsing errors in Vue Single File Components (SFCs).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Dynamically import and register locale data for each language your application supports, for example, `import frLocaleData from 'vue-intl/locale-data/fr';`.","message":"By default, `vue-intl` only includes locale data for the 'en' locale. For other languages or specific formatting rules (e.g., pluralization, relative time), you must explicitly load the corresponding locale data to avoid incorrect or default formatting.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Conditionally load the necessary `Intl` polyfills based on browser support or include them directly in your build process for wider compatibility.","message":"The underlying FormatJS libraries rely on the browser's native `Intl` API. For older browsers or environments without full `Intl` support, a polyfill (e.g., `@formatjs/intl-pluralrules`, `@formatjs/intl-relativetimeformat`) is required to ensure consistent internationalization behavior.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your build tooling (e.g., Babel, Webpack, Vite) is configured to transpile ES6 output if targeting older environments. Check FormatJS migration guides for specific packages if upgrading other FormatJS dependencies alongside `vue-intl`.","message":"While no direct `vue-intl` v6-to-v7 migration guide is provided, the broader FormatJS ecosystem (which `vue-intl` is a part of) transitioned its build outputs to ES6 for CDN bundles and CommonJS files starting from v7 across many packages. This affects projects targeting older environments (e.g., ES5, IE11, older Node.js versions) and may require a transpiler or reconfiguration of build targets.","severity":"breaking","affected_versions":">=7.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Utilize `@formatjs/cli`, `babel-plugin-formatjs`, or `@formatjs/ts-transformer` during your build process to pre-compile messages. This converts ICU strings into optimized JavaScript functions, improving performance and enabling advanced formatting.","cause":"ICU message strings (e.g., plural rules, select formats) are being used directly in the browser runtime without prior compilation, which is not supported by the default runtime-only build.","error":"The message format compilation is not supported in this build."},{"fix":"Verify that the message `id` passed to `$formatMessage` or `intl.formatMessage` exists in your registered message dictionaries. Ensure that the correct locale messages are loaded and set for the application.","cause":"The `id` for a message cannot be found in the provided `messages` object for the current locale, or the locale data is missing/incorrect.","error":"Messages are not displaying or falling back to message ID string."}],"ecosystem":"npm"}