Vue.js Update Title and Meta

Install

npm install vue-headful

import vueHeadful from 'vue-headful'Vue.component('vue-headful', vueHeadful)

Add vue-headful in every view component.

NOTE: You probably need to implement vue-headful on every view components used by vue-router.

<template>  <div>    <vue-headful        :title="title"        description="Hello World"    />    <div>...</div>  </div></template><script>export default {  props: ['item'],  computed: {    title() {      if (this.item.title)        return this.item.title      return 'Default Title'    }  }}</script>

NOTE: You might use a Vue.js Global Object to store the Default Title

Edit public/index.html to add the necessary meta tags.

Note that neither Headful nor vue-headful add missing HTML elements, they only add attribute values. So it is important that you add everything that you want to have populated in your HTML first.

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width,initial-scale=1.0">    <link rel="icon" href="<%= BASE_URL %>favicon.ico">    <title>Journey</title>    <meta name="description" />    <meta itemprop="description" />    <meta property="og:description" />  </head>  <body>    <noscript>      <strong>We're sorry but journey-static doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>    </noscript>    <div id="app"></div>    <!-- built files will be auto injected -->  </body></html>

NOTE: Tested to work with prerender-spa-plugin.

References:

https://github.com/troxler/vue-headful