Breaking News: Grepper is joining You.com. Read the official announcement!

Change current locale in vue 3 i18n

Muhammed Çetin answered on July 25, 2023 Popularity 7/10 Helpfulness 4/10

answer Change current locale in vue 3 i18n

Change current locale in vue 3 i18n

Comment

<template>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" :dir="$i18n.locale == 'ar'?'rtl':'ltr'">
  <div class="container-fluid">
    <router-link :to="{ name: 'Home' }" class="navbar-brand d-flex align-items-center">
        <i class="bi bi-box2-heart h1 me-1"></i>
         <strong>VUE</strong>
        </router-link>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item me-3">
          <router-link class="nav-link" :class="$route.name == 'Home'? 'active':''" aria-current="page" :to="{ name: 'Home' }">
           {{$t('Home')}}
          </router-link>
        </li>
        <li class="nav-item me-3">
          <router-link class="nav-link" :class="$route.name == 'About'? 'active':''" aria-current="page" :to="{ name: 'About' }">
            {{$t('About')}}
          </router-link>
        </li>
      </ul>
      <div class="locale-changer">
        <select v-model="$i18n.locale">
          <option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">{{ locale }}</option>
        </select>
     </div>
    </div>
  </div>
</nav>
</template>

Popularity 7/10 Helpfulness 4/10 Language javascript

Source: ahmedshaltout.com

Tags: javascript locale

Link to this answer
Share Copy Link

Contributed on Jul 25 2023

Muhammed Çetin

0 Answers Avg Quality 2/10

Change current locale in vue 3 i18n

Contents

More Related Answers

Change current locale in vue 3 i18n

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.