Use I18n in url

This is the initial boot.ts, that uses VueI18n

import Vue from 'vue';
import VueRouter from 'vue-router';
import VueI18n from 'vue-i18n'

Vue.use(VueRouter);
Vue.use(VueI18n);

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

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

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;
    next();
});

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
    ...
});

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'
I18n.l Time.now

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:

en:
  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

In manifest.json and CSS files, refer to a string named messagename like this:

__MSG_messagename__

In your extension or app's JavaScript code, refer to a string named messagename like this:

chrome.i18n.getMessage("messagename")

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:

background-image:url('chrome-extension://abcdefghijklmnopqrstuvwxyzabcdef/background.png');