Nuxt booster breaks if Nuxt autoimport feature is disabled

[vhovorun]

Describe the bug Nuxt booster breaks if Nuxt autoimport feature is disabled

To Reproduce Steps to reproduce the behavior:

1. Add this to the nuxt.config.ts file

imports: {
  autoImport: false,
}

2. Try to run the project in dev mode
3. See error

Expected behavior Should be usable with disabled nuxt autoimports feature

Additional context Nuxt version - 3.11.2 Nuxt booster verstion - ^3.0.15

[ThornWalli]

Hello @vhovorun,

you can try this version nuxt-booster@3.0.16-next.1.

[vhovorun]

@ThornWalli Thanks, one more question I've noticed that nuxt-booster takes all css (excluding current page) from pages and components and loads it in one file, because of that pagespeed insight shows the next warning (see the image attached below), I've checked if I disable nuxt-booster css from pages and components only loads when I navigate to them. Is there some way how to fix this behaviour?

[ThornWalli]

@vhovorun I activate the Vite cssCodeSplit again.

Now the CSS should be loaded again via component when active.

However, every link[rel=“style”] in the SSR HTML is still embedded directly in the markup and removed.

You can test it 🙂

nuxt-booster@3.0.16-next.2

[vhovorun]

@ThornWalli Now works correctly, thanks a lot for a quick replay!

[vhovorun]

@ThornWalli One more question though, I've noticed that on the mobile TBT (Total Blocking Time) is 0ms, but on desktop version it's 200-300ms. Is configurable to reduce the TBT to 0 on desktop version too? Or I should use some other library like nuxt-lazy-hydrate for that?

[ThornWalli]

@vhovorun Integrating the module is the first step 🙃

1. when it comes to lazy-hydrate is already integrated 🙂 https://basics.github.io/nuxt-booster/guide/usage.html#import-components
2. offer a font integration per directive, does not have to load everything.
3. and also picture or image components, these are based on the @nuxt/image API. Here the focus is on ssr and preloads.
   • https://basics.github.io/nuxt-booster/components/booster-picture.html
   • https://basics.github.io/nuxt-booster/components/booster-image.html

Take a look at the example 😉, especially because of correct composable use etc. https://github.com/basics/nuxt-booster/tree/main/playground

Hope this helps 🙂