How Can I Make Title Bar Dynamic On Vuetify?

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,

Solution 1:

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>