Nuxt3组件引入后页面过渡动画失效及props未定义问题求助

一、渲染报错「Property "product" was accessed during render but is not defined on instance」的修复 #

1. 核心问题点 #

• 组件ServiceCard.vue定义接收的Props是product，但页面portfolio.vue中传递的是:card="product"，Props名称不匹配。
• portfolio.vue页面内未定义product变量，直接导致渲染时找不到该属性报错。
• 组件导入路径错误：import { ServiceCard } from '@nuxt/schema';，@nuxt/schema是Nuxt核心配置模块，并非组件存放路径。

修复后的代码 #

ServiceCard.vue（按需调整）

如果组件暂时不需要接收外部数据，可删除无用的Props定义：

<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>
// 不需要接收props则删除该行
// const { product } = defineProps(["product"])
</script>

portfolio.vue

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

      <div> 
        <ServiceCard /> 
      </div>
    </div>
  </main>
</template>

<script setup>
// 从组件文件正确导入
import ServiceCard from '@/components/ServiceCard.vue'
</script>

若确实需要传递product数据，需先在页面内定义变量再传递：

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

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

<script setup>
import ServiceCard from '@/components/ServiceCard.vue'
// 定义product示例数据
const product = { name: "示例产品", description: "产品描述" }
</script>

二、页面过渡动画失效修复 #

先完成上述报错修复（渲染异常会中断过渡逻辑），再检查以下配置：

1. 确保页面被<NuxtPage>包裹
   在app.vue中必须用<NuxtPage>组件承载页面内容，这是Nuxt3页面过渡的基础：

<template>
  <div>
    <NuxtPage />
  </div>
</template>

2. 配置页面过渡属性
   在portfolio.vue中直接设置页面过渡：

<script setup>
definePageMeta({
  transition: {
    name: 'fade',
    mode: 'out-in'
  }
})
</script>

然后在assets/css/main.css中添加过渡样式：

/* 淡入淡出过渡样式 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

3. 检查全局过渡配置
   确保nuxt.config.ts中未禁用页面过渡，默认配置如下：

export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' }
  }
})

内容的提问来源于stack exchange，提问作者Oleksii Vratskyi