fix(pwa-assets): resolve pwa assets #207
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adds Nuxt 4 compatibility for PWA assets by introducing new TypeScript-based components and improving image resolution logic. The changes address Vue SFC compiler issues with type imports in Nuxt 4 while maintaining backward compatibility with Nuxt 3.
- Adds Nuxt 4 detection and conditional component registration
- Implements new TypeScript-based PWA image components for Nuxt 4
- Improves image file resolution with fallback logic across multiple source directories
Reviewed Changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/pwa-icons.ts | Adds image resolution logic and Nuxt 4 parameter to type generation |
| src/utils/pwa-icons-types.ts | Updates type registration to support Nuxt 4 with improved error handling |
| src/utils/pwa-icons-helper.ts | Modifies type template generation to handle Nuxt 4 differences |
| src/utils/module.ts | Adds Nuxt 4 detection and conditional component registration |
| src/runtime/composables/index.ts | Exports PWAImageType for external use |
| src/runtime/components/nuxt4/* | New TypeScript-based PWA image components for Nuxt 4 |
| package.json | Updates package manager and vite-plugin-pwa versions |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| if (!data) | ||
| return | ||
|
|
||
| const { image: _, ...rest } = data |
There was a problem hiding this comment.
Remove this, image added by vue, using inheritAttrs will prevent adding the image attr
| const resolver = createResolver(import.meta.url) | ||
| const nuxtVersion = (getNuxtVersion(nuxt) as string).split('.').map(v => Number.parseInt(v)) | ||
| const nuxt3_8 = nuxtVersion.length > 1 && (nuxtVersion[0] > 3 || (nuxtVersion[0] === 3 && nuxtVersion[1] >= 8)) | ||
| const isNuxt4 = nuxtVersion.length > 1 && nuxtVersion[0] >= 4 |
There was a problem hiding this comment.
There's a util in Nuxt Kit to help with this :)
| const isNuxt4 = nuxtVersion.length > 1 && nuxtVersion[0] >= 4 | |
| const isNuxt4 = isNuxtMajorVersion(4, nuxt) |
It would need adding to the import statement
There was a problem hiding this comment.
we support old nuxt versions (3.9+), I will check when was added
There was a problem hiding this comment.
it shouldn't matter when the kit util was added.
kit should be a dependency of the module so it should should work fine no matter what version of nuxt the end user is using
There was a problem hiding this comment.
even if configured kit version without isNuxtMajorVersion?
There was a problem hiding this comment.
all that matters is that the kit version that this module depends on has that function
|
superseded by #218 |
Description
There is no way, vue sfc compiler failing to revolve
#build/pwa-iconstype imports in vue components in the runtime. I added a nuxt4/components folder using defineComponent using the same import and it is working, but WebStorm auto completion failing (weird, because it resolves the types when using:image="', check the screehshots below.Here you can play with it: https://github.com/userquin/nuxt-v4-pwa-icon-components
https://youtrack.jetbrains.com/issue/WEB-74161/weird-behavior
/cc @danielroe
Linked Issues
resolves #204
Additional Context
Tip
The author of this PR can publish a preview release by commenting
/publishbelow.