basics/nuxt-booster

nuxt-booster will help you to improve the lighthouse performance score (100/100) of your website. 🚀

share me:

Nuxt Booster

• ✨   Release Notes
• 👁   Preview

Nuxt Booster takes over the Lighthouse performance optimization of your generated website. All used components and resources are loaded on demand based on the viewport.

Getting Started

Please follow the 📖   Documentation

• v2: basics.github.io/nuxt-booster/v2/

Requirements

• NodeJS >= 19
• NuxtJS >= 3.5.0

Features

• dynamic loading of viewport based page resources like fonts, components, pictures, images and iframes
• optional blocking of javascript execution by initial performance measuring
• optimized initial load of javascript files by eliminating of unnecessary javascript files
• prevents the loading of unnecessary resources (including components) that are outside the current viewport.
• optional info layer concept to inform users about a reduced UX when bandwidth or hardware is compromised.
• completely new approach of font declaration
• optimized picture component (supports viewport based sources e.g. landscape/portrait)
• optimized image component
• supports SEO-friendly lazy hydration mode (picture + image)
• optimized youtube/vimeo component (auto generated poster image in different resolutions)

Results

• delivery of the minimum required resources based on the current viewport
• if you use the tools as specified you will get a lighthouse performance score of 100/100

📖   Read more

Browsers support

You can use nuxt-booster with Internet Explorer 11 browser. Learn more at Browser compatibility

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Samsung	Opera	Vivaldi
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Development

1. Clone this repository.
2. Install dependencies using npm install or yarn install.
3. Start development server using npm run dev or yarn dev.

Preview

1. Clone this repository.
2. Install dependencies using npm install or yarn install.
3. Build and start with express npm run start:generate or yarn start:generate.
4. Open http://127.0.0.1:3000 in Browser.

or look here

• Preview

Consulting & Support

Do you need further support, a consultation or a code review for an appropriate fee? Just contact us via eMail: [email protected], [email protected]. We are looking forward to your request.

License

MIT License

nuxt-booster's Issues

Incorrect attribute for the style element

https://github.com/GrabarzUndPartner/nuxt-speedkit/blob/26078e314fbab1989a05cc1623b207403b57fed3/lib/utils/description.js#L35

In the service for checking the validity of the layout (https://validator.w3.org/), it gives errors:
Warning: The type attribute for the style element is not needed and should be omitted.

How do i fix Nuxt Warning 'nuxt build finished but did not exit after 5s'?

Describe the bug
╭───────────────────────────╮
│ │
│ ⚠ Nuxt Warning │
│ │
│ The command 'nuxt build' finished but did not exit after 5s │
│ │
│ This is most likely not caused by a bug in Nuxt.js │
│ │
│ Make sure to cleanup all timers and listeners you or your │
│ plugins/modules start. │
│ Nuxt.js will now force exit │
│ │
│ DeprecationWarning: Starting with Nuxt version 3 this will . │
│ be a fatal error │
│
╰───────────────────────────╯

Using nuxt-speedkit as a module gives me this error. Is there any workaround to solve this ?

Not working with @nuxt/image while provider is defined

I am using nuxt/image with gumlet provider in my project, but if i try to use nuxt speedkit with it then it throws an error.
Although it works if i don't define the provider properties in image block in nuxt.config.js but when i do, the project won't even start neither in dev mode nor in production mode.

I am getting this error:-

FATAL Cannot use 'in' operator to search for 'youtube' in undefined 10:52:43

at node_modules/nuxt-speedkit/module.js:26:72
at Array.find ()
at node_modules/nuxt-speedkit/module.js:26:50
at node_modules/hable/dist/hable.js:1:990
at node_modules/hable/dist/hable.js:1:208
at async Nuxt.callHook (node_modules/hable/dist/hable.js:1:959)
at async ModuleContainer.ready (node_modules/@nuxt/core/dist/core.js:61:5)
at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:478:5)

╭──────────────────────────────────────────────────────────────────────────────╮
│ │
│ ✖ Nuxt Fatal Error │
│ │
│ TypeError: Cannot use 'in' operator to search for 'youtube' in undefined │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: nuxt
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/amarjeet/.npm/_logs/2022-04-05T05_22_43_843Z-debug.log

here is my speedkit and nuxt image config:-

speedkit: {
detection: {
performance: true,
browserSupport: true,
},

performanceMetrics: {
  device: {
    hardwareConcurrency: { min: 2, max: 48 },
    deviceMemory: { min: 2 },
  },
  timing: {
    fcp: 800,
    dcl: 1200,
  },
},

componentAutoImport: false,
componentPrefix: undefined,

/**
 * IntersectionObserver rootMargin for Compoennts and Assets
 */
lazyOffset: {
  component: "0%",
  asset: "0%",
},

loader: {
  dataUri: null,
  size: "100px",
  backgroundColor: "grey",
},

},

image: {
gumlet: {
baseURL: "https://satya.gumlet.io",
},
},

speedkitHydate runtime error

Description
After package installation and configuration I tried to use the speedkitHydrate, but when I import it I got this error:

ERROR in ./node_modules/nuxt-speedkit/runtime/hydrate.mjs 8:9-27
Can't import the named export 'hydrateWhenVisible' from non EcmaScript module (only default export is available)

Reproduction

