How to use NuxtErrorBoundary properly??
I have a component with the following code:
But there are no UI changes here. it does not make sense.
<template>
<NuxtErrorBoundary>
<template #error="{ error }"> Error here: {{ error }} </template>
<form
class="flex flex-col gap-4 rounded-lg border border-white px-2 py-4 lg:self-center"
:state="credentials"
@submit.prevent="handleLogin">
<!-- Some code over here -->
</form>
</NuxtErrorBoundary>
</template>
<script setup lang="ts">
const handleLogin = async () => {
throw createError({
statusCode: 400,
statusMessage: 'Something is wrong.'
})
}
</script><template>
<NuxtErrorBoundary>
<template #error="{ error }"> Error here: {{ error }} </template>
<form
class="flex flex-col gap-4 rounded-lg border border-white px-2 py-4 lg:self-center"
:state="credentials"
@submit.prevent="handleLogin">
<!-- Some code over here -->
</form>
</NuxtErrorBoundary>
</template>
<script setup lang="ts">
const handleLogin = async () => {
throw createError({
statusCode: 400,
statusMessage: 'Something is wrong.'
})
}
</script>But there are no UI changes here. it does not make sense.
