v3.0.0-rc.10

[pi0]

🗒️ Release Notes

🚀 How to 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.10 and then use npx nuxi@latest cleanup to cleanup any local caches

⭐ What is new?

Critical Styles are Inlined

#6755, #7160

Global styles and used component styles are now automatically inlined when server-side rendering a page. This feature helps to improve the First Contentful Paint (FCP) metric.

🧪 You can disable the feature from nuxt.config using experimental: { inlineSSRStyles: false } in case of any issues.

Full Static Generation with Payload Rendering

#6411, #6455

In Nuxt 2, we introduced an amazing feature called Full Static Generation. When using nuxt generate, the payload of each page containing asyncData and state is extracted to a .js chunk and we can deploy output to any static hosting without requiring a hosted API server. This feature also introduced performance benefits to reduce page size and allow smartly prefetching payload of next pages ahead of time when using nuxt generate but kept limited to it.

This feature is now back in Nuxt 3 but much better! Payload is not only extracted during prerendering phase (nuxt generate) but also can be rendered on demand by simply appending /_payload.js to the end of any URL. This made implementation much simpler and also unlocks future development to enable payload rendering for hybrid static server and incremental generated pages. Followup #6411 for the roadmap.

Link Prefetching

#4329

Another goodie ported from Nuxt 2, is automatically prefetching the next pages when a <NuxtLink> is in the viewport.

This feature is integrated with vue-router to prefetch components of the next route and also payload extraction to prefetch the payload of the next pages ahead of time! You can also hook into link:prefetch to do more prefetches.

Better Workspace Support

unjs/pkg-types#34, #7439

Nuxt has several configurations for directories including rootDir where nuxt.config, package.json, etc is, and srcDir which is the same as rootDir by default but can be customized to move project code such as pages/ to the src/ directory. With Monorepo becoming more popular, it became clear we need another new option to act smarter in a monorepo.

We have introduced a new workspaceDir configuration. It is automatically detected from rootDir using different heuristics (how?). This option is used to extend the search path for node_modules via #7439 but we will keep spreading its use in other places.

🧪 You can manually set workspaceDir from nuxt.config in case of any issues.

defineNuxtConfig is Auto Imported

#7267, #7485, #7497

Nuxt uses unjs/jiti in order to support typescript and ESM syntax for nuxt.config. When importing { defineNuxtConfig } from 'nuxt' in Nuxt 3, it causes the whole nuxt package to be loaded. It was making startup time slower.

We have introduced a new nuxt/config subpath export that only exports defineNuxtConfig for type support but you don't even need this anymore! Just remove import and enjoy shorter syntax!

-- import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
})

More Powerful nuxt init

We have switched to unjs/giget for a much more powerful template init engine.

Normally nuxi init command should work as it was before. If you were using nuxt init org/repo to clone the 3rd party GitHub repository, you should use nuxi init gh:org/repo now.

Experimental Zero-Client-JS Mode

#7156, #7248

This new experimental flag allows turning off all Nuxt client js code when server-side rendering a page.

Using this feature is advisable for the very small minority of sites that would not benefit from client-side JS.

You can try this feature by setting experimental: { noScripts: true } and let us know what you think!

---

Read more about all the addition in the 🗒️ Release Notes

[FileSoft-us]

Hi is it possible to create more complex router
multi subdomain in nuxt config that pointing to pages

news.domain.com => news.vew
tech.domain.com => tech.vue

[imskyyc]

Can't wait to try it out. Is there any word on a better / built-in authentication backend (JWT)?

[urbgimtam]

Looks like this "Full Static Generation" can be a real game changer. Very nice work indeed.

[riskawidarsono]

😮

[Luferov]

Really looking forward to the stable version and nuxt/apollo is almost the perfect bundle for me  ❤️

[kstraszewski]

Im getting this error when building:

✔ Server built in 23430ms                                                                                                                                         22:01:33
✔ Generated public .output/public                                                                                                                           nitro 22:01:33
ℹ Initializing prerenderer                                                                                                                                  nitro 22:01:33

 ERROR                                                                                                                                                      nitro 22:01:34

undefined


 ERROR  Could not load /Users/konradstraszewski/WebstormProjects/lendi-b2c/node_modules/vue/dist/vue.esm-bundler (imported by .nuxt/dist/server/server.mjs): ENOENT: no such file or directory, open '/Users/konradstraszewski/WebstormProjects/lendi-b2c/node_modules/vue/dist/vue.esm-bundler'

Also lots of warnings:

Development mode works great

[kstraszewski]

    "nuxt": "npm:nuxt3@3.0.0-rc.11-27719556.94377b1",

also has this problem

[kstraszewski]

