@dargmuesli/nuxt-vio 1.11.7 → 1.12.0

package/components/VioApp.vue

@@ -4,7 +4,6 @@
       <!-- `NuxtLayout` can't have mulitple child nodes (https://github.com/nuxt/nuxt/issues/21759) -->
       <div>
         <SeoKit :site-description="siteDescription" :language="locale" />
-        <OgImageStatic :alt="ogImageAlt" component="OgImage" />
         <NuxtPage />
         <CookieControl :locale="locale" />
       </div>
@@ -17,13 +16,18 @@ export interface Props {
   siteDescription: string
   ogImageAlt: string
 }
-withDefaults(defineProps<Props>(), {})
+const props = withDefaults(defineProps<Props>(), {})
 
 const { locale } = useI18n()
 const cookieControl = useCookieControl()
 
 const { loadingIds, indicateLoadingDone } = useLoadingDoneIndicator('app')
 
+// data
+const ogImageOptions = {
+  alt: props.ogImageAlt,
+}
+
 // computations
 const isLoading = computed(() => !!loadingIds.value.length)
 
@@ -41,7 +45,9 @@ watch(
   },
   { deep: true },
 )
+
 // initialization
+defineOgImage(ogImageOptions)
 useAppLayout()
 useFavicons()
 </script>

package/components/VioError.vue

@@ -1,17 +1,26 @@
 <template>
-  <h1>{{ statusCode ? `${statusCode} - ` : '' }}{{ statusReason }}</h1>
+  <h1>{{ `${statusCode} - ${statusReason}` }}</h1>
+  <div>
+    {{ description }}
+  </div>
+  <div v-if="stack && !runtimeConfig.public.isInProduction" v-html="stack" />
 </template>
 
 <script setup lang="ts">
 import { status } from '@http-util/status-i18n'
 
 export interface Props {
-  statusCode?: number
+  statusCode: number
+  statusMessage?: string
+  description: string
+  stack?: string
 }
 const props = withDefaults(defineProps<Props>(), {
-  statusCode: undefined,
+  statusMessage: undefined,
+  stack: undefined,
 })
 
+const runtimeConfig = useRuntimeConfig()
 const { locale, t } = useI18n()
 
 // computations

package/error.vue

@@ -1,21 +1,23 @@
 <template>
   <NuxtLayout>
     <VioError
-      :status-code="error?.statusCode ? +error?.statusCode : undefined"
+      :status-code="error.statusCode"
+      :status-message="error.statusMessage"
+      :description="error.message"
+      :stack="error.stack"
     />
   </NuxtLayout>
 </template>
 
 <script setup lang="ts">
-export type Error = { statusCode: string }
+import { NuxtError } from 'nuxt/app'
+
 export interface Props {
-  error?: Error
+  error: NuxtError
 }
-const props = withDefaults(defineProps<Props>(), {
-  error: undefined,
-})
+const props = withDefaults(defineProps<Props>(), {})
 
 useHead({
-  title: props.error?.statusCode?.toString(),
+  title: `${props.error.statusCode} - ${props.error.message}`,
 })
 </script>

package/nuxt.config.ts

@@ -41,11 +41,12 @@ export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       googleAnalyticsId: '', // set via environment variable `NUXT_PUBLIC_GOOGLE_ANALYTICS_ID` only
+      isInProduction: process.env.NODE_ENV === 'production',
       isTesting: false,
       ...{
         siteName: SITE_NAME,
         siteUrl: BASE_URL,
-      },
+      }, // TODO: remove once http://localhost:3000/api/__site-config__/debug shows correct data without this extension.
     },
   },
   typescript: {
@@ -119,7 +120,10 @@ export default defineNuxtConfig({
     failOn404: false, // TODO: enable (https://github.com/harlan-zw/nuxt-seo-kit/issues/4#issuecomment-1434522124)
   },
   site: {
+    // debug: process.env.NODE_ENV === 'development',
+    // name: SITE_NAME,
     splash: false,
+    // url: BASE_URL,
   },
   tailwindcss: {
     cssPath: join(currentDir, './assets/css/tailwind.css'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "1.11.7",
+  "version": "1.12.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -68,5 +68,10 @@
     "stylelint-no-unsupported-browser-features": "7.0.0",
     "typescript": "5.1.6",
     "vue-tsc": "1.8.6"
+  },
+  "pnpm": {
+    "overrides": {
+      "nuxt-og-image": "2.0.11"
+    }
   }
 }