Property "product" was accessed during render but is not defined on instance

Question

Sorry for this stupid quastion i'm beginer, i found many answers about this problem, but still can't resolve my issue... Help me please...

I use Nuxt3, and just trying add component to a page, can't understand where my mistake..

The problem is that the page transition animation no longer works, but the component appeared

Component ServiceCard.vue:

<template>
  <div class="w-[600px] h-[400px]">
    <img
      src="@/assets/img/online-store.png"
      alt="oleksii vratskyi - online store project"
      width="600"
      height="400"
    />

    <h5 class="font-bold text-xl text-stone-300 mt-5">Online store</h5>
  </div>
</template>

<script setup>
const { product } = defineProps(["product"])
</script>

Page portfolio.vue:

<main>
  <div class="grid grid-cols-2 place-items-center text-stone-300">
    <div> 
      <ServiceCard :card="product" /> 
    </div>

    <div> 
      <ServiceCard :card="product" /> 
    </div>
  </div>
</main>

</template>

<script>
import { ServiceCard } from '@nuxt/schema';
</script>

Answer 1

I see some issues...

• portfolio.vue component doesn't have a product variable defined
• ServiceCard.vue expects product to be passed as prop, but portfolio.vue sends it a card prop instead
• not really causing problems, but it's a good idea to follow the vue file naming conventions. portfolio.vue should have 2 words and be capitalized ie. PortfolioView.vue
• you're gettin ServiceCard from @nuxt/schema, this doesn't seem right. Are you sure that's where the component is defined?

example

Component ServiceCard.vue:

<template>
  <div class="w-[600px] h-[400px]">
    <img
      src="@/assets/img/online-store.png"
      alt="oleksii vratskyi - online store project"
      width="600"
      height="400"
    />

    <h5 class="font-bold text-xl text-stone-300 mt-5">Online store</h5>

    <!-- use prop if you want to include in the child component... -->
    <h1>{{product}}</h1>
  </div>
</template>

<script setup>
// if you're not using the prop, you can remove this prop definition
const { product } = defineProps(["product"])

</script>

Page PortfolioView.vue:

<main>
  <div class="grid grid-cols-2 place-items-center text-stone-300">
    <div>
      <!-- if there's no `card` prop defined, no need to send it -->
      <ServiceCard/>
    </div>

    <div>
      <!-- ...but if you do want to pass a product -->
      <ServiceCard :product="product"/>
    </div>
  </div>
</main>

</template>

<script setup>
// use ⬆setup⬆ here too if you're using setup convention

// just guessing here, but probably where your component might be
import { ServiceCard } from './components/ServiceCard .vue';

// you can define a product here if you want to pass it to the child component
const product = {
  name: "such wow"
}
</script>