1. Install nuxt-speedkit and add basic configuration
2. Import speedkitHydrate in a page file

Expected behavior
There should be no error

Versions:

• nuxt 2.15.8
• nuxt-speedkit 2.2.2

Weak hardware message at Macbook Pro 2019

Hello, the plugin works really well and our pagespeed score improved a lot, but the infolayer with the weak hardware message appears really fast. Even at a normal Macbook Pro from 2019.

I tried to set hardwareConcurrency and deviceMemory at the lowest value, but the message is still showing.

performanceMetrics: {
      device: {
        hardwareConcurrency: { min: 1, max: 48 },
        deviceMemory: { min: 1 }
      }
 }

Is is possible to set the hardware requirements lower? Or if not, is it possible to force initialize the page at all devices?

Thanks!

Should I replace nuxt-img with SpeedkitImage?

Just a quick question - I have an existing project using nuxt image and have just added nuxt speedkit in too.
Should I refactor to use <SpeedkitImage> over <nuxt-img>? What are the benefits of SpeedkitImage that are different to nuxt image?

Thanks!

Error fallback image would be nice if have when image load failed

Incorporate font loader module

Font loading is now only:

• local asset

What we see in our and other project is based on the module: https://www.npmjs.com/package/nuxt-font-loader

Final result:

• local asset but by nuxt-font-loader
• proxy to nuxt-font-loader for external ones

What is different from nuxt-loader-loader can't? Can this be documented if there is some?

"completely new approach of font declaration" <- why needed if we have working and future proof one? Maybe I missing some point there

Missing comma from 'Example Configuration'

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to page 'https://nuxt-speedkit.grabarzundpartner.dev/setup'
2. Copy paste the Example Configuration content in a nuxt.config.js
3. before the property 'componentAutoImport' there's a missing comma

Expected behavior
The configs should be copy-pastable with no error.

Screenshots

Website performance decreases after integrating nuxt-speedkit in nuxt 3

Describe the bug
We recentlu upgraded our project to nuxt 3 and working on its performance. We were using this library in nuxt 2 as well where it shows impressive increase in performance but in nuxt 3 its very strange it decreases the site performance. Other strange thing is its only happening on desktop.
There is a flicker in website loading which is causing this issue called Cumulative Layout Shift which only happen after integrating nuxt-speedkit. I am attaching the screenshots taken from Google page Speed Insight as well as gif of the site loading with and without nuxt-speedkit. Its a big project I can't share the codebase. here my package.json

"@nuxt/image-edge": "^1.0.0-28099902.2b6ed1c",
"nuxt": "^3.5.3",
"nuxt-speedkit": "^3.0.0-next.17",

and configurations in nuxt.config.ts

  speedkit: {

    detection: {
      performance: true,
      browserSupport: true
    },

    performanceMetrics: {
      device: {
        hardwareConcurrency: { min: 2, max: 48 },
        deviceMemory: { min: 2 }
      },
      timing: {
        fcp: 800,
        dcl: 1200
      }
    },

    fonts: [
      {
        family: 'Lato',
        locals: ['Lato'],
        fallback: ['Roboto', 'sans-serif'],
        variances: [
          {
            style: 'normal',
            weight: 400,
            sources: [
              { src: '@/assets/fonts/lato-v22-latin-regular.woff', type: 'woff' },
              { src: '@/assets/fonts/lato-v22-latin-regular.woff2', type: 'woff2' }
            ]
          },
          {
            style: 'normal',
            weight: 700,
            sources: [
              { src: '@/assets/fonts/lato-v22-latin-700.woff', type: 'woff' },
              { src: '@/assets/fonts/lato-v22-latin-700.woff2', type: 'woff2' }
            ]
          }
        ]
      },
      {
        family: 'Khand',
        locals: ['Khand'],
        fallback: ['Roboto', 'sans-serif'],
        variances: [
          {
            style: 'normal',
            weight: 600,
            sources: [
              { src: '@/assets/fonts/khand-v12-latin-600.woff', type: 'woff' },
              { src: '@/assets/fonts/khand-v12-latin-600.woff2', type: 'woff2' }
            ]
          }
        ]
      },
      {
        family: 'Allerta Stencil',
        locals: ['Allerta Stencil'],
        fallback: ['Roboto', 'sans-serif'],
        variances: [
          {
            style: 'normal',
            weight: 400,
            sources: [
              { src: '@/assets/fonts/allerta-stencil-v16-latin-regular.woff', type: 'woff' },
              { src: '@/assets/fonts/allerta-stencil-v16-latin-regular.woff2', type: 'woff2' }
            ]
          }
        ]
      },
      {
        family: 'Caveat',
        locals: ['Caveat'],
        fallback: ['Roboto', 'sans-serif'],
        variances: [
          {
            style: 'normal',
            weight: 700,
            sources: [
              { src: '@/assets/fonts/caveat-v14-latin-700.woff', type: 'woff' },
              { src: '@/assets/fonts/caveat-v14-latin-700.woff2', type: 'woff2' }
            ]
          }
        ]
      },
      {
        family: 'Poppins',
        locals: ['Poppins'],
        fallback: ['Roboto', 'sans-serif'],
        variances: [
          {
            style: 'normal',
            weight: 400,
            sources: [
              { src: '@/assets/fonts/poppins-v19-latin-regular.woff', type: 'woff' },
              { src: '@/assets/fonts/poppins-v19-latin-regular.woff2', type: 'woff2' }
            ]
          }
        ]
      }
    ],

    componentAutoImport: false,
    componentPrefix: undefined,

    /**
     * IntersectionObserver rootMargin for Compoennts and Assets
     */
    lazyOffset: {
      component: '0%',
      asset: '0%'
    },

    loader: {
      dataUri: null,
      size: '100px',
      backgroundColor: 'grey'
    }

  },

  image: {
    screens: {
      default: 320,
      xxs: 480,
      xs: 576,
      sm: 768,
      md: 996,
      lg: 1200,
      xl: 1367,
      xxl: 1600,
      '4k': 1921
    },

    domains: ['img.youtube.com', 'i.vimeocdn.com'],

    alias: {
      youtube: 'https://img.youtube.com',
      vimeo: 'https://i.vimeocdn.com',
    }
  },

