v3.0.0-rc.12

[pi0]

🚀 Upgrade

Note
Make sure to recreate the lock file in the project in case of any issues after the upgrade.

• Automated: npx nuxi@latest upgrade --force
• Manual: Bump nuxt dependency to 3.0.0-rc.12 and then use npx nuxi@latest cleanup to cleanup any local caches

⭐ What is New?

📍 Route Rules

RC.12 comes with the first public beta for route rules and hybrid rendering support. Using route rules you can define rules for a group of nuxt routes, change rendering mode or assign a cache strategy based on route! Nuxt server will automatically register corresponding middleware and wrap routes with cache handlers using Nitro caching layer. Whenever possible, route rules will be automatically applied to the deployment platform's native rules (currently Netlify and Vercel are supported).

👉 See docs for examples and more info.

⚗️ Nitropack 0.6

Nitropack upgraded to 0.6 (Release Notes) and h3 upgraded to 0.8 (Release Notes)

⚠️ Breaking changes: Using defineEventHandler() or eventHandler() is now required. If you were previously using a Node.js middleware with (req, res, next?) syntax you need to wrap them with fromNodeMiddleware() to convert it into an h3 handler.

👦 useHead updates

This release brings a brand-new version of @vueuse/head with some significant performance improvements and bug fixes. Check out nuxt/framework#8000 for more details, but in particular:

• Fully-typed usage of useHead
• No more flickering when transitioning between routes
• Support ordering of head metadata
• Faster head hydration and deduping

⚠️ Breaking changes: The shortcuts viewport and charset can only be used within nuxt.config and not within useHead directly. For more information on how to update, see nuxt/framework#8000.

📖 Page Meta

New router options validate and redirect are now supported directly in definePageMeta - so you can perform additional validation for dynamic routes, or implement route redirects directly within pages.

definePageMeta({
  // redirect: '/admin',
  validate: async (route) => {
    const nuxtApp = useNuxtApp()
    // Check if the id is made up of digits
    return /^\d+$/.test(route.params.id)
  }
})

🌅 Early Hints

Nuxt's node server renderer will now respond with 103 Early Hints before the server renders the app, meaning that you should see a decreased TTFB and earlier resource loading in a supported environment - which at the moment is Chrome with your Nuxt app served over HTTPS with newer than HTTP/1.1.

💅 Nuxt 3 Docs

Nuxt's documentation is now written with Nuxt 3's new theming system and the latest Docus and Content module versions. Check it out at https://v3.nuxtjs.org! Expect more coming soon!

Changelog

🗒️ Full Change Log

[mctweb]

Great job Nuxt team - excited for the stable release. The amount of features that you have packed in v3 so far is astounding. 👍

Every small detail adds to the developer experience. Loving the validate and redirect options.

[chaselen]

Is it imposible to load .env into runtimeConfig with run nuxt build --dotenv .env.prod？I got nothing by using useRuntimeConfig().public, but it works in nuxt dev --dotenv .env.dev.

[danielroe]

It should be possible. If you're experiencing any issue, do open a new issue with a reproduction.

[TechGenius7777]

Congratulations to all my fellow contributors at Team Nuxt for RC 12! Getting closer and closer to stable release.

[Mokkapps]

Amazing work, thanks to the whole Nuxt team 💚

I suppose that the new route rules only work on Nuxt content routes as soon as the Nuxt content module updates to RC12?

[danielroe]

You should be able to use them on Nuxt content routes already.

[Mokkapps]

Ok, it would be interesting to know what is the recommended settings/configuration to get a SSG/ISG build using the Nuxt content module?

Just a regular "nuxi build" with routeRules in place? Do i need to set this configuration https://content.nuxtjs.org/guide/deploy/static-hosting#client-side-only-rendering?

[misaon]

NuxtNestedPage is removed from RC-12, use NuxtPage instead. (missing in BC break)

[maxdzin]

Well done Nuxt Team!
I can't wait to test work with the new update and looking forward to the next steps.
Big Love 💚

[fabianwohlfart]

Thanks for the update!

is it possible to disable Early Hints? It seems to break the application if it's running on Plesk with a Phusion Passenger.

