Nuxt•2y ago

Nuxt 3 says 'product' is not defined but it is.

Here is a reproduction https://stackblitz.com/edit/github-bqbsvw?file=pages%2Fproducts%2F%5Bid%5D.vue I am following along with https://www.youtube.com/watch?v=L9suY4qAFrQ&list=PL4cUxeGkcC9haQlqdCQyYmL_27TesCGPC&index=10 and my code should be working, if I comment out any mention of product and refresh it works fine, if I then uncomment them then it will work for a bit before saying that 'product is undefined'. What am I doing wrong?

The Net Ninja

YouTube

Nuxt 3 Crash Course #10 - Error Pages

In this lesson you'll learn how to make a custom error page for the application. ⭐⭐ Watch the whole course now (without ads) on Net Ninja Pro: https://netninja.dev/p/nuxt-3-crash-course 🐱‍💻 Access the course files on GitHub: Course files - https://github.com/iamshaunjp/nuxt-3-tutorial 🐱‍💻 Vue 3 Tutorial: On Net Ninja Pro - https://netninja.de...

10 Replies

Unknown User•2y ago

Message Not Public

KittensmakemesmileOP•2y ago

That doesn't seem to work for me. https://stackblitz.com/edit/nuxt-starter-nwtucc Can you share your fork with updated code?

Cue•2y ago

What are you hoping to achieve by defining title, description, image, etc, in definePageMeta?

KittensmakemesmileOP•2y ago

To define the page meta dynamically. I honestly didn't have much of a plan really, I'm new to nuxt 3 and the compostion api and seeing how things work.

Cue•2y ago

I see. And where are you going to use those values?

KittensmakemesmileOP•2y ago

I just want to get the products to render on the page, it's not that deep for me tbh. Without an error.

KittensmakemesmileOP•2y ago

Here is a reddit post I made with an updated reproduction. https://www.reddit.com/r/Nuxt/comments/159thgc/nuxt_says_the_product_is_not_defined_but_it_is/

r/Nuxt - Nuxt says the 'product' is not defined but it is

1 vote and 8 comments so far on Reddit

KittensmakemesmileOP•2y ago

It should called the API and render the details of the call into the page. That's it. It does that but it throws an error saying that "product" is undefined. To the point that the app crashes even when I;m not on the page. There isn't any more detail than that. Everything else can be removed, I don't really care, I just want the fetch to work as it should.

Cue•2y ago

Correct, it does work as it should. You’re using definePageMeta incorrectly, which in turn throws error.

KittensmakemesmileOP•2y ago

I see! Thanks for that you're amazing! For those that may find this later here is what I have learned: definePageMeta (https://nuxt.com/docs/guide/directory-structure/pages/#page-metadata) has nothing to do with the page metadata, at least from what I gather from the docs, in fact, they have an example that shows that defining SEO data inside of it will cause an error

<script setup lang="ts">
import { someData } from '~/utils/example'

const title = ref('')

definePageMeta({
  title,  // This will create an error
  someData
})
</script>

<script setup lang="ts">
import { someData } from '~/utils/example'

const title = ref('')

definePageMeta({
  title,  // This will create an error
  someData
})
</script>

What I wanted to use was useSeoMeta

useSeoMeta({
  title: product?.value.title,
  description: product?.value.description,
  ogImage: product?.value.image,
  ogDescription: product?.value.description,
  url: "https://nuxtjs.org",
});

useSeoMeta({
  title: product?.value.title,
  description: product?.value.description,
  ogImage: product?.value.image,
  ogDescription: product?.value.description,
  url: "https://nuxtjs.org",
});

https://nuxt.com/docs/api/composables/use-seo-meta Which produces the expected results. You're the best! Thanks!

Gaming

Programming

Nuxt 3 says 'product' is not defined but it is.