ok i've had this in my file:

import {createApp} from 'vue/dist/vue.esm-bundler';

Is there any other way to import createApp?

import {createApp} from 'vue';

Does not work :(

[pi0]

Why you would need manually importing createApp?

[nlvedwin]

When doing nuxt generate this one is pointing to wrong path import p from "/index.html/_payload.js" instead of /_payload.js because of this when loading the app in a nginx server it's showing in the browser console

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

is there a way to change the index.html part?

[danielroe]

Would you open an issue please?

[pi0]

~> nuxt/framework#7535

[nlvedwin]

thanks guys that was fast!

[nyambe]

I am getting an error updating from rc-8

WARN Failed to resolve dependency: vue, present in 'optimizeDeps.include'

ERROR The following dependencies are imported but could not be resolved:

vue (imported by /Users/samiebuka/DEV/new/learn/nuxt-server-tron/node_modules/.pnpm/nuxt@3.0.0-rc.10/node_modules/nuxt/dist/app/entry.mjs)

Are they installed?

[pi0]

Are you using pnpm install --shamefully-hoist to install dependencies?

[nyambe]

I was just going to post that. Sorry. Yes. That fixed it!!

[marvincaspar]

First of all, thank you for your hard work and full static generation.

I have a fully static site, but want to have one api endpoint for submitting a contact form. When I use yarn generate only the html is generated, but the .output/server folder is empty. Is there an option to also generate the api endpoint?

[Mokkapps]

Perfect, that works! Thanks @pi0 and @danielroe!

[marvincaspar]

Nice, works for me too 😃

[Mokkapps]

Unfortunately, the Netlify build failed after about 15 minutes:

9:36:32 AM: [info] [nitro] Building Nitro Server (preset: `netlify`)
9:37:07 AM: <--- Last few GCs --->
9:37:07 AM: [1423:0x5ace900]   904971 ms: Scavenge 2007.8 (2068.0) -> 2000.3 (2068.0) MB, 4.3 / 0.0 ms  (average mu = 0.396, current mu = 0.472) allocation failure
9:37:07 AM: [1423:0x5ace900]   905016 ms: Scavenge 2008.0 (2068.0) -> 2002.1 (2068.0) MB, 5.0 / 0.0 ms  (average mu = 0.396, current mu = 0.472) allocation failure
9:37:07 AM: [1423:0x5ace900]   905066 ms: Scavenge 2008.5 (2068.0) -> 2003.5 (2084.0) MB, 10.0 / 0.0 ms  (average mu = 0.396, current mu = 0.472) allocation failure
9:37:07 AM: <--- JS stacktrace --->
9:37:07 AM: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
9:37:07 AM:  1: 0xb02930 node::Abort() [node]
9:37:07 AM:  2: 0xa18149 node::FatalError(char const*, char const*) [node]
9:37:07 AM:  3: 0xcdd16e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
9:37:07 AM:  4: 0xcdd4e7 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
9:37:07 AM:  5: 0xe94b55  [node]
9:37:07 AM:  6: 0xe95636  [node]
9:37:07 AM:  7: 0xea3b5e  [node]
9:37:07 AM:  8: 0xea45a0 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
9:37:07 AM:  9: 0xea751e v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
9:37:07 AM: 10: 0xe68792 v8::internal::Factory::AllocateRaw(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [node]
9:37:07 AM: 11: 0xe630ac v8::internal::FactoryBase<v8::internal::Factory>::AllocateRawArray(int, v8::internal::AllocationType) [node]
9:37:07 AM: 12: 0xe7849a v8::internal::Handle<v8::internal::PropertyArray> v8::internal::Factory::CopyArrayAndGrow<v8::internal::PropertyArray>(v8::internal::Handle<v8::internal::PropertyArray>, int, v8::internal::AllocationType) [node]
9:37:07 AM: 13: 0x1072a65 v8::internal::JSObject::MigrateToMap(v8::internal::Isolate*, v8::internal::Handle<v8::internal::JSObject>, v8::internal::Handle<v8::internal::Map>, int) [node]
9:37:07 AM: 14: 0x1094211 v8::internal::LookupIterator::ApplyTransitionToDataProperty(v8::internal::Handle<v8::internal::JSReceiver>) [node]
9:37:07 AM: 15: 0x10b356b v8::internal::Object::AddDataProperty(v8::internal::LookupIterator*, v8::internal::Handle<v8::internal::Object>, v8::internal::PropertyAttributes, v8::Maybe<v8::internal::ShouldThrow>, v8::internal::StoreOrigin) [node]
9:37:07 AM: 16: 0x106a681 v8::internal::JSObject::CreateDataProperty(v8::internal::LookupIterator*, v8::internal::Handle<v8::internal::Object>, v8::Maybe<v8::internal::ShouldThrow>) [node]
9:37:07 AM: 17: 0x1073393 v8::internal::JSReceiver::SetOrCopyDataProperties(v8::internal::Isolate*, v8::internal::Handle<v8::internal::JSReceiver>, v8::internal::Handle<v8::internal::Object>, v8::internal::PropertiesEnumerationMode, v8::base::ScopedVector<v8::internal::Handle<v8::internal::Object> > const*, bool) [node]
9:37:07 AM: 18: 0x11ee59b v8::internal::Runtime_CopyDataProperties(int, unsigned long*, v8::internal::Isolate*) [node]

[pi0]

Is it possible to share your repo @Mokkapps ? 🙏🏼

[Mokkapps]

Unfortunately, it's a private repo. But I can give you access, if you want to take a look at it?

[smorcuend]

Great job team!!

Migrate from rc.9 to rc.10 without problems. I just run: npx nuxi upgrade

[pi0]

Glad hearing that! I would suggest, to also renovate the lock file from time to time. Most direct dependencies get upgraded but there are sub-dependencies with improvements and fixes that are updated only when using upgrade --force

[localusercamp]

Nice work! 🎉🎉🎉

Will it be changed? =B

[pi0]

We are still aiming for September! (Might take few weeks longer but not long!)

[localusercamp]

Niiiice

[shmidtelson]

Niiiice

You are a quite positive person!

[KyahWill]

I'm not sure what is happening right now but for some reason, running npm run dev led me to this error

[KyahWill]

Thank you for replying. I did npx nuxi-edge@latest upgrade --force and npx nuxt upgrade --force but it didn't work. I feel like there is something wrong with my package.json file because I tried making a random app and it somehow works

[danielroe]

You might try checking inside your lockfile to see what package is installing an older version of defu. You can also force a newer version with package.json overrides/resolutions if nothing else works.

[KyahWill]

I did this thank you. As it turns out, post-css 8.14 uses an older version of defu. my dev now works thank you

[flowreaction]

I am having the same issue, probably also because of postcss 8.14, did you upgrade it or how did you manage to fix this issue?

[flowreaction]

for completeness, I added this to my package.json to work around the issue:

"overrides": {
        "@nuxt/postcss8": {
            "defu": "^6.0.0"
        }
}

[JacobSamro]

This is huge 😍

[Benbinbin]

If the rec 10 full static generation version will lose the reactive for useState?

I use some states to control whole app, in rec 9 after run the nuxt generate command and get the full static web pages, these states
still work well, but in rec 10 they seem to lose the reactive when I change the route.

This is the demo repo for rec 10 and useState https://github.com/Benbinbin/nuxt-rec10-usestate

[Benbinbin]

a relative issue https://github.com/nuxt/framework/issues/7562

[cfab]

This is fixed in edge release...

[hrgweb]

After upgrading from rc9 to rc10 I've encounter an issue on prod, after build it doesn't work at all but it works seamlessly on dev.

Nuxt config:

import { defineNuxtConfig } from 'nuxt/config'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  ssr: false,
  runtimeConfig: {
    public: {
      baseURL: process.env.API_BASE_URL,
    },
  },
})