[raphmarot]

Just curious, i'm on Nginx which doesn't support 103 early hints (i think).
Does it make a difference?
What server do you use?

[fabianwohlfart]

this was for a pretty standard virtual server with ubuntu 18, nginx 1.20.2 and plesk installed.

[jgupta]

Just curious, i'm on Nginx which doesn't support 103 early hints (i think). Does it make a difference? What server do you use?

Early hints requires htpp2 in Nginx

[safejace]

just curious on the thought process of making this true by default. took me and devops a day or two to figure out that this was our issue

[danielroe]

It's already reverted and will be false by default in rc13.

[bot08]

How can I find out when the page was generated? It was great to see an example. (like adding the date to the end of the page code)

[bot08]

I added {{ Date.now() }} to the layout but in node server mode it generates the page again. Everything works great on netlify.

[FileSoft-us]

nodeJS 19 release

error @nuxt/kit@3.0.0-rc.12: The engine "node" is incompatible with this module

[misaon]

Try edge channel nuxt/framework@ea7890c

[StevenJPx2]

What else can I say but WOW! Kudos to the dev team and all the contributors for making the best web framework out there! (imo)

[rahulkumarsingh73690]

Route Rules is a fantastic feature 💚

[FileSoft-us]

I have problem after update RC12 and tailwind module
sidenav tailwind element child items disappear when collapse

https://tailwind-elements.com/docs/standard/navigation/sidenav/

https://candid-snickerdoodle-b86bc8.netlify.app/

[FayKn]

Is your tailwind module up to date since a release for rc 12 came out 2 days ago

[FileSoft-us]

yup here my repo

https://github.com/sigliblog/axa

[93lucasp]

When the stable one? ☺️

[yeonjulee1005]

wow! Awesome Nuxt Team!!! 👍
I hope using axios in Nuxt 3 :D

[dodanex]

Hello, Just after I updated from 3.0.0-rc.11 to 3.0.0-rc.12, I now have this error that was not there before:

500
Cannot read properties of undefined (reading 'headers')

at parseCookies (/D:/www/_ecommerce/node_modules/h3/dist/index.mjs:329:26)
at Object.handler (/D:/www/_ecommerce/.nuxt/dev/index.mjs:449:21)
at Object.handler (/D:/www/_ecommerce/node_modules/h3/dist/index.mjs:567:31)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Server.toNodeHandle (/D:/www/_ecommerce/node_modules/h3/dist/index.mjs:631:7)

Any ideas why?

[danielroe]

Please open an issue with a reproduction. 🙏

[yeeyanChen]

Hello, Just after I updated from 3.0.0-rc.8 to 3.0.0-rc.12, I now have this error when I do npm run build

[nuxt] [request error] [unhandled] [500] The requested module 'vue' does not provide an export named 'default' at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21) at async ModuleJob.run (node:internal/modules/esm/module_job:189:5) at async Promise.all (index 0) at async ESMLoader.import (node:internal/modules/esm/loader:533:24) at async /C:/web-develop/project-sci-nourish/.output/server/chunks/renderer.mjs:305:24 at async /C:/web-develop/project-sci-nourish/.output/server/chunks/renderer.mjs:369:64 at async /C:/web-develop/project-sci-nourish/.output/server/chunks/renderer.mjs:29:22 at async Object.handler (/C:/web-develop/project-sci-nourish/.output/server/node_modules/h3/dist/index.mjs:567:19) at async Server.toNodeHandle (/C:/web-develop/project-sci-nourish/.output/server/node_modules/h3/dist/index.mjs:631:7)

[danielroe]

Please open a new issue with a reproduction? 🙏

(It sounds like you have a vue2 dependency in your project.)

[yzh990918]

I have the same issue.

[yzh990918]

I add shamefully-hoist=true in .npmrc just fixed this error.

[bettimax0]

Nice work

[bettimax0]

Nice work

[marekmis]

Great seeing another update. I upgraded my site but when running npm run dev Vite throws errors and site is not rendered in the browser:

✔ Nitro built in 1378 ms

