There seems to be an issue with displaying the meta information in a Nuxtjs project using this.$

I am facing an issue with meta information in a Vue page. When I try to access "this.$route.meta", it does not display any meta information. However, when I inspect the Vue page element, I can see that there is indeed meta information present. How can I solve this issue?

export default {
 watch: {
  $route() {
    console.log(this.$route.meta)
    }
   }
 }

export default {
  components: {
    Teacontent
  },
  head() {
    return {
      meta: [
        { hid: 'description', name: 'description', title: 'Tea Manage' }
      ]
    }
  }
}

Answer №1

Your search for the meta information was off track. The meta data for your Nuxt page is not located within the $route property, as this property contains a different type of meta information.

What you need to access is not this.$route.meta, but rather this.$metaInfo.meta:

export default {
  mounted() {
    console.log(this.$metaInfo.meta)
  },
  head() {
    return {
      meta: [{ hid: 'description', name: 'description', title: 'Tea Manage' }]
    }
  }
}

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

Click on the link or tab to update the marker location on the Google Map

Can you click on Tab 2 to change the marker/location, and then go back to Tab 1 to switch it back to the original location? [Links to Fiddle] http://jsfiddle.net/ye3x8/ function initialize() { var styles = [{ stylers: [{ saturati ...

gdal.vectorTranslate causing output files to be void

Attempting to use gdal-async in nodejs for converting vector files from geojson to dxf. const dsGeoJSON2 = gdal.open('./upload2/objects.geojson'); const out2 = gdal.vectorTranslate('./upload2/objects.dxf', dsGeoJSON2, ['-f', ...

The scroll event listener activates based on the distance I have scrolled

const processChatRead = useCallback(() => { const chatWindow = refEntries.current; if ( chatWindow.scrollTop > chatWindow.scrollHeight - 800 && activeRoom && conversations?.content?.length > 0 && ...

An error occurred: [object Object] does not contain the function 'bootstrapDatepicker'

After spending countless hours searching for a solution, I continue to encounter the dreaded 'Uncaught TypeError' without any successful resolutions. The issue seems to stem from a clash between tribe-events-ajax-calendar.js and foundation.min.j ...

Transferring cookies across subdomains

I am facing an issue with an ajax request going from one subdomain to another, for example from sub1.example.com to sub2.example.com. Despite having a cookie set for all domains (cookie domain='.example.com'), the cookie is not being sent to the ...

I am unable to display my JSON data in Next.js using a fetch request

I'm having trouble understanding the code, and it seems like the API is open to anyone since it's just a simple JSON. However, I keep getting an error: Error Message: Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit th ...

In Javascript, an error occurs when something is undefined

I've been grappling with a Javascript issue and seem to have hit a roadblock. In Firefox's console, I keep encountering an error message that says "info[last] is undefined," and it's leaving me puzzled. The problematic line appears to be nu ...

Save a canvas image directly to your WordPress media library or server

I'm working on integrating a feature that enables users to save a png created on a canvas element into the WordPress media library, or at least onto the server (which is an initial step before sharing the image on Facebook, as it requires a valid imag ...

Save the altered aircraft shapes as JSON files, utilizing the Three.js framework

I've been working on modifying the vertices of a plane geometry in order to create new shapes. However, I've run into an issue where when I export the modified geometry as JSON, the changes I made to the vertices are not included in the exported ...

Leveraging the power of AngularJS' ngAnimate for smooth transitions when deleting an item from the scope

I have a basic question: How can I utilize ngAnimate in AngularJS 1.2.x to trigger animations when removing an item from the scope? Here is an example Plunker for reference: http://plnkr.co/edit/tpl:FrTqqTNoY8BEfHs9bB0f?p=preview Code snippet: <bo ...

An abundance of AJAX requests inundating the server

While working on a straightforward AJAX request, I encountered an issue where the server is sending back 3 responses instead of just one (you can see the example in the attached image). Could someone provide insight into why this might be happening? var ...

When using Jquery, the search button consistently retrieves the same data upon the initial click event

How can I ensure that my Ajax call retrieves data from the remote database based on the updated search criteria every time I click the search button? Currently, the system retrieves results based on the initial search criteria even after I modify it and cl ...

Is it possible to have a page transition when clicking a form button

I've been experimenting with this on my website Everything is functioning well, except when I add data-ftrans="slide" to a form button. For example: <form action"http://google.com"> <button data-ftrans="slide" type="submit" style="h ...

Contact a relaxation service periodically to pause its operation

To continuously check the status of a webservice, I need to make a REST call every x seconds (3000 ms) until the desired result is obtained or until it has been attempted 12 times. The call should also stop once the expected status is received: function m ...

What is the best way to utilize the spread operator across several Vuex modules?

In my search for a solution, I came across another post suggesting that this approach would be effective. However, despite implementing it, I encountered the following error message: 'TypeError: Cannot convert undefined or null to object' comput ...

Implementing relative path 'fetch' in NextJs App Router

When attempting to retrieve data using fetch("/api/status"), the URL is only detected when utilizing the absolute path: fetch("http://localhost:3000/api/status"). This is happening without storing the path in a variable. ...

Adding a class to a TD element only when there is text in that TD as well as in other TD elements

I am facing a challenge where I need to add a new class to a td element, specifically the first one in the code snippet below. However, this should only happen if that td contains a certain number (e.g., "2") and if the next td contains some specific text ...

JavaScript - utilize regular expressions to check if the argument starts with a forward slash

Currently, I am utilizing nodejs for API testing purposes. To properly test the logic within this if statement, I am in search of a string that aligns with this specific regular expression. if (arg.match(/^\/.*/)) { // ... } Would anyone be able ...

How to Share Your Vuejs Component with the World by Publishing it on npm

I have recently developed a Vue.js 2 project using webpack which consists of 2 components. My goal is to share this project as an npm package so that the components can be easily reused in multiple projects. After publishing the project on npm with npm pu ...

efficiency of this algorithm

function checkSubset(array1, array2) { const set1 = new Set(array1); const set2 = new Set(array2); for (const element of set2) { if (!set1.has(element)) { return false; } } return true; } Can we consid ...