In my previous experience with VueCLI3, I utilized dynamic titles for the ActionBar, such as with Vuetify, by setting up vue-router meta properties in the router.js file. Although this method was somewhat static in nature.
For example:
// router.js
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta : {
title : 'Welcome Home',
}
},
]
// in App.vue
<template>
<v-app>
<ActionBar :title="$route.meta.title"></ActionBar>
<router-view></router-view>
</v-app>
</template>
When working with Nuxt.JS, I couldn't find a way to set route-meta, so I opted to use Vuex store getters and mutations to manage titles in the store and retrieve them in the main layout.
For instance:
// in mainLayout.vue
<template>
<v-app dark>
<v-app-bar app color="primary" dark>
<v-toolbar-title v-text="actionTitle" />
</v-app-bar>
<v-main>
<v-container>
<nuxt keep-alive />
</v-container>
</v-main>
</v-app>
</template>
<script>
export default {
computed: {
...mapGetters([
'actionTitle'
])
},
}
// in some routed page, eg: index.vue
export default {
created() {
this.$store.commit('setActionTitle', 'Medical Service BD')
},
}
An issue arises when using `
Which approach do you think is more suitable for dynamic title implementation?