danielroe / nuxt-font-metrics Goto Github PK

View Code? Open in Web Editor NEW

320.0 3.0 12.0 2.2 MB

🔤 Font metric overrides to reduce CLS

License: MIT License

JavaScript 1.85% TypeScript 64.92% Vue 32.60% CSS 0.63%

performance web-vitals cls nuxt nuxt-module hacktoberfest

nuxt-font-metrics's Introduction

Nuxt Fontaine

Font metric fallback implementation for Nuxt 3

Features

⚠️ @nuxtjs/fontaine is under active development. ⚠️

💪 Reduces CLS by using local font fallbacks with crafted font metrics.
✨ Generates font metrics and fallbacks automatically.
⚡️ Pure CSS, zero runtime overhead.

On the playground project, enabling/disabling this module makes the following differences rendering /, with no customisation required:

	Before	After
CLS	`0.34`	`0.013`
Performance	`88`	`98`

What's next

For best performance, you will need to inline all your CSS, not just the font-face fallback rules (which this module does automatically), or there will still be a layout shift when the stylesheet loads (which is why the number above is not zero).

This PR aims to bring that ability to Nuxt itself.

Installation

npx nuxi@latest module add fontaine

Usage

export default defineNuxtConfig({
  modules: ['@nuxtjs/fontaine'],
  // If you are using a Google font or you don't have a @font-face declaration
  // for a font you're using, you can declare them here.
  //
  // In most cases this is not necessary.
  //
  // fontMetrics: {
  //   fonts: ['Inter', { family: 'Some Custom Font', src: '/path/to/custom/font.woff2' }],
  // },
})

That's it!

Tailwind CSS

If you use Tailwind CSS and use your custom font via the config file, you will need to manually add the fallback font.

import type { Config } from 'tailwindcss'
import { fontFamily } from 'tailwindcss/defaultTheme'

export default <Partial<Config>> {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Roboto', 'Roboto fallback', ...fontFamily.sans],
      },
    },
  },
}

How it works

Nuxt will scan your @font-face rules and generate fallback rules with the correct metrics. For example:

@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: url('/fonts/Roboto.woff2') format('woff2'), url('/fonts/Roboto.woff') format('woff');
  font-weight: 700;
}
/* This will be generated. */
@font-face {
  font-family: 'Roboto fallback';
  src: local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'), local('Helvetica Neue'),
    local('Arial'), local('Noto Sans');
  ascent-override: 92.7734375%;
  descent-override: 24.4140625%;
  line-gap-override: 0%;
}

Then, whenever you use font-family: 'Roboto', Nuxt will add the fallback to the font-family:

:root {
  font-family: 'Roboto';
  /* This becomes */
  font-family: 'Roboto', 'Roboto fallback';
}

Using outside of Nuxt

The core of this module will work outside of Nuxt, and has been separated into a separate library: fontaine. Check it out!

💻 Development

Clone this repository
Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
Install dependencies using pnpm install
Stub module with pnpm dev:prepare
Run pnpm dev to start playground in development mode

Credits

This would not have been possible without:

amazing tooling and generated metrics from capsizecss
suggestion and algorithm from Katie Hempenius & Kara Erickson on the Google Aurora team - see notes on calculating font metric overrides.

License

Made with ❤️

Published under the MIT License.

nuxt-font-metrics's People

Contributors

Stargazers

Watchers

Forkers

ijkml damianglowala diizzayy lgtm-migrator chrishabiak ram-you guy-confetti alexbidenko ndinhbang barbapapazes danielroe seanpm2001

nuxt-font-metrics's Issues

fix: redundant/suboptimal @font-face definitions

🐛 The bug

When encountering multiple @font-face definitions addressing the same font (according to "src" attribute) defined in CSS with i.e. multiple unicode-ranges and/or font-weights/styles this module outputs the same override for every definition.

🛠️ To reproduce

https://stackblitz.com/edit/github-wrgakp-4yzwmm

🌈 Expected behaviour

Output should either group overrides by "src" attribute eliminating multiplication of CSS or (probably unnecessary) take into account weight/style/unicode-range variations.

ℹ️ Additional context

In the reproduction look at <style type="text/css" data-vite-dev-id="/home/projects/github-wrgakp-4yzwmm/node_modules/.cache/nuxt-google-fonts/css/nuxt-google-fonts.css"> in the <head> section.

docs: more precisions in readme

📚 Is your documentation request related to a problem?

I use Tailwind for my CSS. With it, you can have custom class to handle font-family.

