vue.js - Use I18n in url - TagMerge
4Use I18n in urlUse I18n in url

Use I18n in url

Asked 1 years ago
4 answers

The variable name should be $i18n.

<a :href="`/${$i18n.locale}/profiles/${}`" target="_blank">Hi</a>

From the Vue18n documentation:

Each component contains a VueI18n instance referenced as the $i18n property...

Source: link


This is the initial boot.ts, that uses VueI18n
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueI18n from 'vue-i18n'


import { messages, defaultLocale } from './lang/i18n';

const i18n = new VueI18n({
    locale: defaultLocale,
    fallbackLocale: 'en',

const routes = [
        { path: '/', component: require('./components/home/home.vue.html') },
        { path: '/product', component: require('./components/product/product.vue.html') },

const router = new VueRouter({
    mode: 'history',
    routes: routes

new Vue({
    el: '#app-root',
    router: router,
    i18n: i18n,
    render: h => h(require('./components/app/app.vue.html'))
So far I have tried prefixing routes but it just breaks the functionality:
const routes = [{
    path: '/',
    redirect: `/${defaultLocale}`,
    path: '/:locale',
    children: [
        { path: '/', component: require('./components/home/home.vue.html') },
        { path: '/counter', component: require('./components/product/product.vue.html') },
I've also tried relying on router.beforeEach to set the locale.
router.beforeEach((to, from, next) => {
    let language = to.params.locale;
    if (!language) {
        language = 'en';

    i18n.locale = language;
But first, you need to extract the locale from the url:
let locale = window.location.pathname.replace(/^\/([^\/]+).*/i,'$1');
and then specify the base in your VueRouter constructor:
const router = new VueRouter({
    base: (locale.trim().length && locale != "/") ? '/' + locale : undefined

Source: link


The most important methods of the I18n API are:
translate # Lookup text translations
localize  # Localize Date and Time objects to local formats
These have the aliases #t and #l so you can use them like this:
I18n.t 'store.title'
There are also attribute readers and writers for the following attributes:
load_path                 # Announce your custom translation files
locale                    # Get and set the current locale
default_locale            # Get and set the default locale
available_locales         # Permitted locales available for the application
enforce_available_locales # Enforce locale permission (true or false)
exception_handler         # Use a different exception_handler
backend                   # Use a different backend
The default en.yml locale in this directory contains a sample pair of translation strings:
  hello: "Hello world"
You can change the default locale as well as configure the translations load paths in config/application.rb as follows:
config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}')]
config.i18n.default_locale = :de

Source: link


In manifest.json and CSS files, refer to a string named messagename like this:
In your extension or app's JavaScript code, refer to a string named messagename like this:
In messages.json, each user-visible string has a name, a "message" item, and an optional "description" item. The name is a key such as "extName" or "search_string" that identifies the string. The "message" specifies the value of the string in this locale. The optional "description" provides help to translators, who might not be able to see how the string is used in your extension. For example:
{  "search_string": {    "message": "hello%20world",    "description": "The string we search for. Put %20 between words that go together."  },  ...}
Here's an example of using @@extension_id in a CSS file to construct a URL:
body {  background-image:url('chrome-extension://__MSG_@@extension_id__/background.png');}
If the extension ID is abcdefghijklmnopqrstuvwxyzabcdef, then the bold line in the previous code snippet becomes:

Source: link

Recent Questions on vue.js

    Programming Languages