@dargmuesli/nuxt-vio 19.0.0 → 20.0.0-beta.1

package/app/app.config.ts

@@ -5,55 +5,57 @@ export default defineAppConfig({
   },
 })
 
-export type AppConfig = {
-  vio: {
-    pages?: {
-      legalNotice?: {
-        contact: {
-          email: string
-        }
-        responsibility: {
-          address: {
-            city: string
-            name: string
-            street: string
-          }
-        }
-        tmg: {
-          address: {
-            city: string
-            name: string
-            street: string
+declare module 'nuxt/schema' {
+  interface AppConfig {
+    vio: {
+      pages?: {
+        legalNotice?: {
+          contact: {
+            email: string
           }
-        }
-      }
-      privacyPolicy?: {
-        hostingCdn?: {
-          external: {
+          responsibility: {
             address: {
               city: string
               name: string
               street: string
             }
           }
-        }
-        mandatoryInfo?: {
-          responsible: {
+          tmg: {
             address: {
               city: string
-              email: string
               name: string
               street: string
             }
           }
         }
+        privacyPolicy?: {
+          hostingCdn?: {
+            external: {
+              address: {
+                city: string
+                name: string
+                street: string
+              }
+            }
+          }
+          mandatoryInfo?: {
+            responsible: {
+              address: {
+                city: string
+                email: string
+                name: string
+                street: string
+              }
+            }
+          }
+        }
       }
-    }
-    server?: {
-      middleware: {
-        headers: Record<string, string>
+      server?: {
+        middleware: {
+          headers: Record<string, string>
+        }
       }
+      themeColor?: string
     }
-    themeColor?: string
   }
 }

package/app/components/vio/_/VioApp.vue

@@ -16,26 +16,24 @@ const props = withDefaults(defineProps<Props>(), {
   ogImageComponent: undefined,
 })
 
-const { $dayjs } = useNuxtApp()
-const { locale, t } = useI18n()
+const { t } = useI18n()
+const timeZone = useTimeZone()
 
 const { loadingIds, indicateLoadingDone } = useLoadingDoneIndicator('app')
 
 // methods
 const initialize = () => {
-  $dayjs.locale(locale.value)
-
   if (import.meta.client) {
-    const cookieTimezone = useCookie(TIMEZONE_COOKIE_NAME, {
-      // default: () => undefined, // setting `default` on the client side only does not write the cookie
-      httpOnly: false,
-      sameSite: 'strict',
-      secure: true,
-    })
-    // @ts-expect-error `tz` should be part of `$dayjs` (https://github.com/iamkun/dayjs/issues/2106)
-    cookieTimezone.value = $dayjs.tz.guess()
+    saveTimeZoneAsCookie()
   }
 }
+const saveTimeZoneAsCookie = () =>
+  (useCookie(TIMEZONE_COOKIE_NAME, {
+    // default: () => undefined, // setting `default` on the client side only does not write the cookie
+    httpOnly: false,
+    sameSite: 'strict',
+    secure: true,
+  }).value = timeZone)
 
 // computations
 const isLoading = computed(() => !!loadingIds.value.length)

package/app/components/vio/_/VioTime.vue

@@ -0,0 +1,35 @@
+<template>
+  <NuxtTime
+    v-bind="forwardedProps"
+    :locale="props.locale || defaultLocale"
+    :time-zone="props.timeZone || defaultTimeZone"
+  />
+</template>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { useForwardProps } from 'reka-ui'
+
+// TODO: use imported type (https://github.com/nuxt/nuxt/issues/29757)
+import type { NuxtTimeProps } from '#app'
+
+const { locale: defaultLocale } = useI18n()
+const defaultTimeZone = useTimeZone()
+
+const props = withDefaults(defineProps<NuxtTimeProps>(), {
+  // ...dateTimeFormatOptions, TODO: use shared options
+  day: 'numeric',
+  hour: 'numeric',
+  locale: undefined,
+  minute: 'numeric',
+  month: 'short',
+  relative: undefined,
+  timeZone: undefined,
+  timeZoneName: undefined,
+  weekday: undefined,
+  year: 'numeric',
+})
+
+const delegatedProps = reactiveOmit(props, 'locale', 'timeZone')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/app/components/vio/page/VioPageLegalNotice.vue

@@ -1,53 +1,72 @@
 <template>
   <VioLayoutProse class="m-auto">
     <h1>{{ title }}</h1>
-    <h2>{{ t('tmg') }}</h2>
-    <address>
-      <slot v-if="$slots.tmgAddress" name="tmgAddress" />
-      <i18n-t v-else keypath="tmgAddress">
-        <template #br>
-          <br />
-        </template>
-        <template #city>
-          {{ appConfig.vio.pages.legalNotice.tmg.address.city }}
-        </template>
-        <template #name>
-          {{ appConfig.vio.pages.legalNotice.tmg.address.name }}
-        </template>
-        <template #street>
-          {{ appConfig.vio.pages.legalNotice.tmg.address.street }}
-        </template>
-      </i18n-t>
-    </address>
 
-    <h2>{{ t('contact') }}</h2>
-    <p>
-      <slot v-if="$slots.contactEmail" name="contactEmail" />
-      <span v-else>
-        {{
-          t('email', { email: appConfig.vio.pages.legalNotice.contact.email })
-        }}
-      </span>
-    </p>
+    <section
+      v-if="appConfig.vio.pages?.legalNotice"
+      :aria-labelledby="templateIdTmg"
+    >
+      <h2 :id="templateIdTmg">{{ t('tmg') }}</h2>
+      <address>
+        <slot v-if="$slots.tmgAddress" name="tmgAddress" />
+        <i18n-t v-else keypath="tmgAddress">
+          <template #br>
+            <br />
+          </template>
+          <template #city>
+            {{ appConfig.vio.pages.legalNotice.tmg.address.city }}
+          </template>
+          <template #name>
+            {{ appConfig.vio.pages.legalNotice.tmg.address.name }}
+          </template>
+          <template #street>
+            {{ appConfig.vio.pages.legalNotice.tmg.address.street }}
+          </template>
+        </i18n-t>
+      </address>
+    </section>
 
-    <h2>{{ t('responsibility') }}</h2>
-    <address>
-      <slot v-if="$slots.responsibilityAddress" name="responsibilityAddress" />
-      <i18n-t v-else keypath="responsibilityAddress">
-        <template #br>
-          <br />
-        </template>
-        <template #city>
-          {{ appConfig.vio.pages.legalNotice.responsibility.address.city }}
-        </template>
-        <template #name>
-          {{ appConfig.vio.pages.legalNotice.responsibility.address.name }}
-        </template>
-        <template #street>
-          {{ appConfig.vio.pages.legalNotice.responsibility.address.street }}
-        </template>
-      </i18n-t>
-    </address>
+    <section
+      v-if="appConfig.vio.pages?.legalNotice"
+      :aria-labelledby="templateIdContact"
+    >
+      <h2 :id="templateIdContact">{{ t('contact') }}</h2>
+      <p>
+        <slot v-if="$slots.contactEmail" name="contactEmail" />
+        <span v-else>
+          {{
+            t('email', { email: appConfig.vio.pages.legalNotice.contact.email })
+          }}
+        </span>
+      </p>
+    </section>
+
+    <section
+      v-if="appConfig.vio.pages?.legalNotice"
+      :aria-labelledby="templateIdResponsibility"
+    >
+      <h2 :id="templateIdResponsibility">{{ t('responsibility') }}</h2>
+      <address>
+        <slot
+          v-if="$slots.responsibilityAddress"
+          name="responsibilityAddress"
+        />
+        <i18n-t v-else keypath="responsibilityAddress">
+          <template #br>
+            <br />
+          </template>
+          <template #city>
+            {{ appConfig.vio.pages.legalNotice.responsibility.address.city }}
+          </template>
+          <template #name>
+            {{ appConfig.vio.pages.legalNotice.responsibility.address.name }}
+          </template>
+          <template #street>
+            {{ appConfig.vio.pages.legalNotice.responsibility.address.street }}
+          </template>
+        </i18n-t>
+      </address>
+    </section>
 
     <h3>{{ t('liabilityContentTitle') }}</h3>
     <p>{{ t('liabilityContentDescription1') }}</p>
@@ -73,6 +92,11 @@ const { t } = useI18n()
 
 // data
 const title = t('title')
+
+// template
+const templateIdContact = useId()
+const templateIdResponsibility = useId()
+const templateIdTmg = useId()
 </script>
 
 <i18n lang="yaml">

package/app/components/vio/page/VioPagePrivacyPolicy.vue

@@ -44,7 +44,11 @@
           </section>
         </section>
       </li>
-      <li v-if="isEnabled.hostingCdn">
+      <li
+        v-if="
+          isEnabled.hostingCdn && appConfig.vio.pages?.privacyPolicy?.hostingCdn
+        "
+      >
         <section>
           <h2>{{ t('hostingCdn') }}</h2>
 
@@ -102,7 +106,12 @@
             <p>{{ t('mandatoryInfoPrivacyDescription3') }}</p>
           </section>
 
-          <section v-if="isEnabled.mandatoryInfo.responsible">
+          <section
+            v-if="
+              isEnabled.mandatoryInfo.responsible &&
+              appConfig.vio.pages?.privacyPolicy?.mandatoryInfo
+            "
+          >
             <h3>{{ t('mandatoryInfoResponsibleTitle') }}</h3>
             <p>{{ t('mandatoryInfoResponsibleDescription1') }}</p>
             <address>

package/app/composables/timeZone.ts

@@ -0,0 +1,10 @@
+export const useTimeZone = () =>
+  useNuxtApp().ssrContext?.event.context.$timeZone ||
+  useCookie(TIMEZONE_COOKIE_NAME, {
+    httpOnly: false,
+    sameSite: 'strict',
+    secure: true,
+  }).value ||
+  (import.meta.client
+    ? Intl.DateTimeFormat().resolvedOptions().timeZone
+    : undefined)

package/nuxt.config.ts

@@ -67,7 +67,7 @@ export default defineNuxtConfig(
               nuxtConfigSecurityHeaders.contentSecurityPolicy = defu(
                 {
                   'script-src-elem': [
-                    "'unsafe-inline'", // nuxt-color-mode (https://github.com/nuxt-modules/color-mode/issues/266), runtimeConfig (static)
+                    "'unsafe-inline'", // TODO: remove (https://github.com/Baroshem/nuxt-security/pull/659)
                   ],
                 },
                 VIO_GET_CSP({ siteUrl: new URL(SITE_URL) }),
@@ -123,9 +123,6 @@ export default defineNuxtConfig(
       },
 
       // modules
-      colorMode: {
-        classSuffix: '',
-      },
       cookieControl: {
         cookies: {
           necessary: [

package/package.json

@@ -5,24 +5,23 @@
     "@heroicons/vue": "2.2.0",
     "@http-util/status-i18n": "0.9.0",
     "@intlify/eslint-plugin-vue-i18n": "4.1.0",
-    "@nuxt/devtools": "3.0.1",
+    "@nuxt/devtools": "3.1.0",
     "@nuxt/eslint": "1.10.0",
     "@nuxt/image": "2.0.0",
-    "@nuxtjs/color-mode": "3.5.2",
+    "@nuxtjs/color-mode": "4.0.0",
     "@nuxtjs/html-validator": "2.1.0",
     "@nuxtjs/i18n": "10.2.0",
     "@nuxtjs/seo": "3.2.2",
     "@pinia/nuxt": "0.11.3",
     "@tailwindcss/forms": "0.5.10",
     "@tailwindcss/typography": "0.5.19",
-    "@tailwindcss/vite": "4.1.16",
+    "@tailwindcss/vite": "4.1.17",
     "@types/lodash-es": "4.17.12",
     "@urql/core": "6.0.1",
     "@urql/vue": "2.0.0",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
     "clipboardy": "5.0.0",
-    "dayjs": "2.0.0-alpha.4",
     "eslint": "9.39.1",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-compat": "6.0.2",
@@ -30,7 +29,7 @@
     "eslint-plugin-yml": "1.19.0",
     "globals": "16.5.0",
     "jiti": "2.6.1",
-    "jose": "6.1.0",
+    "jose": "6.1.1",
     "nuxt-gtag": "4.1.0",
     "nuxt-security": "2.4.0",
     "sweetalert2": "11.26.3",
@@ -40,22 +39,24 @@
     "@types/node": "24.10.0",
     "@urql/devtools": "2.0.3",
     "@urql/exchange-graphcache": "8.1.0",
+    "@vueuse/core": "14.0.0",
     "consola": "3.4.2",
     "defu": "6.1.4",
     "h3": "1.15.4",
     "lodash-es": "4.17.21",
-    "nuxt": "4.2.0",
+    "nuxt": "4.2.1",
     "pinia": "3.0.4",
     "prettier": "3.6.2",
     "prettier-plugin-tailwindcss": "0.7.1",
+    "reka-ui": "2.6.0",
     "serve": "14.2.5",
-    "sharp": "0.34.4",
+    "sharp": "0.34.5",
     "stylelint": "16.25.0",
     "stylelint-config-recommended-vue": "1.6.1",
     "stylelint-config-standard": "39.0.1",
     "stylelint-no-unsupported-browser-features": "8.0.5",
-    "tailwindcss": "4.1.16",
-    "vue": "3.5.22",
+    "tailwindcss": "4.1.17",
+    "vue": "3.5.24",
     "vue-router": "4.6.3"
   },
   "engines": {
@@ -106,5 +107,5 @@
     "start:static": "serve playground/.output/public --ssl-cert ./.config/certificates/ssl.crt --ssl-key ./.config/certificates/ssl.key"
   },
   "type": "module",
-  "version": "19.0.0"
+  "version": "20.0.0-beta.1"
 }

package/server/middleware/headers.ts

@@ -1,5 +1,7 @@
+import type { AppConfig } from 'nuxt/schema'
+
 export default defineEventHandler(async (event) => {
-  const config = useAppConfig() as AppConfig
+  const config = useAppConfig(event) as AppConfig
 
   if (!config.vio.server) return
 

package/server/plugins/security.ts

@@ -3,6 +3,7 @@ import type { NuxtOptions } from 'nuxt/schema'
 
 // remove invalid `'none'`s and duplicates
 export const cleanupCsp = (
+  // @ts-expect-error https://github.com/Baroshem/nuxt-security/pull/661
   nuxtSecurityConfiguration: Partial<NuxtOptions['security']>,
 ) => {
   if (
@@ -27,6 +28,7 @@ export const cleanupCsp = (
 }
 
 export default defineNitroPlugin((nitroApp) => {
+  // @ts-expect-error https://github.com/Baroshem/nuxt-security/pull/661
   nitroApp.hooks.hook('nuxt-security:routeRules', async (routeRules) => {
     const { siteUrlTyped: siteUrl } = useSiteUrl()
 

package/{shared → server}/utils/site.ts

@@ -4,6 +4,6 @@ export const useSiteUrl = () => {
 
   return {
     siteUrl,
-    siteUrlTyped: new URL(siteUrl), // eslint-disable-line compat/compat
+    siteUrlTyped: new URL(siteUrl),
   }
 }

package/shared/utils/form.ts

@@ -1,5 +1,6 @@
 import type { Validation } from '@vuelidate/core'
 import { consola } from 'consola'
+import type { Ref } from 'vue'
 
 export const isFormValid = async ({
   v$,

package/shared/utils/networking.ts

@@ -1,7 +1,10 @@
 import type { CombinedError } from '@urql/core'
 import type { H3Event } from 'h3'
+import { computed, reactive } from 'vue'
 import type { Ref } from 'vue'
 
+import type { ApiData, BackendError } from '../types/api'
+
 export const getApiDataDefault = (): ApiData =>
   computed(() =>
     reactive({

package/shared/utils/nuxt.ts

@@ -1,3 +1,5 @@
+import type { defineNuxtConfig } from 'nuxt/config'
+
 import { I18N_MODULE_CONFIG } from './constants'
 
 export const VIO_NUXT_BASE_CONFIG = ({

package/shared/utils/utils.ts

@@ -1,4 +1,4 @@
-import type { RouteLocationRaw } from '#vue-router'
+import type { RouteLocationRaw } from 'vue-router'
 
 export const append = (path: string, pathToAppend?: RouteLocationRaw) =>
   path + (path.endsWith('/') ? '' : '/') + (pathToAppend ?? '')

package/app/composables/dateTime.ts

@@ -1,9 +0,0 @@
-import type { Dayjs } from 'dayjs'
-
-export const useDateTime = () => {
-  const { $dayjs } = useNuxtApp()
-  const timezone = getTimezone()
-
-  return (dateTime?: string | number | Dayjs | Date | null) =>
-    $dayjs(dateTime).tz(timezone)
-}

package/app/plugins/dayjs.ts

@@ -1,30 +0,0 @@
-import dayjs from 'dayjs'
-import type { DayjsFn } from 'dayjs'
-
-import 'dayjs/locale/de'
-
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
-import localizedFormat from 'dayjs/plugin/localizedFormat'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import timezone from 'dayjs/plugin/timezone'
-import utc from 'dayjs/plugin/utc'
-
-export default defineNuxtPlugin((_nuxtApp) => {
-  dayjs.extend(isSameOrBefore)
-  dayjs.extend(localizedFormat)
-  dayjs.extend(relativeTime)
-  dayjs.extend(timezone)
-  dayjs.extend(utc)
-
-  return {
-    provide: {
-      dayjs,
-    },
-  }
-})
-
-declare module '#app' {
-  interface NuxtApp {
-    $dayjs: DayjsFn
-  }
-}

package/app/plugins/i18n.ts

@@ -1,5 +0,0 @@
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.hook('i18n:localeSwitched', ({ newLocale }) => {
-    nuxtApp.vueApp.$nuxt.$dayjs.locale(newLocale)
-  })
-})

package/server/tsconfig.json

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

package/shared/utils/auth.ts

@@ -1,126 +0,0 @@
-import type { Client } from '@urql/vue'
-import { consola } from 'consola'
-import { setCookie } from 'h3'
-import type { H3Event } from 'h3'
-import { decodeJwt } from 'jose'
-
-import { useVioAuthStore } from '../../app/stores/auth'
-
-export const getJwtFromCookie = () => {
-  const cookie = useCookie(JWT_NAME())
-
-  if (!cookie.value) {
-    consola.debug('No token cookie.')
-    return
-  }
-
-  const jwt = decodeJwt(cookie.value)
-
-  if (jwt.exp === undefined || jwt.exp <= Date.now() / 1000) {
-    consola.info('Token expired.')
-    return
-  }
-
-  return {
-    jwt: cookie.value,
-    jwtDecoded: jwt,
-  }
-}
-
-export const jwtStore = async ({
-  $urqlReset,
-  event,
-  isInProduction,
-  jwt,
-  store,
-}: {
-  $urqlReset: () => Client
-  event?: H3Event
-  isInProduction: boolean
-  jwt?: string
-  store: ReturnType<typeof useVioAuthStore>
-}) => {
-  $urqlReset()
-
-  consola.trace('Storing the following JWT: ' + jwt)
-  store.jwtSet(jwt)
-
-  if (event) {
-    setCookie(event, JWT_NAME(), jwt || '', {
-      expires: jwt ? new Date(Date.now() + 86400 * 1000 * 31) : new Date(0),
-      httpOnly: true,
-      path: '/',
-      sameSite: 'lax', // Cannot be 'strict' to allow authentications after clicking on links within webmailers.
-      secure: isInProduction,
-    })
-  } else {
-    try {
-      await $fetch('/api/auth', {
-        method: 'POST',
-        ...(jwt ? { headers: { Authorization: `Bearer ${jwt}` } } : {}),
-      })
-    } catch (error) {
-      console.error(error)
-      return Promise.reject(Error('Authentication api call failed.'))
-    }
-  }
-}
-
-export const useJwtStore = () => {
-  const { $urqlReset, ssrContext } = useNuxtApp()
-  const store = useVioAuthStore()
-  const runtimeConfig = useRuntimeConfig()
-
-  return {
-    async jwtStore(jwt?: string) {
-      await jwtStore({
-        $urqlReset: $urqlReset as () => Client,
-        event: ssrContext?.event,
-        isInProduction: runtimeConfig.public.vio.isInProduction,
-        jwt,
-        store,
-      })
-    },
-  }
-}
-
-export const signOut = async ({
-  $urqlReset,
-  // client,
-  event,
-  isInProduction,
-  store,
-}: {
-  $urqlReset: () => Client
-  client: Client
-  event?: H3Event
-  isInProduction: boolean
-  store: ReturnType<typeof useVioAuthStore>
-}) => {
-  await jwtStore({ $urqlReset, event, isInProduction, store })
-  // await authenticationAnonymous({
-  //   $urqlReset,
-  //   client,
-  //   event,
-  //   isInProduction,
-  //   store,
-  // })
-}
-
-export const useSignOut = () => {
-  const { $urql, $urqlReset, ssrContext } = useNuxtApp()
-  const store = useVioAuthStore()
-  const runtimeConfig = useRuntimeConfig()
-
-  return {
-    async signOut() {
-      await signOut({
-        $urqlReset: $urqlReset as () => Client,
-        client: ($urql as Ref<Client>).value,
-        event: ssrContext?.event,
-        isInProduction: runtimeConfig.public.vio.isInProduction,
-        store,
-      })
-    },
-  }
-}