Retrieve the header tag from API using Nuxt

Question

Retrieve the header tag from API using Nuxt

I am trying to dynamically set OG:Tags using an API

head() {
this.$axios
  .get(`............`)
  .then((response) => {
    this.og_title = response.data.message.course.course_name;
    this.og_description = response.data.message.course.description;
    this.og_image = response.data.message.course.img_url;

    console.log(this.og_title);
    return {
      title: this.title,
      meta: [
        {
          property: "og:title",
          content: this.og_title,
        },
        {
          property: "og:description",
          content: this.og_description,
        },
        {
          property: "og:image",
          content: this.og_image,
        }
      ]
    };
  });

However, despite printing correctly in the console, the tags do not show up when testing on production.

javascript vue.js nuxt.js

Answer 1

Answer №1

It is recommended to make Axios requests (and any other asynchronous calls) within the asyncData method. asyncData will seamlessly integrate its returned value into your component's internal state, allowing you to access this data using this.

Keep in mind that asyncData is specifically designed for components located in the pages folder.

Here is an example utilizing the @nuxt/http library:

<script>
  export default {
    async asyncData({ params, $http }) {
      const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    },
    head() {
      return {
        title: this.post.title,
        meta: [
          {
            property: "og:title",
            content: this.post.title,
          },
          {
            property: "og:description",
            content: this.post.description,
          },
          {
            property: "og:image",
            content: this.post.image,
          },
        ],
      };
    }
  }
</script>

Answer 2

It is recommended to make Axios requests (and any other asynchronous calls) within the asyncData method. asyncData will seamlessly integrate its returned value into your component's internal state, allowing you to access this data using this.

Keep in mind that asyncData is specifically designed for components located in the pages folder.

Here is an example utilizing the @nuxt/http library:

<script>
  export default {
    async asyncData({ params, $http }) {
      const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    },
    head() {
      return {
        title: this.post.title,
        meta: [
          {
            property: "og:title",
            content: this.post.title,
          },
          {
            property: "og:description",
            content: this.post.description,
          },
          {
            property: "og:image",
            content: this.post.image,
          },
        ],
      };
    }
  }
</script>

Retrieve the header tag from API using Nuxt

Answer №1

Similar questions

What are some strategies for stopping a form from redirecting me while utilizing ReactJS and ExpressJS?

The functionality of the Bootstrap4 accordion is not functioning according to my expectations

How to Invoke JavaScript Functions within jQuery Functions?

Babel had a SyntaxError in test.jsx file at line 3, position 11 with an Unexpected token

Displaying the loading image only on the first result within a while loop

Error in code - message gets sent immediately instead of waiting for timeout to occur

Obtaining a Variable Element through Selector

Ways to create a class method to increase a counter?

Is it possible to utilize Vue.js' v-if directive to validate if a certain value is present within an array

Merging two arrays that have identical structures

React/Javascript - Executing Function returns prematurely

How can I dynamically change a key in an object and replace it with a custom name while also updating its value?

Using JavaScript to implement CSS3 with multiple background images

Using a constructor function in a for loop

Having difficulty displaying elements from two arrays at particular intervals

Execute the gulp module on the source files

Progress Bar Countdown Timer

Troubleshooting problem with iPhone X responsiveness

Adjust the height of images to be consistent

I'm feeling a bit lost with this JSON example - specifically with JSON.parse, JSON.stringify, as well as localStorage.setItem