[nuxt] [request error] [unhandled] [500] Unexpected token '||='
   at new Script (vm.js:102:7)  
   at createScript (vm.js:262:10)  
   at Object.runInThisContext (vm.js:310:10)  
   at ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:246:19)  
   at processTicksAndRejections (internal/process/task_queues.js:95:5)  
   at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:128:12)  
   at async request (./node_modules/vite-node/dist/client.mjs:151:16)  
   at async ./node_modules/nuxt/dist/app/composables/index.mjs:46:31  
   at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:251:5)  
   at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:128:12)

I can't figure out what's causing this error, any ideas?

EDIT: I was running on Node v14, upgrade to v16.16.0 helped. Leaving it here in case someone has a similar problem.

[danielroe]

This has been resolved in the edge channel via https://github.com/nuxt/framework/issues/8428.

[toddpadwick]

I had this issue too on 3.0.0-rc.12, so tired updating to edge release but then I started getting another 500 error: injection "Symbol(route location)" not found. nuxt. So I have reverted back to 3.0.0-rc.11 for now.

[AndrewSparrowww]

@danielroe @pi0 Guys I have a question, after this update we experience issue with FOUC because now, entry.css - which is our global styles, is loaded asynchronously and our project relying on them before the DOM will be rendered. Issue introduced with this PR: nuxt/framework#8278 How we can prevent this behaviour?

Another issue with CSS is next: when using Vite, we have inlinedStyles for SSR, but they are duplicated inside of entry.css file. So basically any styles, like tailwind or component styles which were inlined in HTML during SSR are now duplicated inside entry.css which makes performance degradation. Why do we need entry.css at all and why we can't inline entry.css the same way like other component styles or tailwind being inlined during SSR?

Thanks for your answers in advance. This FOUC providing poor UX, and prevents us from update.

[danielroe]

We're fixing this; you can follow in https://github.com/nuxt/framework/issues/8352. The workaround is to set experimental.inlineSSRStyles to false in the mean time.

There are also issues to track the other points you mention.

[AndrewSparrowww]

Thanks! Works well as temporary solution which unblock us with migration to RC12.

[FileSoft-us]

Nuxt 3.0.0-rc.13-27781436.1f6b3be

ERROR Cannot start nuxt: Cannot read properties of undefined (reading 'push') 15:22:30
/node_modules/@nuxtjs/tailwindcss/dist/module.mjs:126:56
at Array.forEach ()

[TheAlexLichter]

See nuxt-modules/tailwindcss#480 as well as nuxt-modules/tailwindcss#553

[FileSoft-us]

thanks

it fixed tailwind module updated...

[ricky11]

Hoping to get eyes on this issue with nitro which was hoping to be resolved with rc12.
nitrojs/nitro#497
Relating to nuxt3/nitro working nice with cloudflare_pages build.
the /functions folder does not get picked up by cloudflare.

[IngusSkaistkalns]

When I run nuxt build - I don't have index.html, no prerendering happening. What am I missing?

Nuxi 3.0.0-rc.12
Nuxt 3.0.0-rc.12 with Nitro 0.6.0

✔ Server built in 9786ms
✔ Generated public .output/public
ℹ Building Nitro Server (preset: node-server)
✔ Nitro server built     

Nuxi 3.0.0-rc.11
Nuxt 3.0.0-rc.11 with Nitro 0.5.4

✔ Server built in 8057ms
✔ Generated public .output/public
ℹ Initializing prerenderer
ℹ Prerendering 3 routes
  ├─ /index.html (15ms)   
  ├─ /200.html (2ms)
  ├─ /404.html (2ms)
ℹ Building Nitro Server (preset: node-server)

[TheAlexLichter]

You can add routes you want to pre-render statically to your nuxt.config.ts. If you want to generate your site instead of using SSR, you want to use nuxt generate though ☺️

nitro: {
    prerender: {
      routes: ['/']
    }
}

See also https://github.com/nuxt/framework/issues/8648

[bettimax0]

Nice work

[haotianheng]

CDN and SLB failed by http2.0 103 Early Hints，they handle it as an error

[TheAlexLichter]

Early Hints are disabled by default now ☺️