Beginner Vue.js Tutorial with User Login

Blog Discussions
, ,
22

Hey @paytonmcl!

You can do this using the router, but you’ll have to create a custom navigation guard to handle it (something like this https://alligator.io/vuejs/vue-router-modify-head/)

The other and more simple option is to use the popular vue-meta package.

  1. Install it:
npm install vue-meta
  1. Import and use it in main.js:
import VueMeta from 'vue-meta';

Vue.use(VueMeta);
  1. Update the title in each component:
<script>
export default {
  name: 'home',
  metaInfo: {
    title: "Homepage"
  }
}
</script>

Hope that helps!

2 Likes