[Vue] 8. Vue 컴포넌트 재활용 & 공통 함수 개발 - 5) 플러그인(Plugins)
플러그인(Plugins)
src 폴더 안에 plugins라는 폴더를 만들고 그 안에 i18n.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);
};
},
};
views 폴더 안에 PluginsExample.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");
routes에 추가해준다.
// index.js
const routes = [
...,
{
path: "/plugins",
name: "PluginsExample",
component: () =>
import(/* webpackChunkName: "about" */ "../views/PluginsExample.vue"),
},
];
Author And Source
이 문제에 관하여([Vue] 8. Vue 컴포넌트 재활용 & 공통 함수 개발 - 5) 플러그인(Plugins)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@manyyeon/Vue-8.-Vue-컴포넌트-재활용-공통-함수-개발-5-플러그인Plugins저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)