To Reproduce
Steps to reproduce the behavior:

1. Go to https://lahore-preprod-nuxt3-speedkit.netlify.app/
2. you'll see the weired flicker

Expected behavior
when load or reload the site it should be smooth. not this flicker.
this deployment link is without this nuxt-speedkit https://lahore-preprod-nuxt3.netlify.app/

Screenshots
With nuxt-speedkit:

and without nuxt-speedkit:

Other than Cumulative Layout Shift it seems to be good.

Desktop (please complete the following information):

• OS: Mac, Linux
• Browsers: Chrome, Firefox, Safari(a little)
• Latest Version

Smartphone (please complete the following information):
on mobile phone this is working pefectly and there is massive performance increase

Additional context
Here is the gif with nuxt-speedkit:

and without this package loading is smooth on desktop:

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Unified Video Components SpeedkitVideo?

Is your feature request related to a problem? Please describe.
I'm looking for a component that supports multiple video providers like @nuxt/image

Describe the solution you'd like
A new unified SpeedkitVideo component

Describe alternatives you've considered
Refer to these two library: playerxo/playerx and sampotts/plyr, maybe we can unified current SpeedkitVimeo and SpeedkitYoutube to a single component, maybe call it SpeedkitVideo? That would be as cool as @nuxt/image

issue with nuxt-bridge

Hello,
when trying to use speedkit with nuxt-bridge
i got this error:
× Server
Compiled with some errors in 1.71m

ERROR Failed to compile with 1 errors friendly-errors 09:29:14

ERROR in ./node_modules/nuxt-speedkit/plugin.js friendly-errors 09:29:14

Syntax Error: Unexpected token (11:31) friendly-errors 09:29:14

9 | Vue.use(vFont)
10 |