So, in my CSS file, I write:

html {
  @apply font-<font-name>;
}

But this will not resolve in

html {
  font-family: <font-name>, "<font-name> override";
}

But in

html {
  font-family: <font-name>;
}

🔍 Where should you find it?

In the README, you say:

If you are using a Google font or you don't have a @font-face declaration
for a font you're using, you can declare them here.

But maybe, you can add something about using @apply !

ℹ️ Additional context

No response

help: how to generate overrides (content-wind + google-fonts + fontaine)

📚 What are you trying to do?

I'm trying to integrate this module + Google Fonts module to my website (which is based on content-wind).

I don't get any overrides generated, no matter what I try. I assume I don't understand the stack well enough, yet.
Help very appreciated 🥲

🔍 What have you tried?

I've checked the issue #108 and tried to specify the fontMetrics property in nuxt.config.ts (as I do not have any @font-face declarations in my local CSS):

fontMetrics: {
  fonts: ['Poppins', { family: 'Poppins', src: '/assets/fonts/Poppins-400.woff2' }]
},

...not sure if that makes sense as I actually want to leverage the download option from the google-fonts module, but then I don't know how configure fontaine to generate overrides.

I also tried to specify @font-face in my main.css instead of the lines above.

ℹ️ Additional context

I set the font-family inside tailwind.config.ts

export default {
  theme: {
    fontFamily: {
      sans: ['Poppins', 'sans-serif']
    }
  }
}

Font imports from preprocessors seem to be ignored

🐛 The bug

If I use @font-face declarations that are imported in a global CSS file like a @import '~/fonts.scss' statement in main.scss via an CSS preprocessor like SASS, nuxt-modules/fontaine won't reognize those fonts unless I declare them manually in fontMetrics, or I import the fonts CSS directly in Nuxt config, or import the fonts CSS in the App.vue.

🛠️ To reproduce

https://stackblitz.com/edit/github-jzaonw

🌈 Expected behaviour

It would be nice to consider such imports to save redundant code or even support this kind of "code-paradigm".

ℹ️ Additional context

No response

Maige Usage

Thanks for trying Maige.

Running GPT-based services is pricey. At this point, we ask you to add payment info to continue using Maige.

Add payment info

Feel free to close this issue.

help: Using fontaine with Google Fonts

📚 What are you trying to do?

I'd like to use Fontaine with Google Fonts, for which I am using Nuxt Google Fonts module.

When you say:

If you are using a Google font or you don't have a @font-face declaration for a font you're using, you can declare them here.

Does this mean Fontaine does not work with Google fonts? Or is there a way to configure that?

🔍 What have you tried?

I reviewed the docs and the web but could not find a solution or anyone that encountered a similar problem.

ℹ️ Additional context

No response

fix: inherit is also "inherit override"

🐛 The bug

Using Unocss in a nuxt project, buton get "inherit override".

🛠️ To reproduce

https://stackblitz.com/edit/github-zvbtmv?file=pages/index.vue

🌈 Expected behaviour

I expected that did not happened and to have only "inherit"

ℹ️ Additional context

No response

Error Cannot start nuxt: ENOENT: no such file or directory,

📚 What are you trying to do?

I have custom font

🔍 What have you tried?

And configured on tailwind.css

ℹ️ Additional context

[uncaughtException] Cannot destructure property 'capHeight' of 'font' as it is undefined.

Cannot start nuxt: ENOENT: no such file or directory,

(node:2908) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously

feat: add optional root option for not public fonts

🆒 Your use case

If a developer wants to avoid using fonts stored in Nuxt's public path, they cannot do it. For example, a developer might want to use assets directory as fonts storage (or some others). assets directory is better when site will use caching tools (like the Cache-Control header) - then assets directory will generate unique filenames.

🆕 The solution you'd like

Created root option for module and font options. If root option has been declared, it overrides the default Nuxt public path value for searching fonts in project.

🔍 Alternatives you've considered

No response

ℹ️ Additional info

I have created PR for solving this issue: #263

fix: Issues with SASS imports and variables

🐛 The bug

Hey there,

while trying to implement the module in my application, I noticed two issues:

File scanning doesn't include imports while preparing fallbacks. For example, in nuxt.config.ts I'm adding the main stylesheet file:

css: ['~/assets/scss/main.scss'];

Within it, I'm importing two files with an @import rule:

@import 'fonts.scss';
@import 'typography.scss';

With such configuration, the output CSS file is not affected by the module (neither @font-face rules nor font-family: properties). However, if I add these two files explicitly in nuxt.config.ts:

