@dargmuesli/nuxt-vio 1.12.0 → 1.14.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,7 +3,6 @@
     <NuxtLayout>
       <!-- `NuxtLayout` can't have mulitple child nodes (https://github.com/nuxt/nuxt/issues/21759) -->
       <div>
-        <SeoKit :site-description="siteDescription" :language="locale" />
         <NuxtPage />
         <CookieControl :locale="locale" />
       </div>
@@ -15,19 +14,17 @@
 export interface Props {
   siteDescription: string
   ogImageAlt: string
+  ogImageComponent?: string
 }
-const props = withDefaults(defineProps<Props>(), {})
+const props = withDefaults(defineProps<Props>(), {
+  ogImageComponent: undefined,
+})
 
 const { locale } = useI18n()
 const cookieControl = useCookieControl()
 
 const { loadingIds, indicateLoadingDone } = useLoadingDoneIndicator('app')
 
-// data
-const ogImageOptions = {
-  alt: props.ogImageAlt,
-}
-
 // computations
 const isLoading = computed(() => !!loadingIds.value.length)
 
@@ -47,7 +44,14 @@ watch(
 )
 
 // initialization
-defineOgImage(ogImageOptions)
+updateSiteConfig({
+  description: props.siteDescription,
+})
+defineOgImage({
+  alt: props.ogImageAlt,
+  component: props.ogImageComponent,
+  description: props.siteDescription,
+})
 useAppLayout()
 useFavicons()
 </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,
@@ -43,10 +43,6 @@ export default defineNuxtConfig({
       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: {
@@ -111,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)
     },
@@ -119,11 +128,13 @@ export default defineNuxtConfig({
   linkChecker: {
     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,
+  seoKit: {
     splash: false,
-    // url: BASE_URL,
+  },
+  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.12.0",
+  "version": "1.14.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,7 +67,7 @@
     "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": {

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'