11 | const fontList = new FontList(<%= options.fonts %>)
| ^
12 |
13 | export default (context, inject) => {
14 | inject('getFont', fontList.getFont.bind(fontList))

                                                                               friendly-errors 09:29:14

@ ./.nuxt/index.js 34:0-70 570:25-52 576:19-46
@ ./.nuxt/client.js
@ ./.nuxt/nuxt-speedkit/entry.js
@ multi ./node_modules/@nuxt/bridge/dist/runtime/capi.plugin.mjs ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/nuxt-speedkit/entry.js
friendly-errors 09:29:14
i Waiting for file changes 09:29:15
i Memory usage: 1 GB (RSS: 1.27 GB) 09:29:15
i Listening on: http://localhost:3000/ 09:29:15
√ Nitro built in 366 ms 09:29:15
Server Side Rendering Error: Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Dev\footfoot\footfoot-client\node_modules\nuxt-speedkit\plugin.js: Unexpected token (11:31)

9 | Vue.use(vFont)
10 |

11 | const fontList = new FontList(<%= options.fonts %>)
| ^
12 |
13 | export default (context, inject) => {
14 | inject('getFont', fontList.getFont.bind(fontList))
at Object._raise (D:\Dev\footfoot\footfoot-client\node_modules@babel\parser\lib\index.js:541:17)
at Object.raiseWithData (D:\Dev\footfoot\footfoot-client\node_modules@babel\parser\lib\index.js:534:17)
at Object.raise (D:\Dev\footfoot\footfoot-client\node_modules@babel\parser\lib\index.js:495:17)
at Object.unexpected (D:\Dev\footfoot\footfoot-client\node_modules@babel\parser\lib\index.js:3550:16)
at Object.parseIdentifierName (D:\Dev\footfoot\footfoot-client\node_modules@babel\parser\lib\index.js:12697:18)
at Object.parseIdentifier (D:\Dev\footfoot\footfoot-client\node_modules@babel\parser\lib\index.js:12677:23)
at Object.tsParseTypeParameterName (D:\Dev\footfoot\footfoot-client\node_modules@babel\parser\lib\index.js:10185:27)
at Object.tsParseTypeParameter (D:\Dev\footfoot\footfoot-client\node_modules@babel\parser\lib\index.js:7965:22)
at Object.tsParseDelimitedListWorker (D:\Dev\footfoot\footfoot-client\node_modules@babel\parser\lib\index.js:7842:23)
at Object.tsParseDelimitedList (D:\Dev\footfoot\footfoot-client\node_modules@babel\parser\lib\index.js:7831:25)
at Object.tsParseBracketedList (D:\Dev\footfoot\footfoot-client\node_modules@babel\parser\lib\index.js:7877:25)
at Object.tsParseTypeParameters (D:\Dev\footfoot\footfoot-client\node_modules@babel\parser\lib\index.js:7986:24)
at D:\Dev\footfoot\footfoot-client\node_modules@babel\parser\lib\index.js:9818:29
at Object.tryParse (D:\Dev\footfoot\footfoot-client\node_modules@babel\parser\lib\index.js:3577:20)
at Object.parseMaybeAssign (D:\Dev\footfoot\footfoot-client\node_modules@babel\parser\lib\index.js:9815:24)
at D:\Dev\footfoot\footfoot-client\node_modules@babel\parser\lib\index.js:11081:39
at Object../node_modules/nuxt-speedkit/plugin.js (D:\Dev\footfoot\footfoot-client.nuxt\dist\server\server.js:9992:7)
at webpack_require (D:\Dev\footfoot\footfoot-client.nuxt\dist\server\server.js:27:30)
at Module../.nuxt/index.js (D:\Dev\footfoot\footfoot-client.nuxt\dist\server\server.js:2186:86)
at webpack_require (D:\Dev\footfoot\footfoot-client.nuxt\dist\server\server.js:27:30)
at Module../.nuxt/server.js (D:\Dev\footfoot\footfoot-client.nuxt\dist\server\server.js:3823:67)
at webpack_require (D:\Dev\footfoot\footfoot-client.nuxt\dist\server\server.js:27:30)
at Object.0 (D:\Dev\footfoot\footfoot-client.nuxt\dist\server\server.js:33994:18)
at webpack_require (D:\Dev\footfoot\footfoot-client.nuxt\dist\server\server.js:27:30)
at D:\Dev\footfoot\footfoot-client.nuxt\dist\server\server.js:133:18
at Object. (D:\Dev\footfoot\footfoot-client.nuxt\dist\server\server.js:136:10)
(node:22448) UnhandledPromiseRejectionWarning: Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Dev\footfoot\footfoot-client\node_modules\nuxt-speedkit\plugin.js: Unexpected token (11:31)

Thanks for your help

The automated release is failing 🚨

🚨 The automated release from the beta branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the beta branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Performance detection bug

Describe the bug
On weaker devices, if I set the detection.performance property to true, the page doesn't load the additional resources after the initial page load, so it stops working. If I turn off performance detection or set very high fcp & dcl to always meet the requirements, than it is highly reducing the performance by leaving a 22mb generated chunk in the initial payload. With performance detection and the following options, the page is fast, but doesn't work on weaker devices at all. It is also happening when I don't include the SpeedkitLayer in the code.
I thought that the forceInit option is for this purpose but for me it makes no difference.

To Reproduce
I have the following setup:

`speedkit: {
detection: {
performance: true,
browserSupport: true
},
forceInit: true,
performanceMetrics: {
device: {
hardwareConcurrency: { min: 2, max: 48 },
deviceMemory: { min: 2 }
},
timing: {
fcp: 800,
dcl: 1200
}
},

    componentAutoImport: false,
    componentPrefix: undefined,
    lazyOffset: {
        component: '00%',
        asset: '0%'
    }
},`

Expected behavior
Continue page loading in case the performance requirements not met.

Cannot start app with nuxt-speedkit

I am getting a bug upon setup.

1. Installation npm i nuxt-speedkit
2. Inserted 'nuxt-speedkit' in the modules array in nuxt.config.js
3. Inserted speedkit object in nuxt.config.js
4. Issue: When trying to npm run dev I get an error "Could not compile template ~/website/node_modules/nuxt-speedkit/templates/plugin.js"

I was trying to search Google for a possible answer and it seems this issue is relevant to other projects: https://codesandbox.io/s/murlf?file=/package.json:508-517. This project also shows the same error "Could not compile template..".

Cheers!

The automated release is failing 🚨

🚨 The automated release from the beta branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the beta branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

It's not possible to set crossorigin undefined

Describe the bug
Sometimes we don't want the crossorigin property for the img tag.
Because this, we can't do that

crossorigin: options.crossorigin || scope.nuxt.options.render.crossorigin || 'anonymous',

Module parse failed: Unexpected character '#' (2:2)

Describe the bug
I get a loader error when trying to setup nuxt-speedkit.

To Reproduce
Steps to reproduce the behavior:

1. Installed following instructions.

Following error occurs

 ERROR  in ../node_modules/nuxt-speedkit/plugins/vFont/head.js                                                                                                                                                      friendly-errors 14:34:21

Module parse failed: Unexpected token (36:36)                                                                                                                                                                       friendly-errors 14:34:21
File was processed with these loaders:
 * ../node_modules/cache-loader/dist/cjs.js
 * ../node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
>   const nuxtStateData = (this.$nuxt?.context || this.context)?.nuxtState?.data;
|
|   if (nuxtStateData && nuxtStateData.length) {
                                                                                                                                                                                                                    friendly-errors 14:34:21
 @ ./.nuxt/nuxt-speedkit/plugin.js 8:0-56 78:12-16
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ ./.nuxt/nuxt-speedkit/entry.js
 @ multi ../node_modules/eventsource-polyfill/dist/browserify-eventsource.js ../node_modules/webpack-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&overlay=false&name=client ./.nuxt/nuxt-speedkit/entry.js
                                                                                                                                                                                                                    friendly-errors 14:34:21

Additional context
This happens for all the speed-kit plugins.

Uncaught (in promise) DOMException: Failed to execute 'check' on 'FontFaceSet'

          So, it's working now but the browser console is throwing an error?

Uncaught (in promise) DOMException: Failed to execute 'check' on 'FontFaceSet': Could not resolve 'bold 600 12px 'FontName'' as a font.

Originally posted by @sbastias in #831 (comment)

Unable to import after updating from 2.0.13 to 2.2.1

I'm currently using the nuxt-speedkit package in my project and I've encountered some difficulties after recent updates. I have been trying to import specific components and files directly from the package like so:

import SpeedkitImage from 'nuxt-speedkit/components/SpeedkitImage';
import SpeedkitPicture from 'nuxt-speedkit/components/SpeedkitPicture';
import speedkitHydrate from 'nuxt-speedkit/hydrate';

Now I'm having this issue for all these imports:

Unable to resolve path to module 'nuxt-speedkit/hydrate'.eslint[import/no-unresolved](https://github.com/import-js/eslint-plugin-import/blob/v2.27.5/docs/rules/no-unresolved.md)

I've checked the new structure of the nuxt-speedkit package and it seems to have changed significantly, which may be causing the issue. I have tried adjusting the import paths to match the new structure, but I'm still encountering the same problem.

I'm using nuxt 2.15.8.

Could you please provide some guidance on how to import these specific components and files with the new package structure? Are direct file imports supported with the current version of nuxt-speedkit?

FontConfig is failed

When you run the npm run build command, a warning is displayed: TypeError: Array.from(...).map(...).flat(...) is not a function or its return value is not iterable

at FontConfig.toCSS (node_modules/nuxt-speedkit/classes/FontConfig.js:20:10)

nuxt.config.js:

speedkit: {
    detection: {
      performance: true,
      browserSupport: true,
    },
    performance: {
      device: {
        hardwareConcurrency: { min: 2, max: 48 },
        deviceMemory: { min: 2 },
      },
      timing: {
        fcp: 400,
        dcl: 800,
      },
      lighthouseDetectionByUserAgent: false,
    },
    fonts: [{
      family: 'RobotoCondensed Regular',
      locals: ['RobotoCondensed Regular'],
      fallback: ['sans-serif'],
      variances: [{
        style: 'normal',
        weight: 400,
        sources: [
          { src: '~assets/fonts/RobotoCondensed-Regular.woff2?v=1.0', type: 'woff2' },
          { src: '~assets/fonts/RobotoCondensed-Regular.woff?v=1.0', type: 'woff' },
          { src: '~assets/fonts/RobotoCondensed-Regular.ttf?v=1.0', type: 'truetype' },
          { src: '~assets/fonts/RobotoCondensed-Regular.svg#Formular-Black?v=1.0', type: 'svg' },
          { src: '~assets/fonts/RobotoCondensed-Regular.eot?#iefix?v=1.0', type: 'embedded-opentype' },
        ],
      }],
    }],

    componentAutoImport: false,
    componentPrefix: undefined,

    /**
     * IntersectionObserver rootMargin for Compoennts and Assets
     */
    lazyOffset: {
      component: '0%',
      asset: '0%',
    },
  },

Property "$getFont" was accessed during render but is not defined on instance.

Node v19.9.0
NuxtJS v3.6.1

nuxt-speedkit installed successfully: ^3.0.0-next.17

But I'm getting ts errors in nuxt config {fonts} declaration (never[]), as well as the titular error when I try
v-font="$getFont('fontName')"

What am I doing wrong?
THANK YOU!

Cannot add property data-fetch-key, object is not extensible

Nuxt version:
2.15.7

Node version:
v16.13.0

No problem using yarn dev.
Using yarn build && yarn start fails with:

 ERROR  Cannot add property data-fetch-key, object is not extensible                                                                                                                  18:55:21

  at a.serverPrefetch (.nuxt/mixins/fetch.server.js:25:0)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async Promise.all (index 0)

The fetch.server.js fails here:

  // Add data-fetch-key on parent element of Component
  const attrs = this.$vnode.data.attrs = this.$vnode.data.attrs || {}
  attrs['data-fetch-key'] = this._fetchKey

Does this plugins working on ssr mode

Does this working with ssr website or only generated one?

ERROR Error while requiring module nuxt-speedkit: TypeError: _consola.default.withTag is not a function

Describe the bug
The app does not build correctly due to an error,
The error is:

ERROR  Error while requiring module nuxt-speedkit: TypeError: _consola.default.withTag is not a function 

To Reproduce
Steps to reproduce the behavior:

1. Install the package
2. Copy the doc default settings in your project
3. Run npm run dev
4. See error

Expected behavior
The app should build without any error, as it does without this module.
A clear and concise description of what you expected to happen.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. brave.]
• Version [e.g. 1.56.11]

Would like have a better friendly style of LoadingSpinner

Describe the bug
Instead of set the loading spinner for img tag

.${this.className}.loading {
  background-image: url(${this.#dataUri});
  background-repeat: no-repeat;
  background-position: center;
  background-size: ${this.#size};
  background-color: ${this.#backgroundColor};
 }

would like to set this for the img's pseudo-elements :before or :after

.${this.className}.loading:after {
  background-image: url(${this.#dataUri});
  background-repeat: no-repeat;
  background-position: center;
  background-size: ${this.#size};
  background-color: ${this.#backgroundColor};
  content: '';
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
 }

Docs: Link to edit broken

Steps to reproduce:

1. Go to page: https://nuxt-speedkit.grabarzundpartner.dev/caveats
2. Click: Edit this page on GitHub
3. We get 404

Solution: add v2 to links
https://github.com/GrabarzUndPartner/nuxt-speedkit/edit/main/docs/content/v2/en/caveats.md

Class not merged in rendering stage

We have error and we investigate to have option for using this module.
Consider this scenario:

• We added properly module
• Add lazy hydration importing in components
• Our component initiation:

      <section_two_column
        class="px-[10%]"
        :full-img="true"
      />

• Our component xyz.vue with name is section_two_column start definition (part):

<template>
  <section
    v-bind="$attrs"
    class="bg-white relative w-full pb-8 tablet-wide:pb-14 pt-10 tablet-wide:pt-16 text-gray-dark"
  >
...
 </section>
</template>

• Our generation is completed and no error
• We see that px-[10%] aren't added to code on server side. Hydration if done then it will show up.
  So from pages to components there aren't inject of class. We have and don't have v-bind so it won't help either.
  We have initiation with dynamic class but that won't work either too.
  Issue only show with this module - we use <LazyHydrate> from vue-lazy-hydration before apply and was working

I propose to check maybe here:
https://github.com/GrabarzUndPartner/nuxt-speedkit/blob/b26fb8c6e3c29ed400cd8b940bfb445527e10b65/lib/hydrate.js#L14-L22

Remove default style class from SpeedkitImage & SpeedkitPicture

Describe the bug
Hello!
I was trying to migrate nuxt-img component to SpeedkitImage, and then realized that legacy styles are all broken.
That's caused by the own style of SpeedkitImage like below

<style lang="postcss" scoped>
/*! purgecss start ignore */
.nuxt-speedkit-image {
  content-visibility: auto;
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
/*! purgecss end ignore */
</style>

However, I think this class should be removed and let user decide style.

Expected behavior

Remove default style and let user customize styling on their own.

Chrome Energy Saver Mode Problem

Describe the bug
Javascript not executing when Chrome Energy Saver Mode is active.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Chrome Settings and find Power section. enable Turn on when my computer is unplugged option.'
2. Unplug power cable from your notebook
3. Refresh nuxt page and find any of executable js method (@click, @blur or anything else)
4. See no action

Expected behavior
On energy saver mode js methods should run

Desktop (please complete the following information):

• OS: [e.g. MacOS]
• Browser [e.g. chrome]

Any of js executable methods, plugins not loaded when speedkit is active on energy saver mode. If i disable nuxt-speedkit everything run as expected.

The automated release is failing 🚨

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Inconsistent behavior between dev and prod server mode

Nuxt version:
2.15.7

Node version:
v16.13.0

No problem using yarn dev.
Using yarn build && yarn start gives unexpected results for imported components using speedkitHydrate.
They fetch method in those components are trigerred in loop on some of them, and don't know why.
In a first time I tought it was on property change or something like that (although usually changing a property does not retrigger fetch), but even after checking properties are not changed using a "watch" on them, I still observe the unexpected fetch loop (querying in my case an API).

Before digging more, what is supposed to trigger fetch loop in components?

The automated release is failing 🚨

🚨 The automated release from the beta branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the beta branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update nuxt (@nuxt/module-builder, @nuxt/webpack-builder, nuxt)

Detected dependencies

devcontainer

.devcontainer/devcontainer.json

• mcr.microsoft.com/devcontainers/javascript-node 1-18

github-actions

.github/workflows/codeql-analysis.yml

• actions/checkout v4
• github/codeql-action v3
• github/codeql-action v3
• github/codeql-action v3

.github/workflows/main.yml

• actions/setup-node v4
• actions/checkout v4
• actions/cache v4
• actions/setup-node v4
• actions/checkout v4
• actions/cache v4
• actions/setup-node v4
• actions/checkout v4
• actions/cache v4
• actions/upload-artifact v4
• actions/setup-node v4
• actions/checkout v4
• actions/cache v4
• actions/upload-artifact v4
• actions/download-artifact v4
• actions/download-artifact v4
• peaceiris/actions-gh-pages v4

.github/workflows/next.yml

• actions/setup-node v4
• actions/checkout v4
• actions/cache v4
• actions/setup-node v4
• actions/checkout v4
• actions/cache v4

.github/workflows/sonar-cloud.yml

• actions/setup-node v4
• actions/checkout v4
• actions/cache v4

.github/workflows/test.yml

• actions/setup-node v4
• actions/checkout v4
• actions/cache v4

npm

package.json

• @nuxt/image 1.7.0
• @nuxtjs/fontaine 0.4.3
• browserslist-useragent-regexp 4.1.3
• cheerio 1.0.0-rc.12
• defu 6.1.4
• dom-serializer 2.0.0
• dynamic-class-list 2.0.2
• htmlparser2 9.1.0
• image-meta 0.2.1
• pathe 1.1.2
• sort-css-media-queries 2.3.0
• vue3-lazy-hydration 1.2.1
• @commitlint/cli 19.3.0
• @commitlint/config-conventional 19.2.2
• @fullhuman/postcss-purgecss 6.0.0
• @nuxt/eslint 0.3.13
• @nuxt/module-builder 0.8.0
• @nuxt/webpack-builder 3.12.2
• @types/node 20.14.11
• commitlint 19.3.0
• eslint 9.7.0
• eslint-config-prettier 9.1.0
• eslint-formatter-json-relative 0.1.0
• eslint-plugin-prettier 5.2.1
• eslint-plugin-security 3.0.1
• finalhandler 1.2.0
• get-port-please 3.1.2
• husky 9.1.1
• jsdom 24.1.0
• lint-staged 15.2.7
• markdown-it-inline-comments 1.0.1
• nuxt 3.11.2
• pinst 3.0.0
• playwright 1.45.2
• postcss-functions 4.0.2
• postcss-html 1.7.0
• postcss-nesting 12.1.5
• postcss-preset-env 9.6.0
• prettier 3.3.3
• read-pkg 9.0.1
• serve-static 1.15.0
• stylelint-config-recess-order 5.0.1
• stylelint-config-standard 36.0.1
• vite-svg-loader 5.1.0
• vitepress 1.3.1
• vitest 2.0.3
• wicg-inert 3.1.2

nvm

.nvmrc

• node 20.15.1

---

• Check this box to trigger a request for Renovate to run again on this repository

[Progress] `nuxt@3` support

Nuxt 3 version is available 🎉

V3 Docs

⚠️ Important: nuxt-booster 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-booster

Todos

General

• Docs
• How is the crossorigin handled in nuxt@3? (e.g. anonymous, use-credentials)
  Is set via the module option crossorigin.

Entry integration

• Vite
• Webpack

Preload optimization

• Resource Manifest optimization Reduce preloads, prefetches per generate HTML manipulation
  • nuxt/nuxt#14362

Embedded CSS

• Vite
• Webpack

Plugin

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

Image (BoosterPicture/BoosterImage)

• @nuxt/image nuxt/image#548

Helper & Components

Helper

• boosterHydrate
  • replace vue-lazy-hydration with vue3-lazy-hydration

Components

• BoosterLayer
• BoosterImage
• BoosterPicture
• BoosterVimeo
• BoosterYoutube
• BoosterIframe
• WeakHardwareOverlay

Removed Components

• abstracts/ComponentObserver
  • Composable: #booster/composables/componentObserver
• abstracts/OnlySsr
• GoogleLighthouse

Tests

• replaced jest with vitest

The automated release is failing 🚨

🚨 The automated release from the beta branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the beta branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Cannot read property 'link' of undefined

nuxt : 2.15.8
target : server

when add
modules: [
'nuxt-speedkit'
],

The following error appears: Cannot read property 'link' of undefined

@nuxt/image - Optional

Is there any chance we can have this option configurable? There are times when a CMS takes care of this along with CDN. So the image optimizations are never used.

Proposed Solution
It would be great if you could disable/enable the image feature when needed. This way you are not loading unneeded modules.

Errors
[nuxt-speedkit] added module @nuxt/image, for more configuration learn more at https://image.nuxtjs.org/setup#configure

ERROR [@nuxt/image] ipx is an optional dependency for local image optimization and is not properly installed. Please try npm install or yarn install again.

ERROR TypeError [ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING]: A dynamic import callback was not specified.

at node_modules/@nuxt/image/dist/module.cjs:112:13

nuxt-speekit causing modules, plugins, or general CSS to run multiple times

Describe the bug
When I use this module, all the weights for my h1-h6 get overridden with inherit. I am assuming this is because the goal of the font loading here is to define $getFont on every element that needs a different font weight, but I want to load all of these initially as preload not have to define each one. Is there a way to turn off this behavior?

Duplicate fetch key detected

Describe the bug
Duplicate fetch key detected

To Reproduce

1. Create a.vue component and use the SpeedkitImage inside
2. Use the a.vue component for multi components

Expected behavior

fetchKey(getCounter) {
    // getCounter is a method that can be called to get the next number in a sequence
    // as part of generating a unique fetchKey.
    if (this.source) {
      return (
        `image-${new Source(this.source)?.key}${getCounter('speedkit-image')}`
      )
    }
    return 'image'
  },

Cannot read property 'matchMedia' of null

Describe the bug
In dev mode I see the message 'nuxt-speedkit added module @nuxt/image'. Local starts as usual. Then when I run yarn build, then yarn start I get the following error:

` ERROR Cannot read property 'matchMedia' of null

at printObserver (node_modules/@nuxt/image/dist/runtime/image.js:205:0)
at image_createObserver (node_modules/@nuxt/image/dist/runtime/image.js:238:0)
at createImage (node_modules/@nuxt/image/dist/runtime/image.js:184:0)
at _nuxt_image (.nuxt/image.js:29:0)
at createApp (.nuxt/index.js:230:0)
at async module.exports.webpack_exports.default (.nuxt/server.js:81:0)`

To Reproduce
Steps to reproduce the behavior:

1. Install module
2. Add 'nuxt-speedkit' to modules inside nuxt.config.js
3. Run yarn build
4. Run yarn start

Work Around
Steps to workaround the issue:

1. Install @nuxt/image
2. Run yarn build
3. Run yarn start

As a side note we don't use nuxt/image as we run everything through keyCDN.

Nuxt Version
2.15.6

Speedkit breakes complete page

Hello,

I want to try speedkit in a nuxt 2 app with vuetify, pwa and a lot of other stuff and modules. The page is rendered in ssr-mode.

I installed speedkit via npm and set the following base-config:

speedkit: {
    detection: {
      performance: true,
      browserSupport: true,
    },

    performanceMetrics: {
      device: {
        hardwareConcurrency: {min: 2, max: 48},
        deviceMemory: {min: 2},
      },
      timing: {
        fcp: 800,
        dcl: 1200,
      },
    },

    fonts: [],

    targetFormats: ['webp', 'avif', 'jpg|jpeg|png|gif'],

    componentAutoImport: false,
    componentPrefix: undefined,

    /**
     * IntersectionObserver rootMargin for Compoennts and Assets
     */
    lazyOffset: {
      component: '0%',
      asset: '0%',
    },

    loader: {
      dataUri: null,
      size: '100px',
      backgroundColor: 'grey',
    },

    disableNuxtImage: true,
  },

Next to this I did not change anything (no layout, no component).

When I now build and start the page is completely broken and I got the following error:

caught ReferenceError: global is not defined
    at f (d66aa00.modern.js:1:19545)
    at Module.<anonymous> (d66aa00.modern.js:1:21730)
    at 56 (d66aa00.modern.js:1:23424)
    at o (d66aa00.modern.js:1:588)
    at 54 (d66aa00.modern.js:1:19610)
    at o (d66aa00.modern.js:1:588)
    at c (d66aa00.modern.js:1:445)
    at Array.d [as push] (d66aa00.modern.js:1:308)
    at e08e80a.modern.js:1:47
f

Any ideas how to debug and fix this?

Best regards,

Timo

Adsense support required

This module works great, but while using AdSense module there is no improvement.
Please consider adding AdSense module support if possible.

Cannot install on Apple M1

After running npm install I get the following error:
ERR! sharp Prebuilt libvips 8.10.5 binaries are not yet available for darwin-arm64v8

Installing nuxt-image or sharp stand alone does not give any issues, and also tried running terminal with Rosetta emulation, but no dice.

Does anyone have a solution?

Form not loading except when changing tabs

Hello.

I am encountering a problem with Chrome (uninstalling nuxt-speedkit or downgrading to v1 the problem is no longer there), and forms. When I try to load a form on my website it takes a very long time before loading the form. The form immediately loads if I change tabs. The problem seems to be specific to Chrome. No problems on Safari or Firefox.

What type of issue is this?

Thanks.

Hydration not work if page not visible and not active tab

Describe the bug
hydration after hard reload will not happened at all if you opened website and before see any content, immediately switch to any other browser tab page. it also happened to me on android google chrome.

To Reproduce
Steps to reproduce the behavior:

1. Scroll down and Go to 'Demos' section of Nuxt Speedkit Introduction
2. Open Grabarz & Partner website in new tab with middle click of mouse.
3. After few moments (e.g. few seconds) that sure server-side rendered content received and loaded switch to Grabarz & Partner tab.
4. You will notice that video of hero section doesn't play. also with scroll down any image and content will not show.

Expected behavior
Hydration on client side must happen even website tab/window is not visible and not active tab or loses focus.

Screenshots
https://imgur.com/a/uOc7f33

Desktop (please complete the following information):

• OS: Windows NT 10.0; Win64; x64
• Browser: Chrome 108.0.5359.73
• Nuxt: 2.15.8
• Nuxt-speedkit: 2.1.2

Smartphone (please complete the following information):

• Device: SM-G781B
• OS: Android 12
• Browser: Chrome 108.0.5359.79

Duplicate Styles

Describe the bug
Styles are loaded twice. All component style tags are scoped. Global styles are set in nuxt.config.js and are not imported anywhere else.
I don't quite understand if this is some Nuxt-Speedkit bug, or a bug in my project?

Screenshots

Additional context
Nuxt version 2.15.8, universal mode, extractCSS build option enabled, styles, variables and mixins are loaded from the following files.

css: [
    '@/assets/scss/style.scss'
],
styleResources: {
    scss: [
         '@/assets/scss/global.scss'
    ]
},

Nuxt 3 Support

Hey, love this package and just wondering if you have plans to make it Nuxt 3 compatible? If so, roughly when will it be?

The "data" option should be a function error after minimal installation of speedkit

Describe the bug
The "data" option should be a function that returns a per-instance value in component definitions Error thrown in dev mode after minimal installation.

To Reproduce
Steps to reproduce the behavior:

1. npm i nuxt-speedkit
2. add nuxt-speedkit to modules
3. Run dev server with npm run dev
4. The error is thrown in the console

Screenshots
Line 8 from bottom shows error is somehow linked to speedkit.

Versions

• nuxt-speedkit: 1.1.27
• Nuxt: 2.15.3
• Browser: Chrome 88.0.4324.182

Additional context
https://www.reddit.com/r/Nuxt/comments/mfqthj/nuxtspeedkit_will_help_you_to_improve_the/gst3yzb?utm_source=share&utm_medium=web2x&context=3