How can I make title bar dynamic on vuetify?

Question

I see vuetify project have title bar. But the title in public/index.html. Outside src folder

So I had trouble making it dynamic. Every page must have different title. If it's same, it's very influential on SEO

My public/index.html like this :

<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>test-vuetify</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but test-vuetify 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>

How can I solve this problem? I want to make title on every page is different. According to page content

Where are you getting the page content from? Is it hard-coded or pulled from some DB? If it's from some DB, you would simply set the title data the same way you set the body data — EGC, Nov 26 '19 at 01:02
@EGC There exist data from the database and there exist data is hard-coded — moses toh, Nov 26 '19 at 01:17
Looks like you can make your own component to do it: https://stackoverflow.com/questions/36612847/how-can-i-bind-the-html-title-content-in-vuejs — Damian C, Nov 26 '19 at 01:18
@Damian C Is this method really useful for SEO? if I right-click on my website and select `View Page Source`, I see the title, description, keywords don't change. I look doubtful this way is correct — moses toh, Nov 30 '19 at 03:10

score 0 · Answer 1 · answered Oct 22 '21 at 10:51

Hard to tell exactly what your constraints are from the question, but in case this helps anyone else make their Vuetify title bar dynamic...

In index.js, add some "meta" to the routes:

import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/page1',
    name: 'page-1',
    component: ...,
    meta: {
      title: 'Page 1'
    }
  },
  {
    path: '/page2',
    name: 'page-2',
    component: ...,
    meta: {
      title: 'Page 2'
    }
  }
]

const router = new VueRouter({
  mode: 'history',
  base: (your base url),
  routes: routes,
});

export default router

Then in the Vuetify title bar, use the route meta defined above:

<v-toolbar-title>{{ $route.meta.title || "Default title" }}</v-toolbar-title>

How can I make title bar dynamic on vuetify?

1 Answers1

Linked