Installing the Vue i18n CLI plugin for Vue 3 — in a mono repo

How to install the Vue i18n plugin for a Vue 3 project using the Vue CLI — and get it working in a mono repo.

vue-i18n-loader

We have just upgraded a Vue 2 application to Vue 3. It was built using the Vue cli, and had the Vue i18n plugin installed.

On top of the upgrade, we moved to a mono repo as well — and all this caused a fair few issues.

TL;DR

First up, how to sort it…

At the time of writing we are using the 5.0.0-rc.2 build of the Vue CLI for Vue 3

In the terminal of your project (cd to the package if a mono repo)

vue add i18n
yarn add -D vue-i18n@9 @intlify/vue-i18n-loader

Then in your vue.config.js , as well as the set up for the plugin, you will need this line in the chainWebpack section to get it working in a mono repo.

config.module
 .rule('i18n-resource')
 .include.clear().add(path.resolve(__dirname, 'src/locales'));

Like this…

And done!

What went wrong

After porting to Vue 3, the i18n plugin no longer worked — so we uninstalled it, and re added it to Vue thinking it would re install the relevant Vue 3 packages.

yarn remove vue-cli-plugin-i18n
vue add i18n

And then….

✨ Done in 53.69s.
✔ Successfully installed plugin: vue-cli-plugin-i18n
ERROR TypeError: Cannot read properties of undefined (reading ‘split’)

After much digging it turns out that although the plugin appears to have Vue 3 support from the git hub commits, it does not run well in the Vue 3 CLI — and has a few dependency issues.

Firstly we needed to update the core i18n package to from version 8 to 9 (for Vue 3)

yarn add -D vue-i18n@9

And now we can serve the app…

yarn serve
...
⠼  Building for development...
ERROR  Failed to compile with 1 error                                                                                                                                                                                                                                                                                                                                                              17:36:07
Failed to resolve loader: @intlify/vue-i18n-loader
You may need to install it.

or not.

Turns out that vue-i18n 9 needs a different loader for webpack, so we need to update that as well.

yarn add -D @intlify/vue-i18n-loader

and now…

yarn serve
...
DONE  Build complete. Watching for changes...
Issues checking in progress...

WOOO.

So we booted up the app and…

Non of the localisations were working. Everything was falling back to the key, rather than finding the actual translations.

This one took a while to solve — lots of debugging and stepping over the i18n lib, but eventually it turns out to be a misconfiguration of webpack when running the i18n plugin in a mono repo!

In the vue.config.js file you set the localeDir property to point to the folder containing the localisation files. This is relative to your src folder.

However, the plugin assumes that your src folder is the at the root of the repo. So when it builds the webpack config, the loader rule for the locale files comes out like this..

/* config.module.rule('i18n-resource') */
{
  test: /\.(json5?|ya?ml)$/,
  type: 'javascript/auto',
  include: [
    '/Users/bob/repo-root/src/locales'
  ],
  use: [
    /* config.module.rule('i18n-resource').use('i18n-resource') */
    { loader: '@intlify/vue-i18n-loader' }
  ]
}

The important part being /Users/bob/repo-root/src/locales . Thats fine for a single repo, but a mono repo your path will be more like this /Users/bob/repo-root/packages/package-root/src/locales .

The only way to override it that we could work out was to modify the webpack config using thechainWebpack section:

config.module
 .rule('i18n-resource')
 .include.clear().add(path.resolve(__dirname, 'src/locales'));

And then finally it was working!

Why keep the plugin?

Thats a good question, you can just hand role the webpack config, and set it up like this…

but that is more code to manage, and you loose some of the plugin features such as the yarn i18n:report and UI to localise files.

Not the end of the world though, and at least this way you have full control over it — but either way, you can get it working in a Vue 3 CLI mono repo project!