fix(nuxt): avoid destructuring error prop (works around upstream bug)

[Lehoczky]

🔗 Linked issue

Fixes #20789

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This regression is probably caused by the changes regarding the experimental prop destructuring in Vue 3.3, which might not cover the edge case where someone is using destructuring without enabling this new experimental feature, although I haven't look really deep into this.

Fortunately it seems like we can avoid this bug by using a props variable and destructuring it later. This way the error object should still lose it's reactivity but now the compiled output is valid.

How I tested:

In the playground I changed app.vue to:

<script setup lang="ts"></script>

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

<style scoped></style>

Added an index page in pages/index.vue:

<template>
  <div>asd</div>
</template>

And navigated to a random url, like /this-does-not-exist, to get to the error page. Without changes I was able to reproduce the error in the linked ticket, but after the changes it works fine.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[Lehoczky]

Also feel free to close this if we want to wait for an upstream fix, this is really just a fast band aid solution for nuxt.

[danielroe]

Perfect - thanks!

[Lehoczky]

@danielroe I created an upsteam issue: vuejs/core#8289