@dargmuesli/nuxt-vio 2.0.0-beta.1 → 2.0.0-beta.2

package/app.config.ts

@@ -1,7 +1,5 @@
 import { useSeoMeta } from '@unhead/vue'
 
-import { SITE_NAME } from './utils/constants'
-
 export default defineAppConfig({
   legalNotice: undefined as
     | {
@@ -47,7 +45,9 @@ export default defineAppConfig({
         }
       }
     | undefined,
-  seoMeta: undefined as Parameters<typeof useSeoMeta>[0] | undefined,
+  seoMeta: {
+    twitterSite: '@dargmuesli',
+  } as Parameters<typeof useSeoMeta>[0] | undefined,
   siteName: SITE_NAME,
-  themeColor: undefined as string | undefined,
+  themeColor: '#202020' as string | undefined,
 })

package/components/VioApp.vue

@@ -1,20 +1,26 @@
 <template>
-  <div :data-is-loading="isLoading">
+  <div :data-is-loading="isLoading" data-testid="is-loading">
     <NuxtLayout>
-      <SeoKit :site-description="siteDescription" :language="locale" />
-      <OgImageStatic :alt="ogImageAlt" component="OgImage" />
-      <NuxtPage />
-      <CookieControl :locale="locale" />
+      <!-- `NuxtLayout` can't have mulitple child nodes (https://github.com/nuxt/nuxt/issues/21759) -->
+      <div>
+        <NuxtPage />
+        <CookieControl :locale="locale as Locale" />
+      </div>
     </NuxtLayout>
   </div>
 </template>
 
 <script setup lang="ts">
+import { Locale } from '@dargmuesli/nuxt-cookie-control/dist/runtime/types'
+
 export interface Props {
   siteDescription: string
   ogImageAlt: string
+  ogImageComponent?: string
 }
-withDefaults(defineProps<Props>(), {})
+const props = withDefaults(defineProps<Props>(), {
+  ogImageComponent: undefined,
+})
 
 const { locale } = useI18n()
 const cookieControl = useCookieControl()
@@ -36,9 +42,18 @@ watch(
       window.location.reload()
     }
   },
-  { deep: true }
+  { deep: true },
 )
+
 // initialization
+updateSiteConfig({
+  description: props.siteDescription,
+})
+defineOgImage({
+  alt: props.ogImageAlt,
+  component: props.ogImageComponent,
+  description: props.siteDescription,
+})
 useAppLayout()
 useFavicons()
 </script>

package/components/VioButton.vue

@@ -49,7 +49,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  (e: 'click'): void
+  click: []
 }>()
 
 // computations

package/components/VioError.vue

@@ -1,22 +1,31 @@
 <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
 const statusReason = computed(() => {
-  return status(props.statusCode, locale) || t('error')
+  return status(props.statusCode, locale.value) || t('error')
 })
 </script>
 

package/components/VioLink.vue

@@ -41,7 +41,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  (e: 'click'): void
+  click: []
 }>()
 
 const route = useRoute()

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/i18n.config.ts

@@ -0,0 +1,3 @@
+import { I18N_VUE_CONFIG } from './utils/constants'
+
+export default defineI18nConfig(() => I18N_VUE_CONFIG)

package/locales/de.json

@@ -0,0 +1,3 @@
+{
+  "globalLoading": "Lade..."
+}

package/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "globalLoading": "Loading..."
+}

package/nuxt.config.ts

@@ -1,14 +1,18 @@
 import { dirname, join } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
-import { LOCALES, SITE_NAME } from './utils/constants'
+import { I18N_MODULE_CONFIG, SITE_NAME } from './utils/constants'
 
 const currentDir = dirname(fileURLToPath(import.meta.url))
 
 const BASE_URL =
   'https://' +
   (process.env.NUXT_PUBLIC_STACK_DOMAIN ||
-    `${process.env.HOST || 'localhost'}:3000`)
+    `${process.env.HOST || 'localhost'}:${
+      !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
+        ? '3000'
+        : '3001'
+    }`)
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
@@ -24,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,
@@ -37,20 +41,16 @@ export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       googleAnalyticsId: '', // set via environment variable `NUXT_PUBLIC_GOOGLE_ANALYTICS_ID` only
-      ...{
-        siteName: SITE_NAME,
-        siteUrl: BASE_URL,
+      i18n: {
+        baseUrl: BASE_URL,
       },
+      isInProduction: process.env.NODE_ENV === 'production',
+      isTesting: false,
     },
   },
   typescript: {
     shim: false,
     strict: true,
-    tsConfig: {
-      vueCompilerOptions: {
-        htmlAttributes: [], // https://github.com/johnsoncodehk/volar/issues/1970#issuecomment-1276994634
-      },
-    },
   },
 
   // modules
