Translation

Luma Vue includes internationalization support provided by Vue I18n — the internationalization plugin for Vue.js.

Default

Choose which language to use by default. Edit config/i18n.js

export const defaultLocale = 'en'

Fallback

Choose which language to use when your preferred language lacks a translation. Edit config/i18n.js

export const fallbackLocale = 'en'

Global Locales

The locales/ directory contains localization files. Translations here are available globally in your app.

├── locales
│   ├── en.json
│   └── ro.json

Adding Languages

Edit config/i18n.js to add or remove locales and create the corresponding locales/$LOCALE.json localization file if needed.

export const locales = [{
    code: 'en',
    iso: 'en-US',
    file: 'en.json'
  },
  {
    code: 'ro',
    iso: 'ro-RO',
    file: 'ro.json'
  }
]

You can globally translate using $t or $tc in the root Vue instance and any composed component.

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

Component Based Localization

You can also manage locale info for each component separately, which might be more convenient due to Vue components oriented design.

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

<i18n>
  {
    "en": {
      "hello": "hello world!"
    },
    "ja": {
      "hello": "こんにちは、世界！"
    }
  }
</i18n>

DateTime

You can localize the datetime with your definition formats. Edit config/i18n.js. Available options in the documentation.

export const dateTimeFormats = {
  'en-US': {
    short: {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    }
  }
}

<p>{{ $d(new Date(), 'short') }}</p>

Numbers

You can localize numbers with your definition formats. Edit config/i18n.js. Available options in the documentation.

export const numberFormats = {
  'en-US': {
    currency: {
      style: 'currency',
      currency: 'USD'
    }
  }
}

<p>{{ $n(100, 'currency', 'en-US') }}</p>

Table of Contents

Frontend Matter

Beautifully crafted Bootstrap themes and templates for modern web apps.

Themes

Templates

Company

Illustrations by Freepik Storyset