fix: add compatibility with Nuxt 4

[romastolbov]

Type of Change

• Breaking change
• New feature
• Bug fix
• Types
• Refactoring Code
• Tests
• Documentation
• Other

Request Description

Added support for compatibilityVersion: 4 / Nuxt 4.

Additional Details

When using this package with Nuxt 4 or with the compatibilityVersion: 4 enabled, font styles are incorrectly embedded in the section.

With future: { compatibilityVersion: 4 }:

<style children="@font-face{font-family:&quot;Rubik&quot;;font-weight:100 200 300 400 500 600 700 800 900;font-style:normal;font-display:swap;src:url('/_static/fonts/rubik/Rubik-VariableFont_wght.woff2') format('woff2');}"></style>

But expected:

<style>@font-face{font-family:"Rubik";font-weight:100 200 300 400 500 600 700 800 900;font-style:normal;font-display:swap;src:url('/_static/fonts/rubik/Rubik-VariableFont_wght.woff2') format('woff2');}</style>

[ivodolenc]

Hi, thanks for the PR and your time,

but it’d be better if you opened a discussion or an issue first, just so we can get a better idea of what’s going on and chat about how to solve it.

I haven’t tested this, but at first, I don’t think it’ll work in v3 if we go with this approach. This is by design, so it's not a bug in the v3 version. Also, keep in mind that this should address composables as well, not just module options.

To be perfectly clear, this module works in v3, and since v4 was recently released (a week ago), it is very likely not compatible with the new version. It takes some time to see what is going on and what is the correct way to handle things.

Also, Nuxt 4 brings major breaking changes, so we’ll need to look into it a bit more and see what kind of changes it brings.

What is this compatibilityVersion? What is this useful for? Is this really necessary?

From the official docs:

There is also a future namespace for early opting-in to new features that will become default in a future (possibly major) version of the framework.

This is used for enabling early access to Nuxt features or flags.

It is not configurable yet in Nuxt 4, but once we begin merging breaking changes for v5, it will be possible to enable it.

I don’t have time to work on this at the moment, but if we’re adding support for v4, it’ll eventually turn into a breaking change. That means we’ll need to bump dependencies and possibly restructure some things, etc.

So yeah, this needs a bigger rewrite and some research into new module features, if there are any. I think it is better and safer not to implement it now, but to leave it for the official support of v4.

[romastolbov]

Hi!

but it’d be better if you opened a discussion or an issue first, just so we can get a better idea of what’s going on and chat about how to solve it.

Okay

I haven’t tested this, but at first, I don’t think it’ll work in v3 if we go with this approach.

I tried it – it works correctly with version 3.17.5

Also, keep in mind that this should address composables as well, not just module options.

Yes, thank you, I've made changes in the PR.

What is this compatibilityVersion? What is this useful for? Is this really necessary?

This setting has been around for quite some time; it allows for a quicker migration to Nuxt 4 as it activates almost all the new functionality available in Nuxt 4. This setting helped us prepare in advance for the release of Nuxt 4.

I think it is better and safer not to implement it now, but to leave it for the official support of v4.

Okay