Original text: vuedose tips/create – a – i1…

Plugins in vue.js 3 are written using the Composition API in a different way from the traditional install function used by vue.use (plugin); The latter typically operate on or extend Vue prototypes.

But manipulation of components in the Composition API is impossible, and i18N components are encoded in a injection-provide mode. For example, you can create an i18N plug-in like this:

// i18nPlugin.js
import { ref, provide, inject } from "@vue/composition-api";

const createI18n = config= > ({
  locale: ref(config.locale),
  messages: config.messages,
  $t(key) {
    return this.messages[this.locale.value][key]; }});const i18nSymbol = Symbol(a);export function provideI18n(i18nConfig) {
  const i18n = createI18n(i18nConfig);
  provide(i18nSymbol, i18n);
}

export function useI18n() {
  const i18n = inject(i18nSymbol);
  if(! i18n)throw new Error("No i18n provided!!!");

  return i18n;
}
Copy the code

As you can see, the functions provide and inject are used to create plug-in instances and hold them with a dependency injection mechanism.

Notice that we’re using ref on locale, because we’re going to use its reaction properties.

If you’re not familiar with i18n or the Composition API, read:

  • Mamaname? I what N? Talk about internationalization in web front-end development
  • Ten common errors in software localization
  • Contrast React Hooks with Vue Composition API
  • Unit tests for Vue 3 Composition API

⏺ dojo.provide

The plug-in must then be initialized with the correct configuration in the application by calling the provideI18n function. This is typically done in the app.vue root component:

<script>
  import { provideI18n } from "./i18nPlugin";
  import HelloWorld from "./HelloWorld";

  export default {
    components: { HelloWorld },
    setup() {
      provideI18n({
        locale: "en".messages: {
          en: {
            hello_world: "Hello world"
          },
          es: {
            hello_world: "Hola mundo"}}}); }};</script>
Copy the code

🔄 inject

Finally, in any component that needs internationalization, inject is implemented by calling the useI18n function in the Setup entry function. Create the following helloWorld.vue component:

<template>
  <div>
    <h2>{{ i18n.$t('hello_world') }}</h2>
  </div>
</template>

<script>
  import { useI18n } from "./i18nPlugin";

  export default {
    setup() {
      const i18n = useI18n();

      return{ i18n }; }};</script>

Copy the code

🌍 i18n

But… Add this function to the previous code:

<template>
  <div>
    <h2>{{ i18n.$t('hello_world') }}</h2>
    <button @click="switchLanguage">Switch language</button>
  </div>
</template>

<script>
  import { useI18n } from "./i18nPlugin";

  export default {
    setup() {
      const i18n = useI18n();

      const switchLanguage = (a)= > {
        const locale = i18n.locale.value === "en" ? "es" : "en";
        i18n.locale.value = locale;
      };

      return{ i18n, switchLanguage }; }};</script>
Copy the code

This feature is implemented simply by calling the switchLanguage function on a button.

That’s all you have to do. What I love about the Composition API is how easy it is to develop predictable and maintainable code with clear patterns.






–End–






View more front-end good article please search fewelife concern public number reprint please indicate the source