feat(i18n); add i18n aware vue components, with localized manifest

Author: Antoine Monnet

src/runtime/components/NuxtPwaAssetsI18n.ts

@@ -0,0 +1,42 @@
+import type { MetaObject } from '@nuxt/schema'
+import { defineComponent, ref } from 'vue'
+import { pwaInfo } from 'virtual:pwa-info'
+import { pwaAssetsHead } from 'virtual:pwa-assets/head'
+import { useHead, useLocalePath } from '#imports'
+
+export default defineComponent({
+  setup() {
+    const meta = ref<MetaObject>({ link: [] })
+    const localePath = useLocalePath()
+    useHead(meta)
+    if (pwaAssetsHead.themeColor)
+      meta.value.meta = [{ name: 'theme-color', content: pwaAssetsHead.themeColor.content }]
+
+    if (pwaAssetsHead.links.length)
+      // @ts-expect-error: links are fine
+      meta.value.link!.push(...pwaAssetsHead.links)
+
+    if (pwaInfo) {
+      const { webManifest } = pwaInfo
+      if (webManifest) {
+        const { href, useCredentials } = webManifest
+        const prefix = localePath("/").replace("^/$","")
+        if (useCredentials) {
+          meta.value.link!.push({
+            rel: 'manifest',
+            href: prefix+href,
+            crossorigin: 'use-credentials',
+          })
+        }
+        else {
+          meta.value.link!.push({
+            rel: 'manifest',
+            href: prefix+href,
+          })
+        }
+      }
+    }
+
+    return () => null
+  },
+})

src/runtime/components/VitePwaManifestI18n.ts

@@ -0,0 +1,35 @@
+import type { MetaObject } from '@nuxt/schema'
+import { defineComponent, ref } from 'vue'
+import { pwaInfo } from 'virtual:pwa-info'
+import { useHead, useLocalePath } from '#imports'
+
+export default defineComponent({
+  async setup() {
+    if (pwaInfo) {
+      const meta = ref<MetaObject>({ link: [] })
+      const localePath = useLocalePath()
+      useHead(meta)
+
+      const { webManifest } = pwaInfo
+      if (webManifest) {
+        const { href, useCredentials } = webManifest
+        const prefix = localePath("/").replace("^/$","")
+        if (useCredentials) {
+          meta.value.link!.push({
+            rel: 'manifest',
+            href: prefix+href,
+            crossorigin: 'use-credentials',
+          })
+        }
+        else {
+          meta.value.link!.push({
+            rel: 'manifest',
+            href: prefix+href,
+          })
+        }
+      }
+    }
+
+    return () => null
+  },
+})

src/utils/module.ts

@@ -72,10 +72,18 @@ export async function doSetup(options: PwaModuleOptions, nuxt: Nuxt) {
       name: 'NuxtPwaManifest',
       filePath: resolver.resolve(runtimeDir, 'components/VitePwaManifest'),
     }),
+    addComponent({
+      name: 'NuxtPwaManifestI18n',
+      filePath: resolver.resolve(runtimeDir, 'components/VitePwaManifestI18n'),
+    }),
     addComponent({
       name: 'NuxtPwaAssets',
       filePath: resolver.resolve(runtimeDir, 'components/NuxtPwaAssets'),
     }),
+    addComponent({
+      name: 'NuxtPwaAssetsI18n',
+      filePath: resolver.resolve(runtimeDir, 'components/NuxtPwaAssetsI18n'),
+    }),
     addComponent({
       name: 'PwaAppleImage',
       filePath: resolver.resolve(runtimeDir, 'components/PwaAppleImage.vue'),