Vue 3 Language Translations (i18n) using vue-i18n-next

In today’s video we. Will introduce to you Vue 3 language translation (i18n) using vue-i18n-next

Subscribe : https://www.youtube.com/c/ScalableScripts/featured

#vue #javascript

What is GEEK

Buddha Community

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Create a i18n Plugin with Composition API in Vue.js 3

The way plugins are coded in Vue.js 3 with Composition API differ from traditional plugins. Traditional are used via a install function and added using Vue.use(plugin). They usually manipulate/extend the Vue prototype.

However, in Composition API plugins are non-manipulative and coded using an inject-provide pattern. For instance, you can create a i18n plugin 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();

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

As you can see, the functions provide and inject are used to create the plugin instance and hold it in a dependency injection mechanism.

Check that we use ref for the locales, since we need the to be reactive.

If you’re not very familiar yet with Composition API, please read the tip to easily migrate to Composition API and how to use old instance properties to get a bit more in detail about it.

Then, once in the app you must initialize the plugin with the right configuration by using the provideI18n function. That’s usually done in the root App.vue 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>

#vue #vue.js #vue.js 3 #api #i18n

Vue 3 Language Translations (i18n) using vue-i18n-next

In today’s video we. Will introduce to you Vue 3 language translation (i18n) using vue-i18n-next

Subscribe : https://www.youtube.com/c/ScalableScripts/featured

#vue #javascript

Implementing i18n in Vue.js Using vue-i18n

Today we’ll cover how to implement i18n, internationalization, in our Vue apps. We’ll be using the vue-i18n plugin written by Kazuya Kawaguchi who is one of the core developers working on Vue.js.

Providing internationalization support in our web apps is crucial to allowing them to be consumed by a global audience. While many people around the globe can speak or understand English, by adding i18n support we are opening up our applications to a much wider audience.

#vue #vuejs #vue-i18n

Manage Vue i18n with Typescript

In this article, you will learn how to manipulate Vue i18n with Typescript. It’s a very handy and easy-to-use library to manage a multi-language app.

#i18n #typescript #vue-i18n #javascript #vuejs #vue