Kevon  Krajcik

Kevon Krajcik

1656752400

Vite Plugin Vue I18n: Integration for Vue I18n

@intlify/bundle-tools

The bundle tools for Vue I18n

📦 Packages

PackageBundlerVersion (click for changelogs)
@intlify/unplugin-vue-i18nvite / webpackunplugin-vue-i18n version
@intlify/vite-plugin-vue-i18nvitevite-plugin-vue-i18n version
@intlify/vue-i18n-loaderwebpackvue-i18n-loader version (for vue-i18n@9.x)
@intlify/rollup-plugin-vue-i18nrolluprollup-plugin-vue-i18n version

💪 Contribution

See Contributing Guide.


Author:  intlify
Source Code: https://github.com/intlify/bundle-tools
License:  MIT license

#typescript #javascript #vite #vue 

What is GEEK

Buddha Community

 Vite Plugin Vue I18n: Integration for Vue I18n
Luna  Mosciski

Luna Mosciski

1600583123

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

Kevon  Krajcik

Kevon Krajcik

1656752400

Vite Plugin Vue I18n: Integration for Vue I18n

@intlify/bundle-tools

The bundle tools for Vue I18n

📦 Packages

PackageBundlerVersion (click for changelogs)
@intlify/unplugin-vue-i18nvite / webpackunplugin-vue-i18n version
@intlify/vite-plugin-vue-i18nvitevite-plugin-vue-i18n version
@intlify/vue-i18n-loaderwebpackvue-i18n-loader version (for vue-i18n@9.x)
@intlify/rollup-plugin-vue-i18nrolluprollup-plugin-vue-i18n version

💪 Contribution

See Contributing Guide.


Author:  intlify
Source Code: https://github.com/intlify/bundle-tools
License:  MIT license

#typescript #javascript #vite #vue 

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

A look at more features from the vue-i18n plugin for dealing with i18n in your Vue apps

Today we’ll be covering how a number of formatting options available with the vue-i18n plugin for internationalization (i18n). We’ll also be covering how to handle fallbacks when no string is available for a locale. We’ll be using the vue-i18n plugin written by Kazuya Kawaguchi, and this article is building up from this previous one, which introduces using vue-i18n for internationalization (i18n) in Vue.js apps.

vue-i18n provides a number of ways to format your app strings. We can even define a custom formatter if you don’t like the default style. We can also provide fallbacks that are useful when we’re missing strings for a given locale.

#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