Vue-switch-lang2 NPM

vue-switch-lang2

A small and easy-to-use component to switch between languages in a dropdown menu, created by Vue.js.

How to use

Intall it with npm:

npm i vue-switch-lang2

You can use it:

Locally: In your parent component:

<template>
  <div class="home">
    <SwitchLang @changed="onChange" :initLang="initLang" :options="options" />
  </div>
</template>

<script>
import SwitchLang from "vue-switch-lang2";

export default {
  components: {
    SwitchLang
  },
  methods: {
    onChange(lang) {
      // Do something
    }
  },
  data() {
    return {
      initLang: {
        title: "en",
        flag: "gb"
      },
      options: [
        {
          title: "en",
          flag: "gb"
        },
        {
          title: "de",
          flag: "de"
        },
        {
          title: "fa",
          flag: "ir"
        }
      ]
    };
  }
};
</script>

<style>
.multiselect__option--selected {
  background-color: red;
}

.multiselect__option--highlight {
  background-color: green;
  background: green;
}
</style>

Gobally: In the file that you instantiate Vue (usually main.js):

import Vue from "vue";
import App from "./App.vue";
import SwitchLang from "vue-switch-lang2";

Vue.component("SwitchLang");

new Vue({
  render: h => h(App)
}).$mount("#app");