Composition-api: fix: useMeta effect titleTemplate setting in nuxt.config.js doesn't work

Created on 22 Jul 2020  ·  4Comments  ·  Source: nuxt-community/composition-api

🐛 The bug
The titleTemplate setting in nuxt.config.js doesn't work when use useMeta in page component.

🛠️ To reproduce
The easiest way is to checkout my repo:
https://codesandbox.io/s/quirky-glitter-yg03g?file=/pages/index.vue

🌈 Expected behaviour
titleTemplate work and don't need to use useMeta({ title: 'homepage', titleTemplate: '%s - my project' }) in each page component.

bug

Most helpful comment

Found a possible solution (#170) this requires #152 to be merged first. (because I use customRef). After #152 is merged I will have a deeper look into this. :D

There might be some related problems.

All 4 comments

The problem is if you use vue-meta with:

{
  head: {
    title: "homepage",
    titleTemplate: undefined
  },
}

The title of the page is just set to the title string (I think this is expected).
Because of the limitations of Vue2 reactivity system, we can only fix this by making titleTemplate not reactive. (so you have to use Vue.set to change it). I will have a look if there is a other way to make this working...

Found a possible solution (#170) this requires #152 to be merged first. (because I use customRef). After #152 is merged I will have a deeper look into this. :D

There might be some related problems.

218 should fix this. You could try it out.

@Quineone Just released v0.12.3 with @mathe42's patch!

Was this page helpful?
0 / 5 - 0 ratings