Question: How do I use the vue-meta next in a vue 3 app using the options API

[thecyrilcril]

[pimlie]

Supporting the Options API & ensuring backwards compatibility with v2 is something I still need to look into. Would appreciate if someone could help with that

[pimlie]

@seewhy17 Support for the Options API has been added in alpha.8. See the updated readme, you need to install a plugin for it too work. The plugin adds a global mixin similar as in vue-meta v2 that will look for a metaInfo prop in your component.

[ataylor32]

Regarding this code from the README:

export default {
  metaInfo() {
    return {
      title: 'My Options API title',
    }
  }
}

How can I have the title be something reactive? An example use case: let's suppose your route is /articles/some-article. Before the article is loaded, we only know the slug (some-article). Once it loads, we have all of the article's information, including its title. At that point, I would like the <title> to be set to the article's title. How would I do that using metaInfo?

[mbrodala]

@ataylor32 Is this working for you at all? Neither in a component loaded by Vue router nor in our root App.vue does the metaInfo() have any effect. (Using [email protected])

[mbrodala]

Alright, I just found out that I missed the <metainfo> element in my App.vue. The title is updated now. :tada: