<template>
  <div dir="ltr" class="text-left">
    <h1 dir="ltr" class="text-left">Error {{ error.statusCode }}</h1>
    <p dir="ltr" class="text-left" v-html="error.message"></p>
    <p dir="ltr" class="text-left" v-text="error.stack"></p>
  </div>
</template>

<script>
export default {
  props: {
    error: {
      type: Object,
      required: true,
    },
  },
}; 
</script>

<!-- <script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps({
  error: Object as () => NuxtError
})

onMounted(()=>{
  console.info('mounted : error page')
})

const handleError = () => clearError({ redirect: '/' })
</script>

<template>
  <div>
    <h2>{{ error.statusCode }}</h2>
    <button @click="handleError">Clear errors</button>
  </div>
</template> -->