Nuxt: The meta title for dynamic head is not defined during server-side rendering

In my nuxt project, I am encountering an issue with the meta title and description. These values are coming from nuxt/content.

The data is fetched asynchronously in the index and passed to a sub component using a getter.

When generating the page, the meta tags are present, but not during SSR (server-side rendering).

I have tried using async/await, but I still receive the following error:

Uncaught (in promise) TypeError: seoTitle is undefined

I attempted to solve this by adding a useless await before this.getArticle const, hoping that it would make everything wait for the data, but unfortunately, the issue persists.

Below is the code snippet showing how I am handling the meta titles and descriptions:

 
async head() {
    const article = await this.getArticle;
    const seoTitle = await this.getArticle.seoTitle,
          title = await this.getArticle.title,
          seoDescription = await this.getArticle.description;

    return {
        title: `"${
            seoTitle.length ? seoTitle : title
        }"`,
        meta: [{
            hid: "description",
            name: "description",
            content: `${
                seoDescription.length
                    ? seoDescription.slice(0, 50)
                    : seoDescription.slice(0, 50)
            }`,
        }],
    };
},
    

Answer №1

It is not possible to use async within the head tag as it typically deals with static values.

According to a response on this GitHub thread, you can utilize the asyncData method to access the necessary data for the head section.

head() {
  return { title: this.info.title }
},
async asyncData ({ params }) {
  return axios.get(`/post/${params.id}/info`)
    .then((res) => {
      return {
        info: res.data.info
      }
    }).catch((err) => {
      console.log(err)
  })
},

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Authorization Header is added just once during an AJAX CORS request

I am making calls to my RESTful API from JavaScript in a CORS scenario. To send my POST authenticated request, I am utilizing JQuery. Below is an example: function postCall(requestSettings, includeAccessToken) { requestSettings.type = 'POST& ...

Guide to developing a universal store extension

I've been attempting to create a reactive global $store object using a plugin, but so far I have not been successful in getting it to function as intended. store.ts: import {reactive} from "vue"; export default { install: (app:any, opt ...

I'm curious about how to properly escape single quotes when passing a variable in a Java argument call using Karate DSL. Can you help

As part of our API project at work, I am looking to incorporate database calls into our end-to-end process. One challenge I am facing is how to handle single quotes within a variable that is passed as an argument in an assert method. I have attempted the f ...

Tips on effectively utilizing dynamic data with Google Charts

I am working on creating a dynamic chart using Google Charts with multiple CSV files. I want to display a different chart depending on the selection made by the user. The first file loads successfully and displays a chart, but the $("#selection").change(.. ...

The use of async components in Vue.js with named imports

I understand how to dynamically load components asynchronously in Vue. For example, instead of importing MyComponent directly: import MyComponent from '@/components/MyComponent' export default { components: { MyComponent } } We can use ...

Fixing Firefox Bug: How to Eliminate Non-Numeric Characters from "Number" Input Fields

Completing this task seems straightforward. I need to eliminate any non-numeric characters from an input field specified as type "number" in Firefox when a key is pressed. The code snippet provided: $("#field").on("keyup", function() { regex = /[\& ...

Select an image based on the input value provided

I'm new to coding and I'm attempting to replicate the search functionality of icomoon where typing a word displays related images. However, I'm facing an issue where I can't seem to get the value entered in the input field to trigger an ...

I am searching for a tool in ThreeJS that functions similar to AxisHelper, possibly a Helper class or utility

While working with Three.js, I have come across many helpful Helper classes that greatly simplify displaying and modifying the scene. However, there is one particular tool that I am struggling to find again. It is similar to the AxisHelper, but it includes ...

Invoke a PHP function by utilizing a JavaScript AJAX post call

I have been exploring various topics extensively, but I have not been able to find a solution. My objective is to create an HTML hyperlink that triggers a Javascript AJAX post request on a PHP page to execute a PHP function (potentially with any number of ...

Guide on setting up Sentry Vite-Plugin to upload sourcemaps within Quasar

Currently, I'm in the process of setting up error reporting for my Vue.js SPA application following Sentry's documentation. To enable Sentry to capture errors, a sourcemap is required due to minification during the build process, which Vite gener ...

Using Higher Order Components in React with TypeScript to pass a component as a prop

Exploring the steps outlined in this guide: https://reacttraining.com/react-router/web/example/auth-workflow. Attempting to replicate the code: const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props = ...

A method for displaying both the next and previous steps without relying on a switch case statement

I have an array list as follows: const data = [ { title: 'Title1', }, { title: 'Title2', }, { title: 'Title3', }, { title: 'Title4', ...

The authService is facing dependency resolution issues with the jwtService, causing a roadblock in the application's functionality

I'm puzzled by the error message I received: [Nest] 1276 - 25/04/2024 19:39:31 ERROR [ExceptionHandler] Nest can't resolve dependencies of the AuthService (?, JwtService). Please make sure that the argument UsersService at index [0] is availab ...

Installing Vuecli can streamline your development process and provide

Having trouble installing vue cli on my Ubuntu OS due to some errors. I have npm version 6.13.4 but it shows that I have 2.6.11. I've tried deleting cache and node modules, then reinstalling npm, but no luck. Any assistance would be appreciated. npm ...

Searching for specific values within data attributes using jQuery wildcards

I am currently utilizing the data_attribute on this page and have the following elements with data attributes. No. 1.<div class="row hidden" data-party-registration-source-type-id="1"> 2.<div class="row hidden" data-party-registration-source- ...

Storing the value from the INPUT field in the state of React is not permitted

I'm attempting to retrieve the user input value from the INPUT field and update it in the corresponding state. However, no matter what I type in the field, it doesn't get set to the state. createForm(x){ var dx = 'd'+x let da ...

Can JavaScript alter the Page Source Code?

Something that has caught my attention recently is the behavior of my website's AJAX implementation. When my site receives a response, it is inserted into div elements using the .innerHTML method. For example: $("#cont-btn") .click(function() { ...

Tips for utilizing two renderCell functions in a datagrid from Material UI without encountering duplication or repetition

Utilizing Material UI, I have designed a table to showcase my data. In this setup, I am required to use renderCell for two specific properties: 'level by user' and 'level by referent'. Issue: The problem arises when Material UI displa ...

What are alternative ways to add an HTML snippet to an existing file without relying on jQuery?

Is it possible to inject the entire content of an HTML file, including all tags, into a specific div using only JavaScript? Alternatively, would it be necessary to append each element individually and create a function for this purpose? ...

Create a server directory structure that populates multiple HTML dropdown lists using either jQuery or AJAX

As a novice navigating jQuery and Ajax, I find myself faced with a specific challenge. My current situation involves a structured set of directories on a server. My goal is to populate a dropdown dynamically with this file hierarchy. Upon click ...