Kang-ji

// vue 2.X
npm install vue-i18n@8

// vue 3.X
npm install vue-i18n@9

{
	"example":"ttttttt",
    "group": {
        "ttl_1": "타이틀1",
        "ttl_2": "타이틀2",
        "ttl_3": "타이틀3"
    }
}

{
	"example":"ttttttt",
    "group": {
        "ttl_1": "ttl1",
        "ttl_2": "ttl_2",
        "ttl_3": "ttl_3"
    }
}

import Vue from "vue";
import VueI18n from "vue-i18n";
import en from "@/locales/en.json";
import ko from "@/locales/ko.json";

//import axios from 'axios'

Vue.use(VueI18n);

export const i18n = new VueI18n({
  locale: "ko",
  fallbackLocale: "en",
  messages: { en, ko },
});

const loadedLanguages = ["ko"];

export function loadLanaguageAsync(lang) {
  if (i18n.locale === lang) {
    return Promise.resolve(lang);
  }

  if (loadedLanguages.includes(lang)) {
    return Promise.resolve();
  }
}

import Vue from "vue";
import App from "./App.vue";
// import router from "@/routes/index";
// import store from "@/store/index";
import { i18n } from "@/locales/i18n";

Vue.config.productionTip = false;

new Vue({
  // router,
  // store,
  i18n,
  render: (h) => h(App),
}).$mount("#app");

// component.vue
<template>
    <p>{{ $t("example")}}</p>
    <p>{{ $t("group.ttl1")}}</p>
    <p>{{ $t("group.ttl2")}}</p>
</template>

// component.vue
<template>
    <p>{{ $t("example")}}</p>
    <p v-html="$t('example')"></p>
    <p v-html="$t('group.ttl1')"></p>
    <p v-html="$t('group.ttl2')"></p>
</template>