@dargmuesli/nuxt-vio 3.3.1 → 3.5.0

package/components/vio/_/VioApp.vue

@@ -2,18 +2,12 @@
   <div :data-is-loading="isLoading" data-testid="is-loading">
     <NuxtLayout>
       <!-- `NuxtLayout` can't have mulitple child nodes (https://github.com/nuxt/nuxt/issues/21759) -->
-      <div>
-        <NuxtPage :site-description="siteDescriptionProp" />
-        <CookieControl :locale="locale" />
-      </div>
+      <NuxtPage :site-description="siteDescriptionProp" />
     </NuxtLayout>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { Locale } from '@dargmuesli/nuxt-cookie-control/dist/runtime/types'
-import type { WritableComputedRef } from 'vue'
-
 export interface Props {
   ogImageAlt: string
   ogImageComponent?: string
@@ -27,15 +21,12 @@ const ogImageComponentProp = toRef(() => props.ogImageComponent)
 const siteDescriptionProp = toRef(() => props.siteDescription)
 
 const { $dayjs } = useNuxtApp()
-const i18n = useI18n()
+const { locale } = useI18n()
 const cookieControl = useCookieControl()
 const siteConfig = useSiteConfig()
 
 const { loadingIds, indicateLoadingDone } = useLoadingDoneIndicator('app')
 
-// data
-const locale = i18n.locale as WritableComputedRef<Locale>
-
 // methods
 const init = () => {
   $dayjs.locale(locale.value)

package/components/vio/layout/VioLayout.vue

@@ -3,5 +3,16 @@
     <main>
       <slot />
     </main>
+    <CookieControl :locale="locale" />
   </div>
 </template>
+
+<script setup lang="ts">
+import type { Locale } from '@dargmuesli/nuxt-cookie-control/dist/runtime/types'
+import type { WritableComputedRef } from 'vue'
+
+const i18n = useI18n()
+
+// data
+const locale = i18n.locale as WritableComputedRef<Locale>
+</script>

package/composables/useAppLayout.ts

@@ -2,26 +2,30 @@ export const useAppLayout = () => {
   const appConfig = useAppConfig()
   const siteConfig = useSiteConfig()
 
-  useHeadSafe({
+  useServerHeadSafe({
     ...useLocaleHead({ addSeoAttributes: true }).value,
     bodyAttrs: {
       class:
         'bg-background-bright dark:bg-background-dark font-sans text-text-dark dark:text-text-bright',
     },
-  }) // TODO: use `useServerHeadSafe` (https://github.com/harlan-zw/nuxt-seo-kit/issues/87)
+  })
 
+  // TODO: convert to `useServerHeadSafe` (https://github.com/harlan-zw/nuxt-seo-kit/issues/98)
   useServerSeoMeta({
-    ...(appConfig.vio.themeColor
-      ? {
-          msapplicationTileColor: appConfig.vio.themeColor,
-          themeColor: appConfig.vio.themeColor,
-        }
-      : {}),
-    titleTemplate: (titleChunk) => {
-      return titleChunk && titleChunk !== siteConfig.name
-        ? `${titleChunk} ${siteConfig.titleSeparator} ${siteConfig.name}`
-        : siteConfig.name
-    },
-    ...(appConfig.vio.seoMeta ? appConfig.vio.seoMeta : {}),
+    titleTemplate: (title) =>
+      title && title !== siteConfig.name
+        ? `${title} ${siteConfig.titleSeparator} ${siteConfig.name}`
+        : siteConfig.name,
   })
+
+  if (appConfig.vio.seoMeta) {
+    useServerSeoMeta(appConfig.vio.seoMeta)
+  }
+
+  if (appConfig.vio.themeColor) {
+    useServerSeoMeta({
+      msapplicationTileColor: appConfig.vio.themeColor,
+      themeColor: appConfig.vio.themeColor,
+    })
+  }
 }

package/composables/useDateTime.ts

@@ -1,11 +1,10 @@
 import { Dayjs } from 'dayjs'
 
 export const useDateTime = () => {
-  const event = useRequestEvent()
-  const { $dayjs } = useNuxtApp()
+  const { $dayjs, ssrContext } = useNuxtApp()
   const timezoneCookie = useCookie(TIMEZONE_COOKIE_NAME)
 
-  const timezoneHeader = event?.node.req.headers[TIMEZONE_HEADER_KEY]
+  const timezoneHeader = ssrContext?.event.node.req.headers[TIMEZONE_HEADER_KEY]
   const timezone =
     timezoneHeader && !Array.isArray(timezoneHeader)
       ? timezoneHeader

package/composables/useHost.ts

@@ -1,8 +1,8 @@
 export const useHost = () => {
-  if (process.server) {
-    const event = useRequestEvent()
+  const { ssrContext } = useNuxtApp()
 
-    return getHost(event.node.req)
+  if (ssrContext) {
+    return getHost(ssrContext.event)
   } else {
     return location.host
   }

package/composables/usePolyfills.ts

@@ -1,6 +1,9 @@
+import { POLYFILLS } from '../utils/constants'
+
 export const usePolyfills = () => {
-  const polyfills =
-    'https://polyfill.io/v3/polyfill.min.js?features=Promise&flags=gated'
+  const polyfills = `https://polyfill.io/v3/polyfill.min.js?features=${POLYFILLS.join(
+    '%2C',
+  )}&flags=gated`
 
   useServerHead({
     link: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "3.3.1",
+  "version": "3.5.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -8,7 +8,7 @@
   "engines": {
     "node": "20"
   },
-  "packageManager": "pnpm@8.7.0",
+  "packageManager": "pnpm@8.7.4",
   "files": [
     "assets",
     "components",
@@ -41,36 +41,36 @@
     "prepare": "nuxt prepare .playground",
     "preview": "nuxt preview .playground",
     "start": "PORT=3001 node .playground/.output/server/index.mjs",
-    "test:e2e": "playwright test",
-    "test:e2e:dev": "cross-env NUXT_PUBLIC_IS_TESTING=1 WAIT_ON_TIMEOUT=100000 pnpm test:e2e",
-    "test:e2e:prod": "cross-env NUXT_PUBLIC_IS_TESTING=1 WAIT_ON_TIMEOUT=10000 NODE_ENV=production pnpm test:e2e",
-    "test:e2e:docker:build": "docker build -t test-e2e_base --build-arg UID=$(id -u) --build-arg GID=$(id -g) --target test-e2e_base ..",
-    "test:e2e:docker:run": "docker run --rm -v \"$PWD/..:/srv/app\" -v \"$(pnpm store path):/srv/.pnpm-store\" test-e2e_base",
+    "test:e2e:dev": "cross-env NUXT_PUBLIC_IS_TESTING=1 pnpm test:e2e",
     "test:e2e:docker:br": "pnpm test:e2e:docker:build && pnpm test:e2e:docker:run",
-    "test:e2e:docker:dev": "pnpm test:e2e:docker:br pnpm --dir src run test:e2e:dev",
+    "test:e2e:docker:build": "docker build -t test-e2e_base --build-arg UID=$(id -u) --build-arg GID=$(id -g) --target test-e2e_base ..",
     "test:e2e:docker:dev:update": "pnpm test:e2e:docker:dev --update-snapshots",
+    "test:e2e:docker:dev": "pnpm test:e2e:docker:br pnpm --dir src run test:e2e:dev",
+    "test:e2e:docker:prod:update": "pnpm test:e2e:docker:prod --update-snapshots",
     "test:e2e:docker:prod": "pnpm test:e2e:docker:br pnpm --dir src run test:e2e:prod",
-    "test:e2e:docker:prod:update": "pnpm test:e2e:docker:prod --update-snapshots"
+    "test:e2e:docker:run": "docker run --rm -v \"$PWD/..:/srv/app\" -v \"$(pnpm store path):/srv/.pnpm-store\" test-e2e_base",
+    "test:e2e:prod": "cross-env NUXT_PUBLIC_IS_TESTING=1 NODE_ENV=production pnpm test:e2e",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@axe-core/playwright": "4.7.3",
-    "@dargmuesli/nuxt-cookie-control": "6.4.1",
+    "@dargmuesli/nuxt-cookie-control": "6.4.2",
     "@http-util/status-i18n": "0.8.1",
     "@nuxt/image": "1.0.0-rc.1",
     "@nuxtjs/color-mode": "3.3.0",
     "@nuxtjs/html-validator": "1.5.2",
-    "@nuxtjs/i18n": "8.0.0-rc.3",
+    "@nuxtjs/i18n": "8.0.0-rc.4",
     "@nuxtjs/tailwindcss": "6.8.0",
-    "@nuxtseo/module": "2.0.0-beta.22",
+    "@nuxtseo/module": "2.0.0-beta.26",
     "@pinia/nuxt": "0.4.11",
     "@playwright/test": "1.37.1",
     "@tailwindcss/forms": "0.5.6",
-    "@tailwindcss/typography": "0.5.9",
-    "@types/cookie": "0.5.1",
-    "@types/lodash-es": "4.17.8",
-    "@urql/core": "4.1.1",
+    "@tailwindcss/typography": "0.5.10",
+    "@types/cookie": "0.5.2",
+    "@types/lodash-es": "4.17.9",
+    "@urql/core": "4.1.2",
     "@urql/devtools": "2.0.3",
-    "@urql/exchange-graphcache": "6.3.2",
+    "@urql/exchange-graphcache": "6.3.3",
     "@urql/vue": "1.1.2",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
@@ -78,18 +78,17 @@
     "cookie": "0.5.0",
     "dayjs": "2.0.0-alpha.4",
     "is-https": "4.0.0",
-    "jose": "4.14.4",
+    "jiti": "1.19.3",
+    "jose": "4.14.6",
     "lodash-es": "4.17.21",
-    "marked": "7.0.5",
     "pinia": "2.1.6",
     "sweetalert2": "11.7.27",
     "vue-gtag": "2.0.1",
-    "vue-tsc": "1.8.8"
+    "vue-tsc": "1.8.10"
   },
   "devDependencies": {
     "@intlify/eslint-plugin-vue-i18n": "3.0.0-next.3",
     "@nuxtjs/eslint-config-typescript": "12.1.0",
-    "@types/marked": "5.0.1",
     "cross-env": "7.0.3",
     "eslint": "8.48.0",
     "eslint-config-prettier": "9.0.0",
@@ -98,9 +97,9 @@
     "eslint-plugin-prettier": "5.0.0",
     "eslint-plugin-yml": "1.8.0",
     "lint-staged": "14.0.1",
-    "nuxt": "3.7.0",
+    "nuxt": "3.7.1",
     "prettier": "3.0.3",
-    "prettier-plugin-tailwindcss": "0.5.3",
+    "prettier-plugin-tailwindcss": "0.5.4",
     "stylelint": "15.10.3",
     "stylelint-config-recommended-vue": "1.5.0",
     "stylelint-config-standard": "34.0.0",

package/utils/auth.ts

@@ -69,9 +69,8 @@ export const jwtStore = async ({
 }
 
 export const useJwtStore = () => {
-  const { $urqlReset } = useNuxtApp()
+  const { $urqlReset, ssrContext } = useNuxtApp()
   const store = useVioAuthStore()
-  const event = useRequestEvent()
 
   if (typeof $urqlReset !== 'function')
     throw new Error('`$urqlReset` is not a function!')
@@ -81,7 +80,7 @@ export const useJwtStore = () => {
       await jwtStore({
         $urqlReset,
         store,
-        res: process.server ? event.node.res : undefined,
+        res: ssrContext ? ssrContext.event.node.res : undefined,
         jwt,
       })
     },
@@ -99,9 +98,8 @@ export const signOut = async ({
 }) => await jwtStore({ $urqlReset, store, res })
 
 export const useSignOut = () => {
-  const { $urqlReset } = useNuxtApp()
+  const { $urqlReset, ssrContext } = useNuxtApp()
   const store = useVioAuthStore()
-  const event = useRequestEvent()
 
   if (typeof $urqlReset !== 'function')
     throw new Error('`$urqlReset` is not a function!')
@@ -111,7 +109,7 @@ export const useSignOut = () => {
       await signOut({
         $urqlReset,
         store,
-        res: process.server ? event.node.res : undefined,
+        res: ssrContext ? ssrContext.event.node.res : undefined,
       })
     },
   }

package/utils/constants.ts

@@ -40,6 +40,7 @@ export const I18N_VUE_CONFIG = {
 }
 export const JWT_NAME = () =>
   `${process.env.NODE_ENV === 'production' ? '__Secure-' : ''}jwt`
+export const POLYFILLS = ['Promise']
 export const REGEX_UUID =
   /^[a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12}$/
 export const TIMEZONE_COOKIE_NAME = [COOKIE_PREFIX, 'tz'].join(COOKIE_SEPARATOR)

package/utils/networking.ts

@@ -1,5 +1,3 @@
-import { IncomingMessage } from 'node:http'
-
 import { CombinedError } from '@urql/core'
 import { H3Event, getCookie } from 'h3'
 
@@ -79,10 +77,12 @@ export const getDomainTldPort = (host: string) => {
   return `${hostParts[hostParts.length - 2]}.${hostParts[hostParts.length - 1]}`
 }
 
-export const getHost = (req: IncomingMessage) => {
-  if (!req.headers.host) throw new Error('Host header is not given!')
+export const getHost = (event: H3Event) => {
+  const host = event.node.req.headers.host
+
+  if (!host) throw new Error('Host header is not given!')
 
-  return req.headers.host
+  return host
 }
 
 export const getServiceHref = ({

package/plugins/marked.ts

@@ -1,9 +0,0 @@
-import { marked } from 'marked'
-
-export default defineNuxtPlugin((_nuxtApp) => {
-  return {
-    provide: {
-      marked: marked.parse,
-    },
-  }
-})