@dargmuesli/nuxt-vio 1.11.7 → 1.13.0

package/app.config.ts

@@ -1,19 +1,15 @@
 import { useSeoMeta } from '@unhead/vue'
 
-import { SITE_NAME } from './utils/constants'
-
 export default defineAppConfig({
   seoMeta: {
     twitterSite: '@dargmuesli',
   },
-  siteName: SITE_NAME,
   themeColor: '#202020',
 })
 
 declare module '@nuxt/schema' {
   interface AppConfigInput {
     seoMeta?: Parameters<typeof useSeoMeta>[0]
-    siteName: string
     themeColor?: string
   }
 }

package/components/VioApp.vue

@@ -3,8 +3,6 @@
     <NuxtLayout>
       <!-- `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,7 +15,7 @@ export interface Props {
   siteDescription: string
   ogImageAlt: string
 }
-withDefaults(defineProps<Props>(), {})
+const props = withDefaults(defineProps<Props>(), {})
 
 const { locale } = useI18n()
 const cookieControl = useCookieControl()
@@ -41,7 +39,15 @@ watch(
   },
   { deep: true },
 )
+
 // initialization
+updateSiteConfig({
+  description: props.siteDescription,
+})
+defineOgImage({
+  alt: props.ogImageAlt,
+  description: props.siteDescription,
+})
 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

@@ -1,7 +1,7 @@
 import { dirname, join } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
-import { LOCALES, SITE_NAME } from './utils/constants'
+import { SITE_NAME } from './utils/constants'
 
 const currentDir = dirname(fileURLToPath(import.meta.url))
 
@@ -28,12 +28,12 @@ export default defineNuxtConfig({
       title: SITE_NAME, // fallback data to prevent invalid html at generation
     },
   },
-  extends: ['nuxt-seo-kit'],
   modules: [
     '@dargmuesli/nuxt-cookie-control',
     '@nuxtjs/html-validator',
     '@nuxtjs/i18n',
     '@nuxtjs/tailwindcss',
+    'nuxt-seo-kit-module',
   ],
   nitro: {
     compressPublicAssets: true,
@@ -41,11 +41,8 @@ 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,
-      },
     },
   },
   typescript: {
@@ -110,7 +107,20 @@ export default defineNuxtConfig({
     detectBrowserLanguage: false, // Enabling browser language detection does not generate (!) other languages than the default one.
     langDir: 'locales',
     lazy: true,
-    locales: LOCALES,
+    locales: [
+      {
+        code: 'en',
+        file: 'en.json',
+        name: 'English',
+        iso: 'en', // Will be used as catchall locale by default.
+      },
+      {
+        code: 'de',
+        file: 'de.json',
+        name: 'Deutsch',
+        iso: 'de',
+      },
+    ],
     vueI18n: {
       fallbackWarn: false, // TODO: don't show incorrect warnings (https://github.com/intlify/vue-i18n-next/issues/776)
     },
@@ -118,9 +128,14 @@ export default defineNuxtConfig({
   linkChecker: {
     failOn404: false, // TODO: enable (https://github.com/harlan-zw/nuxt-seo-kit/issues/4#issuecomment-1434522124)
   },
-  site: {
+  seoKit: {
     splash: false,
   },
+  site: {
+    debug: process.env.NODE_ENV === 'development',
+    name: SITE_NAME,
+    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.13.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -44,14 +44,14 @@
     "@nuxtjs/i18n": "8.0.0-beta.10",
     "@nuxtjs/tailwindcss": "6.8.0",
     "@tailwindcss/typography": "0.5.9",
-    "nuxt-seo-kit": "1.3.9",
+    "nuxt-seo-kit-module": "2.0.0-beta.5",
     "sweetalert2": "11.7.20",
     "vue-gtag": "2.0.1"
   },
   "devDependencies": {
     "@commitlint/cli": "17.6.7",
     "@commitlint/config-conventional": "17.6.7",
-    "@intlify/eslint-plugin-vue-i18n": "3.0.0-next.2",
+    "@intlify/eslint-plugin-vue-i18n": "3.0.0-next.3",
     "@nuxtjs/eslint-config-typescript": "12.0.0",
     "eslint": "8.45.0",
     "eslint-config-prettier": "8.8.0",
@@ -67,6 +67,11 @@
     "stylelint-config-standard": "34.0.0",
     "stylelint-no-unsupported-browser-features": "7.0.0",
     "typescript": "5.1.6",
-    "vue-tsc": "1.8.6"
+    "vue-tsc": "1.8.8"
+  },
+  "pnpm": {
+    "overrides": {
+      "nuxt-og-image": "2.0.11"
+    }
   }
 }

package/utils/constants.ts

@@ -1,18 +1 @@
-import { LocaleObject } from '@nuxtjs/i18n/dist/runtime/composables'
-
-export const CYPRESS_BASE_URL = 'http://localhost:3000'
-export const LOCALES: LocaleObject[] = [
-  {
-    code: 'en',
-    file: 'en.json',
-    name: 'English',
-    iso: 'en', // Will be used as catchall locale by default.
-  },
-  {
-    code: 'de',
-    file: 'de.json',
-    name: 'Deutsch',
-    iso: 'de',
-  },
-]
 export const SITE_NAME = 'Vio'