プラグイン(Plugins)

srcフォルダにi 18 nを含むpluginsというフォルダを作成します.jsファイルを作成します.

reduceはJavaScript内蔵関数です.

// i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = (key) => {
      return key.split(".").reduce((o, i) => {
        if (o) return o[i];
      }, options);
    };
  },
};

PluginsExampleはviewsフォルダにあります.vueファイルを作成します.

// PluginsExample.vue
<template>
  <div>
    <h1>{{ $translate("ko.hi") }}</h1>
    <h1>{{ $translate("en.hi") }}</h1>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      sampleData: "",
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {},
};
</script>

<style scoped></style>

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import mixins from "./mixins";
import VueSweetAlert2 from "vue-sweetalert2";
import "sweetalert2/dist/sweetalert2.min.css";
import i18nPlugin from "./plugins/i18n";

const i18nStrings = {
  en: {
    hi: "Hello!",
  },
  ko: {
    hi: "안녕하세요",
  },
};

const app = createApp(App);
app.use(router);
app.mixin(mixins);
app.use(VueSweetAlert2);
app.use(i18nPlugin, i18nStrings);
app.mount("#app");

ルートに追加します.

// index.js
const routes = [
  ...,
  {
    path: "/plugins",
    name: "PluginsExample",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/PluginsExample.vue"),
  },
];