@@ -105,24 +105,26 @@ export default defineNuxtConfig({
     logLevel: 'warning',
   },
   i18n: {
-    baseUrl: BASE_URL,
+    ...I18N_MODULE_CONFIG,
     defaultLocale: 'en', // Must be set for the default prefix_except_default prefix strategy.
     detectBrowserLanguage: {
       cookieSecure: true,
-      redirectOn: 'root',
-    },
-    locales: LOCALES,
-    vueI18n: {
-      fallbackWarn: false, // covered by linting
-      missingWarn: false, // covered by linting
     },
   },
   linkChecker: {
-    failOn404: false, // TODO: enable (https://github.com/harlan-zw/nuxt-seo-kit/issues/4#issuecomment-1434522124)
+    failOnError: 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,
+  },
+  sitemap: {
+    exclude: ['/api/**'],
+  },
   tailwindcss: {
     cssPath: join(currentDir, './assets/css/tailwind.css'),
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -8,18 +8,20 @@
   "engines": {
     "node": "20"
   },
-  "packageManager": "pnpm@8.4.0",
+  "packageManager": "pnpm@8.6.11",
   "files": [
     "assets",
     "components",
     "composables",
     "layouts",
+    "locales",
     "server",
     "pages",
     "plugins",
     "utils",
     "app.config.ts",
     "error.vue",
+    "i18n.config.ts",
     "nuxt.config.ts",
     "tailwind.config.ts"
   ],
@@ -31,41 +33,48 @@
     "preview": "nuxi preview .playground",
     "prepare": "pnpm husky install && pnpm nuxt prepare .playground",
     "lint": "pnpm lint:js && pnpm lint:ts && pnpm lint:style",
+    "lint:fix": "pnpm lint:js --fix && pnpm lint:ts --fix && pnpm lint:style --fix",
     "lint:js": "eslint --cache --ext .js,.ts,.vue --ignore-path .gitignore .",
     "lint:staged": "pnpm lint-staged",
     "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
     "lint:ts": "nuxt typecheck"
   },
   "dependencies": {
-    "@dargmuesli/nuxt-cookie-control": "5.8.5",
-    "@http-util/status-i18n": "0.6.2",
-    "@nuxtjs/html-validator": "1.2.5",
-    "@nuxtjs/i18n": "8.0.0-beta.10",
-    "@nuxtjs/tailwindcss": "6.6.7",
+    "@dargmuesli/nuxt-cookie-control": "6.1.5",
+    "@dargmuesli/nuxt-vio": "link:",
+    "@http-util/status-i18n": "0.7.0",
+    "@nuxtjs/html-validator": "1.5.2",
+    "@nuxtjs/i18n": "8.0.0-rc.1",
+    "@nuxtjs/tailwindcss": "6.8.0",
     "@tailwindcss/typography": "0.5.9",
-    "nuxt-seo-kit": "1.3.8",
-    "sweetalert2": "11.7.5",
+    "nuxt-seo-kit-module": "2.0.0-beta.9",
+    "sweetalert2": "11.7.20",
     "vue-gtag": "2.0.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.6.3",
-    "@commitlint/config-conventional": "17.6.3",
-    "@intlify/eslint-plugin-vue-i18n": "2.0.0",
+    "@commitlint/cli": "17.6.7",
+    "@commitlint/config-conventional": "17.6.7",
+    "@intlify/eslint-plugin-vue-i18n": "3.0.0-next.3",
     "@nuxtjs/eslint-config-typescript": "12.0.0",
-    "eslint": "8.40.0",
-    "eslint-config-prettier": "8.8.0",
+    "eslint": "8.46.0",
+    "eslint-config-prettier": "8.9.0",
     "eslint-plugin-nuxt": "4.0.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-yml": "1.5.0",
+    "eslint-plugin-prettier": "5.0.0",
+    "eslint-plugin-yml": "1.8.0",
     "husky": "8.0.3",
-    "lint-staged": "13.2.2",
-    "nuxt": "3.4.3",
-    "prettier": "2.8.8",
-    "stylelint": "15.6.1",
-    "stylelint-config-recommended-vue": "1.4.0",
-    "stylelint-config-standard": "33.0.0",
-    "stylelint-no-unsupported-browser-features": "6.1.0",
-    "typescript": "5.0.4",
-    "vue-tsc": "1.6.4"
+    "lint-staged": "13.2.3",
+    "nuxt": "3.6.5",
+    "prettier": "3.0.0",
+    "stylelint": "15.10.2",
+    "stylelint-config-recommended-vue": "1.5.0",
+    "stylelint-config-standard": "34.0.0",
+    "stylelint-no-unsupported-browser-features": "7.0.0",
+    "typescript": "5.1.6",
+    "vue-tsc": "1.8.8"
+  },
+  "pnpm": {
+    "overrides": {
+      "eslint-plugin-vue": "9.15.1"
+    }
   }
 }

package/plugins/gtag.client.ts

@@ -13,6 +13,6 @@ export default defineNuxtPlugin((nuxtApp) => {
         id: config.public.googleAnalyticsId,
       },
     },
-    router
+    router,
   )
 })

package/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

package/tailwind.config.ts

@@ -7,7 +7,7 @@ const heading = (theme: PluginAPI['theme']) =>
     fontWeight: theme('fontWeight.bold'),
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-  } as Record<string, string>)
+  }) as Record<string, string>
 
 const gray = colors.gray // or slate, zinc, neutral, stone
 

package/utils/constants.ts

@@ -1,16 +1,23 @@
-import { LocaleObject } from '@nuxtjs/i18n/dist/runtime/composables'
-
-export const CYPRESS_BASE_URL = 'http://localhost:3000'
-export const LOCALES: LocaleObject[] = [
-  {
-    code: 'en',
-    name: 'English',
-    iso: 'en', // Will be used as catchall locale by default.
-  },
-  {
-    code: 'de',
-    name: 'Deutsch',
-    iso: 'de',
-  },
-]
+export const I18N_MODULE_CONFIG = {
+  langDir: 'locales',
+  lazy: true,
+  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',
+    },
+  ],
+} // `langDir`, `lazy` and `locales` must be configured to extend a layer having lazy-loaded translations (https://v8.i18n.nuxtjs.org/guide/layers#locales)
+export const I18N_VUE_CONFIG = {
+  fallbackWarn: false, // covered by linting
+  missingWarn: false, // covered by linting
+}
 export const SITE_NAME = 'Vio'

package/utils/testing.ts

@@ -1,7 +0,0 @@
-export const isTesting = () => process.client && window.Cypress
-
-declare global {
-  interface Window {
-    Cypress: any
-  }
-}