DOCSEARCHbyAlgolia
Submit Docs

vue-i18n

repository·master·Indexed 25 days ago

https://github.com/intlify/vue-i18n

An internationalization plugin for Vue.js that provides tools to manage translations and locales. The ecosystem includes vue-i18n (version 12.0.0-alpha.4), a lightweight subset called petite-vue-i18n for minimal bundle sizes, and @intlify/core. It supports Just-In-Time (JIT) and pre-compilation workflows, type-safe resources via global type definitions, and integration with frameworks like Nuxt 3.

Tokens
114.8K
Snippets
365
Records
622
Agent score
81%

What's inside vue-i18n

  1. Overview of petite-vue-i18n

    master

    petite-vue-i18n is a lightweight, small-size subset of vue-i18n designed for projects that only require translation features. It is optimized for minimal bundle size by excluding DateTime formats, Number formats, and several utility APIs.

    Key Differences from vue-i18n:

    • Size: Significantly smaller (e.g., ~5.51KB vs ~10.12KB for runtime only in production/brotli).
    • API Support: Only supports the Composition API. The legacy API is not supported.
    • Features Excluded:
      • DateTime and Number formatting (n, $n, d, $d, rt, $rt, tm, $tm, and related setters/getters).
      • Custom directive v-t.
      • Components: i18n-t, i18n-d, and i18n-n.
    • Message Handling: Only supports simple key-value locale messages by default. Hierarchical messages require manual customization via the API.
    • Fallback Logic: Uses the array order specified in fallbackLocale.

  4. Understand Backend Integration Workflows

    master

    This example demonstrates how to integrate i18n with a backend using two primary strategies:

    1. i18n JIT (Just-In-Time) compilation: Resources are compiled at runtime.
    2. i18n resource pre-compilation: Resources are compiled ahead of time (e.g., during a build step) to improve performance.

    Key files in this example:

    • vite.config.ts: Defines the plugin simulating the backend for development.
    • db: Simulates loading resources from a database.
    • scripts/generate.ts: Handles the pre-compilation of i18n resources.
    • scripts/server.ts: Simulates the production server.
    • src/locales.ts: Defines the function used to load i18n resources.

  6. Understand Vue I18n Scopes

    master

    Vue I18n manages internationalization resources (locales, messages, date/number formats) using Composer instances. Understanding the two available scopes is essential for managing how components access these resources:

    • Global Scope: Provides access to i18n resources across all components in the application. This is the default behavior when you create an i18n instance using createI18n. The global scope is accessible via the global property of the i18n instance. If useI18n() is called without specifying local messages, it defaults to the global scope.
    • Local Scope: Allows managing i18n resources on a per-component basis, similar to <style scoped>. This is useful for component-specific messages. A local scope is activated by providing messages directly to useI18n() or by using the <i18n> custom block in a Single File Component (SFC). When using a local scope, useI18n() returns a Composer instance that is distinct from the global one.

  7. Get started with Vue I18n

    master
    Vue I18n is a simple and powerful component-oriented internationalization solution for Vue.js. It supports basic translations as well as advanced localization features like pluralization, numbers, and date/time formatting. You can manage locale messages directly within Single File Components (SFCs).

  9. Understand the Intlify Message Syntax

    master
    Vue I18n uses a specific Message Syntax specification for defining translation messages. This syntax is defined using EBNF (Extended Backus-Naur Form) and supports complex structures like plurals, named arguments, and linked messages.

  12. Quickstart Vue I18n v11

    master

    To create a global application with Vue and Vue I18n v11, you need to prepare resource messages and use the localization APIs provided.

    In templates, you can use the $t translation API injected by Vue I18n to localize content without rewriting templates. This supports global applications and allows for seamless locale switching.

    <template>
  <h1>{{ $t('message.hello') }}</h1>
</template>