Morioh
Login
Asmait Ermias

Asmait Ermias

3 years ago

A Switch or Select Language Component with vue.js

vue-switch-lang

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

Demo

https://aliafsah1988.github.io/vue-switch-lang/

How to use

  1. Intall it with npm:
npm i vue-switch-lang
  1. 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-lang";

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-lang";

Vue.component("SwitchLang");

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

For running the whole project in dev mode

  1. Go to the root of application and install packages with:
npm install
  1. Then run the application with
npm run serve
  1. If you want to build it:
npm run build

Dependencies

Related Projects

If you need a sample to create a multi language SPA with Vue.js with ability to change between right-to-left and left-to-right, please visit:
https://github.com/aliafsah1988/vue-multilang-sample

Download Details:

Author: aliafsah1988

Demo: https://aliafsah1988.github.io/vue-switch-lang/

Source Code: https://github.com/aliafsah1988/vue-switch-lang

#vue #vuejs #javascript

A Switch or Select Language Component with vue.js
28.25 GEEK