Vue - 간단 다국어 적용 방법(pinia사용)

Vue3에서 다국어 적용하기!

 

우선 저는 다국어 지원 vue-i18n 없이Pinia를 통해 다국어를 적용했습니다.

 

pinia 설치는 아래 포스팅을 통해 적용해주시면 됩니다

https://bman-note.tistory.com/44

vue3 - pinia 간단 세팅 방법

1. Json 파일 생성

//kr.json
{
  "key1": "안녕하세요",
  "key2": "감사합니다."
}
//en.json
{
  "key1": "hello",
}

2. 스토어 생성

//resLocales.js
import { defineStore } from "pinia";
import kr from "@/assets/locales/kr"; //json 파일위치
import en from "@/assets/locales/en"; //json 파일위치

//언어정보 스토어
export const useLocales = defineStore("locales", {
  state: () => ({
    country: "kr",//국가정보
    locales: {
      kr: kr,
      en: en,
    },
  }),
  getters: {},
  actions: {
  	//다국어 정보 가져오기
    getLocale(key) {
      return this.locales[this.country][key] !== undefined // 없을경우 한국어 리턴
        ? this.locales[this.country][key]
        : this.locales["kr"][key]; // 
    },
    //국가세팅
    setCountry(country){
    	this.country = country;
    }
  },
  persist: {
    enabled: true,
  },
});

3. 페이지에 적용하기

//sample.vue
<template>
    <button @click="locales.setCountry('kr')">한국어</button>
    <button @click="locales.setCountry('en')">영어</button>
    <br />
    번역값 : {{ locales.getLocale('key1') }}<br />
    <br />
</template>

<script setup>
import { useLocales } from "@/assets/js/store/modules/resLocales"; //store 파일
const locales = useLocales();
</script>

 

이렇게 Vue3 에서 vue-i18n 미사용 다국어 처리를 해보았습니다.

도움이되셨길 바랍니다.