[Vuejs]-How to set Nuxt SSR async metadata in a typescript class component? Fetching using Apollo

by

0👍

✅

In order to access the data you need to put this: YOUR_CLASS_NAME in the head constructor.

In order to use Apollo you can get access to that by passing in context to asyncData.

The final code would look like this:

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  head(this: StandardPagePage): Record<string, unknown> { // <-- added this:StandardPage
    return { title: this.response.title }
  },
  async asyncData(context): Promise<any> { // <-- added context

    // call to Apollo now looks like this:

    const client = context.app.apolloProvider?.defaultClient
    const response = await client!.query({
      query: SITE_PAGE,
      variables: {
        path: context.route.path,
      },
    })
    return { response }
  },
})
export default class StandardPage extends Vue {}
</script>

Leave a comment