Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improvement(docs): extend Hot reloading section #865

Merged
merged 1 commit into from
May 5, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
72 changes: 69 additions & 3 deletions vuepress/guide/hot-reload.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
# Hot reloading

You can watch for changes in localization files and hot reload changes into your application.
You can use Webpack's [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) (HMR) feature to watch for changes in localization files and hot reload changes into your application.

## Basic example

If you only use a static set of locales, you can hot reload those locales explicitly:

```js
// Something locale messages
import Vue from "vue"
import VueI18n from "vue-i18n"
import en from './en'
import ja from './ja'

const messages = {
// ...
en,
ja
}

// VueI18n instance
Expand All @@ -31,3 +40,60 @@ if (module.hot) {
})
}
```

## Advanced example

If you want to support a changing set of locales, you can hot reload those locales dynamically using `require.context`:

```js
import Vue from "vue";
import VueI18n from "vue-i18n";

Vue.use(VueI18n);

// Load all locales and remember context
function loadMessages() {
const context = require.context("./locales", true, /[a-z0-9-_]+\.json$/i);

const messages = context
.keys()
.map((key) => ({ key, locale: key.match(/[a-z0-9-_]+/i)[0] }))
.reduce(
(messages, { key, locale }) => ({
...messages,
[locale]: context(key),
}),
{}
);

return { context, messages };
}

const { context, messages } = loadMessages();

// VueI18n instance
const i18n = new VueI18n({
locale: "en",
messages,
});

// Run app
const app = new Vue({
i18n,
// ...
}).$mount('#app');

// Hot updates
if (module.hot) {
module.hot.accept(context.id, () => {
const { messages: newMessages } = loadMessages();

Object.keys(newMessages)
.filter((locale) => messages[locale] !== newMessages[locale])
.forEach((locale) => {
messages[locale] = newMessages[locale];
i18n.setLocaleMessage(locale, messages[locale]);
});
});
}
```