[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-vuevue3引入vue-meta的方式":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":19,"minRead":20},160,"vuevue3引入vue-meta的方式","[Vue]Vue3引入vue-meta的方式","Vue3引入vue-meta的方式 如果要在vue中動態引入Html meta tag，可以使用vue-met […]","\u003Ch2>Vue3引入vue-meta的方式\u003C\u002Fh2>\n\u003Cp>如果要在vue中動態引入Html meta tag，可以使用vue-meta，但vue3需要使用3.0.0，預設安裝會是2.4.0，這邊記錄一下實作過程。其實可以參考官方說明：\u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-meta\u002Fv\u002F3.0.0-alpha.10\" title=\"參考文件\">參考文件\u003C\u002Fa>，流程如下：\u003C\u002Fp>\n\u003Ch3>調整版本\u003C\u002Fh3>\n\u003Cp>調整vue-meta版本，於\u003Cem>package.json\u003C\u002Fem>中修改\u003C\u002Fp>\n\u003Cpre>\u003Ccode>- "vue-meta": "^2.4.0",\n+ "vue-meta": "^3.0.0-alpha.7",\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>修改完後記得重新安裝套件\u003C\u002Fp>\n\u003Cpre>\u003Ccode>npm install\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>為Vue App引入\u003C\u002Fh3>\n\u003Cp>在main.js中加入createMetaManager\u003C\u002Fp>\n\u003Cpre>\u003Ccode>import { createMetaManager } from 'vue-meta'\n\nconst app = createApp(App)\n  .use(router)\n  .use(store)\n  .use(createMetaManager()) \u002F\u002F add this line\n\nawait router.isReady()\napp.mount('#app')\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>在App.vue中加入顯示tag\u003C\u002Fh3>\n\u003Cp>於App.vue中加入顯示tag，並且加上顯示tag的範本，以title為例子\u003C\u002Fp>\n\u003Cpre>\u003Ccode><template>\n  <metainfo>\n    <template v-slot:title="{ content }">{{ content ? `${content} | SITE_NAME` : `SITE_NAME` }}<\u002Ftemplate>\n  <\u002Fmetainfo>\n  <header \u002F>\n  <router-view \u002F>\n  <footer \u002F>\n<\u002Ftemplate>\n\n<script>\nimport { useMeta } from 'vue-meta'\n\nexport default {\n  setup () {\n    useMeta({\n      title: '',\n      htmlAttrs: { lang: 'zh-tw' }\n    })\n  }\n}\n<\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>到這邊應該可以看到預設顯示的字串了「SITE_NAME」。\u003C\u002Fp>\n\u003Ch3>為個別元件加上tag\u003C\u002Fh3>\n\u003Cp>在不同元件加上tag，切換過去後會顯示\u003C\u002Fp>\n\u003Cpre>\u003Ccode>import { useMeta } from 'vue-meta'\n\nexport default {\n  setup () {\n    useMeta({ title: 'Single Page' })\n  }\n}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>設定成功的話，在個別元件中會看到標題已經是「Single Page｜SITE_NAME」。\u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-meta\u002Fv\u002F3.0.0-alpha.10\" title=\"參考文件\">參考文件\u003C\u002Fa>\u003C\u002Fp>\n","2022-11-28T20:00:34","\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2022%2F11%2F256px-Vue.js_Logo_2.svg_.png",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15,17],{"name":16,"slug":16},"frontend",{"name":18,"slug":18},"vue","\u002Fblog\u002Fvuevue3引入vue-meta的方式",1]