Utilizing useSeoMeta with Asynchronous Data

I am working on a code snippet that fetches data from my Sanity CMS. My goal is to utilize the useSeoMeta function so that the title corresponds to the title retrieved from Sanity's Data.

const { data } = useAsyncData('category', () => sanity.fetch(
  query, { categoryId: route.params.id }
));

useSeoMeta({
      data,
      description: () => `${data.value[0].description}`,
      title: () => `${data.value[0].title} Card Prices & List`,
});

However, I encounter an issue where upon first click, the page fails to load. Subsequent clicks result in the title and description being displayed correctly. The initial error message states 

TypeError: Cannot read properties of null (reading '0')
, as the data has not yet been loaded.

vue.jsnuxt.js

Answer №1

Consider implementing a placeholder during the loading process

const { data } = useAsyncData('category', () => sanity.fetch(
  query, { categoryId: route.params.id }
));

useSeoMeta({
      data,
      description: () => `${data.value?.[0].description ?? 'Loading...' }`,
      title: () => `${data.value?.[0].title ?? 'Loading' } Card Prices & List`,
});

Alternatively, explore using top-level setup

<script setup>
const { data } = await useAsyncData('category', () => sanity.fetch(
  query, { categoryId: route.params.id }
));


useSeoMeta({
      data,
      description: () => `${data.value[0].description }`,
      title: () => `${data.value[0].title } Card Prices & List`,
});

</setup>

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

Guide to integrating Firebase Cloud Messaging (FCM) with Nuxt.js

Looking to integrate Google's Firebase Cloud Messaging (FCM) into my Nuxt.js application has led me to successfully install firebase, create a firebase.js plugin in the ./plugins folder, import and initialize firebase along with the messaging service. ...

javascriptvue.jsfirebase-cloud-messagingservice-workernuxt.js

The Vue template syntax utilizes double curly braces for incrementing values within must

Embarked on learning Vue.js recently and I am intrigued by the unusual behavior in my simple code. I cannot seem to figure out what is going wrong. I am attempting to increment a counter inside mustache syntax, but something strange is happening with this ...

javascriptvue.js

What could be causing the issue with my custom AlloyEditor UI extension?

After following the instructions in this guide to integrate alloyeditor as a WYSIWYG editor into Contentful, I successfully added the extension to my contentful staging space. However, despite copying the html page from the github repository and includin ...

javascriptvue.jscontentful

Transform date format using VueJS in JavaScript

I need to convert a date format from 19 Oct 2017 to 20171019. Is there a way to do this quickly? I am using FlatPickr in VueJs. Here is the code snippet for reference: import flatPickr from 'vue-flatpickr-component'; import 'flatpickr/dist/ ...

javascriptdatevue.jsflatpickr

Steps to show a particular row in a Vue.js API

I have a question about how to retrieve data from an API and display it in a textbox when the edit button on a specific row table is clicked. The data should include its own id along with other details. I apologize for sharing my code in this format, as I ...

javascriptvue.js

Steps for retrieving the selected text from a select element within a Vue component

Currently, I am utilizing Laravel 7 in conjunction with Vue.js 2. One of my current objectives is to capture the selected text when a user changes the chosen option. This snippet showcases my component structure: <template> <div class=" ...

vue.js

Error Encountered: unable to perform function on empty array

I've encountered an issue with my Vue JS 2.6.10 application after updating all packages via npm. Strangely, the app works perfectly fine in development environment but fails to function in production. The error message displayed is: Uncaught TypeErr ...

javascriptvue.jsnpm

The 'Vue' export is not available or defined (located at main.js?t=1667997788986:1:9)

I'm currently working on a project using Express and Vue js but encountering an issue: Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue.js?v=460a75c2' does not provide an export named 'Vue' (at main.js?t=16 ...

vue.jsexpress

While making a promise, an error occurred: TypeError - Unable to access the property '0' of null

I encountered an issue when trying to assign data from a function. The error appears in the console ((in promise) TypeError: Cannot read property '0'), but the data still shows on my application. Here is the code: <template> ...

javascriptvue.jsasynchronousasync-awaitpromise

"Implementing a timer feature in a Vuetify stepper component

I recently created a Vue app with a Vuetify stepper. I am trying to modify the steps so that they advance automatically every minute. Below is the code snippet: <template> <v-stepper v-model="e1"> <v-stepper-header> <v-ste ...

vue.jstimervuetify.jsstepper

Vue.js - The dissonance between data model and displayed output

Below is a simplified example of my issue: <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <script src="https://unpkg.com/vue/dist/vue.js"></script> ...

javascriptvue.js

Error: Unable to locate the module: Vue-Picture-BD-Marker

After successfully building my Vue project on my personal MacBook and running npm build without any issues, I encountered a problem when trying to deploy it on my CentOS server using Jenkins. The build failed with the following log: ERROR in ./node_modules ...

vue.jsnpmwebpackvuejs2module

What is the best way to incorporate Twitter Bootstrap CSS and Javascript into a basic VueJS project?

vue init webpack helloworld npm run dev I am thrilled to have a new Vue project. I am wondering how I can seamlessly incorporate the latest version of Twitter Bootstrap into my project, both CSS and Javascript. I attempted to install it using NPM and re ...

twitter-bootstrapnpmvue.js

Add a class by utilizing the :class attribute

I reviewed the documentation, but I am still struggling to implement this in my project. Initially, I simply want to display a specific class using vue.js that I can later modify dynamically. I just need to establish the default behavior of that class, so ...

javascripthtmlcssvue.jsvuejs2

Prevent global CSS from affecting VueJS by enabling only scoped CSS within components

Is there a way to eliminate all global CSS within a VueJS component and only allow scoped CSS? If so, how can this be achieved? Below is the issue I am trying to address: * { /* Global styles */ } /* Component-specific styles */ .items ul { } .i ...

cssvue.js

Is it possible to selectively disable filename hashing for certain resources, like images, in webpack?

While developing my website using Vue.js 2.6.2 and vue-cli, I faced a challenge with static resources, particularly images. Webpack was bundling them in the /img/ folder with hashed filenames like image_demo.25d62d92.png. This caused difficulties when tryi ...

vue.jswebpackassetsstaticresource

Encountered a problem while trying to inherit from the BrowserWindow class in

I utilized the https://github.com/SimulatedGREG/electron-vue template to craft a vue electron blueprint. Alongside the primary process index.js, I fashioned a file named MainWindow.js which holds the subsequent code: import { BrowserWindow } from 'el ...

javascriptnode.jsvue.jselectron

sending properties to dynamically loaded components

I'm struggling with transferring props between children and parent components using Vue Routes. Within my Layout component, I have a wrapper DIV structured like this: <template> <div class="container" v-bind:class="cssClass ...

javascriptvue.jsvuejs2vue-router

The VUE project encountered a critical error and failed to launch successfully

Does anyone know why the new VUE project is only showing an error when trying to run it? ...

vue.jsfrontend

Exploring the elements within array structures

I'm facing an issue with my API response. I'm trying to filter the links and check if the source and target name properties in each object match a specific string. However, I am having trouble accessing the name property. Any suggestions on how I ...

javascriptarraysvue.jsjavascript-objects