feat: add AppError component

Author: davidstackio

playground/app.vue

@@ -3,6 +3,7 @@
 const nuxtifyConfig = useNuxtifyConfig()
 const dialog = useDialog()
 const toast = useToast()
+const errorMessage = useErrorMessage()
 
 // Page info
 useNuxtifySiteTitle()
@@ -11,6 +12,9 @@ useServerSeoMeta({
   description: `This is the ${nuxtifyConfig.brand?.name} playground.`,
 })
 
+// Component state
+errorMessage.value = 'This is an error message.'
+
 // Functions
 const clickDialog = () => {
   // Dialog
@@ -106,6 +110,16 @@ const clickToast = () => {
           </v-col>
         </v-row>
 
+        <!-- App error -->
+        <v-row>
+          <v-col cols="12">
+            <v-card class="pa-4">
+              <h2>AppError</h2>
+              <AppError />
+            </v-card>
+          </v-col>
+        </v-row>
+
         <!-- App logo override -->
         <v-row>
           <v-col cols="12">

src/runtime/components/app/AppError.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useErrorMessage } from '#imports'
+
+const errorMessage = useErrorMessage()
+const isDev = import.meta.dev
+</script>
+
+<template>
+  <v-alert
+    v-if="errorMessage"
+    type="error"
+    density="compact"
+    variant="text"
+    :icon="false"
+    class="text-body-2 pa-0"
+  >
+    {{ errorMessage }}
+
+    <!-- DEBUG -->
+    <div
+      v-if="isDev"
+      class="mt-2"
+    >
+      <h2 class="text-h6 text-black">
+        Debug
+      </h2>
+      <pre>{{ errorMessage }}</pre>
+    </div>
+  </v-alert>
+</template>