css: ['~/assets/scss/fonts.scss', '~/assets/scss/typography.scss'],

I can see that both font-face rules and font-family properties were updated by the module.

Updating font-family properties doesn't work properly when these are set with variables. I've added a sass partial with variables in nuxt.config.ts, using vite preprocessor options (following Nuxt docs):

vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
            @use "~/assets/scss/_variables.scss" as *;
          `,
        },
      },
    },
  },

Then, in typography.scss I'm using variable in font-family property:

h1 {
  font-family: $fontFamily, sans-serif;
}

which results in an output file/browser inspector:

h1 {
    font-family: "Poppins", "$fontFamily fallback", sans-serif;
}

🛠️ To reproduce

https://stackblitz.com/edit/github-x62ihe?file=nuxt.config.ts

🌈 Expected behaviour

It'd be great to have these working with a module or to have a further information on how to deal with imports/module configuration in such cases

ℹ️ Additional context

No response

fix: I can't get the same font into the override

🐛 The bug

My goal is that fontaine makes an override with the same font, so that the same typography is always maintained, in this case: Signika.

I have the font in my local folder, I don't use Google fonts with url.

Well, I can't get the override of Signika to be Signika itself, nuxt/fontaine adds me the overrides with some random local fonts.

This is my font-face in the css file:
` /* latin-ext /
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/signikasemiboldlatinext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/ latin */
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/signikasemiboldlatin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext /
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/signikaboldlatinext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/ latin */
@font-face {
font-family: 'Signika';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url('/assets/fonts/signikaboldlatin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
`

And this is the result of compiling the css with nuxt/fontaine (you are looking at the result of global.css from chrome debugger):
/* latin-ext /
@font-face {
font-family: "Signika override";
src: local("BlinkMacSystemFont"),local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial"),local("Noto Sans");
ascent-override: 94%;
descent-override: 29.2%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/_nuxt/assets/fonts/signikasemiboldlatinext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/ latin /
@font-face {
font-family: "Signika override";
src: local("BlinkMacSystemFont"),local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial"),local("Noto Sans");
ascent-override: 94%;
descent-override: 29.2%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/_nuxt/assets/fonts/signikasemiboldlatin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/ latin-ext /
@font-face {
font-family: "Signika override";
src: local("BlinkMacSystemFont"),local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial"),local("Noto Sans");
ascent-override: 94%;
descent-override: 29.2%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/_nuxt/assets/fonts/signikaboldlatinext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/ latin */
@font-face {
font-family: "Signika override";
src: local("BlinkMacSystemFont"),local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial"),local("Noto Sans");
ascent-override: 94%;
descent-override: 29.2%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Signika';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url('/_nuxt/assets/fonts/signikaboldlatin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

And this is my nuxt.config, which nuxt/fontaine ignores anything I write in it about fonts:

fontMetrics: {
    fonts: [
      {
        family: 'Signika',
        fallbacks: ['Signika'],
        overrideName: 'fallback-signika',
        src: '/fonts/signikasemiboldlatin.woff2',
        root: 'assets',
      },
    ]
},

🛠️ To reproduce

https://stackblitz.com/github/nuxt-modules/fontaine/tree/main/playground?file=package.json

🌈 Expected behaviour

Do you understand what I mean? I was hoping that in with slow 3g loads nuxt fontaine would keep me the same source, not change Signika for another one.
This is what I expected nuxt/fontaine to do:
/* latin-ext /
@font-face {
font-family: "Signika override";
src: url('/_nuxt/assets/fonts/signikasemiboldlatinext.woff2') format('woff2');
ascent-override: 94%;
descent-override: 29.2%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/_nuxt/assets/fonts/signikasemiboldlatinext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/ latin /
@font-face {
font-family: "Signika override";
src: url('/_nuxt/assets/fonts/signikasemiboldlatin.woff2') format('woff2');
ascent-override: 94%;
descent-override: 29.2%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/_nuxt/assets/fonts/signikasemiboldlatin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/ latin-ext /
@font-face {
font-family: "Signika override";
src: url('/_nuxt/assets/fonts/signikaboldlatinext.woff2') format('woff2');
ascent-override: 94%;
descent-override: 29.2%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/_nuxt/assets/fonts/signikaboldlatinext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/ latin */
@font-face {
font-family: "Signika override";
src: url('/_nuxt/assets/fonts/signikaboldlatin.woff2') format('woff2');
ascent-override: 94%;
descent-override: 29.2%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Signika';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url('/_nuxt/assets/fonts/signikaboldlatin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

ℹ️ Additional context

I have kept stackblitz the same as playground because the same thing happens, the Poppins font changes to another font instead of always staying the same.
I thought the point of nuxt/fontaine was to keep the same font.

fix: `tag.innerHTML.replace is not a function` when no module config is provided

🐛 The bug

When the fontMetrics configuration is omitted in nuxt.config.ts, pages fail to render with the following error:
[500] tag.innerHTML.replace is not a function.

🛠️ To reproduce

https://stackblitz.com/edit/github-rbztbr?file=nuxt.config.ts

🌈 Expected behaviour

No error should be thrown in the absence of fontMetrics in nuxt.config.ts

ℹ️ Additional context

No response

fix: module doesn't generate fallback fonts

🐛 The bug

In my case there is a font-family Test.

In build mode nothing changes. No fallback font-face. No fallback in font-family value
In dev mode. No fallback font-face. Fallback in font-family value appears font-family: 'Test', 'Test fallback'

🛠️ To reproduce

https://stackblitz.com/edit/github-hjovjz?file=nuxt.config.ts

🌈 Expected behaviour

@font-face {
  font-family: 'Test';
   ...
}
* {
  font-family: Test;
}

Code above should be transformed to code below


@font-face {
  font-family: 'Test fallback';
  ...
}
*{
  font-family: 'Test', 'Test fallback';
}

ℹ️ Additional context

Operating System: Darwin
Node Version: v18.6.0
Nuxt Version: 3.6.5
Nitro Version: 2.5.2
Package Manager: [email protected]
Builder: vite
User Config: devtools, modules, css, fontMetrics
Runtime Modules: @nuxtjs/[email protected]
Build Modules: -

fix: Sourcemap missing?

🐛 The bug

I'm seeing an error in the console when running pnpm dev:

Sourcemap for "virtual:nuxt:/home/myapp/.nuxt/font-override-inlining-plugin.server.ts" points to missing source files

🛠️ To reproduce

https://stackblitz.com/edit/github-mqggve?file=package.json

🌈 Expected behaviour

Correct use of source maps?

ℹ️ Additional context

No response

fix: Node error

🐛 The bug

After install module on nuxt 3 Node start throwing error "(node:16336) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead. Use node --trace-deprecation ... to show where the warning was created)".
The error itself is not a problem, but it is still annoying when it appears in the console during each build. The error appeared after upgrading from version v20.11.0 to v21.6.1

🛠️ To reproduce

I can't give a link

🌈 Expected behaviour

Can with resolve this error?

ℹ️ Additional context

No response

docs: What is the setup for @nuxtjs/google-fonts?

📚 Is your documentation request related to a problem?

I am just wonder what the format should be when using the Nuxt Google Fonts module.

Is this correct?

🔍 Where should you find it?

Example in the readme near where it says
// If you are using a Google font or you don't have a @font-face declaration
// for a font you're using, you can declare them here.
under Usage

ℹ️ Additional context

No response

help: Cannot destructure property 'capHeight' of 'font' as it is undefined.

📚 What are you trying to do?

Having the following CSS files added to the nuxt.config file (cosmos.css and futura.css) with multiple @font-face declarations in each, I am receiving an error shown below. Is there anything missing on my part? Could the font files be the ones to blame?

I've also attached a snippet with the content of one of the CSS files. If these turn out to be insufficient, I might try to prepare a reproduction.

🔍 What have you tried?

No response

ℹ️ Additional context

Operating System: Windows_NT
Node Version: v16.13.0
Nuxt Version: 3.0.0-rc.12-27762285.23ad303
Nitro Version: 0.5.5-27758232.d90c938
Package Manager: [email protected]
Builder: vite
User Config: ssr, modules, css, typescript, alias, build, runtimeConfig, vue, vite, proxy
Runtime Modules: @nuxtjs/[email protected], floating-vue/nuxt, @pinia/[email protected], @vueuse/[email protected], unplugin-icons/nuxt, @formkit/[email protected], [email protected], @nuxtjs/[email protected], [email protected]
Build Modules: -

fix: Fontaine seems to add fallback to sass variables that are commented out

🐛 The bug

Fontaine seems to amend "* fallback" to sass variables that too commented one. This breaks the code.

🛠️ To reproduce

https://github.com/TechAkayy/my-nuxt-vuetify-generate-issue

🌈 Expected behaviour

To reproduce, clone, install, npm run dev the reproduction.

In main.scss, remove the single space on either side of the the colon (:) indicated in this screenshot and save.

ℹ️ Additional context

Dependencies Info

Run npx nuxi info and pnpm list (or npm list) and provide the output:

------------------------------
- Operating System: Darwin
- Node Version:     v18.12.1
- Nuxt Version:     3.7.3
- CLI Version:      3.8.4
- Nitro Version:    2.7.1
- Package Manager:  [email protected]
- Builder:          -
- User Config:      devtools, experimental, app, modules, fontMetrics, critters, css, vuetify, image, veeValidate, content, pinia, imports, vue, sourcemap, routeRules, site, robots, sitemap, ogImage, linkChecker, pinegrow
- Runtime Modules:  @pinegrow/[email protected], @unocss/[email protected], @nuxt/[email protected], @nuxt/[email protected], @vueuse/[email protected], @pinia/[email protected], @nuxt/[email protected], @vee-validate/[email protected], [email protected], @nuxtseo/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected]
- Build Modules:    -
------------------------------

[email protected] /Users/techakayy/Tests/reproductions/my-nuxt-vuetify-generate-issue
├── @iconify/[email protected]
├── @mdi/[email protected]
├── @nuxt/[email protected]
├── @nuxt/[email protected]
├── @nuxt/[email protected]
├── @nuxt/[email protected]
├── @nuxtjs/[email protected]
├── @nuxtjs/[email protected]
├── @nuxtjs/[email protected]
├── @nuxtseo/[email protected]
├── @pinegrow/[email protected]
├── @pinegrow/[email protected]
├── @pinia/[email protected]
├── @types/[email protected]
├── @unocss/[email protected]
├── @unocss/[email protected]
├── @vee-validate/[email protected]
├── @vue/[email protected]
├── @vueuse/[email protected]
├── @vueuse/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

fix: defineNuxtPlugin is not defined

🐛 The bug

If you disable auto imports in the config, then an error occurs defineNuxtPlugin is not defined

🛠️ To reproduce

https://stackblitz.com/edit/github-yp6ihk?file=nuxt.config.ts

🌈 Expected behaviour

To avoid this error

ℹ️ Additional context

No response

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: Cannot find preset's package (:automergeEarlyMondays). Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Dependency Dashboard

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

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

chore(deps): update devdependency @types/node to v20.12.10
chore(deps): update devdependency bumpp to v9.4.1
chore(deps): update dependency fontaine to ^0.5.0
chore(deps): update devdependency expect-type to v0.19.0
chore(deps): update devdependency rollup to v4.17.2
chore(deps): update devdependency typescript to v5.4.5
chore(deps): update pnpm to v8.15.8
chore(deps): update test packages to v1.6.0 (@vitest/coverage-v8, vitest)
chore(deps): lock file maintenance

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

chore(deps): update devdependency eslint to v9.2.0
chore(deps): update devdependency conventional-changelog-conventionalcommits to v8
chore(deps): update pnpm to v9
🔐 Create all rate-limited PRs at once 🔐

Pending Status Checks

These updates await pending status checks. To force their creation now, click the checkbox below.

chore(deps): update nuxt core (@nuxt/kit, @nuxt/schema, @nuxt/test-utils, nuxt, vue)

Detected dependencies

github-actions

.github/workflows/ci.yml

actions/checkout v4

actions/setup-node v4

actions/checkout v4

actions/setup-node v4

codecov/codecov-action v4

.github/workflows/release.yml

actions/checkout v4

actions/setup-node v4

npm

package.json

@nuxt/kit ^3.8.2

fontaine ^0.4.1

magic-string ^0.30.5

pathe ^1.1.1

ufo ^1.3.2

@nuxt/module-builder 0.6.0

@nuxt/schema 3.9.0

@nuxt/test-utils 3.9.0

@types/node 20.12.7

@types/serve-handler 6.1.4

@vitest/coverage-v8 1.1.0

bumpp 9.4.0

conventional-changelog-conventionalcommits 7.0.2

eslint 9.0.0

expect-type 0.17.3

get-port-please 3.1.2

husky 9.0.11

lint-staged 15.2.2

nuxt 3.9.0

rollup 4.5.0

serve-handler 6.1.5

typescript 5.1.6

vitest 1.1.0

vue 3.3.13

@nuxt/eslint-config 0.3.10

@nuxt/kit 3.9.0

pnpm 8.10.5

playground/package.json

nuxt 3.9.0

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