[Progress] `nuxt@3` support

[ThornWalli]

Nuxt 3 version is available 🎉

V3 Docs

⚠️ Important: nuxt-speedkit was prepared for vite and webpack. But unfortunately there are different results between the builders, because with the webpack build feature (e.g. Inline Styles) are missing.

Install

npm i nuxt-speedkit@next

Todos

General

• [ ] Docs (Progress) (https://nuxt-speedkit.grabarzundpartner.dev/v3/)
  • [x] Docus replaced with Vitepress.
• [ ] Update Example (https://github.com/GrabarzUndPartner/nuxt-speedkit-example/pull/87)
• [x] How is the crossorigin handled in nuxt@3? (e.g. anonymous, use-credentials) Is set via the module option crossorigin.

Entry integration

• [x] Vite
• [x] Webpack

Preload optimization

• [x] ~Resource Manifest optimization~ Reduce preloads, prefetches per generate HTML manipulation
  • [x] ~https://github.com/nuxt/nuxt.js/issues/14362~

Embedded CSS

• [x] Vite
• [x] Webpack

Plugin

• [x] Import Fonts CSS (e.g. @font-face)
  • [x] Direct import. (e.g. import './fonts.css';)
    • [x] https://github.com/nuxt/nuxt/issues/21383
  • [x] Workaround via useHead and fonts script.
• [ ] Directive - v-font
  • [x] https://github.com/nuxt/nuxt.js/issues/15424
    • [ ] https://github.com/vuejs/core/issues/7499
• [x] Provides
  • [x] $speedkit
  • [x] $getFont
• [x] Replace Mixins with Composable.
  • [x] Head description based on the FontCollection
    • [x] TagPriority (https://unhead.harlanzw.com/guide/guides/sorting)
  • [x] Critical flag inject/provide

Image (SpeedkitPicture/SpeedkitImage)

• [x] @nuxt/image https://github.com/nuxt/image/discussions/548

Helper & Components

Helper

• [x] speedkitHydrate
  • [x] replace vue-lazy-hydration with vue3-lazy-hydration

Components

• [x] SpeedkitLayer
• [x] SpeedkitImage
• [x] SpeedkitPicture
• [x] SpeedkitVimeo
• [x] SpeedkitYoutube
• [x] SpeedkitIframe
• [x] WeakHardwareOverlay

Removed Components

• [x] ~~abstracts/ComponentObserver~~
  • Composable: #speedkit/composables/componentObserver
• [x] ~~abstracts/OnlySsr~~
• [x] ~~GoogleLighthouse~~

Tests

• [x] replaced jest with vitest

[everyx]

@ThornWalli Can we separate the SpeedkitXXX components from this plugin? so we can use them in combination and let the Speedkit plugin adapt to Nuxt 3 without waiting for nuxt/image to adapt to nuxt 3, and all new projects based on nuxt 3 could use and test this plugin as early as possible

[nathanchase]

@ThornWalli Can we separate the SpeedkitXXX components from this plugin? so we can use them in combination and let the Speedkit plugin adapt to Nuxt 3 without waiting for nuxt/image to adapt to nuxt 3, and all new projects based on nuxt 3 could use and test this plugin as early as possible

There is a new version of nuxt/image available and working for Nuxt 3 now: https://v1.image.nuxtjs.org/ "@nuxt/image-edge": "1.0.0-27628766.3629b9a"

[yangwao]

Hey, we at https://github.com/kodadot/nft-gallery plan to use nuxt-speedkit and we are in process migration from nuxt2 to nuxt3, step by step, not fastest, but just want to make sure you are heading there too.

I'm happy to donate something, if that would speed up things on your side. Probably I'm not only one who would use it in Nuxt3 :)

Let me know!

[ThornWalli]

Hi @Yangwao,

unfortunately we ran into a Vue3 bug right at the beginning ;) We are on it, but have stones on the way :)

[StephanGerbeth]

@yangwao currently we are waiting for the following pull request from Linus Borg to be released. You can help us to increase the pressure here ;) : https://github.com/vuejs/core/issues/7499

We are of course also happy about donations, but currently we cannot pursue the integration in Nuxt3 as long as this pull request has not been accepted.

[yangwao]

We are of course also happy about donations

uWu

[StephanGerbeth]

@yangwao thank you very much. We were very happy about your donation. As you can see, we have already started the migration. The big part is already done. We are currently fine-tuning the details so that we can also guarantee efficient loading of resources with Nuxt3.

[ThornWalli]

nuxt@3 version is now released. 🎉

nuxt@2 is no longer maintained, but can still be installed via nuxt-booster@2.

And there was a change of organization and name 😉