Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

[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」。參考文件

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *