vue3 vue-meta 설정
Posted by Albert 917Day 22Hour 30Min 40Sec ago [2022-10-15]
1.플러그인설치
npm install vue-meta@alpha
yarn add vue-meta@alpha // yarn
2. main.js 파일에 관련 항목 추가
import { createApp } from 'vue'
import App from './App.vue'
import { createMetaManager } from 'vue-meta'
const app = createApp(App)
app.use(createMetaManager())
app.mount(''app')
3. App.vue metainfo 추가
<template>
<metainfo></metainfo>
<Header></Header>
<div class="wrapper">
<router-view />
<Footer></Footer>
</div>
</template>
4. script 상 관련 meta 항목 추가
<script>
import header from './layout/AbtHeader.vue'
import footer from './layout/AbtFoot.vue'
import { useMeta } from 'vue-meta'
export default {
setup () {
useMeta({
title: 'VISIONBOY (이성) 개인홈페이지',
meta: [
{vmid: 'description', name: 'description', content: 'VISIONBOY (이성) 개인홈페이지'},
{vmid: 'keywords', name: 'keywords', content: 'VISIONBOY, 이성, 개발자,BIGDATA,ORACLE,JAVASCRIPT,JAVA,C''},
]
})
},
name: 'App'
}
</script>
끝