Any help?

[hrgweb]

@scottmilla any luck?

[hrgweb]

@danielroe still does not work at all. I follow the Opting Into the Edge Channel section but no luck at all.

[scottmilla]

@danielroe @hrgweb Yes, updating to edge worked for me. Remember to delete your package-lock before reinstalling after updating to the edge in package.json

[FileSoft-us]

Check out these docs.
Edge channel error on Netlify generate...

2:40:19 PM: [error] useNitro is not a function
2:40:19 PM: at Object.invoke (node_modules/nuxi/dist/chunks/build.mjs:40:19)
2:40:19 PM: at async Object.invoke (node_modules/nuxi/dist/chunks/generate.mjs:32:5)
2:40:19 PM: at async _main (node_modules/nuxi/dist/cli.mjs:50:20)
2:40:19 PM: error Command failed with exit code 1. (https://ntl.fyi/exit-code-1)
2:40:19 PM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[danielroe]

This is already resolved.

[mak33v]

RC10 empty project
add firebase & import { getAuth } from "firebase/auth"; anywhere in the application

[Vue Router warn]: uncaught error during route navigation:
[[vite-node] [ERR_INVALID_URL_SCHEME]
at ] {
statusCode: 500,
fatal: false,
unhandled: false,
statusMessage: 'Vite Error',
__nuxt_error: true
}

[Ralph-Imholz]

Having the same issue. Have you found a solution yet?

[mak33v]

so far only

nuxt.config.js

vite: {
devBundler: 'legacy',
},

[bbelley]

Same issue here running either rc10 or rc12.

Did anyone ever find out why this is needed? I can get it to work using the devBunder: 'legacy' fix, but otherwise the same 500 vite error.

[QaahirStewart]

500
vite_ssr_import_0.defuFn is not a function

updated from rc.8 now this error any help?

[QaahirStewart]

even get the same error on clean build

[flowreaction]

I have the same error, which seems to come from the nuxt/postcss8 package which requires defu@3 which is outdated.

[QaahirStewart]

I've installed defu but same error

[flowreaction]

so my workaround is adding this to my package.json:

"overrides": {
        "@nuxt/postcss8": {
            "defu": "^6.0.0"
        }
    }

[hussamBashat]

Any Help Please

500
[vite-node] [ERR_MODULE_NOT_FOUND] after upgrade to Nuxt 3.0.0-rc.10 #7647

[flowreaction]

I had the same issue, and tried the rc edge channel as described in the nuxt docs. Still had the issue, but got more error output and located the actual package which was causing it (for me, it was the motion library). After removing the library, I opted out of the edge channel again, and it worked in the regular rc10.

[hussamBashat]

Thank you it really helped me..

The devBundler: 'legacy' solved the [vite-node notfound] problem and also helped reveal the real problem with 'heroicons' package.
I deleted the 'heroicons' package and Fate is running on client without devBundler: 'legacy' correctly.

But also the 'headlessui' package was causing problems when refreshing the page so I had to add devBundler: 'legacy' anyway so that the server was working properly.

[flowreaction]

glad I could help :)

