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

Tips for implementing a live filter on an HTML table using JavaScript without the need to refresh the webpage

Deciphering the GWT compiler's results

Can Mustache syntax {{}} be used to inject a Vue component?

Can the getState() method be utilized within a reducer function?

Is it possible to count the number of days in between and then apply a specific class to each of those days

Inserting items into an array entity

Utilize jQuery to invoke an ASP page method from an HTML page

Tips for passing a variable from one function to another file in Node.js

Issue with Vue template not displaying within a loop

Utilizing custom links for AJAX to showcase targeted pages: a beginner's guide

I seem to be having trouble using my markers on my istamap

A guide to retrieving the authorization header from a URL within a Vue JS application

Angular JS page in its purest form

Identify the quantity of dynamically added <li> elements within the <ul> using jQuery

Obtaining the category value within a slot of the Vuetify calendar

Error in Next.js: The function (0 , firebase_auth__WEBPACK_IMPORTED_MODULE_1__.onAuthStateChanged) is not defined as a function

Prevent the box from closing automatically after submitting a form using jQuery

I have a JavaScript code stored as a string that I need to transform into plain JavaScript

Bring in a JavaScript file from Blogger without using a tag

Retrieve or update the selected option value in a Select2 multiple dropdown