[{"data":1,"prerenderedAt":514},["ShallowReactive",2],{"blog-upgrading-to-vite-8-with-nuxt":3},{"id":4,"title":5,"author":6,"body":7,"date":495,"description":13,"extension":496,"meta":497,"navigation":498,"path":499,"seo":500,"slug":506,"status":507,"stem":508,"summary":509,"tags":510,"__hash__":513},"blog\u002Fblog\u002Fupgrading-to-vite-8-with-nuxt.md","Upgrading to Vite 8 in a Nuxt Project","Sharique",{"type":8,"value":9,"toc":483},"minimark",[10,14,19,31,42,52,56,65,118,121,137,143,159,166,170,173,188,191,199,206,210,213,218,235,238,282,289,293,304,308,311,376,379,383,386,427,430,434,440,468,479],[11,12,13],"p",{},"Vite 8 is out, and it's not a small release. The entire build pipeline has been replaced — esbuild and Rollup are out, Rolldown and Oxc are in. For most projects, the upgrade is seamless. But if you're on Nuxt, there's a catch you need to know about before you do anything.",[15,16,18],"h2",{"id":17},"the-problem-with-nuxt-and-vite-versions","The Problem with Nuxt and Vite Versions",[11,20,21,22,26,27,30],{},"If you look at your Nuxt project's ",[23,24,25],"code",{},"package.json",", you won't find a ",[23,28,29],{},"vite"," entry. That's because Nuxt manages Vite as an internal dependency — it ships its own version of Vite and handles all Vite configuration internally.",[11,32,33,34,37,38,41],{},"This means running ",[23,35,36],{},"npm install vite@8"," won't do what you want. npm will install Vite 8 in your ",[23,39,40],{},"node_modules",", but Nuxt will continue using its own bundled version. You'd end up with two copies of Vite and no actual upgrade.",[11,43,44,45,48,49,51],{},"The correct approach is to use npm's ",[23,46,47],{},"overrides"," field, which forces every package in your dependency tree — including Nuxt — to resolve ",[23,50,29],{}," to the version you specify.",[15,53,55],{"id":54},"the-fix","The Fix",[11,57,58,59,61,62,64],{},"Open your ",[23,60,25],{}," and add an ",[23,63,47],{}," field at the top level:",[66,67,72],"pre",{"className":68,"code":69,"language":70,"meta":71,"style":71},"language-json shiki shiki-themes github-light github-dark","{\n  \"overrides\": {\n    \"vite\": \"^8.0.0\"\n  }\n}\n","json","",[23,73,74,83,93,106,112],{"__ignoreMap":71},[75,76,79],"span",{"class":77,"line":78},"line",1,[75,80,82],{"class":81},"sVt8B","{\n",[75,84,86,90],{"class":77,"line":85},2,[75,87,89],{"class":88},"sj4cs","  \"overrides\"",[75,91,92],{"class":81},": {\n",[75,94,96,99,102],{"class":77,"line":95},3,[75,97,98],{"class":88},"    \"vite\"",[75,100,101],{"class":81},": ",[75,103,105],{"class":104},"sZZnC","\"^8.0.0\"\n",[75,107,109],{"class":77,"line":108},4,[75,110,111],{"class":81},"  }\n",[75,113,115],{"class":77,"line":114},5,[75,116,117],{"class":81},"}\n",[11,119,120],{},"Then run:",[66,122,126],{"className":123,"code":124,"language":125,"meta":71,"style":71},"language-bash shiki shiki-themes github-light github-dark","npm install\n","bash",[23,127,128],{"__ignoreMap":71},[75,129,130,134],{"class":77,"line":78},[75,131,133],{"class":132},"sScJk","npm",[75,135,136],{"class":104}," install\n",[11,138,139,140,142],{},"That's it. npm will now resolve all ",[23,141,29],{}," imports across your entire dependency tree to Vite 8. You can confirm it worked by checking the installed version:",[66,144,146],{"className":123,"code":145,"language":125,"meta":71,"style":71},"node -e \"console.log(require('.\u002Fnode_modules\u002Fvite\u002Fpackage.json').version)\"\n",[23,147,148],{"__ignoreMap":71},[75,149,150,153,156],{"class":77,"line":78},[75,151,152],{"class":132},"node",[75,154,155],{"class":88}," -e",[75,157,158],{"class":104}," \"console.log(require('.\u002Fnode_modules\u002Fvite\u002Fpackage.json').version)\"\n",[11,160,161,162,165],{},"You should see ",[23,163,164],{},"8.0.0",".",[15,167,169],{"id":168},"verifying-the-build","Verifying the Build",[11,171,172],{},"Run your production build to make sure everything works:",[66,174,176],{"className":123,"code":175,"language":125,"meta":71,"style":71},"npm run build\n",[23,177,178],{"__ignoreMap":71},[75,179,180,182,185],{"class":77,"line":78},[75,181,133],{"class":132},[75,183,184],{"class":104}," run",[75,186,187],{"class":104}," build\n",[11,189,190],{},"If the upgrade is successful, you'll see Vite's version reported in Nuxt's build output:",[66,192,197],{"className":193,"code":195,"language":196},[194],"language-text","Nuxt 4.4.2 (with Nitro 2.13.1, Vite 8.0.0 and Vue 3.5.30)\n","text",[23,198,195],{"__ignoreMap":71},[11,200,201,202,205],{},"For this project — a Nuxt 4 blog using ",[23,203,204],{},"@nuxt\u002Fcontent",", Tailwind CSS v4, and DaisyUI — the build completed without any errors or warnings. The client built in ~2.9 seconds and the server in ~1.5 seconds.",[15,207,209],{"id":208},"what-actually-changed-in-vite-8","What Actually Changed in Vite 8",[11,211,212],{},"Understanding what changed helps you know what to watch out for if you do run into issues.",[214,215,217],"h3",{"id":216},"rolldown-replaces-rollup-and-esbuild","Rolldown replaces Rollup and esbuild",[11,219,220,221,228,229,234],{},"The biggest change in Vite 8 is that Rollup (used for production bundling) and esbuild (used for dependency pre-bundling and JS transforms) have been replaced by ",[222,223,227],"a",{"href":224,"rel":225},"https:\u002F\u002Frolldown.rs\u002F",[226],"nofollow","Rolldown"," — a new Rust-based bundler — and ",[222,230,233],{"href":231,"rel":232},"https:\u002F\u002Foxc.rs\u002F",[226],"Oxc"," for transforms and minification.",[11,236,237],{},"In practice, this means:",[239,240,241,254,264],"ul",{},[242,243,244,250,251],"li",{},[245,246,247],"strong",{},[23,248,249],{},"build.rollupOptions"," is now ",[23,252,253],{},"build.rolldownOptions",[242,255,256,250,261],{},[245,257,258],{},[23,259,260],{},"optimizeDeps.esbuildOptions",[23,262,263],{},"optimizeDeps.rolldownOptions",[242,265,266,275,276,271,279],{},[245,267,268,271,272],{},[23,269,270],{},"esbuild.jsx"," \u002F ",[23,273,274],{},"esbuild.define"," options move to ",[23,277,278],{},"oxc.jsx",[23,280,281],{},"oxc.define",[11,283,284,285,288],{},"If you have a custom ",[23,286,287],{},"vite.config.ts"," using any of these options, you'll need to update them. For a standard Nuxt project with no custom Vite config (like this one), none of this matters — Nuxt handles it internally.",[214,290,292],{"id":291},"javascript-minification-now-uses-oxc","JavaScript minification now uses Oxc",[11,294,295,296,299,300,303],{},"The default JS minifier has switched from esbuild to Oxc Minifier. This is generally faster and produces similar output, but there's one limitation to be aware of: ",[245,297,298],{},"Oxc does not support lowering native decorators",". If your code uses the ",[23,301,302],{},"@decorator"," syntax and you need it transpiled for older browsers, you'll need to add a Babel or SWC plugin as a workaround.",[214,305,307],{"id":306},"browser-targets-have-been-raised","Browser targets have been raised",[11,309,310],{},"The minimum browser targets in Vite 8 are slightly higher:",[312,313,314,330],"table",{},[315,316,317],"thead",{},[318,319,320,324,327],"tr",{},[321,322,323],"th",{},"Browser",[321,325,326],{},"Vite 7",[321,328,329],{},"Vite 8",[331,332,333,345,354,365],"tbody",{},[318,334,335,339,342],{},[336,337,338],"td",{},"Chrome",[336,340,341],{},"107",[336,343,344],{},"111",[318,346,347,350,352],{},[336,348,349],{},"Edge",[336,351,341],{},[336,353,344],{},[318,355,356,359,362],{},[336,357,358],{},"Firefox",[336,360,361],{},"104",[336,363,364],{},"114",[318,366,367,370,373],{},[336,368,369],{},"Safari",[336,371,372],{},"16.0",[336,374,375],{},"16.4",[11,377,378],{},"For most modern web apps this is a non-issue, but if you're targeting older browsers, double-check that your target audience falls within the new minimums.",[214,380,382],{"id":381},"some-advanced-options-have-been-removed","Some advanced options have been removed",[11,384,385],{},"A few less commonly used features were dropped:",[239,387,388,399,413],{},[242,389,390,391,394,395,398],{},"The ",[23,392,393],{},"\"system\""," and ",[23,396,397],{},"\"amd\""," output formats are no longer supported",[242,400,390,401,404,405,408,409,412],{},[23,402,403],{},"shouldTransformCachedModule",", ",[23,406,407],{},"resolveImportMeta",", and ",[23,410,411],{},"renderDynamicImport"," plugin hooks have been removed",[242,414,415,418,419,422,423,426],{},[23,416,417],{},"build()"," now throws a ",[23,420,421],{},"BundleError"," (with an ",[23,424,425],{},".errors"," property) instead of a raw error object",[11,428,429],{},"Again, for a typical Nuxt app you're unlikely to hit any of these.",[15,431,433],{"id":432},"should-you-do-this","Should You Do This?",[11,435,436,437,439],{},"Nuxt 4.2.2 ships with Vite 7 by default. Using ",[23,438,47],{}," to force Vite 8 is a reasonable thing to do — it's the standard approach for testing ahead of official framework support — but it's worth knowing that:",[441,442,443,453,459],"ol",{},[242,444,445,448,449,452],{},[245,446,447],{},"It's not officially supported yet."," Nuxt hasn't cut a release with Vite 8. If something breaks after a future ",[23,450,451],{},"npm update",", the override is the first thing to check.",[242,454,455,458],{},[245,456,457],{},"It works fine for this project."," No issues encountered — the build is clean, dev server starts up, and all pages render correctly.",[242,460,461,464,465,467],{},[245,462,463],{},"Remove the override when Nuxt officially upgrades."," Once a Nuxt version ships with Vite 8 natively, you can drop the ",[23,466,47],{}," field and let Nuxt manage the version again.",[11,469,470,471,475,476,478],{},"The migration itself took less than five minutes. The harder part was understanding ",[472,473,474],"em",{},"why"," ",[23,477,36],{}," doesn't work for a Nuxt project — and now you know.",[480,481,482],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":71,"searchDepth":85,"depth":95,"links":484},[485,486,487,488,494],{"id":17,"depth":85,"text":18},{"id":54,"depth":85,"text":55},{"id":168,"depth":85,"text":169},{"id":208,"depth":85,"text":209,"children":489},[490,491,492,493],{"id":216,"depth":95,"text":217},{"id":291,"depth":95,"text":292},{"id":306,"depth":95,"text":307},{"id":381,"depth":95,"text":382},{"id":432,"depth":85,"text":433},"2026-03-15","md",{},true,"\u002Fblog\u002Fupgrading-to-vite-8-with-nuxt",{"description":501,"keywords":502,"title":5},"Step-by-step guide to upgrading a Nuxt 4 project to Vite 8 using npm overrides, including what changed in Vite 8 and how to verify the migration.",[329,503,504,505,227,233],"Nuxt","Vite upgrade","npm overrides","upgrading-to-vite-8-with-nuxt","published","blog\u002Fupgrading-to-vite-8-with-nuxt","Vite 8 ships with a completely new build engine under the hood. Here's how I upgraded my Nuxt blog to Vite 8, why a direct npm install won't work, and what actually changed.",[511,503,512],"Vite","JavaScript","WjqxAKbo2n7U_jxyD8wYxmz_ovQBFWnf0z36erkebV8",1778492224479]