[kosmeln]

The mentioned
npx nuxi-edge@latest upgrade --force
in the description of release notes tries to install latest edge release rc11 which is probably not what most users want. Was it meant to be just
npx nuxi upgrade --force instead?

[Lucky-Strike1695]

As with every RC since rc.9, can't start nuxt in secured mode (RC.9, RC.10, edge-RC.11) :
nuxi dev --https --ssl-cert localhost.pem --ssl-key localhost-key.pem'
==>
500 request to https://0.0.0.0:3000/__nuxt_vite_node__/manifest failed, reason: unable to verify the first certificate ()

[pi0]

HTTPS support for vite-node (enabled in 9 and 10) is fixed for next RC. You can try with edge-channel.

[RobertWade]

@pi0 I do have the same problem, can you elaborate a bit further on this?

[pi0]

Docs for edge channel: https://v3.nuxtjs.org/getting-started/upgrade-guide/edge-channel

You can try RC.11 fix before release.

[JFGHT]

I don't fully understand the Better Workspace Support.

Does this mean it will help us build composables and components that work with Nuxt apps outside the Nuxt app itself? Because that's what I'm trying to do in my monorepo but I could not find any documentation regarding this.

I only found this very useful video tutorial which uses RC6, Turborepo and configures Nuxt in a way it treats the components as modules plus a few other tricks.

[ashokgelal]

I upgraded from 3.0.0-rc.9 to 3.0.0-rc.10 and now nothing renders and throws the following message in the browser console:

Uncaught TypeError: Cannot read properties of undefined (reading 'accept')

I tried jumping from 10 to 11 but same issue.

This error always points to one of my vue files and nothing else. I am using a layout if that makes any difference. I understand that this is not a complete description of the issue and I apologize. I'm just wondering if someone has run into the same issue and/or if someone can point me to where I should be looking.

[SebastianBoergers]

Hey, have you found out what causes this to happen? Have had the same issue(s) and couldn't really figure it out.

[danielroe]

It is likely an outdated version of nuxi. It's also possible that it might be caused by you overriding NODE_ENV or dev value of your nuxt.config - but I would encourage you to open an issue with a reproduction so we can investigate.

[SebastianBoergers]

Hey, thanks a lot!

I'm rather hesitant on opening issues, since for now I assume I did something wrong, overlooked something in a changelog...and whatnot. Our project ist quite big and basically as old as Nuxt 3's initial Beta-Release. Also the upgrade from pre-RC to RC4 was also quite bumpy for us. So we may have some outdated approaches in our codebase which could cause issues.

If I can get my hands on a project-state where this issue is happening I'll try to make it reproducible with a minimal config. Can't promise that thought.

[ssoo33]

When executing 'npm run build',the terminal is warned ’Generated an empty chunk: "index" ‘，and Refresh the environment page online,there will be 404page,what happend? can give me some help?

[ssoo33]

this is my package.json

[danielroe]

Please create an issue with a reproduction. And try using the latest RC before doing so.