[Vue]Vue3引入vue-meta的方式

Vue3引入vue-meta的方式

如果要在vue中動態引入Html meta tag，可以使用vue-meta，但vue3需要使用3.0.0，預設安裝會是2.4.0，這邊記錄一下實作過程。其實可以參考官方說明：參考文件，流程如下：

調整版本

調整vue-meta版本，於package.json中修改

- "vue-meta": "^2.4.0",
+ "vue-meta": "^3.0.0-alpha.7",

修改完後記得重新安裝套件

npm install

為Vue App引入

在main.js中加入createMetaManager

import { createMetaManager } from 'vue-meta'

const app = createApp(App)
  .use(router)
  .use(store)
  .use(createMetaManager()) // add this line

await router.isReady()
app.mount('#app')

在App.vue中加入顯示tag

於App.vue中加入顯示tag，並且加上顯示tag的範本，以title為例子

<template>
  <metainfo>
    <template v-slot:title="{ content }">{{ content ? `${content} | SITE_NAME` : `SITE_NAME` }}</template>
  </metainfo>
  <header />
  <router-view />
  <footer />
</template>

<script>
import { useMeta } from 'vue-meta'

export default {
  setup () {
    useMeta({
      title: '',
      htmlAttrs: { lang: 'zh-tw' }
    })
  }
}
</script>

到這邊應該可以看到預設顯示的字串了「SITE_NAME」。

為個別元件加上tag

在不同元件加上tag，切換過去後會顯示

import { useMeta } from 'vue-meta'

export default {
  setup () {
    useMeta({ title: 'Single Page' })
  }
}

設定成功的話，在個別元件中會看到標題已經是「Single Page｜SITE_NAME」。參考文件