Updating Vue Composition-Api Metas
Tags: vue, nuxt, compositionapi
Published: 2020-07-23 18:34:55

After a little head scratch, I found a way to easily update your data if you have a metadata you want to update in a Composition-Api powered Nuxt application, even when they are **Async** : 

```javascript
<template>
  <div>Your content</div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from '@vue/composition-api'
import usePosts from '~/composables/use-posts'

export default defineComponent({
  name: 'PageArticle',
  head() {
    return {
      title: `${this.title}`,
      meta: [
        { name: 'og:title', content: `${this.title}`, hid: 'og:title' },
      ]
    }
  },

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  setup(props, ctx) {
    const { fetchArticleForUserLang, article } = usePosts({ ctx })
    const slug = ctx.root.$route.params?.article
    let title = ref('Cuisine De Geek')

    onMounted(async () => {
      await fetchArticleForUserLang({ articleSlug: slug, subcategory: 'article' })
      if (article.value) {
        title.value = article.value[0].title
      }
    })

    return { article, title }
  }
})
</script>

```

## Okay so break-it-down-time :  


```javascript
<template>
  <div>Your content</div>
</template>
```  

Nothing fancy here, just the init of your template content, if you want to display the data (could be a good idea at one point).  
<br/>


```javascript
<script lang="ts">
import { defineComponent, ref, onMounted } from '@vue/composition-api'
import usePosts from '~/composables/use-posts'
```  

Here, we import the method needed from the composition-api for everything to work correctly : defineComponent, ref to create a dynamic data later, and onMounted to do something as soon as this component/page is called.  

The usePosts file called is a separate file I made to handle the logic of loading the data from a separate api (for the record here it's a wordpress REST api).  

<br/>

```javascript
export default defineComponent({
  name: 'PageArticle',
  head() {
    return {
      title: `${this.title}`,
      meta: [
        { name: 'og:title', content: `${this.title}`, hid: 'og:title' },
      ]
    }
  },
```  

Ah, the big part ! Here, we define the name of our component, then we tell it to change the `<head>` section of our page.

Because Nuxt use [Vue-Meta](https://github.com/nuxt/vue-meta) by default, we can use the head() method in our defineComponent.

Great so now we tell it to use `this.title` to replace title of the page and `og:title`. But where do we load this data in particular ?   

<br/>

Well in our setup !

```javascript
// eslint-disable-next-line @typescript-eslint/no-unused-vars
  setup(props, ctx) {
    const { fetchArticleForUserLang, article } = usePosts({ ctx })
    const slug = ctx.root.$route.params?.article
    let title = ref('Cuisine De Geek') 
```

Here, first I tell eslint to stop bothering me with the fact that I don't use props in this case.
Then i want to get my method `fetchArticleForUserLang` and the data `article` that the method will load later.

I store the slug from the route to call the correct article from this slug later and then I set a variable title that is a ref to be able to update it later on a different life cycle of the application : 

```javascript
 onMounted(async () => {
      await fetchArticleForUserLang({ articleSlug: slug, subcategory: 'article' })
      if (article.value) {
        title.value = article.value[0].title
      }
    })

    return { article, title }
```
When the component or page (here a page), we tell it to be async to be able to await for our method `fetchArticleForUserLang` to actually find the data and set it to the article variable (all made behind the scene in the `usePosts` file).

We check that the article have an actual data (.value since it's a ref) then we tell it to assert the value of the title to our brand new article title.

We finish of by returning our article value and our title ET VOILA.