feat: add error component

components/VioError.vue

@@ -0,0 +1,28 @@
+<template>
+  <h1>{{ statusCode ? `${statusCode} - ` : '' }}{{ statusReason }}</h1>
+</template>
+
+<script setup lang="ts">
+import { status } from '@http-util/status-i18n'
+
+export interface Props {
+  statusCode?: number
+}
+const props = withDefaults(defineProps<Props>(), {
+  statusCode: undefined,
+})
+
+const { locale, t } = useI18n()
+
+// computations
+const statusReason = computed(() => {
+  return status(props.statusCode, locale) || t('error')
+})
+</script>
+
+<i18n lang="yaml">
+de:
+  error: Fehler
+en:
+  error: Error
+</i18n>

error.vue

@@ -0,0 +1,21 @@
+<template>
+  <NuxtLayout>
+    <VioError
+      :status-code="error?.statusCode ? +error?.statusCode : undefined"
+    />
+  </NuxtLayout>
+</template>
+
+<script setup lang="ts">
+export type Error = { statusCode: string }
+export interface Props {
+  error?: Error
+}
+const props = withDefaults(defineProps<Props>(), {
+  error: undefined,
+})
+
+useHead({
+  title: props.error?.statusCode?.toString(),
+})
+</script>

package.json

@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "@dargmuesli/nuxt-cookie-control": "5.4.0",
+    "@http-util/status-i18n": "0.6.2",
     "@nuxtjs/html-validator": "1.2.4",
     "@nuxtjs/i18n": "8.0.0-beta.10",
     "@nuxtjs/tailwindcss": "6.6.5",