v3.7.0

[danielroe]

👀 Highlights

🐣 A New CLI

We've refactored nuxi using unjs/citty and this marks the first Nuxt release that depends on the new version, safely in its own repository. We have grand plans for this - check out some of the features + roadmap discussions in nuxt/cli and please feel free to contribute!

• Project Goals
• Feedbacks and Ideas
• The journey of Nuxt CLI Generations

Nuxi is now decoupled from the main nuxt version - we plan to iterate and release nuxi more quickly in future so you can expect new things coming soon!

🕸️ Native Web Streams and Response

With improvements in unjs/h3 and unjs/nitro, it's now possible to directly return a Response object from server routes, meaning it's also possible to return and handle streams natively in Nuxt.

👉 Check out the full detail in the unjs/h3 and unjs/nitro release notes.

🔥 HTML Rendering Optimisations

This release comes with a couple of improvements in rendering HTML responses from the server. We now determine whether to preload/prefetch resources at build time (so you can customise this in the build:manifest hook). We also now manage rendering the HTML for them directly in unhead (#22179), which means you can configure the order for <link>, <meta>, <script>, <style>, and more. And - in our preliminary testing - it's even faster!

It's possible to opt-in to upcoming head improvements with the experimental.headNext flag. This currently includes a new ordering algorithm based on capo.js (#22431) and allows enabling future optimisations as they are released in unhead:

export default defineNuxtConfig({
  experimental: {
    headNext: true
  }
})

We'd love your thoughts - you can respond with any issues/feedback in this discussion.

🛠️ Build Environment Shortcuts

In your Nuxt config you can now use $client and $server shortcuts to easily define configuration that is specific to just the Vite client/server (#22302) or webpack client/server (#22304) builds. This previously was only possible with the vite:extendConfig and webpack:config hooks.

For example:

export default defineNuxtConfig({
  vite: {
    $client: {
      build: {
        rollupOptions: {
          output: {
            chunkFileNames: '_nuxt/[hash].js',
            assetFileNames: '_nuxt/[hash][extname]',
            entryFileNames: '_nuxt/[hash].js'
          }
        }
      }
    }
  }
})

⚡️ Vite 4.4

We've chosen to unpin Vite from minor versions, meaning whenever Vite releases a new feature version you can opt-in straight away. Vite 4.4 brings a lot of exciting things, including experimental Lightning CSS support - and much more!

👉 Check out the Vite release notes for more.

💪 TypeScript Updates

We now use purely relative paths in the generated tsconfig.json instead of setting a baseUrl. This means better support for dev environments like docker images where the absolute path may not match your IDE (#22410).

We also set a couple of additional compiler flag defaults to match Vite/TS recommendations (#22468).

Plus, you should now get type hinted access to layouts in setPageLayout and also in <NuxtLayout name> (#22363).

🦄 Async Context support

If you've ever got an issue with 'Nuxt context unavailable' this might be one for you. We now support native async context for Bun and Node under an experimental flag, in both Nuxt and Nitro (#20918).

This enables using Nuxt composables on the server without needing to ensure they are being called directly in a setup function. It also allows the same in Nitro, with a new useEvent() utility that is usable in server routes.

To try it out, you can enable experimental.asyncContext:

export default defineNuxtConfig({
  experimental: {
    asyncContext: true
  }
})

👓 Watcher Updates

We've fixed a couple of issues with watchers, meaning that you should need to restart your server less often - and you should see a significant performance increase if you are using layers.

⚗️ Nitro 2.6

There are lots more exciting features coming directly from Nitro 2.6, including smaller, lighter servers and new persistent data storage in a .data directory.

👉 Read more in the full release article.

✅ Upgrading

As usual, our recommendation for upgrading is to run:

npx nuxi upgrade --force

This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.

👉 Changelog

compare changes

---

This discussion was created from the release v3.7.0.

[jd1378]

@danielroe it seems upgrade broke my project
I get sth like:

Cannot read properties of undefined (reading 'push')                                                                             8:54:36 AM  

  at prepare:types (<removed-path>/node_modules/nuxt-swiper/dist/module.mjs:20:42)

the code causing this (nuxt-swiper/dist/module.mjs):

defineNuxtModule({
  // ...
  hooks: {
    "prepare:types": (ctx) => {
      ctx.tsConfig.compilerOptions.types.push("swiper/vue");  // <---- this is throwing
      ctx.references.push({
        types: "swiper/vue"
      });
    }
  },
 // ...
}

is this an unintended breaking change in the hooks ?

[danielroe]

It was intended in that by removing the explicit types field we allow TS to automatically pick any @types/* packages. But you're right, it does break that - apologies. I would recommend sticking to references.

[Duorly]

I have the same error how to solve it ?

[danielroe]

For now, add this to your nuxt.config:

export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      compilerOptions: {
        types: []
      }
    }
  }
})

... and track cpreston321/nuxt-swiper#85.

[Duorly]

thank you for your prompt response

[cpreston321]

@Duorly @jd1378 Fixed in latest: https://github.com/cpreston321/nuxt-swiper/releases/tag/v1.2.2

[teknotut]

I get error after update 3.6.5 to 3.7.0, I try to create fresh install nuxt 3.7.0

npx nuxi@latest init testnuxt3 cd testnuxt3 yarn install yarn dev -o

I get error

entry is not a function at __vite_ssr_exports__.default (./node_modules/nuxt/dist/app/entry.js:76:41) at default (/Users/yanwarpurnama/node_modules/@nuxt/vite-builder/dist/runtime/vite-node.mjs:27:24) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async Object.renderToString (./node_modules/vue-bundle-renderer/dist/runtime.mjs:173:19) at (./node_modules/nuxt/dist/core/runtime/nitro/renderer.js:171:21) at (./node_modules/nitropack/dist/runtime/renderer.mjs:20:22) at async Object.handler (./node_modules/h3/dist/index.mjs:1683:19) at async toNodeHandle (./node_modules/h3/dist/index.mjs:1893:7) at async ufetch (./node_modules/unenv/runtime/fetch/index.mjs:9:17) at errorhandler (./node_modules/nuxt/dist/core/runtime/nitro/error.js:35:30)

My node version v16.17.0

nuxt.config.ts is default from fresh install

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true }
})

package.json

{
"name": "nuxt-app",
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"@nuxt/devtools": "latest",
"nuxt": "^3.7.0"
}
}

I try to find solution but still not found.

[tdebooij]

Same here on a very minimal nuxt installation from 3.6.5 -> 3.7.0

[Hebilicious]

I've been hitting this issue with pnpm, and turns out that using bun fixes it for me 🤷🏽

[MilkoEmanuilov]

Same here.
Node v18.12.1.
I can't use bum on windows. Any other suggestions?

With downgrading to 3.6.5 everything works.

[MilkoEmanuilov]

I've upgraded to 3.7.1-28230457.3e676a7f this error is fixed but now i'm receiving
"500
Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'."

[Dodobibi]

Performances are very poor when loading a Nuxt 3.7.0 on browser. It's very slow since it is multi proxified in dev mode !
It takes 2mn for first loading my app, and 50s after (disk cache), when 3.6.5 takes only 20s on first load, and only 5s after...
If I launch it directly with proxy url (on the random port generated by nuxi), the performance are the same as 3.6.5.
What the interest of proxifing the root server to nuxi server, which already proxified to nitro server ?

[danielroe]

Would you raise an issue at https://github.com/nuxt/cli with a reproduction?

[Dodobibi]

Oh !
It's seems because I develop on WSL, with browser on Windows side.
It's a conflict beetween locahost and 127.0.0.1 which are not interpreting on the same way on WSL side and Windows side. (localhost is IPV6 on windows, and IPV4 on WSL. This generate multiples call internally beetween them...
After configuring correctly WSL with :

# /etc/hosts
::1     localhost loopback

# /etc/wsl.conf
[network]
generateHosts = false

WLS and Windows are sharing the same interface...
All working as before.

However, I don't know why it's only since 3.7.0...

[jeferson-sb]

Amazing stuff 👏

[Denoder]

not sure why, but when using my auth module, cpu usage rises to almost 100% and my naive-ui theme lags like crazy. This is just going from 3.6.5 -> 3.7.0. This specifically only happens when I log in and user info is stored in SSR.

[danielroe]

Could you file an issue?

[Denoder]

I fixed it, it was a cookie issue on my end being looped.

[Vova-max-png]

So cool, I need to try it.

[george-martinec]

devServer not working

[danielroe]

Would you raise an issue at https://github.com/nuxt/cli if it doesn't exist already? 🙏

[jd-solanki]

Is baseUrl from tsconfig removed recently in 3.7? This breaks tsx usage, If this is not intended I would like to report the bug, should I?

[danielroe]

Yes, it was intended to remove it, but not to break .tsx files. Could you open an issue with a reproduction?

[jd-solanki]

Not .tsx files this tsx tool. I'm also experiencing several eslint related issues since nuxt 3.7 and error is related to baseUrl. I'll try to reproduce soon.

[danielroe]

Ah. There are good reasons we removed baseUrl, and have moved to relative paths in tsconfig. I think you might just need to configure eslint, or you can configure your own baseUrl in typescript.tsConfig.

[marccremer]

I heard @danielroe talking about typed inputs for useFetch on "views on vue".
I though that was for 3.7.
Is there a disscusion or issue where I can delve into?

[danielroe]

I was hoping to land it then but it looks like 3.8 now. It needs to land in nitro in an extensible way so frameworks can hook into it.

[mitch1009]

May someone help me with this problem. am stuck #22867 (comment)

[memic84]

Amazing release!

We rely heavily on the extend / layers, and after the upgrade, keep getting a lot of these warnings:

WARN [nuxt] Two component files resolving to the same name [MODULE_NAME]

We have one base, and one client folder, where the client folder overwrites the core. Is it possible to disable the warning?

[danielroe]

Sorry, that's a pain! We plan to fix this in the next patch release. You can follow #23028.

[memic84]

Thanks. Good to know it's already addressed.