[{"data":1,"prerenderedAt":42369},["ShallowReactive",2],{"$fGCo9l1hMtNdUiA6QzdUX5X3kLqaWcC5t2kdz4LrvCvc":3,"versions":2856,"blog-landing":2861,"blog":2871},[4,1120,1948,2767],{"title":5,"titleTemplate":6,"icon":7,"path":8,"stem":9,"children":10,"page":108},"Docs",null,"i-lucide-book-marked","\u002Fdocs\u002F3.x","docs\u002F3.x",[11,109,246,426,907,999,1036,1078],{"title":12,"titleTemplate":13,"icon":14,"path":15,"stem":16,"children":17,"page":108},"Get Started","%s · Get Started with Nuxt","i-lucide-rocket","\u002Fdocs\u002F3.x\u002Fgetting-started","docs\u002F3.x\u002F1.getting-started",[18,23,28,33,38,43,48,53,58,63,68,73,78,83,88,93,98,103],{"title":19,"path":20,"stem":21,"titleTemplate":6,"icon":22},"Introduction","\u002Fdocs\u002F3.x\u002Fgetting-started\u002Fintroduction","docs\u002F3.x\u002F1.getting-started\u002F01.introduction","i-lucide-info",{"title":24,"path":25,"stem":26,"titleTemplate":6,"icon":27},"Installation","\u002Fdocs\u002F3.x\u002Fgetting-started\u002Finstallation","docs\u002F3.x\u002F1.getting-started\u002F02.installation","i-lucide-play",{"title":29,"path":30,"stem":31,"titleTemplate":6,"icon":32},"Configuration","\u002Fdocs\u002F3.x\u002Fgetting-started\u002Fconfiguration","docs\u002F3.x\u002F1.getting-started\u002F03.configuration","i-lucide-cog",{"title":34,"path":35,"stem":36,"titleTemplate":6,"icon":37},"Views","\u002Fdocs\u002F3.x\u002Fgetting-started\u002Fviews","docs\u002F3.x\u002F1.getting-started\u002F04.views","i-lucide-panels-top-left",{"title":39,"path":40,"stem":41,"titleTemplate":6,"icon":42},"Assets","\u002Fdocs\u002F3.x\u002Fgetting-started\u002Fassets","docs\u002F3.x\u002F1.getting-started\u002F05.assets","i-lucide-image",{"title":44,"path":45,"stem":46,"titleTemplate":6,"icon":47},"Styling","\u002Fdocs\u002F3.x\u002Fgetting-started\u002Fstyling","docs\u002F3.x\u002F1.getting-started\u002F06.styling","i-lucide-palette",{"title":49,"path":50,"stem":51,"titleTemplate":6,"icon":52},"Routing","\u002Fdocs\u002F3.x\u002Fgetting-started\u002Frouting","docs\u002F3.x\u002F1.getting-started\u002F07.routing","i-lucide-milestone",{"title":54,"path":55,"stem":56,"titleTemplate":6,"icon":57},"SEO and Meta","\u002Fdocs\u002F3.x\u002Fgetting-started\u002Fseo-meta","docs\u002F3.x\u002F1.getting-started\u002F08.seo-meta","i-lucide-file-search",{"title":59,"path":60,"stem":61,"titleTemplate":6,"icon":62},"Transitions","\u002Fdocs\u002F3.x\u002Fgetting-started\u002Ftransitions","docs\u002F3.x\u002F1.getting-started\u002F09.transitions","i-lucide-toggle-right",{"title":64,"path":65,"stem":66,"titleTemplate":6,"icon":67},"Data Fetching","\u002Fdocs\u002F3.x\u002Fgetting-started\u002Fdata-fetching","docs\u002F3.x\u002F1.getting-started\u002F10.data-fetching","i-lucide-cable",{"title":69,"path":70,"stem":71,"titleTemplate":6,"icon":72},"State Management","\u002Fdocs\u002F3.x\u002Fgetting-started\u002Fstate-management","docs\u002F3.x\u002F1.getting-started\u002F11.state-management","i-lucide-database",{"title":74,"path":75,"stem":76,"titleTemplate":6,"icon":77},"Error Handling","\u002Fdocs\u002F3.x\u002Fgetting-started\u002Ferror-handling","docs\u002F3.x\u002F1.getting-started\u002F12.error-handling","i-lucide-bug-off",{"title":79,"path":80,"stem":81,"titleTemplate":6,"icon":82},"Server","\u002Fdocs\u002F3.x\u002Fgetting-started\u002Fserver","docs\u002F3.x\u002F1.getting-started\u002F13.server","i-lucide-pc-case",{"title":84,"path":85,"stem":86,"titleTemplate":6,"icon":87},"Layers","\u002Fdocs\u002F3.x\u002Fgetting-started\u002Flayers","docs\u002F3.x\u002F1.getting-started\u002F14.layers","i-lucide-layers",{"title":89,"path":90,"stem":91,"titleTemplate":6,"icon":92},"Prerendering","\u002Fdocs\u002F3.x\u002Fgetting-started\u002Fprerendering","docs\u002F3.x\u002F1.getting-started\u002F15.prerendering","i-lucide-file-code-2",{"title":94,"path":95,"stem":96,"titleTemplate":6,"icon":97},"Deployment","\u002Fdocs\u002F3.x\u002Fgetting-started\u002Fdeployment","docs\u002F3.x\u002F1.getting-started\u002F16.deployment","i-lucide-cloud",{"title":99,"path":100,"stem":101,"titleTemplate":6,"icon":102},"Testing","\u002Fdocs\u002F3.x\u002Fgetting-started\u002Ftesting","docs\u002F3.x\u002F1.getting-started\u002F17.testing","i-lucide-circle-check",{"title":104,"path":105,"stem":106,"titleTemplate":6,"icon":107},"Upgrade Guide","\u002Fdocs\u002F3.x\u002Fgetting-started\u002Fupgrade","docs\u002F3.x\u002F1.getting-started\u002F18.upgrade","i-lucide-circle-arrow-up",false,{"title":110,"titleTemplate":111,"icon":112,"path":113,"stem":114,"children":115,"page":108},"Directory Structure","%s · Nuxt Directory Structure","i-vscode-icons-default-folder","\u002Fdocs\u002F3.x\u002Fdirectory-structure","docs\u002F3.x\u002F2.directory-structure",[116,121,126,131,136,141,146,151,156,161,165,170,174,179,184,189,194,199,204,209,214,218,223,228,232,236,241],{"title":117,"path":118,"stem":119,"titleTemplate":6,"icon":120},".nuxt","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fnuxt","docs\u002F3.x\u002F2.directory-structure\u002F0.nuxt","i-vscode-icons-folder-type-temp",{"title":122,"path":123,"stem":124,"titleTemplate":6,"icon":125},".output","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Foutput","docs\u002F3.x\u002F2.directory-structure\u002F0.output","i-vscode-icons-folder-type-package",{"title":127,"path":128,"stem":129,"titleTemplate":6,"icon":130},"assets","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fassets","docs\u002F3.x\u002F2.directory-structure\u002F1.assets","i-vscode-icons-folder-type-asset",{"title":132,"path":133,"stem":134,"titleTemplate":6,"icon":135},"components","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fcomponents","docs\u002F3.x\u002F2.directory-structure\u002F1.components","i-vscode-icons-folder-type-component",{"title":137,"path":138,"stem":139,"titleTemplate":6,"icon":140},"composables","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fcomposables","docs\u002F3.x\u002F2.directory-structure\u002F1.composables","i-vscode-icons-folder-type-src",{"title":142,"path":143,"stem":144,"titleTemplate":6,"icon":145},"content","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fcontent","docs\u002F3.x\u002F2.directory-structure\u002F1.content","i-vscode-icons-folder-type-log",{"title":147,"path":148,"stem":149,"titleTemplate":6,"icon":150},"layers","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Flayers","docs\u002F3.x\u002F2.directory-structure\u002F1.layers","i-vscode-icons-folder-type-nuxt",{"title":152,"path":153,"stem":154,"titleTemplate":6,"icon":155},"layouts","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Flayouts","docs\u002F3.x\u002F2.directory-structure\u002F1.layouts","i-vscode-icons-folder-type-view",{"title":157,"path":158,"stem":159,"titleTemplate":6,"icon":160},"middleware","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fmiddleware","docs\u002F3.x\u002F2.directory-structure\u002F1.middleware","i-vscode-icons-folder-type-middleware",{"title":162,"path":163,"stem":164,"titleTemplate":6,"icon":150},"modules","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fmodules","docs\u002F3.x\u002F2.directory-structure\u002F1.modules",{"title":166,"path":167,"stem":168,"titleTemplate":6,"icon":169},"node_modules","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fnode_modules","docs\u002F3.x\u002F2.directory-structure\u002F1.node_modules","i-vscode-icons-folder-type-node",{"title":171,"path":172,"stem":173,"titleTemplate":6,"icon":155},"pages","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fpages","docs\u002F3.x\u002F2.directory-structure\u002F1.pages",{"title":175,"path":176,"stem":177,"titleTemplate":6,"icon":178},"plugins","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fplugins","docs\u002F3.x\u002F2.directory-structure\u002F1.plugins","i-vscode-icons-folder-type-plugin",{"title":180,"path":181,"stem":182,"titleTemplate":6,"icon":183},"public","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fpublic","docs\u002F3.x\u002F2.directory-structure\u002F1.public","i-vscode-icons-folder-type-public",{"title":185,"path":186,"stem":187,"titleTemplate":6,"icon":188},"server","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fserver","docs\u002F3.x\u002F2.directory-structure\u002F1.server","i-vscode-icons-folder-type-server",{"title":190,"path":191,"stem":192,"titleTemplate":6,"icon":193},"shared","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fshared","docs\u002F3.x\u002F2.directory-structure\u002F1.shared","i-vscode-icons-folder-type-shared",{"title":195,"path":196,"stem":197,"titleTemplate":6,"icon":198},"utils","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Futils","docs\u002F3.x\u002F2.directory-structure\u002F1.utils","i-vscode-icons-folder-type-tools",{"title":200,"path":201,"stem":202,"titleTemplate":6,"icon":203},".env","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fenv","docs\u002F3.x\u002F2.directory-structure\u002F2.env","i-vscode-icons-file-type-dotenv",{"title":205,"path":206,"stem":207,"titleTemplate":6,"icon":208},".gitignore","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fgitignore","docs\u002F3.x\u002F2.directory-structure\u002F2.gitignore","i-vscode-icons-file-type-git",{"title":210,"path":211,"stem":212,"titleTemplate":6,"icon":213},".nuxtignore","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fnuxtignore","docs\u002F3.x\u002F2.directory-structure\u002F2.nuxtignore","i-vscode-icons-file-type-nuxt",{"title":215,"path":216,"stem":217,"titleTemplate":6,"icon":213},".nuxtrc","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fnuxtrc","docs\u002F3.x\u002F2.directory-structure\u002F2.nuxtrc",{"title":219,"path":220,"stem":221,"titleTemplate":6,"icon":222},"app.vue","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fapp","docs\u002F3.x\u002F2.directory-structure\u002F3.app","i-vscode-icons-file-type-vue",{"title":224,"path":225,"stem":226,"titleTemplate":6,"icon":227},"app.config.ts","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fapp-config","docs\u002F3.x\u002F2.directory-structure\u002F3.app-config","i-vscode-icons-file-type-light-config",{"title":229,"path":230,"stem":231,"titleTemplate":6,"icon":222},"error.vue","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Ferror","docs\u002F3.x\u002F2.directory-structure\u002F3.error",{"title":233,"path":234,"stem":235,"titleTemplate":6,"icon":213},"nuxt.config.ts","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fnuxt-config","docs\u002F3.x\u002F2.directory-structure\u002F3.nuxt-config",{"title":237,"path":238,"stem":239,"titleTemplate":6,"icon":240},"package.json","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Fpackage","docs\u002F3.x\u002F2.directory-structure\u002F3.package","i-vscode-icons-file-type-npm",{"title":242,"path":243,"stem":244,"titleTemplate":6,"icon":245},"tsconfig.json","\u002Fdocs\u002F3.x\u002Fdirectory-structure\u002Ftsconfig","docs\u002F3.x\u002F2.directory-structure\u002F3.tsconfig","i-vscode-icons-file-type-tsconfig",{"title":247,"titleTemplate":6,"icon":248,"path":249,"stem":250,"children":251,"page":108},"Guide","i-lucide-book-open","\u002Fdocs\u002F3.x\u002Fguide","docs\u002F3.x\u002F3.guide",[252,287,306,321,356,379],{"title":253,"titleTemplate":254,"icon":255,"path":256,"stem":257,"children":258,"page":108},"Key Concepts","%s · Nuxt Concepts","i-lucide-medal","\u002Fdocs\u002F3.x\u002Fguide\u002Fconcepts","docs\u002F3.x\u002F3.guide\u002F1.concepts",[259,263,267,271,275,279,283],{"title":260,"path":261,"stem":262,"titleTemplate":6},"Rendering Modes","\u002Fdocs\u002F3.x\u002Fguide\u002Fconcepts\u002Frendering","docs\u002F3.x\u002F3.guide\u002F1.concepts\u002F1.rendering",{"title":264,"path":265,"stem":266,"titleTemplate":6},"Nuxt Lifecycle","\u002Fdocs\u002F3.x\u002Fguide\u002Fconcepts\u002Fnuxt-lifecycle","docs\u002F3.x\u002F3.guide\u002F1.concepts\u002F2.nuxt-lifecycle",{"title":268,"path":269,"stem":270,"titleTemplate":6},"Auto-imports","\u002Fdocs\u002F3.x\u002Fguide\u002Fconcepts\u002Fauto-imports","docs\u002F3.x\u002F3.guide\u002F1.concepts\u002F3.auto-imports",{"title":272,"path":273,"stem":274,"titleTemplate":6},"Server Engine","\u002Fdocs\u002F3.x\u002Fguide\u002Fconcepts\u002Fserver-engine","docs\u002F3.x\u002F3.guide\u002F1.concepts\u002F4.server-engine",{"title":276,"path":277,"stem":278,"titleTemplate":6},"Modules","\u002Fdocs\u002F3.x\u002Fguide\u002Fconcepts\u002Fmodules","docs\u002F3.x\u002F3.guide\u002F1.concepts\u002F5.modules",{"title":280,"path":281,"stem":282,"titleTemplate":6},"TypeScript","\u002Fdocs\u002F3.x\u002Fguide\u002Fconcepts\u002Ftypescript","docs\u002F3.x\u002F3.guide\u002F1.concepts\u002F8.typescript",{"title":284,"path":285,"stem":286,"titleTemplate":6},"Code Style","\u002Fdocs\u002F3.x\u002Fguide\u002Fconcepts\u002Fcode-style","docs\u002F3.x\u002F3.guide\u002F1.concepts\u002F9.code-style",{"title":288,"titleTemplate":289,"icon":290,"path":291,"stem":292,"children":293,"page":108},"Best Practices","%s · Best Practices","i-lucide-square-check","\u002Fdocs\u002F3.x\u002Fguide\u002Fbest-practices","docs\u002F3.x\u002F3.guide\u002F2.best-practices",[294,298,302],{"title":295,"path":296,"stem":297,"titleTemplate":6},"Nuxt and hydration","\u002Fdocs\u002F3.x\u002Fguide\u002Fbest-practices\u002Fhydration","docs\u002F3.x\u002F3.guide\u002F2.best-practices\u002Fhydration",{"title":299,"path":300,"stem":301,"titleTemplate":6},"Nuxt Performance","\u002Fdocs\u002F3.x\u002Fguide\u002Fbest-practices\u002Fperformance","docs\u002F3.x\u002F3.guide\u002F2.best-practices\u002Fperformance",{"title":303,"path":304,"stem":305,"titleTemplate":6},"Nuxt Plugins","\u002Fdocs\u002F3.x\u002Fguide\u002Fbest-practices\u002Fplugins","docs\u002F3.x\u002F3.guide\u002F2.best-practices\u002Fplugins",{"title":307,"titleTemplate":308,"icon":309,"path":310,"stem":311,"children":312,"page":108},"Working with AI","Working with AI: %s","i-lucide-bot","\u002Fdocs\u002F3.x\u002Fguide\u002Fai","docs\u002F3.x\u002F3.guide\u002F3.ai",[313,317],{"title":314,"path":315,"stem":316,"titleTemplate":6},"MCP Server","\u002Fdocs\u002F3.x\u002Fguide\u002Fai\u002Fmcp","docs\u002F3.x\u002F3.guide\u002F3.ai\u002F1.mcp",{"title":318,"path":319,"stem":320,"titleTemplate":6},"LLMs.txt","\u002Fdocs\u002F3.x\u002Fguide\u002Fai\u002Fllms-txt","docs\u002F3.x\u002F3.guide\u002F3.ai\u002F2.llms-txt",{"title":322,"titleTemplate":323,"icon":324,"path":325,"stem":326,"children":327,"page":108},"Module Author Guide","%s · Nuxt Modules Author Guide","i-lucide-box","\u002Fdocs\u002F3.x\u002Fguide\u002Fmodules","docs\u002F3.x\u002F3.guide\u002F4.modules",[328,332,336,340,344,348,352],{"title":329,"path":330,"stem":331,"titleTemplate":6},"Create Your First Module","\u002Fdocs\u002F3.x\u002Fguide\u002Fmodules\u002Fgetting-started","docs\u002F3.x\u002F3.guide\u002F4.modules\u002F1.getting-started",{"title":333,"path":334,"stem":335,"titleTemplate":6},"Understand Module Structure","\u002Fdocs\u002F3.x\u002Fguide\u002Fmodules\u002Fmodule-anatomy","docs\u002F3.x\u002F3.guide\u002F4.modules\u002F2.module-anatomy",{"title":337,"path":338,"stem":339,"titleTemplate":6},"Add Plugins, Components & More","\u002Fdocs\u002F3.x\u002Fguide\u002Fmodules\u002Frecipes-basics","docs\u002F3.x\u002F3.guide\u002F4.modules\u002F3.recipes-basics",{"title":341,"path":342,"stem":343,"titleTemplate":6},"Use Hooks & Extend Types","\u002Fdocs\u002F3.x\u002Fguide\u002Fmodules\u002Frecipes-advanced","docs\u002F3.x\u002F3.guide\u002F4.modules\u002F4.recipes-advanced",{"title":345,"path":346,"stem":347,"titleTemplate":6},"Test Your Module","\u002Fdocs\u002F3.x\u002Fguide\u002Fmodules\u002Ftesting","docs\u002F3.x\u002F3.guide\u002F4.modules\u002F5.testing",{"title":349,"path":350,"stem":351,"titleTemplate":6},"Follow Best Practices","\u002Fdocs\u002F3.x\u002Fguide\u002Fmodules\u002Fbest-practices","docs\u002F3.x\u002F3.guide\u002F4.modules\u002F6.best-practices",{"title":353,"path":354,"stem":355,"titleTemplate":6},"Publish & Share Your Module","\u002Fdocs\u002F3.x\u002Fguide\u002Fmodules\u002Fecosystem","docs\u002F3.x\u002F3.guide\u002F4.modules\u002F7.ecosystem",{"title":357,"titleTemplate":358,"icon":359,"path":360,"stem":361,"children":362,"page":108},"Recipes","%s · Recipes","i-lucide-cooking-pot","\u002Fdocs\u002F3.x\u002Fguide\u002Frecipes","docs\u002F3.x\u002F3.guide\u002F5.recipes",[363,367,371,375],{"title":364,"path":365,"stem":366,"titleTemplate":6},"Custom Routing","\u002Fdocs\u002F3.x\u002Fguide\u002Frecipes\u002Fcustom-routing","docs\u002F3.x\u002F3.guide\u002F5.recipes\u002F1.custom-routing",{"title":368,"path":369,"stem":370,"titleTemplate":6},"Vite Plugins","\u002Fdocs\u002F3.x\u002Fguide\u002Frecipes\u002Fvite-plugin","docs\u002F3.x\u002F3.guide\u002F5.recipes\u002F2.vite-plugin",{"title":372,"path":373,"stem":374,"titleTemplate":6},"Custom useFetch","\u002Fdocs\u002F3.x\u002Fguide\u002Frecipes\u002Fcustom-usefetch","docs\u002F3.x\u002F3.guide\u002F5.recipes\u002F3.custom-usefetch",{"title":376,"path":377,"stem":378,"titleTemplate":6},"Sessions and Authentication","\u002Fdocs\u002F3.x\u002Fguide\u002Frecipes\u002Fsessions-and-authentication","docs\u002F3.x\u002F3.guide\u002F5.recipes\u002F4.sessions-and-authentication",{"title":380,"titleTemplate":381,"icon":382,"path":383,"stem":384,"children":385,"page":108},"Going Further","%s · Nuxt Advanced","i-lucide-star","\u002Fdocs\u002F3.x\u002Fguide\u002Fgoing-further","docs\u002F3.x\u002F3.guide\u002F6.going-further",[386,390,394,398,402,406,410,414,418,422],{"title":387,"path":388,"stem":389,"titleTemplate":6},"Custom Events","\u002Fdocs\u002F3.x\u002Fguide\u002Fgoing-further\u002Fevents","docs\u002F3.x\u002F3.guide\u002F6.going-further\u002F1.events",{"title":391,"path":392,"stem":393,"titleTemplate":6},"Experimental Features","\u002Fdocs\u002F3.x\u002Fguide\u002Fgoing-further\u002Fexperimental-features","docs\u002F3.x\u002F3.guide\u002F6.going-further\u002F1.experimental-features",{"title":395,"path":396,"stem":397,"titleTemplate":6},"Features","\u002Fdocs\u002F3.x\u002Fguide\u002Fgoing-further\u002Ffeatures","docs\u002F3.x\u002F3.guide\u002F6.going-further\u002F1.features",{"title":399,"path":400,"stem":401,"titleTemplate":6},"Runtime Config","\u002Fdocs\u002F3.x\u002Fguide\u002Fgoing-further\u002Fruntime-config","docs\u002F3.x\u002F3.guide\u002F6.going-further\u002F10.runtime-config",{"title":403,"path":404,"stem":405,"titleTemplate":6},"Nightly Release Channel","\u002Fdocs\u002F3.x\u002Fguide\u002Fgoing-further\u002Fnightly-release-channel","docs\u002F3.x\u002F3.guide\u002F6.going-further\u002F11.nightly-release-channel",{"title":407,"path":408,"stem":409,"titleTemplate":6},"Lifecycle Hooks","\u002Fdocs\u002F3.x\u002Fguide\u002Fgoing-further\u002Fhooks","docs\u002F3.x\u002F3.guide\u002F6.going-further\u002F2.hooks",{"title":411,"path":412,"stem":413,"titleTemplate":6},"Nuxt Kit","\u002Fdocs\u002F3.x\u002Fguide\u002Fgoing-further\u002Fkit","docs\u002F3.x\u002F3.guide\u002F6.going-further\u002F4.kit",{"title":415,"path":416,"stem":417,"titleTemplate":6},"NuxtApp","\u002Fdocs\u002F3.x\u002Fguide\u002Fgoing-further\u002Fnuxt-app","docs\u002F3.x\u002F3.guide\u002F6.going-further\u002F6.nuxt-app",{"title":419,"path":420,"stem":421,"titleTemplate":6},"Authoring Nuxt Layers","\u002Fdocs\u002F3.x\u002Fguide\u002Fgoing-further\u002Flayers","docs\u002F3.x\u002F3.guide\u002F6.going-further\u002F7.layers",{"title":423,"path":424,"stem":425,"titleTemplate":6},"Debugging","\u002Fdocs\u002F3.x\u002Fguide\u002Fgoing-further\u002Fdebugging","docs\u002F3.x\u002F3.guide\u002F6.going-further\u002F9.debugging",{"title":427,"titleTemplate":428,"icon":429,"path":430,"stem":431,"children":432,"page":108},"API","%s · Nuxt API","i-lucide-code-xml","\u002Fdocs\u002F3.x\u002Fapi","docs\u002F3.x\u002F4.api",[433,499,622,745,816,889,902],{"title":434,"titleTemplate":435,"icon":324,"path":436,"stem":437,"children":438,"page":108},"Components","%s · Nuxt Components","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomponents","docs\u002F3.x\u002F4.api\u002F1.components",[439,443,447,451,455,459,463,467,471,475,479,483,487,491,495],{"title":440,"path":441,"stem":442,"titleTemplate":6},"\u003CClientOnly>","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomponents\u002Fclient-only","docs\u002F3.x\u002F4.api\u002F1.components\u002F1.client-only",{"title":444,"path":445,"stem":446,"titleTemplate":6},"\u003CDevOnly>","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomponents\u002Fdev-only","docs\u002F3.x\u002F4.api\u002F1.components\u002F1.dev-only",{"title":448,"path":449,"stem":450,"titleTemplate":6},"\u003CNuxtClientFallback>","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomponents\u002Fnuxt-client-fallback","docs\u002F3.x\u002F4.api\u002F1.components\u002F1.nuxt-client-fallback",{"title":452,"path":453,"stem":454,"titleTemplate":6},"\u003CNuxtPicture>","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomponents\u002Fnuxt-picture","docs\u002F3.x\u002F4.api\u002F1.components\u002F10.nuxt-picture",{"title":456,"path":457,"stem":458,"titleTemplate":6},"\u003CTeleport>","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomponents\u002Fteleports","docs\u002F3.x\u002F4.api\u002F1.components\u002F11.teleports",{"title":460,"path":461,"stem":462,"titleTemplate":6},"\u003CNuxtRouteAnnouncer>","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomponents\u002Fnuxt-route-announcer","docs\u002F3.x\u002F4.api\u002F1.components\u002F12.nuxt-route-announcer",{"title":464,"path":465,"stem":466,"titleTemplate":6},"\u003CNuxtTime>","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomponents\u002Fnuxt-time","docs\u002F3.x\u002F4.api\u002F1.components\u002F13.nuxt-time",{"title":468,"path":469,"stem":470,"titleTemplate":6},"\u003CNuxtPage>","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomponents\u002Fnuxt-page","docs\u002F3.x\u002F4.api\u002F1.components\u002F2.nuxt-page",{"title":472,"path":473,"stem":474,"titleTemplate":6},"\u003CNuxtLayout>","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomponents\u002Fnuxt-layout","docs\u002F3.x\u002F4.api\u002F1.components\u002F3.nuxt-layout",{"title":476,"path":477,"stem":478,"titleTemplate":6},"\u003CNuxtLink>","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomponents\u002Fnuxt-link","docs\u002F3.x\u002F4.api\u002F1.components\u002F4.nuxt-link",{"title":480,"path":481,"stem":482,"titleTemplate":6},"\u003CNuxtLoadingIndicator>","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomponents\u002Fnuxt-loading-indicator","docs\u002F3.x\u002F4.api\u002F1.components\u002F5.nuxt-loading-indicator",{"title":484,"path":485,"stem":486,"titleTemplate":6},"\u003CNuxtErrorBoundary>","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomponents\u002Fnuxt-error-boundary","docs\u002F3.x\u002F4.api\u002F1.components\u002F6.nuxt-error-boundary",{"title":488,"path":489,"stem":490,"titleTemplate":6},"\u003CNuxtWelcome>","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomponents\u002Fnuxt-welcome","docs\u002F3.x\u002F4.api\u002F1.components\u002F7.nuxt-welcome",{"title":492,"path":493,"stem":494,"titleTemplate":6},"\u003CNuxtIsland>","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomponents\u002Fnuxt-island","docs\u002F3.x\u002F4.api\u002F1.components\u002F8.nuxt-island",{"title":496,"path":497,"stem":498,"titleTemplate":6},"\u003CNuxtImg>","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomponents\u002Fnuxt-img","docs\u002F3.x\u002F4.api\u002F1.components\u002F9.nuxt-img",{"title":500,"titleTemplate":501,"icon":502,"path":503,"stem":504,"children":505,"page":108},"Composables","%s · Nuxt Composables","i-lucide-arrow-left-right","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables","docs\u002F3.x\u002F4.api\u002F2.composables",[506,510,514,518,522,526,530,534,538,542,546,550,554,558,562,566,570,574,578,582,586,590,594,598,602,606,610,614,618],{"title":507,"path":508,"stem":509,"titleTemplate":6},"onPrehydrate","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fon-prehydrate","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fon-prehydrate",{"title":511,"path":512,"stem":513,"titleTemplate":6},"useAppConfig","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-app-config","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-app-config",{"title":515,"path":516,"stem":517,"titleTemplate":6},"useAsyncData","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-async-data","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-async-data",{"title":519,"path":520,"stem":521,"titleTemplate":6},"useCookie","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-cookie","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-cookie",{"title":523,"path":524,"stem":525,"titleTemplate":6},"useError","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-error","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-error",{"title":527,"path":528,"stem":529,"titleTemplate":6},"useFetch","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-fetch","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-fetch",{"title":531,"path":532,"stem":533,"titleTemplate":6},"useHead","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-head","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-head",{"title":535,"path":536,"stem":537,"titleTemplate":6},"useHeadSafe","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-head-safe","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-head-safe",{"title":539,"path":540,"stem":541,"titleTemplate":6},"useHydration","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-hydration","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-hydration",{"title":543,"path":544,"stem":545,"titleTemplate":6},"useLazyAsyncData","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-lazy-async-data","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-lazy-async-data",{"title":547,"path":548,"stem":549,"titleTemplate":6},"useLazyFetch","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-lazy-fetch","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-lazy-fetch",{"title":551,"path":552,"stem":553,"titleTemplate":6},"useLoadingIndicator","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-loading-indicator","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-loading-indicator",{"title":555,"path":556,"stem":557,"titleTemplate":6},"useNuxtApp","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-nuxt-app","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-nuxt-app",{"title":559,"path":560,"stem":561,"titleTemplate":6},"useNuxtData","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-nuxt-data","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-nuxt-data",{"title":563,"path":564,"stem":565,"titleTemplate":6},"usePreviewMode","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-preview-mode","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-preview-mode",{"title":567,"path":568,"stem":569,"titleTemplate":6},"useRequestEvent","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-request-event","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-request-event",{"title":571,"path":572,"stem":573,"titleTemplate":6},"useRequestFetch","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-request-fetch","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-request-fetch",{"title":575,"path":576,"stem":577,"titleTemplate":6},"useRequestHeader","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-request-header","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-request-header",{"title":579,"path":580,"stem":581,"titleTemplate":6},"useRequestHeaders","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-request-headers","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-request-headers",{"title":583,"path":584,"stem":585,"titleTemplate":6},"useRequestURL","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-request-url","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-request-url",{"title":587,"path":588,"stem":589,"titleTemplate":6},"useResponseHeader","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-response-header","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-response-header",{"title":591,"path":592,"stem":593,"titleTemplate":6},"useRoute","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-route","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-route",{"title":595,"path":596,"stem":597,"titleTemplate":6},"useRouteAnnouncer","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-route-announcer","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-route-announcer",{"title":599,"path":600,"stem":601,"titleTemplate":6},"useRouter","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-router","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-router",{"title":603,"path":604,"stem":605,"titleTemplate":6},"useRuntimeConfig","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-runtime-config","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-runtime-config",{"title":607,"path":608,"stem":609,"titleTemplate":6},"useRuntimeHook","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-runtime-hook","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-runtime-hook",{"title":611,"path":612,"stem":613,"titleTemplate":6},"useSeoMeta","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-seo-meta","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-seo-meta",{"title":615,"path":616,"stem":617,"titleTemplate":6},"useServerSeoMeta","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-server-seo-meta","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-server-seo-meta",{"title":619,"path":620,"stem":621,"titleTemplate":6},"useState","\u002Fdocs\u002F3.x\u002Fapi\u002Fcomposables\u002Fuse-state","docs\u002F3.x\u002F4.api\u002F2.composables\u002Fuse-state",{"title":623,"titleTemplate":624,"icon":625,"path":626,"stem":627,"children":628,"page":108},"Utils","%s · Nuxt Utils","i-lucide-square-function","\u002Fdocs\u002F3.x\u002Fapi\u002Futils","docs\u002F3.x\u002F4.api\u002F3.utils",[629,633,637,641,645,649,653,657,661,665,669,673,677,681,685,689,693,697,701,705,709,713,717,721,725,729,733,737,741],{"title":630,"path":631,"stem":632,"titleTemplate":6},"$fetch","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fdollarfetch","docs\u002F3.x\u002F4.api\u002F3.utils\u002F$fetch",{"title":634,"path":635,"stem":636,"titleTemplate":6},"abortNavigation","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fabort-navigation","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fabort-navigation",{"title":638,"path":639,"stem":640,"titleTemplate":6},"addRouteMiddleware","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fadd-route-middleware","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fadd-route-middleware",{"title":642,"path":643,"stem":644,"titleTemplate":6},"callOnce","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fcall-once","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fcall-once",{"title":646,"path":647,"stem":648,"titleTemplate":6},"clearError","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fclear-error","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fclear-error",{"title":650,"path":651,"stem":652,"titleTemplate":6},"clearNuxtData","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fclear-nuxt-data","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fclear-nuxt-data",{"title":654,"path":655,"stem":656,"titleTemplate":6},"clearNuxtState","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fclear-nuxt-state","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fclear-nuxt-state",{"title":658,"path":659,"stem":660,"titleTemplate":6},"createError","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fcreate-error","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fcreate-error",{"title":662,"path":663,"stem":664,"titleTemplate":6},"defineLazyHydrationComponent","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fdefine-lazy-hydration-component","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fdefine-lazy-hydration-component",{"title":666,"path":667,"stem":668,"titleTemplate":6},"defineNuxtComponent","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fdefine-nuxt-component","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fdefine-nuxt-component",{"title":670,"path":671,"stem":672,"titleTemplate":6},"defineNuxtPlugin","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fdefine-nuxt-plugin","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fdefine-nuxt-plugin",{"title":674,"path":675,"stem":676,"titleTemplate":6},"defineNuxtRouteMiddleware","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fdefine-nuxt-route-middleware","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fdefine-nuxt-route-middleware",{"title":678,"path":679,"stem":680,"titleTemplate":6},"definePageMeta","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fdefine-page-meta","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fdefine-page-meta",{"title":682,"path":683,"stem":684,"titleTemplate":6},"defineRouteRules","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fdefine-route-rules","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fdefine-route-rules",{"title":686,"path":687,"stem":688,"titleTemplate":6},"navigateTo","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fnavigate-to","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fnavigate-to",{"title":690,"path":691,"stem":692,"titleTemplate":6},"onBeforeRouteLeave","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fon-before-route-leave","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fon-before-route-leave",{"title":694,"path":695,"stem":696,"titleTemplate":6},"onBeforeRouteUpdate","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fon-before-route-update","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fon-before-route-update",{"title":698,"path":699,"stem":700,"titleTemplate":6},"onNuxtReady","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fon-nuxt-ready","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fon-nuxt-ready",{"title":702,"path":703,"stem":704,"titleTemplate":6},"prefetchComponents","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fprefetch-components","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fprefetch-components",{"title":706,"path":707,"stem":708,"titleTemplate":6},"preloadComponents","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fpreload-components","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fpreload-components",{"title":710,"path":711,"stem":712,"titleTemplate":6},"preloadRouteComponents","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fpreload-route-components","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fpreload-route-components",{"title":714,"path":715,"stem":716,"titleTemplate":6},"prerenderRoutes","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fprerender-routes","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fprerender-routes",{"title":718,"path":719,"stem":720,"titleTemplate":6},"refreshCookie","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Frefresh-cookie","docs\u002F3.x\u002F4.api\u002F3.utils\u002Frefresh-cookie",{"title":722,"path":723,"stem":724,"titleTemplate":6},"refreshNuxtData","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Frefresh-nuxt-data","docs\u002F3.x\u002F4.api\u002F3.utils\u002Frefresh-nuxt-data",{"title":726,"path":727,"stem":728,"titleTemplate":6},"reloadNuxtApp","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Freload-nuxt-app","docs\u002F3.x\u002F4.api\u002F3.utils\u002Freload-nuxt-app",{"title":730,"path":731,"stem":732,"titleTemplate":6},"setPageLayout","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fset-page-layout","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fset-page-layout",{"title":734,"path":735,"stem":736,"titleTemplate":6},"setResponseStatus","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fset-response-status","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fset-response-status",{"title":738,"path":739,"stem":740,"titleTemplate":6},"showError","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fshow-error","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fshow-error",{"title":742,"path":743,"stem":744,"titleTemplate":6},"updateAppConfig","\u002Fdocs\u002F3.x\u002Fapi\u002Futils\u002Fupdate-app-config","docs\u002F3.x\u002F4.api\u002F3.utils\u002Fupdate-app-config",{"title":746,"titleTemplate":747,"icon":748,"path":749,"stem":750,"children":751,"page":108},"Commands","%s · Nuxt Commands","i-lucide-square-terminal","\u002Fdocs\u002F3.x\u002Fapi\u002Fcommands","docs\u002F3.x\u002F4.api\u002F4.commands",[752,756,760,764,768,772,776,780,784,788,792,796,800,804,808,812],{"title":753,"path":754,"stem":755,"titleTemplate":6},"nuxt add","\u002Fdocs\u002F3.x\u002Fapi\u002Fcommands\u002Fadd","docs\u002F3.x\u002F4.api\u002F4.commands\u002Fadd",{"title":757,"path":758,"stem":759,"titleTemplate":6},"nuxt analyze","\u002Fdocs\u002F3.x\u002Fapi\u002Fcommands\u002Fanalyze","docs\u002F3.x\u002F4.api\u002F4.commands\u002Fanalyze",{"title":761,"path":762,"stem":763,"titleTemplate":6},"nuxt build","\u002Fdocs\u002F3.x\u002Fapi\u002Fcommands\u002Fbuild","docs\u002F3.x\u002F4.api\u002F4.commands\u002Fbuild",{"title":765,"path":766,"stem":767,"titleTemplate":6},"nuxt build-module","\u002Fdocs\u002F3.x\u002Fapi\u002Fcommands\u002Fbuild-module","docs\u002F3.x\u002F4.api\u002F4.commands\u002Fbuild-module",{"title":769,"path":770,"stem":771,"titleTemplate":6},"nuxt cleanup","\u002Fdocs\u002F3.x\u002Fapi\u002Fcommands\u002Fcleanup","docs\u002F3.x\u002F4.api\u002F4.commands\u002Fcleanup",{"title":773,"path":774,"stem":775,"titleTemplate":6},"nuxt dev","\u002Fdocs\u002F3.x\u002Fapi\u002Fcommands\u002Fdev","docs\u002F3.x\u002F4.api\u002F4.commands\u002Fdev",{"title":777,"path":778,"stem":779,"titleTemplate":6},"nuxt devtools","\u002Fdocs\u002F3.x\u002Fapi\u002Fcommands\u002Fdevtools","docs\u002F3.x\u002F4.api\u002F4.commands\u002Fdevtools",{"title":781,"path":782,"stem":783,"titleTemplate":6},"nuxt generate","\u002Fdocs\u002F3.x\u002Fapi\u002Fcommands\u002Fgenerate","docs\u002F3.x\u002F4.api\u002F4.commands\u002Fgenerate",{"title":785,"path":786,"stem":787,"titleTemplate":6},"nuxt info","\u002Fdocs\u002F3.x\u002Fapi\u002Fcommands\u002Finfo","docs\u002F3.x\u002F4.api\u002F4.commands\u002Finfo",{"title":789,"path":790,"stem":791,"titleTemplate":6},"create nuxt","\u002Fdocs\u002F3.x\u002Fapi\u002Fcommands\u002Finit","docs\u002F3.x\u002F4.api\u002F4.commands\u002Finit",{"title":793,"path":794,"stem":795,"titleTemplate":6},"nuxt module","\u002Fdocs\u002F3.x\u002Fapi\u002Fcommands\u002Fmodule","docs\u002F3.x\u002F4.api\u002F4.commands\u002Fmodule",{"title":797,"path":798,"stem":799,"titleTemplate":6},"nuxt prepare","\u002Fdocs\u002F3.x\u002Fapi\u002Fcommands\u002Fprepare","docs\u002F3.x\u002F4.api\u002F4.commands\u002Fprepare",{"title":801,"path":802,"stem":803,"titleTemplate":6},"nuxt preview","\u002Fdocs\u002F3.x\u002Fapi\u002Fcommands\u002Fpreview","docs\u002F3.x\u002F4.api\u002F4.commands\u002Fpreview",{"title":805,"path":806,"stem":807,"titleTemplate":6},"nuxt test","\u002Fdocs\u002F3.x\u002Fapi\u002Fcommands\u002Ftest","docs\u002F3.x\u002F4.api\u002F4.commands\u002Ftest",{"title":809,"path":810,"stem":811,"titleTemplate":6},"nuxt typecheck","\u002Fdocs\u002F3.x\u002Fapi\u002Fcommands\u002Ftypecheck","docs\u002F3.x\u002F4.api\u002F4.commands\u002Ftypecheck",{"title":813,"path":814,"stem":815,"titleTemplate":6},"nuxt upgrade","\u002Fdocs\u002F3.x\u002Fapi\u002Fcommands\u002Fupgrade","docs\u002F3.x\u002F4.api\u002F4.commands\u002Fupgrade",{"title":411,"titleTemplate":817,"icon":818,"path":819,"stem":820,"children":821,"page":108},"%s · Nuxt Kit","i-lucide-package","\u002Fdocs\u002F3.x\u002Fapi\u002Fkit","docs\u002F3.x\u002F4.api\u002F5.kit",[822,825,828,832,836,840,844,848,852,855,859,863,866,869,873,877,881,885],{"title":276,"path":823,"stem":824,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fapi\u002Fkit\u002Fmodules","docs\u002F3.x\u002F4.api\u002F5.kit\u002F1.modules",{"title":399,"path":826,"stem":827,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fapi\u002Fkit\u002Fruntime-config","docs\u002F3.x\u002F4.api\u002F5.kit\u002F10.runtime-config",{"title":829,"path":830,"stem":831,"titleTemplate":6},"Templates","\u002Fdocs\u002F3.x\u002Fapi\u002Fkit\u002Ftemplates","docs\u002F3.x\u002F4.api\u002F5.kit\u002F10.templates",{"title":833,"path":834,"stem":835,"titleTemplate":6},"Nitro","\u002Fdocs\u002F3.x\u002Fapi\u002Fkit\u002Fnitro","docs\u002F3.x\u002F4.api\u002F5.kit\u002F11.nitro",{"title":837,"path":838,"stem":839,"titleTemplate":6},"Resolving","\u002Fdocs\u002F3.x\u002Fapi\u002Fkit\u002Fresolving","docs\u002F3.x\u002F4.api\u002F5.kit\u002F12.resolving",{"title":841,"path":842,"stem":843,"titleTemplate":6},"Logging","\u002Fdocs\u002F3.x\u002Fapi\u002Fkit\u002Flogging","docs\u002F3.x\u002F4.api\u002F5.kit\u002F13.logging",{"title":845,"path":846,"stem":847,"titleTemplate":6},"Builder","\u002Fdocs\u002F3.x\u002Fapi\u002Fkit\u002Fbuilder","docs\u002F3.x\u002F4.api\u002F5.kit\u002F14.builder",{"title":849,"path":850,"stem":851,"titleTemplate":6},"Examples","\u002Fdocs\u002F3.x\u002Fapi\u002Fkit\u002Fexamples","docs\u002F3.x\u002F4.api\u002F5.kit\u002F15.examples",{"title":84,"path":853,"stem":854,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fapi\u002Fkit\u002Flayers","docs\u002F3.x\u002F4.api\u002F5.kit\u002F16.layers",{"title":856,"path":857,"stem":858,"titleTemplate":6},"Programmatic Usage","\u002Fdocs\u002F3.x\u002Fapi\u002Fkit\u002Fprogrammatic","docs\u002F3.x\u002F4.api\u002F5.kit\u002F2.programmatic",{"title":860,"path":861,"stem":862,"titleTemplate":6},"Compatibility","\u002Fdocs\u002F3.x\u002Fapi\u002Fkit\u002Fcompatibility","docs\u002F3.x\u002F4.api\u002F5.kit\u002F3.compatibility",{"title":268,"path":864,"stem":865,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fapi\u002Fkit\u002Fautoimports","docs\u002F3.x\u002F4.api\u002F5.kit\u002F4.autoimports",{"title":434,"path":867,"stem":868,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fapi\u002Fkit\u002Fcomponents","docs\u002F3.x\u002F4.api\u002F5.kit\u002F5.components",{"title":870,"path":871,"stem":872,"titleTemplate":6},"Context","\u002Fdocs\u002F3.x\u002Fapi\u002Fkit\u002Fcontext","docs\u002F3.x\u002F4.api\u002F5.kit\u002F6.context",{"title":874,"path":875,"stem":876,"titleTemplate":6},"Pages","\u002Fdocs\u002F3.x\u002Fapi\u002Fkit\u002Fpages","docs\u002F3.x\u002F4.api\u002F5.kit\u002F7.pages",{"title":878,"path":879,"stem":880,"titleTemplate":6},"Layout","\u002Fdocs\u002F3.x\u002Fapi\u002Fkit\u002Flayout","docs\u002F3.x\u002F4.api\u002F5.kit\u002F8.layout",{"title":882,"path":883,"stem":884,"titleTemplate":6},"Head","\u002Fdocs\u002F3.x\u002Fapi\u002Fkit\u002Fhead","docs\u002F3.x\u002F4.api\u002F5.kit\u002F9.head",{"title":886,"path":887,"stem":888,"titleTemplate":6},"Plugins","\u002Fdocs\u002F3.x\u002Fapi\u002Fkit\u002Fplugins","docs\u002F3.x\u002F4.api\u002F5.kit\u002F9.plugins",{"title":890,"titleTemplate":6,"icon":891,"path":892,"stem":893,"children":894,"page":108},"Advanced","i-lucide-brain","\u002Fdocs\u002F3.x\u002Fapi\u002Fadvanced","docs\u002F3.x\u002F4.api\u002F6.advanced",[895,898],{"title":407,"path":896,"stem":897,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fapi\u002Fadvanced\u002Fhooks","docs\u002F3.x\u002F4.api\u002F6.advanced\u002F1.hooks",{"title":899,"path":900,"stem":901,"titleTemplate":6},"Import meta","\u002Fdocs\u002F3.x\u002Fapi\u002Fadvanced\u002Fimport-meta","docs\u002F3.x\u002F4.api\u002F6.advanced\u002F2.import-meta",{"title":903,"path":904,"stem":905,"titleTemplate":906,"icon":32},"Nuxt Configuration","\u002Fdocs\u002F3.x\u002Fapi\u002Fnuxt-config","docs\u002F3.x\u002F4.api\u002F6.nuxt-config","%s",{"title":849,"titleTemplate":908,"icon":909,"path":910,"stem":911,"children":912,"page":108},"%s · Nuxt Examples","i-lucide-app-window-mac","\u002Fdocs\u002F3.x\u002Fexamples","docs\u002F3.x\u002F4.examples",[913,917,939,954,990],{"title":914,"path":915,"stem":916,"titleTemplate":6},"Hello World","\u002Fdocs\u002F3.x\u002Fexamples\u002Fhello-world","docs\u002F3.x\u002F4.examples\u002F0.hello-world",{"title":395,"path":918,"stem":919,"children":920,"page":108},"\u002Fdocs\u002F3.x\u002Fexamples\u002Ffeatures","docs\u002F3.x\u002F4.examples\u002F1.features",[921,925,928,931,935],{"title":922,"path":923,"stem":924,"titleTemplate":6},"Auto Imports","\u002Fdocs\u002F3.x\u002Fexamples\u002Ffeatures\u002Fauto-imports","docs\u002F3.x\u002F4.examples\u002F1.features\u002F1.auto-imports",{"title":64,"path":926,"stem":927,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fexamples\u002Ffeatures\u002Fdata-fetching","docs\u002F3.x\u002F4.examples\u002F1.features\u002F2.data-fetching",{"title":69,"path":929,"stem":930,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fexamples\u002Ffeatures\u002Fstate-management","docs\u002F3.x\u002F4.examples\u002F1.features\u002F3.state-management",{"title":932,"path":933,"stem":934,"titleTemplate":6},"Meta Tags","\u002Fdocs\u002F3.x\u002Fexamples\u002Ffeatures\u002Fmeta-tags","docs\u002F3.x\u002F4.examples\u002F1.features\u002F4.meta-tags",{"title":936,"path":937,"stem":938,"titleTemplate":6},"Layouts","\u002Fdocs\u002F3.x\u002Fexamples\u002Ffeatures\u002Flayouts","docs\u002F3.x\u002F4.examples\u002F1.features\u002F5.layouts",{"title":49,"path":940,"stem":941,"children":942,"page":108},"\u002Fdocs\u002F3.x\u002Fexamples\u002Frouting","docs\u002F3.x\u002F4.examples\u002F2.routing",[943,947,950],{"title":944,"path":945,"stem":946,"titleTemplate":6},"Middleware","\u002Fdocs\u002F3.x\u002Fexamples\u002Frouting\u002Fmiddleware","docs\u002F3.x\u002F4.examples\u002F2.routing\u002Fmiddleware",{"title":874,"path":948,"stem":949,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fexamples\u002Frouting\u002Fpages","docs\u002F3.x\u002F4.examples\u002F2.routing\u002Fpages",{"title":951,"path":952,"stem":953,"titleTemplate":6},"Universal Router","\u002Fdocs\u002F3.x\u002Fexamples\u002Frouting\u002Funiversal-router","docs\u002F3.x\u002F4.examples\u002F2.routing\u002Funiversal-router",{"title":890,"path":955,"stem":956,"children":957,"page":108},"\u002Fdocs\u002F3.x\u002Fexamples\u002Fadvanced","docs\u002F3.x\u002F4.examples\u002F4.advanced",[958,961,964,968,972,976,980,983,986],{"title":84,"path":959,"stem":960,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fexamples\u002Fadvanced\u002Fconfig-extends","docs\u002F3.x\u002F4.examples\u002F4.advanced\u002Fconfig-extends",{"title":74,"path":962,"stem":963,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fexamples\u002Fadvanced\u002Ferror-handling","docs\u002F3.x\u002F4.examples\u002F4.advanced\u002Ferror-handling",{"title":965,"path":966,"stem":967,"titleTemplate":6},"JSX \u002F TSX","\u002Fdocs\u002F3.x\u002Fexamples\u002Fadvanced\u002Fjsx","docs\u002F3.x\u002F4.examples\u002F4.advanced\u002Fjsx",{"title":969,"path":970,"stem":971,"titleTemplate":6},"Locale","\u002Fdocs\u002F3.x\u002Fexamples\u002Fadvanced\u002Flocale","docs\u002F3.x\u002F4.examples\u002F4.advanced\u002Flocale",{"title":973,"path":974,"stem":975,"titleTemplate":6},"Module Extend Pages","\u002Fdocs\u002F3.x\u002Fexamples\u002Fadvanced\u002Fmodule-extend-pages","docs\u002F3.x\u002F4.examples\u002F4.advanced\u002Fmodule-extend-pages",{"title":977,"path":978,"stem":979,"titleTemplate":6},"Teleport","\u002Fdocs\u002F3.x\u002Fexamples\u002Fadvanced\u002Fteleport","docs\u002F3.x\u002F4.examples\u002F4.advanced\u002Fteleport",{"title":99,"path":981,"stem":982,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fexamples\u002Fadvanced\u002Ftesting","docs\u002F3.x\u002F4.examples\u002F4.advanced\u002Ftesting",{"title":519,"path":984,"stem":985,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fexamples\u002Fadvanced\u002Fuse-cookie","docs\u002F3.x\u002F4.examples\u002F4.advanced\u002Fuse-cookie",{"title":987,"path":988,"stem":989,"titleTemplate":6},"Use Custom Fetch Composable","\u002Fdocs\u002F3.x\u002Fexamples\u002Fadvanced\u002Fuse-custom-fetch-composable","docs\u002F3.x\u002F4.examples\u002F4.advanced\u002Fuse-custom-fetch-composable",{"title":991,"path":992,"stem":993,"children":994,"page":108},"Experimental","\u002Fdocs\u002F3.x\u002Fexamples\u002Fexperimental","docs\u002F3.x\u002F4.examples\u002F7.experimental",[995],{"title":996,"path":997,"stem":998,"titleTemplate":6},"WASM","\u002Fdocs\u002F3.x\u002Fexamples\u002Fexperimental\u002Fwasm","docs\u002F3.x\u002F4.examples\u002F7.experimental\u002Fwasm",{"title":1000,"titleTemplate":1001,"icon":1002,"path":1003,"stem":1004,"children":1005,"page":108},"Community","%s · Nuxt Community","i-lucide-messages-square","\u002Fdocs\u002F3.x\u002Fcommunity","docs\u002F3.x\u002F5.community",[1006,1011,1016,1021,1026,1031],{"title":1007,"path":1008,"stem":1009,"titleTemplate":6,"icon":1010},"Getting Help","\u002Fdocs\u002F3.x\u002Fcommunity\u002Fgetting-help","docs\u002F3.x\u002F5.community\u002F2.getting-help","i-lucide-life-buoy",{"title":1012,"path":1013,"stem":1014,"titleTemplate":6,"icon":1015},"Reporting Bugs","\u002Fdocs\u002F3.x\u002Fcommunity\u002Freporting-bugs","docs\u002F3.x\u002F5.community\u002F3.reporting-bugs","i-lucide-bug",{"title":1017,"path":1018,"stem":1019,"titleTemplate":6,"icon":1020},"Contribution","\u002Fdocs\u002F3.x\u002Fcommunity\u002Fcontribution","docs\u002F3.x\u002F5.community\u002F4.contribution","i-lucide-git-pull-request",{"title":1022,"path":1023,"stem":1024,"titleTemplate":6,"icon":1025},"Framework","\u002Fdocs\u002F3.x\u002Fcommunity\u002Fframework-contribution","docs\u002F3.x\u002F5.community\u002F5.framework-contribution","i-lucide-github",{"title":1027,"path":1028,"stem":1029,"titleTemplate":6,"icon":1030},"Roadmap","\u002Fdocs\u002F3.x\u002Fcommunity\u002Froadmap","docs\u002F3.x\u002F5.community\u002F6.roadmap","i-lucide-map",{"title":1032,"path":1033,"stem":1034,"titleTemplate":6,"icon":1035},"Releases","\u002Fdocs\u002F3.x\u002Fcommunity\u002Fchangelog","docs\u002F3.x\u002F5.community\u002F7.changelog","i-lucide-bell-dot",{"title":1037,"titleTemplate":1038,"icon":1039,"path":1040,"stem":1041,"children":1042,"page":108},"Migrate to Nuxt Bridge","Migrate to Nuxt Bridge: %s","i-lucide-ship","\u002Fdocs\u002F3.x\u002Fbridge","docs\u002F3.x\u002F6.bridge",[1043,1047,1050,1053,1057,1061,1065,1068,1071,1074],{"title":1044,"path":1045,"stem":1046,"titleTemplate":6},"Overview","\u002Fdocs\u002F3.x\u002Fbridge\u002Foverview","docs\u002F3.x\u002F6.bridge\u002F1.overview",{"title":29,"path":1048,"stem":1049,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fbridge\u002Fconfiguration","docs\u002F3.x\u002F6.bridge\u002F10.configuration",{"title":280,"path":1051,"stem":1052,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fbridge\u002Ftypescript","docs\u002F3.x\u002F6.bridge\u002F2.typescript",{"title":1054,"path":1055,"stem":1056,"titleTemplate":6},"Legacy Composition API","\u002Fdocs\u002F3.x\u002Fbridge\u002Fbridge-composition-api","docs\u002F3.x\u002F6.bridge\u002F3.bridge-composition-api",{"title":1058,"path":1059,"stem":1060,"titleTemplate":6},"Plugins and Middleware","\u002Fdocs\u002F3.x\u002Fbridge\u002Fplugins-and-middleware","docs\u002F3.x\u002F6.bridge\u002F4.plugins-and-middleware",{"title":1062,"path":1063,"stem":1064,"titleTemplate":6},"New Composition API","\u002Fdocs\u002F3.x\u002Fbridge\u002Fnuxt3-compatible-api","docs\u002F3.x\u002F6.bridge\u002F5.nuxt3-compatible-api",{"title":932,"path":1066,"stem":1067,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fbridge\u002Fmeta","docs\u002F3.x\u002F6.bridge\u002F6.meta",{"title":399,"path":1069,"stem":1070,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fbridge\u002Fruntime-config","docs\u002F3.x\u002F6.bridge\u002F7.runtime-config",{"title":833,"path":1072,"stem":1073,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fbridge\u002Fnitro","docs\u002F3.x\u002F6.bridge\u002F8.nitro",{"title":1075,"path":1076,"stem":1077,"titleTemplate":6},"Vite","\u002Fdocs\u002F3.x\u002Fbridge\u002Fvite","docs\u002F3.x\u002F6.bridge\u002F9.vite",{"title":1079,"titleTemplate":1080,"icon":107,"path":1081,"stem":1082,"children":1083,"page":108},"Migrate to Nuxt 3","Migrate to Nuxt 3: %s","\u002Fdocs\u002F3.x\u002Fmigration","docs\u002F3.x\u002F7.migration",[1084,1087,1091,1094,1097,1100,1103,1106,1109,1113,1117],{"title":1044,"path":1085,"stem":1086,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fmigration\u002Foverview","docs\u002F3.x\u002F7.migration\u002F1.overview",{"title":1088,"path":1089,"stem":1090,"titleTemplate":6},"Build Tooling","\u002Fdocs\u002F3.x\u002Fmigration\u002Fbundling","docs\u002F3.x\u002F7.migration\u002F10.bundling",{"title":79,"path":1092,"stem":1093,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fmigration\u002Fserver","docs\u002F3.x\u002F7.migration\u002F11.server",{"title":29,"path":1095,"stem":1096,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fmigration\u002Fconfiguration","docs\u002F3.x\u002F7.migration\u002F2.configuration",{"title":276,"path":1098,"stem":1099,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fmigration\u002Fmodule-authors","docs\u002F3.x\u002F7.migration\u002F20.module-authors",{"title":922,"path":1101,"stem":1102,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fmigration\u002Fauto-imports","docs\u002F3.x\u002F7.migration\u002F3.auto-imports",{"title":932,"path":1104,"stem":1105,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fmigration\u002Fmeta","docs\u002F3.x\u002F7.migration\u002F4.meta",{"title":1058,"path":1107,"stem":1108,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fmigration\u002Fplugins-and-middleware","docs\u002F3.x\u002F7.migration\u002F5.plugins-and-middleware",{"title":1110,"path":1111,"stem":1112,"titleTemplate":6},"Pages and Layouts","\u002Fdocs\u002F3.x\u002Fmigration\u002Fpages-and-layouts","docs\u002F3.x\u002F7.migration\u002F6.pages-and-layouts",{"title":1114,"path":1115,"stem":1116,"titleTemplate":6},"Component Options","\u002Fdocs\u002F3.x\u002Fmigration\u002Fcomponent-options","docs\u002F3.x\u002F7.migration\u002F7.component-options",{"title":399,"path":1118,"stem":1119,"titleTemplate":6},"\u002Fdocs\u002F3.x\u002Fmigration\u002Fruntime-config","docs\u002F3.x\u002F7.migration\u002F8.runtime-config",{"title":5,"titleTemplate":6,"icon":7,"path":1121,"stem":1122,"children":1123,"page":108},"\u002Fdocs\u002F4.x","docs\u002F4.x",[1124,1182,1276,1404,1778,1855,1877,1911],{"title":12,"titleTemplate":13,"icon":14,"path":1125,"stem":1126,"children":1127,"page":108},"\u002Fdocs\u002F4.x\u002Fgetting-started","docs\u002F4.x\u002F1.getting-started",[1128,1131,1134,1137,1140,1143,1146,1149,1152,1155,1158,1161,1164,1167,1170,1173,1176,1179],{"title":19,"path":1129,"stem":1130,"titleTemplate":6,"icon":22},"\u002Fdocs\u002F4.x\u002Fgetting-started\u002Fintroduction","docs\u002F4.x\u002F1.getting-started\u002F01.introduction",{"title":24,"path":1132,"stem":1133,"titleTemplate":6,"icon":27},"\u002Fdocs\u002F4.x\u002Fgetting-started\u002Finstallation","docs\u002F4.x\u002F1.getting-started\u002F02.installation",{"title":29,"path":1135,"stem":1136,"titleTemplate":6,"icon":32},"\u002Fdocs\u002F4.x\u002Fgetting-started\u002Fconfiguration","docs\u002F4.x\u002F1.getting-started\u002F03.configuration",{"title":34,"path":1138,"stem":1139,"titleTemplate":6,"icon":37},"\u002Fdocs\u002F4.x\u002Fgetting-started\u002Fviews","docs\u002F4.x\u002F1.getting-started\u002F04.views",{"title":39,"path":1141,"stem":1142,"titleTemplate":6,"icon":42},"\u002Fdocs\u002F4.x\u002Fgetting-started\u002Fassets","docs\u002F4.x\u002F1.getting-started\u002F05.assets",{"title":44,"path":1144,"stem":1145,"titleTemplate":6,"icon":47},"\u002Fdocs\u002F4.x\u002Fgetting-started\u002Fstyling","docs\u002F4.x\u002F1.getting-started\u002F06.styling",{"title":49,"path":1147,"stem":1148,"titleTemplate":6,"icon":52},"\u002Fdocs\u002F4.x\u002Fgetting-started\u002Frouting","docs\u002F4.x\u002F1.getting-started\u002F07.routing",{"title":54,"path":1150,"stem":1151,"titleTemplate":6,"icon":57},"\u002Fdocs\u002F4.x\u002Fgetting-started\u002Fseo-meta","docs\u002F4.x\u002F1.getting-started\u002F08.seo-meta",{"title":59,"path":1153,"stem":1154,"titleTemplate":6,"icon":62},"\u002Fdocs\u002F4.x\u002Fgetting-started\u002Ftransitions","docs\u002F4.x\u002F1.getting-started\u002F09.transitions",{"title":64,"path":1156,"stem":1157,"titleTemplate":6,"icon":67},"\u002Fdocs\u002F4.x\u002Fgetting-started\u002Fdata-fetching","docs\u002F4.x\u002F1.getting-started\u002F10.data-fetching",{"title":69,"path":1159,"stem":1160,"titleTemplate":6,"icon":72},"\u002Fdocs\u002F4.x\u002Fgetting-started\u002Fstate-management","docs\u002F4.x\u002F1.getting-started\u002F11.state-management",{"title":74,"path":1162,"stem":1163,"titleTemplate":6,"icon":77},"\u002Fdocs\u002F4.x\u002Fgetting-started\u002Ferror-handling","docs\u002F4.x\u002F1.getting-started\u002F12.error-handling",{"title":79,"path":1165,"stem":1166,"titleTemplate":6,"icon":82},"\u002Fdocs\u002F4.x\u002Fgetting-started\u002Fserver","docs\u002F4.x\u002F1.getting-started\u002F13.server",{"title":84,"path":1168,"stem":1169,"titleTemplate":6,"icon":87},"\u002Fdocs\u002F4.x\u002Fgetting-started\u002Flayers","docs\u002F4.x\u002F1.getting-started\u002F14.layers",{"title":89,"path":1171,"stem":1172,"titleTemplate":6,"icon":92},"\u002Fdocs\u002F4.x\u002Fgetting-started\u002Fprerendering","docs\u002F4.x\u002F1.getting-started\u002F15.prerendering",{"title":94,"path":1174,"stem":1175,"titleTemplate":6,"icon":97},"\u002Fdocs\u002F4.x\u002Fgetting-started\u002Fdeployment","docs\u002F4.x\u002F1.getting-started\u002F16.deployment",{"title":99,"path":1177,"stem":1178,"titleTemplate":6,"icon":102},"\u002Fdocs\u002F4.x\u002Fgetting-started\u002Ftesting","docs\u002F4.x\u002F1.getting-started\u002F17.testing",{"title":104,"path":1180,"stem":1181,"titleTemplate":6,"icon":107},"\u002Fdocs\u002F4.x\u002Fgetting-started\u002Fupgrade","docs\u002F4.x\u002F1.getting-started\u002F18.upgrade",{"title":110,"titleTemplate":111,"icon":112,"path":1183,"stem":1184,"children":1185,"page":108},"\u002Fdocs\u002F4.x\u002Fdirectory-structure","docs\u002F4.x\u002F2.directory-structure",[1186,1189,1192,1234,1237,1240,1243,1246,1249,1252,1255,1258,1261,1264,1267,1270,1273],{"title":117,"path":1187,"stem":1188,"titleTemplate":6,"icon":120},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fnuxt","docs\u002F4.x\u002F2.directory-structure\u002F0.nuxt",{"title":122,"path":1190,"stem":1191,"titleTemplate":6,"icon":125},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Foutput","docs\u002F4.x\u002F2.directory-structure\u002F0.output",{"title":1193,"titleTemplate":111,"head":1194,"defaultOpen":1196,"icon":1197,"path":1198,"stem":1199,"children":1200,"page":108},"app",{"title":1195},"app\u002F",true,"i-vscode-icons-folder-type-app","\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fapp","docs\u002F4.x\u002F2.directory-structure\u002F1.app",[1201,1204,1207,1210,1213,1216,1219,1222,1225,1228,1231],{"title":127,"path":1202,"stem":1203,"titleTemplate":6,"icon":130},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fapp\u002Fassets","docs\u002F4.x\u002F2.directory-structure\u002F1.app\u002F1.assets",{"title":132,"path":1205,"stem":1206,"titleTemplate":6,"icon":135},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fapp\u002Fcomponents","docs\u002F4.x\u002F2.directory-structure\u002F1.app\u002F1.components",{"title":137,"path":1208,"stem":1209,"titleTemplate":6,"icon":140},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fapp\u002Fcomposables","docs\u002F4.x\u002F2.directory-structure\u002F1.app\u002F1.composables",{"title":152,"path":1211,"stem":1212,"titleTemplate":6,"icon":155},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fapp\u002Flayouts","docs\u002F4.x\u002F2.directory-structure\u002F1.app\u002F1.layouts",{"title":157,"path":1214,"stem":1215,"titleTemplate":6,"icon":160},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fapp\u002Fmiddleware","docs\u002F4.x\u002F2.directory-structure\u002F1.app\u002F1.middleware",{"title":171,"path":1217,"stem":1218,"titleTemplate":6,"icon":155},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fapp\u002Fpages","docs\u002F4.x\u002F2.directory-structure\u002F1.app\u002F1.pages",{"title":175,"path":1220,"stem":1221,"titleTemplate":6,"icon":178},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fapp\u002Fplugins","docs\u002F4.x\u002F2.directory-structure\u002F1.app\u002F1.plugins",{"title":195,"path":1223,"stem":1224,"titleTemplate":6,"icon":198},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fapp\u002Futils","docs\u002F4.x\u002F2.directory-structure\u002F1.app\u002F1.utils",{"title":219,"path":1226,"stem":1227,"titleTemplate":6,"icon":222},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fapp\u002Fapp","docs\u002F4.x\u002F2.directory-structure\u002F1.app\u002F3.app",{"title":224,"path":1229,"stem":1230,"titleTemplate":6,"icon":227},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fapp\u002Fapp-config","docs\u002F4.x\u002F2.directory-structure\u002F1.app\u002F3.app-config",{"title":229,"path":1232,"stem":1233,"titleTemplate":6,"icon":222},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fapp\u002Ferror","docs\u002F4.x\u002F2.directory-structure\u002F1.app\u002F3.error",{"title":142,"path":1235,"stem":1236,"titleTemplate":6,"icon":145},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fcontent","docs\u002F4.x\u002F2.directory-structure\u002F1.content",{"title":147,"path":1238,"stem":1239,"titleTemplate":6,"icon":150},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Flayers","docs\u002F4.x\u002F2.directory-structure\u002F1.layers",{"title":162,"path":1241,"stem":1242,"titleTemplate":6,"icon":150},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fmodules","docs\u002F4.x\u002F2.directory-structure\u002F1.modules",{"title":166,"path":1244,"stem":1245,"titleTemplate":6,"icon":169},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fnode_modules","docs\u002F4.x\u002F2.directory-structure\u002F1.node_modules",{"title":180,"path":1247,"stem":1248,"titleTemplate":6,"icon":183},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fpublic","docs\u002F4.x\u002F2.directory-structure\u002F1.public",{"title":185,"path":1250,"stem":1251,"titleTemplate":6,"icon":188},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fserver","docs\u002F4.x\u002F2.directory-structure\u002F1.server",{"title":190,"path":1253,"stem":1254,"titleTemplate":6,"icon":193},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fshared","docs\u002F4.x\u002F2.directory-structure\u002F1.shared",{"title":200,"path":1256,"stem":1257,"titleTemplate":6,"icon":203},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fenv","docs\u002F4.x\u002F2.directory-structure\u002F2.env",{"title":205,"path":1259,"stem":1260,"titleTemplate":6,"icon":208},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fgitignore","docs\u002F4.x\u002F2.directory-structure\u002F2.gitignore",{"title":210,"path":1262,"stem":1263,"titleTemplate":6,"icon":213},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fnuxtignore","docs\u002F4.x\u002F2.directory-structure\u002F2.nuxtignore",{"title":215,"path":1265,"stem":1266,"titleTemplate":6,"icon":213},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fnuxtrc","docs\u002F4.x\u002F2.directory-structure\u002F2.nuxtrc",{"title":233,"path":1268,"stem":1269,"titleTemplate":6,"icon":213},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fnuxt-config","docs\u002F4.x\u002F2.directory-structure\u002F3.nuxt-config",{"title":237,"path":1271,"stem":1272,"titleTemplate":6,"icon":240},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fpackage","docs\u002F4.x\u002F2.directory-structure\u002F3.package",{"title":242,"path":1274,"stem":1275,"titleTemplate":6,"icon":245},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Ftsconfig","docs\u002F4.x\u002F2.directory-structure\u002F3.tsconfig",{"title":247,"titleTemplate":6,"icon":248,"path":1277,"stem":1278,"children":1279,"page":108},"\u002Fdocs\u002F4.x\u002Fguide","docs\u002F4.x\u002F3.guide",[1280,1305,1319,1329,1354,1370],{"title":253,"titleTemplate":254,"icon":255,"path":1281,"stem":1282,"children":1283,"page":108},"\u002Fdocs\u002F4.x\u002Fguide\u002Fconcepts","docs\u002F4.x\u002F3.guide\u002F1.concepts",[1284,1287,1290,1293,1296,1299,1302],{"title":260,"path":1285,"stem":1286,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fconcepts\u002Frendering","docs\u002F4.x\u002F3.guide\u002F1.concepts\u002F1.rendering",{"title":264,"path":1288,"stem":1289,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fconcepts\u002Fnuxt-lifecycle","docs\u002F4.x\u002F3.guide\u002F1.concepts\u002F2.nuxt-lifecycle",{"title":268,"path":1291,"stem":1292,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fconcepts\u002Fauto-imports","docs\u002F4.x\u002F3.guide\u002F1.concepts\u002F3.auto-imports",{"title":272,"path":1294,"stem":1295,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fconcepts\u002Fserver-engine","docs\u002F4.x\u002F3.guide\u002F1.concepts\u002F4.server-engine",{"title":276,"path":1297,"stem":1298,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fconcepts\u002Fmodules","docs\u002F4.x\u002F3.guide\u002F1.concepts\u002F5.modules",{"title":280,"path":1300,"stem":1301,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fconcepts\u002Ftypescript","docs\u002F4.x\u002F3.guide\u002F1.concepts\u002F8.typescript",{"title":284,"path":1303,"stem":1304,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fconcepts\u002Fcode-style","docs\u002F4.x\u002F3.guide\u002F1.concepts\u002F9.code-style",{"title":288,"titleTemplate":289,"icon":290,"path":1306,"stem":1307,"children":1308,"page":108},"\u002Fdocs\u002F4.x\u002Fguide\u002Fbest-practices","docs\u002F4.x\u002F3.guide\u002F2.best-practices",[1309,1313,1316],{"title":1310,"path":1311,"stem":1312,"titleTemplate":6},"Nuxt and Hydration","\u002Fdocs\u002F4.x\u002Fguide\u002Fbest-practices\u002Fhydration","docs\u002F4.x\u002F3.guide\u002F2.best-practices\u002Fhydration",{"title":299,"path":1314,"stem":1315,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fbest-practices\u002Fperformance","docs\u002F4.x\u002F3.guide\u002F2.best-practices\u002Fperformance",{"title":303,"path":1317,"stem":1318,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fbest-practices\u002Fplugins","docs\u002F4.x\u002F3.guide\u002F2.best-practices\u002Fplugins",{"title":307,"titleTemplate":308,"icon":309,"path":1320,"stem":1321,"children":1322,"page":108},"\u002Fdocs\u002F4.x\u002Fguide\u002Fai","docs\u002F4.x\u002F3.guide\u002F3.ai",[1323,1326],{"title":314,"path":1324,"stem":1325,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fai\u002Fmcp","docs\u002F4.x\u002F3.guide\u002F3.ai\u002F1.mcp",{"title":318,"path":1327,"stem":1328,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fai\u002Fllms-txt","docs\u002F4.x\u002F3.guide\u002F3.ai\u002F2.llms-txt",{"title":322,"titleTemplate":323,"icon":324,"path":1330,"stem":1331,"children":1332,"page":108},"\u002Fdocs\u002F4.x\u002Fguide\u002Fmodules","docs\u002F4.x\u002F3.guide\u002F4.modules",[1333,1336,1339,1342,1345,1348,1351],{"title":329,"path":1334,"stem":1335,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fmodules\u002Fgetting-started","docs\u002F4.x\u002F3.guide\u002F4.modules\u002F1.getting-started",{"title":333,"path":1337,"stem":1338,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fmodules\u002Fmodule-anatomy","docs\u002F4.x\u002F3.guide\u002F4.modules\u002F2.module-anatomy",{"title":337,"path":1340,"stem":1341,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fmodules\u002Frecipes-basics","docs\u002F4.x\u002F3.guide\u002F4.modules\u002F3.recipes-basics",{"title":341,"path":1343,"stem":1344,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fmodules\u002Frecipes-advanced","docs\u002F4.x\u002F3.guide\u002F4.modules\u002F4.recipes-advanced",{"title":345,"path":1346,"stem":1347,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fmodules\u002Ftesting","docs\u002F4.x\u002F3.guide\u002F4.modules\u002F5.testing",{"title":349,"path":1349,"stem":1350,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fmodules\u002Fbest-practices","docs\u002F4.x\u002F3.guide\u002F4.modules\u002F6.best-practices",{"title":353,"path":1352,"stem":1353,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fmodules\u002Fecosystem","docs\u002F4.x\u002F3.guide\u002F4.modules\u002F7.ecosystem",{"title":357,"titleTemplate":358,"icon":359,"path":1355,"stem":1356,"children":1357,"page":108},"\u002Fdocs\u002F4.x\u002Fguide\u002Frecipes","docs\u002F4.x\u002F3.guide\u002F5.recipes",[1358,1361,1364,1367],{"title":364,"path":1359,"stem":1360,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Frecipes\u002Fcustom-routing","docs\u002F4.x\u002F3.guide\u002F5.recipes\u002F1.custom-routing",{"title":368,"path":1362,"stem":1363,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Frecipes\u002Fvite-plugin","docs\u002F4.x\u002F3.guide\u002F5.recipes\u002F2.vite-plugin",{"title":372,"path":1365,"stem":1366,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Frecipes\u002Fcustom-usefetch","docs\u002F4.x\u002F3.guide\u002F5.recipes\u002F3.custom-usefetch",{"title":376,"path":1368,"stem":1369,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Frecipes\u002Fsessions-and-authentication","docs\u002F4.x\u002F3.guide\u002F5.recipes\u002F4.sessions-and-authentication",{"title":380,"titleTemplate":381,"icon":382,"path":1371,"stem":1372,"children":1373,"page":108},"\u002Fdocs\u002F4.x\u002Fguide\u002Fgoing-further","docs\u002F4.x\u002F3.guide\u002F6.going-further",[1374,1377,1380,1383,1386,1389,1392,1395,1398,1401],{"title":387,"path":1375,"stem":1376,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fgoing-further\u002Fevents","docs\u002F4.x\u002F3.guide\u002F6.going-further\u002F1.events",{"title":391,"path":1378,"stem":1379,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fgoing-further\u002Fexperimental-features","docs\u002F4.x\u002F3.guide\u002F6.going-further\u002F1.experimental-features",{"title":395,"path":1381,"stem":1382,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fgoing-further\u002Ffeatures","docs\u002F4.x\u002F3.guide\u002F6.going-further\u002F1.features",{"title":399,"path":1384,"stem":1385,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fgoing-further\u002Fruntime-config","docs\u002F4.x\u002F3.guide\u002F6.going-further\u002F10.runtime-config",{"title":403,"path":1387,"stem":1388,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fgoing-further\u002Fnightly-release-channel","docs\u002F4.x\u002F3.guide\u002F6.going-further\u002F11.nightly-release-channel",{"title":407,"path":1390,"stem":1391,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fgoing-further\u002Fhooks","docs\u002F4.x\u002F3.guide\u002F6.going-further\u002F2.hooks",{"title":411,"path":1393,"stem":1394,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fgoing-further\u002Fkit","docs\u002F4.x\u002F3.guide\u002F6.going-further\u002F4.kit",{"title":415,"path":1396,"stem":1397,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fgoing-further\u002Fnuxt-app","docs\u002F4.x\u002F3.guide\u002F6.going-further\u002F6.nuxt-app",{"title":419,"path":1399,"stem":1400,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fgoing-further\u002Flayers","docs\u002F4.x\u002F3.guide\u002F6.going-further\u002F7.layers",{"title":423,"path":1402,"stem":1403,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fguide\u002Fgoing-further\u002Fdebugging","docs\u002F4.x\u002F3.guide\u002F6.going-further\u002F9.debugging",{"title":427,"titleTemplate":428,"icon":429,"path":1405,"stem":1406,"children":1407,"page":108},"\u002Fdocs\u002F4.x\u002Fapi","docs\u002F4.x\u002F4.api",[1408,1461,1564,1655,1707,1765,1775],{"title":434,"titleTemplate":435,"icon":324,"path":1409,"stem":1410,"children":1411,"page":108},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomponents","docs\u002F4.x\u002F4.api\u002F1.components",[1412,1415,1418,1421,1424,1427,1430,1433,1437,1440,1443,1446,1449,1452,1455,1458],{"title":440,"path":1413,"stem":1414,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomponents\u002Fclient-only","docs\u002F4.x\u002F4.api\u002F1.components\u002F1.client-only",{"title":444,"path":1416,"stem":1417,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomponents\u002Fdev-only","docs\u002F4.x\u002F4.api\u002F1.components\u002F1.dev-only",{"title":448,"path":1419,"stem":1420,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomponents\u002Fnuxt-client-fallback","docs\u002F4.x\u002F4.api\u002F1.components\u002F1.nuxt-client-fallback",{"title":452,"path":1422,"stem":1423,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomponents\u002Fnuxt-picture","docs\u002F4.x\u002F4.api\u002F1.components\u002F10.nuxt-picture",{"title":456,"path":1425,"stem":1426,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomponents\u002Fteleports","docs\u002F4.x\u002F4.api\u002F1.components\u002F11.teleports",{"title":460,"path":1428,"stem":1429,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomponents\u002Fnuxt-route-announcer","docs\u002F4.x\u002F4.api\u002F1.components\u002F12.nuxt-route-announcer",{"title":464,"path":1431,"stem":1432,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomponents\u002Fnuxt-time","docs\u002F4.x\u002F4.api\u002F1.components\u002F13.nuxt-time",{"title":1434,"path":1435,"stem":1436,"titleTemplate":6},"\u003CNuxtAnnouncer>","\u002Fdocs\u002F4.x\u002Fapi\u002Fcomponents\u002Fnuxt-announcer","docs\u002F4.x\u002F4.api\u002F1.components\u002F14.nuxt-announcer",{"title":468,"path":1438,"stem":1439,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomponents\u002Fnuxt-page","docs\u002F4.x\u002F4.api\u002F1.components\u002F2.nuxt-page",{"title":472,"path":1441,"stem":1442,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomponents\u002Fnuxt-layout","docs\u002F4.x\u002F4.api\u002F1.components\u002F3.nuxt-layout",{"title":476,"path":1444,"stem":1445,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomponents\u002Fnuxt-link","docs\u002F4.x\u002F4.api\u002F1.components\u002F4.nuxt-link",{"title":480,"path":1447,"stem":1448,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomponents\u002Fnuxt-loading-indicator","docs\u002F4.x\u002F4.api\u002F1.components\u002F5.nuxt-loading-indicator",{"title":484,"path":1450,"stem":1451,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomponents\u002Fnuxt-error-boundary","docs\u002F4.x\u002F4.api\u002F1.components\u002F6.nuxt-error-boundary",{"title":488,"path":1453,"stem":1454,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomponents\u002Fnuxt-welcome","docs\u002F4.x\u002F4.api\u002F1.components\u002F7.nuxt-welcome",{"title":492,"path":1456,"stem":1457,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomponents\u002Fnuxt-island","docs\u002F4.x\u002F4.api\u002F1.components\u002F8.nuxt-island",{"title":496,"path":1459,"stem":1460,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomponents\u002Fnuxt-img","docs\u002F4.x\u002F4.api\u002F1.components\u002F9.nuxt-img",{"title":500,"titleTemplate":501,"icon":502,"path":1462,"stem":1463,"children":1464,"page":108},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables","docs\u002F4.x\u002F4.api\u002F2.composables",[1465,1469,1473,1476,1480,1483,1486,1489,1492,1495,1498,1501,1504,1507,1510,1513,1516,1519,1522,1525,1528,1531,1534,1537,1540,1543,1546,1549,1552,1555,1558,1561],{"title":1466,"path":1467,"stem":1468,"titleTemplate":6},"createUseAsyncData","\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fcreate-use-async-data","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fcreate-use-async-data",{"title":1470,"path":1471,"stem":1472,"titleTemplate":6},"createUseFetch","\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fcreate-use-fetch","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fcreate-use-fetch",{"title":507,"path":1474,"stem":1475,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fon-prehydrate","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fon-prehydrate",{"title":1477,"path":1478,"stem":1479,"titleTemplate":6},"useAnnouncer","\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-announcer","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-announcer",{"title":511,"path":1481,"stem":1482,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-app-config","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-app-config",{"title":515,"path":1484,"stem":1485,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-async-data","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-async-data",{"title":519,"path":1487,"stem":1488,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-cookie","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-cookie",{"title":523,"path":1490,"stem":1491,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-error","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-error",{"title":527,"path":1493,"stem":1494,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-fetch","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-fetch",{"title":531,"path":1496,"stem":1497,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-head","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-head",{"title":535,"path":1499,"stem":1500,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-head-safe","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-head-safe",{"title":539,"path":1502,"stem":1503,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-hydration","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-hydration",{"title":543,"path":1505,"stem":1506,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-lazy-async-data","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-lazy-async-data",{"title":547,"path":1508,"stem":1509,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-lazy-fetch","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-lazy-fetch",{"title":551,"path":1511,"stem":1512,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-loading-indicator","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-loading-indicator",{"title":555,"path":1514,"stem":1515,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-nuxt-app","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-nuxt-app",{"title":559,"path":1517,"stem":1518,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-nuxt-data","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-nuxt-data",{"title":563,"path":1520,"stem":1521,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-preview-mode","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-preview-mode",{"title":567,"path":1523,"stem":1524,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-request-event","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-request-event",{"title":571,"path":1526,"stem":1527,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-request-fetch","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-request-fetch",{"title":575,"path":1529,"stem":1530,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-request-header","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-request-header",{"title":579,"path":1532,"stem":1533,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-request-headers","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-request-headers",{"title":583,"path":1535,"stem":1536,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-request-url","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-request-url",{"title":587,"path":1538,"stem":1539,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-response-header","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-response-header",{"title":591,"path":1541,"stem":1542,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-route","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-route",{"title":595,"path":1544,"stem":1545,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-route-announcer","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-route-announcer",{"title":599,"path":1547,"stem":1548,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-router","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-router",{"title":603,"path":1550,"stem":1551,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-runtime-config","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-runtime-config",{"title":607,"path":1553,"stem":1554,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-runtime-hook","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-runtime-hook",{"title":611,"path":1556,"stem":1557,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-seo-meta","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-seo-meta",{"title":615,"path":1559,"stem":1560,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-server-seo-meta","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-server-seo-meta",{"title":619,"path":1562,"stem":1563,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcomposables\u002Fuse-state","docs\u002F4.x\u002F4.api\u002F2.composables\u002Fuse-state",{"title":623,"titleTemplate":624,"icon":625,"path":1565,"stem":1566,"children":1567,"page":108},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils","docs\u002F4.x\u002F4.api\u002F3.utils",[1568,1571,1574,1577,1580,1583,1586,1589,1592,1595,1598,1601,1604,1607,1610,1613,1616,1619,1622,1625,1628,1631,1634,1637,1640,1643,1646,1649,1652],{"title":630,"path":1569,"stem":1570,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fdollarfetch","docs\u002F4.x\u002F4.api\u002F3.utils\u002F$fetch",{"title":634,"path":1572,"stem":1573,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fabort-navigation","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fabort-navigation",{"title":638,"path":1575,"stem":1576,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fadd-route-middleware","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fadd-route-middleware",{"title":642,"path":1578,"stem":1579,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fcall-once","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fcall-once",{"title":646,"path":1581,"stem":1582,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fclear-error","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fclear-error",{"title":650,"path":1584,"stem":1585,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fclear-nuxt-data","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fclear-nuxt-data",{"title":654,"path":1587,"stem":1588,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fclear-nuxt-state","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fclear-nuxt-state",{"title":658,"path":1590,"stem":1591,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fcreate-error","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fcreate-error",{"title":662,"path":1593,"stem":1594,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fdefine-lazy-hydration-component","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fdefine-lazy-hydration-component",{"title":666,"path":1596,"stem":1597,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fdefine-nuxt-component","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fdefine-nuxt-component",{"title":670,"path":1599,"stem":1600,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fdefine-nuxt-plugin","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fdefine-nuxt-plugin",{"title":674,"path":1602,"stem":1603,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fdefine-nuxt-route-middleware","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fdefine-nuxt-route-middleware",{"title":678,"path":1605,"stem":1606,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fdefine-page-meta","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fdefine-page-meta",{"title":682,"path":1608,"stem":1609,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fdefine-route-rules","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fdefine-route-rules",{"title":686,"path":1611,"stem":1612,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fnavigate-to","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fnavigate-to",{"title":690,"path":1614,"stem":1615,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fon-before-route-leave","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fon-before-route-leave",{"title":694,"path":1617,"stem":1618,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fon-before-route-update","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fon-before-route-update",{"title":698,"path":1620,"stem":1621,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fon-nuxt-ready","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fon-nuxt-ready",{"title":702,"path":1623,"stem":1624,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fprefetch-components","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fprefetch-components",{"title":706,"path":1626,"stem":1627,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fpreload-components","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fpreload-components",{"title":710,"path":1629,"stem":1630,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fpreload-route-components","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fpreload-route-components",{"title":714,"path":1632,"stem":1633,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fprerender-routes","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fprerender-routes",{"title":718,"path":1635,"stem":1636,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Frefresh-cookie","docs\u002F4.x\u002F4.api\u002F3.utils\u002Frefresh-cookie",{"title":722,"path":1638,"stem":1639,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Frefresh-nuxt-data","docs\u002F4.x\u002F4.api\u002F3.utils\u002Frefresh-nuxt-data",{"title":726,"path":1641,"stem":1642,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Freload-nuxt-app","docs\u002F4.x\u002F4.api\u002F3.utils\u002Freload-nuxt-app",{"title":730,"path":1644,"stem":1645,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fset-page-layout","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fset-page-layout",{"title":734,"path":1647,"stem":1648,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fset-response-status","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fset-response-status",{"title":738,"path":1650,"stem":1651,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fshow-error","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fshow-error",{"title":742,"path":1653,"stem":1654,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Futils\u002Fupdate-app-config","docs\u002F4.x\u002F4.api\u002F3.utils\u002Fupdate-app-config",{"title":746,"titleTemplate":747,"icon":748,"path":1656,"stem":1657,"children":1658,"page":108},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcommands","docs\u002F4.x\u002F4.api\u002F4.commands",[1659,1662,1665,1668,1671,1674,1677,1680,1683,1686,1689,1692,1695,1698,1701,1704],{"title":753,"path":1660,"stem":1661,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcommands\u002Fadd","docs\u002F4.x\u002F4.api\u002F4.commands\u002Fadd",{"title":757,"path":1663,"stem":1664,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcommands\u002Fanalyze","docs\u002F4.x\u002F4.api\u002F4.commands\u002Fanalyze",{"title":761,"path":1666,"stem":1667,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcommands\u002Fbuild","docs\u002F4.x\u002F4.api\u002F4.commands\u002Fbuild",{"title":765,"path":1669,"stem":1670,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcommands\u002Fbuild-module","docs\u002F4.x\u002F4.api\u002F4.commands\u002Fbuild-module",{"title":769,"path":1672,"stem":1673,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcommands\u002Fcleanup","docs\u002F4.x\u002F4.api\u002F4.commands\u002Fcleanup",{"title":773,"path":1675,"stem":1676,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcommands\u002Fdev","docs\u002F4.x\u002F4.api\u002F4.commands\u002Fdev",{"title":777,"path":1678,"stem":1679,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcommands\u002Fdevtools","docs\u002F4.x\u002F4.api\u002F4.commands\u002Fdevtools",{"title":781,"path":1681,"stem":1682,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcommands\u002Fgenerate","docs\u002F4.x\u002F4.api\u002F4.commands\u002Fgenerate",{"title":785,"path":1684,"stem":1685,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcommands\u002Finfo","docs\u002F4.x\u002F4.api\u002F4.commands\u002Finfo",{"title":789,"path":1687,"stem":1688,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcommands\u002Finit","docs\u002F4.x\u002F4.api\u002F4.commands\u002Finit",{"title":793,"path":1690,"stem":1691,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcommands\u002Fmodule","docs\u002F4.x\u002F4.api\u002F4.commands\u002Fmodule",{"title":797,"path":1693,"stem":1694,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcommands\u002Fprepare","docs\u002F4.x\u002F4.api\u002F4.commands\u002Fprepare",{"title":801,"path":1696,"stem":1697,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcommands\u002Fpreview","docs\u002F4.x\u002F4.api\u002F4.commands\u002Fpreview",{"title":805,"path":1699,"stem":1700,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcommands\u002Ftest","docs\u002F4.x\u002F4.api\u002F4.commands\u002Ftest",{"title":809,"path":1702,"stem":1703,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcommands\u002Ftypecheck","docs\u002F4.x\u002F4.api\u002F4.commands\u002Ftypecheck",{"title":813,"path":1705,"stem":1706,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fcommands\u002Fupgrade","docs\u002F4.x\u002F4.api\u002F4.commands\u002Fupgrade",{"title":411,"titleTemplate":817,"icon":818,"path":1708,"stem":1709,"children":1710,"page":108},"\u002Fdocs\u002F4.x\u002Fapi\u002Fkit","docs\u002F4.x\u002F4.api\u002F5.kit",[1711,1714,1717,1720,1723,1726,1729,1732,1735,1738,1741,1744,1747,1750,1753,1756,1759,1762],{"title":276,"path":1712,"stem":1713,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fkit\u002Fmodules","docs\u002F4.x\u002F4.api\u002F5.kit\u002F1.modules",{"title":399,"path":1715,"stem":1716,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fkit\u002Fruntime-config","docs\u002F4.x\u002F4.api\u002F5.kit\u002F10.runtime-config",{"title":829,"path":1718,"stem":1719,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fkit\u002Ftemplates","docs\u002F4.x\u002F4.api\u002F5.kit\u002F10.templates",{"title":833,"path":1721,"stem":1722,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fkit\u002Fnitro","docs\u002F4.x\u002F4.api\u002F5.kit\u002F11.nitro",{"title":837,"path":1724,"stem":1725,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fkit\u002Fresolving","docs\u002F4.x\u002F4.api\u002F5.kit\u002F12.resolving",{"title":841,"path":1727,"stem":1728,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fkit\u002Flogging","docs\u002F4.x\u002F4.api\u002F5.kit\u002F13.logging",{"title":845,"path":1730,"stem":1731,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fkit\u002Fbuilder","docs\u002F4.x\u002F4.api\u002F5.kit\u002F14.builder",{"title":849,"path":1733,"stem":1734,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fkit\u002Fexamples","docs\u002F4.x\u002F4.api\u002F5.kit\u002F15.examples",{"title":84,"path":1736,"stem":1737,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fkit\u002Flayers","docs\u002F4.x\u002F4.api\u002F5.kit\u002F16.layers",{"title":856,"path":1739,"stem":1740,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fkit\u002Fprogrammatic","docs\u002F4.x\u002F4.api\u002F5.kit\u002F2.programmatic",{"title":860,"path":1742,"stem":1743,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fkit\u002Fcompatibility","docs\u002F4.x\u002F4.api\u002F5.kit\u002F3.compatibility",{"title":268,"path":1745,"stem":1746,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fkit\u002Fautoimports","docs\u002F4.x\u002F4.api\u002F5.kit\u002F4.autoimports",{"title":434,"path":1748,"stem":1749,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fkit\u002Fcomponents","docs\u002F4.x\u002F4.api\u002F5.kit\u002F5.components",{"title":870,"path":1751,"stem":1752,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fkit\u002Fcontext","docs\u002F4.x\u002F4.api\u002F5.kit\u002F6.context",{"title":874,"path":1754,"stem":1755,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fkit\u002Fpages","docs\u002F4.x\u002F4.api\u002F5.kit\u002F7.pages",{"title":878,"path":1757,"stem":1758,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fkit\u002Flayout","docs\u002F4.x\u002F4.api\u002F5.kit\u002F8.layout",{"title":882,"path":1760,"stem":1761,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fkit\u002Fhead","docs\u002F4.x\u002F4.api\u002F5.kit\u002F9.head",{"title":886,"path":1763,"stem":1764,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fkit\u002Fplugins","docs\u002F4.x\u002F4.api\u002F5.kit\u002F9.plugins",{"title":890,"titleTemplate":6,"icon":891,"path":1766,"stem":1767,"children":1768,"page":108},"\u002Fdocs\u002F4.x\u002Fapi\u002Fadvanced","docs\u002F4.x\u002F4.api\u002F6.advanced",[1769,1772],{"title":407,"path":1770,"stem":1771,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fadvanced\u002Fhooks","docs\u002F4.x\u002F4.api\u002F6.advanced\u002F1.hooks",{"title":899,"path":1773,"stem":1774,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fapi\u002Fadvanced\u002Fimport-meta","docs\u002F4.x\u002F4.api\u002F6.advanced\u002F2.import-meta",{"title":903,"path":1776,"stem":1777,"titleTemplate":906,"icon":32},"\u002Fdocs\u002F4.x\u002Fapi\u002Fnuxt-config","docs\u002F4.x\u002F4.api\u002F6.nuxt-config",{"title":849,"titleTemplate":908,"icon":909,"path":1779,"stem":1780,"children":1781,"page":108},"\u002Fdocs\u002F4.x\u002Fexamples","docs\u002F4.x\u002F4.examples",[1782,1785,1804,1817,1848],{"title":914,"path":1783,"stem":1784,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fexamples\u002Fhello-world","docs\u002F4.x\u002F4.examples\u002F0.hello-world",{"title":395,"path":1786,"stem":1787,"children":1788,"page":108},"\u002Fdocs\u002F4.x\u002Fexamples\u002Ffeatures","docs\u002F4.x\u002F4.examples\u002F1.features",[1789,1792,1795,1798,1801],{"title":922,"path":1790,"stem":1791,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fexamples\u002Ffeatures\u002Fauto-imports","docs\u002F4.x\u002F4.examples\u002F1.features\u002F1.auto-imports",{"title":64,"path":1793,"stem":1794,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fexamples\u002Ffeatures\u002Fdata-fetching","docs\u002F4.x\u002F4.examples\u002F1.features\u002F2.data-fetching",{"title":69,"path":1796,"stem":1797,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fexamples\u002Ffeatures\u002Fstate-management","docs\u002F4.x\u002F4.examples\u002F1.features\u002F3.state-management",{"title":932,"path":1799,"stem":1800,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fexamples\u002Ffeatures\u002Fmeta-tags","docs\u002F4.x\u002F4.examples\u002F1.features\u002F4.meta-tags",{"title":936,"path":1802,"stem":1803,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fexamples\u002Ffeatures\u002Flayouts","docs\u002F4.x\u002F4.examples\u002F1.features\u002F5.layouts",{"title":49,"path":1805,"stem":1806,"children":1807,"page":108},"\u002Fdocs\u002F4.x\u002Fexamples\u002Frouting","docs\u002F4.x\u002F4.examples\u002F2.routing",[1808,1811,1814],{"title":944,"path":1809,"stem":1810,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fexamples\u002Frouting\u002Fmiddleware","docs\u002F4.x\u002F4.examples\u002F2.routing\u002Fmiddleware",{"title":874,"path":1812,"stem":1813,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fexamples\u002Frouting\u002Fpages","docs\u002F4.x\u002F4.examples\u002F2.routing\u002Fpages",{"title":951,"path":1815,"stem":1816,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fexamples\u002Frouting\u002Funiversal-router","docs\u002F4.x\u002F4.examples\u002F2.routing\u002Funiversal-router",{"title":890,"path":1818,"stem":1819,"children":1820,"page":108},"\u002Fdocs\u002F4.x\u002Fexamples\u002Fadvanced","docs\u002F4.x\u002F4.examples\u002F4.advanced",[1821,1824,1827,1830,1833,1836,1839,1842,1845],{"title":84,"path":1822,"stem":1823,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fexamples\u002Fadvanced\u002Fconfig-extends","docs\u002F4.x\u002F4.examples\u002F4.advanced\u002Fconfig-extends",{"title":74,"path":1825,"stem":1826,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fexamples\u002Fadvanced\u002Ferror-handling","docs\u002F4.x\u002F4.examples\u002F4.advanced\u002Ferror-handling",{"title":965,"path":1828,"stem":1829,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fexamples\u002Fadvanced\u002Fjsx","docs\u002F4.x\u002F4.examples\u002F4.advanced\u002Fjsx",{"title":969,"path":1831,"stem":1832,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fexamples\u002Fadvanced\u002Flocale","docs\u002F4.x\u002F4.examples\u002F4.advanced\u002Flocale",{"title":973,"path":1834,"stem":1835,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fexamples\u002Fadvanced\u002Fmodule-extend-pages","docs\u002F4.x\u002F4.examples\u002F4.advanced\u002Fmodule-extend-pages",{"title":977,"path":1837,"stem":1838,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fexamples\u002Fadvanced\u002Fteleport","docs\u002F4.x\u002F4.examples\u002F4.advanced\u002Fteleport",{"title":99,"path":1840,"stem":1841,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fexamples\u002Fadvanced\u002Ftesting","docs\u002F4.x\u002F4.examples\u002F4.advanced\u002Ftesting",{"title":519,"path":1843,"stem":1844,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fexamples\u002Fadvanced\u002Fuse-cookie","docs\u002F4.x\u002F4.examples\u002F4.advanced\u002Fuse-cookie",{"title":987,"path":1846,"stem":1847,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fexamples\u002Fadvanced\u002Fuse-custom-fetch-composable","docs\u002F4.x\u002F4.examples\u002F4.advanced\u002Fuse-custom-fetch-composable",{"title":991,"path":1849,"stem":1850,"children":1851,"page":108},"\u002Fdocs\u002F4.x\u002Fexamples\u002Fexperimental","docs\u002F4.x\u002F4.examples\u002F7.experimental",[1852],{"title":996,"path":1853,"stem":1854,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fexamples\u002Fexperimental\u002Fwasm","docs\u002F4.x\u002F4.examples\u002F7.experimental\u002Fwasm",{"title":1000,"titleTemplate":1001,"icon":1002,"path":1856,"stem":1857,"children":1858,"page":108},"\u002Fdocs\u002F4.x\u002Fcommunity","docs\u002F4.x\u002F5.community",[1859,1862,1865,1868,1871,1874],{"title":1007,"path":1860,"stem":1861,"titleTemplate":6,"icon":1010},"\u002Fdocs\u002F4.x\u002Fcommunity\u002Fgetting-help","docs\u002F4.x\u002F5.community\u002F2.getting-help",{"title":1012,"path":1863,"stem":1864,"titleTemplate":6,"icon":1015},"\u002Fdocs\u002F4.x\u002Fcommunity\u002Freporting-bugs","docs\u002F4.x\u002F5.community\u002F3.reporting-bugs",{"title":1017,"path":1866,"stem":1867,"titleTemplate":6,"icon":1020},"\u002Fdocs\u002F4.x\u002Fcommunity\u002Fcontribution","docs\u002F4.x\u002F5.community\u002F4.contribution",{"title":1022,"path":1869,"stem":1870,"titleTemplate":6,"icon":1025},"\u002Fdocs\u002F4.x\u002Fcommunity\u002Fframework-contribution","docs\u002F4.x\u002F5.community\u002F5.framework-contribution",{"title":1027,"path":1872,"stem":1873,"titleTemplate":6,"icon":1030},"\u002Fdocs\u002F4.x\u002Fcommunity\u002Froadmap","docs\u002F4.x\u002F5.community\u002F6.roadmap",{"title":1032,"path":1875,"stem":1876,"titleTemplate":6,"icon":1035},"\u002Fdocs\u002F4.x\u002Fcommunity\u002Fchangelog","docs\u002F4.x\u002F5.community\u002F7.changelog",{"title":1037,"titleTemplate":1038,"icon":1039,"path":1878,"stem":1879,"children":1880,"page":108},"\u002Fdocs\u002F4.x\u002Fbridge","docs\u002F4.x\u002F6.bridge",[1881,1884,1887,1890,1893,1896,1899,1902,1905,1908],{"title":1044,"path":1882,"stem":1883,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fbridge\u002Foverview","docs\u002F4.x\u002F6.bridge\u002F1.overview",{"title":29,"path":1885,"stem":1886,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fbridge\u002Fconfiguration","docs\u002F4.x\u002F6.bridge\u002F10.configuration",{"title":280,"path":1888,"stem":1889,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fbridge\u002Ftypescript","docs\u002F4.x\u002F6.bridge\u002F2.typescript",{"title":1054,"path":1891,"stem":1892,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fbridge\u002Fbridge-composition-api","docs\u002F4.x\u002F6.bridge\u002F3.bridge-composition-api",{"title":1058,"path":1894,"stem":1895,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fbridge\u002Fplugins-and-middleware","docs\u002F4.x\u002F6.bridge\u002F4.plugins-and-middleware",{"title":1062,"path":1897,"stem":1898,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fbridge\u002Fnuxt3-compatible-api","docs\u002F4.x\u002F6.bridge\u002F5.nuxt3-compatible-api",{"title":932,"path":1900,"stem":1901,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fbridge\u002Fmeta","docs\u002F4.x\u002F6.bridge\u002F6.meta",{"title":399,"path":1903,"stem":1904,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fbridge\u002Fruntime-config","docs\u002F4.x\u002F6.bridge\u002F7.runtime-config",{"title":833,"path":1906,"stem":1907,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fbridge\u002Fnitro","docs\u002F4.x\u002F6.bridge\u002F8.nitro",{"title":1075,"path":1909,"stem":1910,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fbridge\u002Fvite","docs\u002F4.x\u002F6.bridge\u002F9.vite",{"title":1079,"titleTemplate":1080,"icon":107,"path":1912,"stem":1913,"children":1914,"page":108},"\u002Fdocs\u002F4.x\u002Fmigration","docs\u002F4.x\u002F7.migration",[1915,1918,1921,1924,1927,1930,1933,1936,1939,1942,1945],{"title":1044,"path":1916,"stem":1917,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fmigration\u002Foverview","docs\u002F4.x\u002F7.migration\u002F1.overview",{"title":1088,"path":1919,"stem":1920,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fmigration\u002Fbundling","docs\u002F4.x\u002F7.migration\u002F10.bundling",{"title":79,"path":1922,"stem":1923,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fmigration\u002Fserver","docs\u002F4.x\u002F7.migration\u002F11.server",{"title":29,"path":1925,"stem":1926,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fmigration\u002Fconfiguration","docs\u002F4.x\u002F7.migration\u002F2.configuration",{"title":276,"path":1928,"stem":1929,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fmigration\u002Fmodule-authors","docs\u002F4.x\u002F7.migration\u002F20.module-authors",{"title":922,"path":1931,"stem":1932,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fmigration\u002Fauto-imports","docs\u002F4.x\u002F7.migration\u002F3.auto-imports",{"title":932,"path":1934,"stem":1935,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fmigration\u002Fmeta","docs\u002F4.x\u002F7.migration\u002F4.meta",{"title":1058,"path":1937,"stem":1938,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fmigration\u002Fplugins-and-middleware","docs\u002F4.x\u002F7.migration\u002F5.plugins-and-middleware",{"title":1110,"path":1940,"stem":1941,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fmigration\u002Fpages-and-layouts","docs\u002F4.x\u002F7.migration\u002F6.pages-and-layouts",{"title":1114,"path":1943,"stem":1944,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fmigration\u002Fcomponent-options","docs\u002F4.x\u002F7.migration\u002F7.component-options",{"title":399,"path":1946,"stem":1947,"titleTemplate":6},"\u002Fdocs\u002F4.x\u002Fmigration\u002Fruntime-config","docs\u002F4.x\u002F7.migration\u002F8.runtime-config",{"title":5,"titleTemplate":6,"icon":7,"path":1949,"stem":1950,"children":1951,"page":108},"\u002Fdocs\u002F5.x","docs\u002F5.x",[1952,2010,2100,2227,2597,2674,2696,2730],{"title":12,"titleTemplate":13,"icon":14,"path":1953,"stem":1954,"children":1955,"page":108},"\u002Fdocs\u002F5.x\u002Fgetting-started","docs\u002F5.x\u002F1.getting-started",[1956,1959,1962,1965,1968,1971,1974,1977,1980,1983,1986,1989,1992,1995,1998,2001,2004,2007],{"title":19,"path":1957,"stem":1958,"titleTemplate":6,"icon":22},"\u002Fdocs\u002F5.x\u002Fgetting-started\u002Fintroduction","docs\u002F5.x\u002F1.getting-started\u002F01.introduction",{"title":24,"path":1960,"stem":1961,"titleTemplate":6,"icon":27},"\u002Fdocs\u002F5.x\u002Fgetting-started\u002Finstallation","docs\u002F5.x\u002F1.getting-started\u002F02.installation",{"title":29,"path":1963,"stem":1964,"titleTemplate":6,"icon":32},"\u002Fdocs\u002F5.x\u002Fgetting-started\u002Fconfiguration","docs\u002F5.x\u002F1.getting-started\u002F03.configuration",{"title":34,"path":1966,"stem":1967,"titleTemplate":6,"icon":37},"\u002Fdocs\u002F5.x\u002Fgetting-started\u002Fviews","docs\u002F5.x\u002F1.getting-started\u002F04.views",{"title":39,"path":1969,"stem":1970,"titleTemplate":6,"icon":42},"\u002Fdocs\u002F5.x\u002Fgetting-started\u002Fassets","docs\u002F5.x\u002F1.getting-started\u002F05.assets",{"title":44,"path":1972,"stem":1973,"titleTemplate":6,"icon":47},"\u002Fdocs\u002F5.x\u002Fgetting-started\u002Fstyling","docs\u002F5.x\u002F1.getting-started\u002F06.styling",{"title":49,"path":1975,"stem":1976,"titleTemplate":6,"icon":52},"\u002Fdocs\u002F5.x\u002Fgetting-started\u002Frouting","docs\u002F5.x\u002F1.getting-started\u002F07.routing",{"title":54,"path":1978,"stem":1979,"titleTemplate":6,"icon":57},"\u002Fdocs\u002F5.x\u002Fgetting-started\u002Fseo-meta","docs\u002F5.x\u002F1.getting-started\u002F08.seo-meta",{"title":59,"path":1981,"stem":1982,"titleTemplate":6,"icon":62},"\u002Fdocs\u002F5.x\u002Fgetting-started\u002Ftransitions","docs\u002F5.x\u002F1.getting-started\u002F09.transitions",{"title":64,"path":1984,"stem":1985,"titleTemplate":6,"icon":67},"\u002Fdocs\u002F5.x\u002Fgetting-started\u002Fdata-fetching","docs\u002F5.x\u002F1.getting-started\u002F10.data-fetching",{"title":69,"path":1987,"stem":1988,"titleTemplate":6,"icon":72},"\u002Fdocs\u002F5.x\u002Fgetting-started\u002Fstate-management","docs\u002F5.x\u002F1.getting-started\u002F11.state-management",{"title":74,"path":1990,"stem":1991,"titleTemplate":6,"icon":77},"\u002Fdocs\u002F5.x\u002Fgetting-started\u002Ferror-handling","docs\u002F5.x\u002F1.getting-started\u002F12.error-handling",{"title":79,"path":1993,"stem":1994,"titleTemplate":6,"icon":82},"\u002Fdocs\u002F5.x\u002Fgetting-started\u002Fserver","docs\u002F5.x\u002F1.getting-started\u002F13.server",{"title":84,"path":1996,"stem":1997,"titleTemplate":6,"icon":87},"\u002Fdocs\u002F5.x\u002Fgetting-started\u002Flayers","docs\u002F5.x\u002F1.getting-started\u002F14.layers",{"title":89,"path":1999,"stem":2000,"titleTemplate":6,"icon":92},"\u002Fdocs\u002F5.x\u002Fgetting-started\u002Fprerendering","docs\u002F5.x\u002F1.getting-started\u002F15.prerendering",{"title":94,"path":2002,"stem":2003,"titleTemplate":6,"icon":97},"\u002Fdocs\u002F5.x\u002Fgetting-started\u002Fdeployment","docs\u002F5.x\u002F1.getting-started\u002F16.deployment",{"title":99,"path":2005,"stem":2006,"titleTemplate":6,"icon":102},"\u002Fdocs\u002F5.x\u002Fgetting-started\u002Ftesting","docs\u002F5.x\u002F1.getting-started\u002F17.testing",{"title":104,"path":2008,"stem":2009,"titleTemplate":6,"icon":107},"\u002Fdocs\u002F5.x\u002Fgetting-started\u002Fupgrade","docs\u002F5.x\u002F1.getting-started\u002F18.upgrade",{"title":110,"titleTemplate":111,"icon":112,"path":2011,"stem":2012,"children":2013,"page":108},"\u002Fdocs\u002F5.x\u002Fdirectory-structure","docs\u002F5.x\u002F2.directory-structure",[2014,2017,2020,2058,2061,2064,2067,2070,2073,2076,2079,2082,2085,2088,2091,2094,2097],{"title":117,"path":2015,"stem":2016,"titleTemplate":6,"icon":120},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fnuxt","docs\u002F5.x\u002F2.directory-structure\u002F0.nuxt",{"title":122,"path":2018,"stem":2019,"titleTemplate":6,"icon":125},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Foutput","docs\u002F5.x\u002F2.directory-structure\u002F0.output",{"title":1193,"titleTemplate":111,"head":2021,"defaultOpen":1196,"icon":1197,"path":2022,"stem":2023,"children":2024,"page":108},{"title":1195},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fapp","docs\u002F5.x\u002F2.directory-structure\u002F1.app",[2025,2028,2031,2034,2037,2040,2043,2046,2049,2052,2055],{"title":127,"path":2026,"stem":2027,"titleTemplate":6,"icon":130},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fapp\u002Fassets","docs\u002F5.x\u002F2.directory-structure\u002F1.app\u002F1.assets",{"title":132,"path":2029,"stem":2030,"titleTemplate":6,"icon":135},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fapp\u002Fcomponents","docs\u002F5.x\u002F2.directory-structure\u002F1.app\u002F1.components",{"title":137,"path":2032,"stem":2033,"titleTemplate":6,"icon":140},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fapp\u002Fcomposables","docs\u002F5.x\u002F2.directory-structure\u002F1.app\u002F1.composables",{"title":152,"path":2035,"stem":2036,"titleTemplate":6,"icon":155},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fapp\u002Flayouts","docs\u002F5.x\u002F2.directory-structure\u002F1.app\u002F1.layouts",{"title":157,"path":2038,"stem":2039,"titleTemplate":6,"icon":160},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fapp\u002Fmiddleware","docs\u002F5.x\u002F2.directory-structure\u002F1.app\u002F1.middleware",{"title":171,"path":2041,"stem":2042,"titleTemplate":6,"icon":155},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fapp\u002Fpages","docs\u002F5.x\u002F2.directory-structure\u002F1.app\u002F1.pages",{"title":175,"path":2044,"stem":2045,"titleTemplate":6,"icon":178},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fapp\u002Fplugins","docs\u002F5.x\u002F2.directory-structure\u002F1.app\u002F1.plugins",{"title":195,"path":2047,"stem":2048,"titleTemplate":6,"icon":198},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fapp\u002Futils","docs\u002F5.x\u002F2.directory-structure\u002F1.app\u002F1.utils",{"title":219,"path":2050,"stem":2051,"titleTemplate":6,"icon":222},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fapp\u002Fapp","docs\u002F5.x\u002F2.directory-structure\u002F1.app\u002F3.app",{"title":224,"path":2053,"stem":2054,"titleTemplate":6,"icon":227},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fapp\u002Fapp-config","docs\u002F5.x\u002F2.directory-structure\u002F1.app\u002F3.app-config",{"title":229,"path":2056,"stem":2057,"titleTemplate":6,"icon":222},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fapp\u002Ferror","docs\u002F5.x\u002F2.directory-structure\u002F1.app\u002F3.error",{"title":142,"path":2059,"stem":2060,"titleTemplate":6,"icon":145},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fcontent","docs\u002F5.x\u002F2.directory-structure\u002F1.content",{"title":147,"path":2062,"stem":2063,"titleTemplate":6,"icon":150},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Flayers","docs\u002F5.x\u002F2.directory-structure\u002F1.layers",{"title":162,"path":2065,"stem":2066,"titleTemplate":6,"icon":150},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fmodules","docs\u002F5.x\u002F2.directory-structure\u002F1.modules",{"title":166,"path":2068,"stem":2069,"titleTemplate":6,"icon":169},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fnode_modules","docs\u002F5.x\u002F2.directory-structure\u002F1.node_modules",{"title":180,"path":2071,"stem":2072,"titleTemplate":6,"icon":183},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fpublic","docs\u002F5.x\u002F2.directory-structure\u002F1.public",{"title":185,"path":2074,"stem":2075,"titleTemplate":6,"icon":188},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fserver","docs\u002F5.x\u002F2.directory-structure\u002F1.server",{"title":190,"path":2077,"stem":2078,"titleTemplate":6,"icon":193},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fshared","docs\u002F5.x\u002F2.directory-structure\u002F1.shared",{"title":200,"path":2080,"stem":2081,"titleTemplate":6,"icon":203},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fenv","docs\u002F5.x\u002F2.directory-structure\u002F2.env",{"title":205,"path":2083,"stem":2084,"titleTemplate":6,"icon":208},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fgitignore","docs\u002F5.x\u002F2.directory-structure\u002F2.gitignore",{"title":210,"path":2086,"stem":2087,"titleTemplate":6,"icon":213},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fnuxtignore","docs\u002F5.x\u002F2.directory-structure\u002F2.nuxtignore",{"title":215,"path":2089,"stem":2090,"titleTemplate":6,"icon":213},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fnuxtrc","docs\u002F5.x\u002F2.directory-structure\u002F2.nuxtrc",{"title":233,"path":2092,"stem":2093,"titleTemplate":6,"icon":213},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fnuxt-config","docs\u002F5.x\u002F2.directory-structure\u002F3.nuxt-config",{"title":237,"path":2095,"stem":2096,"titleTemplate":6,"icon":240},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Fpackage","docs\u002F5.x\u002F2.directory-structure\u002F3.package",{"title":242,"path":2098,"stem":2099,"titleTemplate":6,"icon":245},"\u002Fdocs\u002F5.x\u002Fdirectory-structure\u002Ftsconfig","docs\u002F5.x\u002F2.directory-structure\u002F3.tsconfig",{"title":247,"titleTemplate":6,"icon":248,"path":2101,"stem":2102,"children":2103,"page":108},"\u002Fdocs\u002F5.x\u002Fguide","docs\u002F5.x\u002F3.guide",[2104,2129,2142,2152,2177,2193],{"title":253,"titleTemplate":254,"icon":255,"path":2105,"stem":2106,"children":2107,"page":108},"\u002Fdocs\u002F5.x\u002Fguide\u002Fconcepts","docs\u002F5.x\u002F3.guide\u002F1.concepts",[2108,2111,2114,2117,2120,2123,2126],{"title":260,"path":2109,"stem":2110,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fconcepts\u002Frendering","docs\u002F5.x\u002F3.guide\u002F1.concepts\u002F1.rendering",{"title":264,"path":2112,"stem":2113,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fconcepts\u002Fnuxt-lifecycle","docs\u002F5.x\u002F3.guide\u002F1.concepts\u002F2.nuxt-lifecycle",{"title":268,"path":2115,"stem":2116,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fconcepts\u002Fauto-imports","docs\u002F5.x\u002F3.guide\u002F1.concepts\u002F3.auto-imports",{"title":272,"path":2118,"stem":2119,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fconcepts\u002Fserver-engine","docs\u002F5.x\u002F3.guide\u002F1.concepts\u002F4.server-engine",{"title":276,"path":2121,"stem":2122,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fconcepts\u002Fmodules","docs\u002F5.x\u002F3.guide\u002F1.concepts\u002F5.modules",{"title":280,"path":2124,"stem":2125,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fconcepts\u002Ftypescript","docs\u002F5.x\u002F3.guide\u002F1.concepts\u002F8.typescript",{"title":284,"path":2127,"stem":2128,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fconcepts\u002Fcode-style","docs\u002F5.x\u002F3.guide\u002F1.concepts\u002F9.code-style",{"title":288,"titleTemplate":289,"icon":290,"path":2130,"stem":2131,"children":2132,"page":108},"\u002Fdocs\u002F5.x\u002Fguide\u002Fbest-practices","docs\u002F5.x\u002F3.guide\u002F2.best-practices",[2133,2136,2139],{"title":1310,"path":2134,"stem":2135,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fbest-practices\u002Fhydration","docs\u002F5.x\u002F3.guide\u002F2.best-practices\u002Fhydration",{"title":299,"path":2137,"stem":2138,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fbest-practices\u002Fperformance","docs\u002F5.x\u002F3.guide\u002F2.best-practices\u002Fperformance",{"title":303,"path":2140,"stem":2141,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fbest-practices\u002Fplugins","docs\u002F5.x\u002F3.guide\u002F2.best-practices\u002Fplugins",{"title":307,"titleTemplate":308,"icon":309,"path":2143,"stem":2144,"children":2145,"page":108},"\u002Fdocs\u002F5.x\u002Fguide\u002Fai","docs\u002F5.x\u002F3.guide\u002F3.ai",[2146,2149],{"title":314,"path":2147,"stem":2148,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fai\u002Fmcp","docs\u002F5.x\u002F3.guide\u002F3.ai\u002F1.mcp",{"title":318,"path":2150,"stem":2151,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fai\u002Fllms-txt","docs\u002F5.x\u002F3.guide\u002F3.ai\u002F2.llms-txt",{"title":322,"titleTemplate":323,"icon":324,"path":2153,"stem":2154,"children":2155,"page":108},"\u002Fdocs\u002F5.x\u002Fguide\u002Fmodules","docs\u002F5.x\u002F3.guide\u002F4.modules",[2156,2159,2162,2165,2168,2171,2174],{"title":329,"path":2157,"stem":2158,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fmodules\u002Fgetting-started","docs\u002F5.x\u002F3.guide\u002F4.modules\u002F1.getting-started",{"title":333,"path":2160,"stem":2161,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fmodules\u002Fmodule-anatomy","docs\u002F5.x\u002F3.guide\u002F4.modules\u002F2.module-anatomy",{"title":337,"path":2163,"stem":2164,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fmodules\u002Frecipes-basics","docs\u002F5.x\u002F3.guide\u002F4.modules\u002F3.recipes-basics",{"title":341,"path":2166,"stem":2167,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fmodules\u002Frecipes-advanced","docs\u002F5.x\u002F3.guide\u002F4.modules\u002F4.recipes-advanced",{"title":345,"path":2169,"stem":2170,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fmodules\u002Ftesting","docs\u002F5.x\u002F3.guide\u002F4.modules\u002F5.testing",{"title":349,"path":2172,"stem":2173,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fmodules\u002Fbest-practices","docs\u002F5.x\u002F3.guide\u002F4.modules\u002F6.best-practices",{"title":353,"path":2175,"stem":2176,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fmodules\u002Fecosystem","docs\u002F5.x\u002F3.guide\u002F4.modules\u002F7.ecosystem",{"title":357,"titleTemplate":358,"icon":359,"path":2178,"stem":2179,"children":2180,"page":108},"\u002Fdocs\u002F5.x\u002Fguide\u002Frecipes","docs\u002F5.x\u002F3.guide\u002F5.recipes",[2181,2184,2187,2190],{"title":364,"path":2182,"stem":2183,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Frecipes\u002Fcustom-routing","docs\u002F5.x\u002F3.guide\u002F5.recipes\u002F1.custom-routing",{"title":368,"path":2185,"stem":2186,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Frecipes\u002Fvite-plugin","docs\u002F5.x\u002F3.guide\u002F5.recipes\u002F2.vite-plugin",{"title":372,"path":2188,"stem":2189,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Frecipes\u002Fcustom-usefetch","docs\u002F5.x\u002F3.guide\u002F5.recipes\u002F3.custom-usefetch",{"title":376,"path":2191,"stem":2192,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Frecipes\u002Fsessions-and-authentication","docs\u002F5.x\u002F3.guide\u002F5.recipes\u002F4.sessions-and-authentication",{"title":380,"titleTemplate":381,"icon":382,"path":2194,"stem":2195,"children":2196,"page":108},"\u002Fdocs\u002F5.x\u002Fguide\u002Fgoing-further","docs\u002F5.x\u002F3.guide\u002F6.going-further",[2197,2200,2203,2206,2209,2212,2215,2218,2221,2224],{"title":387,"path":2198,"stem":2199,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fgoing-further\u002Fevents","docs\u002F5.x\u002F3.guide\u002F6.going-further\u002F1.events",{"title":391,"path":2201,"stem":2202,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fgoing-further\u002Fexperimental-features","docs\u002F5.x\u002F3.guide\u002F6.going-further\u002F1.experimental-features",{"title":395,"path":2204,"stem":2205,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fgoing-further\u002Ffeatures","docs\u002F5.x\u002F3.guide\u002F6.going-further\u002F1.features",{"title":399,"path":2207,"stem":2208,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fgoing-further\u002Fruntime-config","docs\u002F5.x\u002F3.guide\u002F6.going-further\u002F10.runtime-config",{"title":403,"path":2210,"stem":2211,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fgoing-further\u002Fnightly-release-channel","docs\u002F5.x\u002F3.guide\u002F6.going-further\u002F11.nightly-release-channel",{"title":407,"path":2213,"stem":2214,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fgoing-further\u002Fhooks","docs\u002F5.x\u002F3.guide\u002F6.going-further\u002F2.hooks",{"title":411,"path":2216,"stem":2217,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fgoing-further\u002Fkit","docs\u002F5.x\u002F3.guide\u002F6.going-further\u002F4.kit",{"title":415,"path":2219,"stem":2220,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fgoing-further\u002Fnuxt-app","docs\u002F5.x\u002F3.guide\u002F6.going-further\u002F6.nuxt-app",{"title":419,"path":2222,"stem":2223,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fgoing-further\u002Flayers","docs\u002F5.x\u002F3.guide\u002F6.going-further\u002F7.layers",{"title":423,"path":2225,"stem":2226,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fguide\u002Fgoing-further\u002Fdebugging","docs\u002F5.x\u002F3.guide\u002F6.going-further\u002F9.debugging",{"title":427,"titleTemplate":428,"icon":429,"path":2228,"stem":2229,"children":2230,"page":108},"\u002Fdocs\u002F5.x\u002Fapi","docs\u002F5.x\u002F4.api",[2231,2283,2383,2474,2526,2584,2594],{"title":434,"titleTemplate":435,"icon":324,"path":2232,"stem":2233,"children":2234,"page":108},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomponents","docs\u002F5.x\u002F4.api\u002F1.components",[2235,2238,2241,2244,2247,2250,2253,2256,2259,2262,2265,2268,2271,2274,2277,2280],{"title":440,"path":2236,"stem":2237,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomponents\u002Fclient-only","docs\u002F5.x\u002F4.api\u002F1.components\u002F1.client-only",{"title":444,"path":2239,"stem":2240,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomponents\u002Fdev-only","docs\u002F5.x\u002F4.api\u002F1.components\u002F1.dev-only",{"title":448,"path":2242,"stem":2243,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomponents\u002Fnuxt-client-fallback","docs\u002F5.x\u002F4.api\u002F1.components\u002F1.nuxt-client-fallback",{"title":452,"path":2245,"stem":2246,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomponents\u002Fnuxt-picture","docs\u002F5.x\u002F4.api\u002F1.components\u002F10.nuxt-picture",{"title":456,"path":2248,"stem":2249,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomponents\u002Fteleports","docs\u002F5.x\u002F4.api\u002F1.components\u002F11.teleports",{"title":460,"path":2251,"stem":2252,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomponents\u002Fnuxt-route-announcer","docs\u002F5.x\u002F4.api\u002F1.components\u002F12.nuxt-route-announcer",{"title":464,"path":2254,"stem":2255,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomponents\u002Fnuxt-time","docs\u002F5.x\u002F4.api\u002F1.components\u002F13.nuxt-time",{"title":1434,"path":2257,"stem":2258,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomponents\u002Fnuxt-announcer","docs\u002F5.x\u002F4.api\u002F1.components\u002F14.nuxt-announcer",{"title":468,"path":2260,"stem":2261,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomponents\u002Fnuxt-page","docs\u002F5.x\u002F4.api\u002F1.components\u002F2.nuxt-page",{"title":472,"path":2263,"stem":2264,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomponents\u002Fnuxt-layout","docs\u002F5.x\u002F4.api\u002F1.components\u002F3.nuxt-layout",{"title":476,"path":2266,"stem":2267,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomponents\u002Fnuxt-link","docs\u002F5.x\u002F4.api\u002F1.components\u002F4.nuxt-link",{"title":480,"path":2269,"stem":2270,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomponents\u002Fnuxt-loading-indicator","docs\u002F5.x\u002F4.api\u002F1.components\u002F5.nuxt-loading-indicator",{"title":484,"path":2272,"stem":2273,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomponents\u002Fnuxt-error-boundary","docs\u002F5.x\u002F4.api\u002F1.components\u002F6.nuxt-error-boundary",{"title":488,"path":2275,"stem":2276,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomponents\u002Fnuxt-welcome","docs\u002F5.x\u002F4.api\u002F1.components\u002F7.nuxt-welcome",{"title":492,"path":2278,"stem":2279,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomponents\u002Fnuxt-island","docs\u002F5.x\u002F4.api\u002F1.components\u002F8.nuxt-island",{"title":496,"path":2281,"stem":2282,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomponents\u002Fnuxt-img","docs\u002F5.x\u002F4.api\u002F1.components\u002F9.nuxt-img",{"title":500,"titleTemplate":501,"icon":502,"path":2284,"stem":2285,"children":2286,"page":108},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables","docs\u002F5.x\u002F4.api\u002F2.composables",[2287,2290,2293,2296,2299,2302,2305,2308,2311,2314,2317,2320,2323,2326,2329,2332,2335,2338,2341,2344,2347,2350,2353,2356,2359,2362,2365,2368,2371,2374,2377,2380],{"title":1466,"path":2288,"stem":2289,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fcreate-use-async-data","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fcreate-use-async-data",{"title":1470,"path":2291,"stem":2292,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fcreate-use-fetch","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fcreate-use-fetch",{"title":507,"path":2294,"stem":2295,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fon-prehydrate","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fon-prehydrate",{"title":1477,"path":2297,"stem":2298,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-announcer","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-announcer",{"title":511,"path":2300,"stem":2301,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-app-config","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-app-config",{"title":515,"path":2303,"stem":2304,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-async-data","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-async-data",{"title":519,"path":2306,"stem":2307,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-cookie","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-cookie",{"title":523,"path":2309,"stem":2310,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-error","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-error",{"title":527,"path":2312,"stem":2313,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-fetch","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-fetch",{"title":531,"path":2315,"stem":2316,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-head","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-head",{"title":535,"path":2318,"stem":2319,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-head-safe","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-head-safe",{"title":539,"path":2321,"stem":2322,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-hydration","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-hydration",{"title":543,"path":2324,"stem":2325,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-lazy-async-data","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-lazy-async-data",{"title":547,"path":2327,"stem":2328,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-lazy-fetch","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-lazy-fetch",{"title":551,"path":2330,"stem":2331,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-loading-indicator","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-loading-indicator",{"title":555,"path":2333,"stem":2334,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-nuxt-app","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-nuxt-app",{"title":559,"path":2336,"stem":2337,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-nuxt-data","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-nuxt-data",{"title":563,"path":2339,"stem":2340,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-preview-mode","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-preview-mode",{"title":567,"path":2342,"stem":2343,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-request-event","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-request-event",{"title":571,"path":2345,"stem":2346,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-request-fetch","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-request-fetch",{"title":575,"path":2348,"stem":2349,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-request-header","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-request-header",{"title":579,"path":2351,"stem":2352,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-request-headers","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-request-headers",{"title":583,"path":2354,"stem":2355,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-request-url","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-request-url",{"title":587,"path":2357,"stem":2358,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-response-header","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-response-header",{"title":591,"path":2360,"stem":2361,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-route","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-route",{"title":595,"path":2363,"stem":2364,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-route-announcer","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-route-announcer",{"title":599,"path":2366,"stem":2367,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-router","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-router",{"title":603,"path":2369,"stem":2370,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-runtime-config","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-runtime-config",{"title":607,"path":2372,"stem":2373,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-runtime-hook","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-runtime-hook",{"title":611,"path":2375,"stem":2376,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-seo-meta","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-seo-meta",{"title":615,"path":2378,"stem":2379,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-server-seo-meta","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-server-seo-meta",{"title":619,"path":2381,"stem":2382,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcomposables\u002Fuse-state","docs\u002F5.x\u002F4.api\u002F2.composables\u002Fuse-state",{"title":623,"titleTemplate":624,"icon":625,"path":2384,"stem":2385,"children":2386,"page":108},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils","docs\u002F5.x\u002F4.api\u002F3.utils",[2387,2390,2393,2396,2399,2402,2405,2408,2411,2414,2417,2420,2423,2426,2429,2432,2435,2438,2441,2444,2447,2450,2453,2456,2459,2462,2465,2468,2471],{"title":630,"path":2388,"stem":2389,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fdollarfetch","docs\u002F5.x\u002F4.api\u002F3.utils\u002F$fetch",{"title":634,"path":2391,"stem":2392,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fabort-navigation","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fabort-navigation",{"title":638,"path":2394,"stem":2395,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fadd-route-middleware","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fadd-route-middleware",{"title":642,"path":2397,"stem":2398,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fcall-once","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fcall-once",{"title":646,"path":2400,"stem":2401,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fclear-error","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fclear-error",{"title":650,"path":2403,"stem":2404,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fclear-nuxt-data","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fclear-nuxt-data",{"title":654,"path":2406,"stem":2407,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fclear-nuxt-state","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fclear-nuxt-state",{"title":658,"path":2409,"stem":2410,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fcreate-error","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fcreate-error",{"title":662,"path":2412,"stem":2413,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fdefine-lazy-hydration-component","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fdefine-lazy-hydration-component",{"title":666,"path":2415,"stem":2416,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fdefine-nuxt-component","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fdefine-nuxt-component",{"title":670,"path":2418,"stem":2419,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fdefine-nuxt-plugin","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fdefine-nuxt-plugin",{"title":674,"path":2421,"stem":2422,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fdefine-nuxt-route-middleware","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fdefine-nuxt-route-middleware",{"title":678,"path":2424,"stem":2425,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fdefine-page-meta","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fdefine-page-meta",{"title":682,"path":2427,"stem":2428,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fdefine-route-rules","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fdefine-route-rules",{"title":686,"path":2430,"stem":2431,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fnavigate-to","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fnavigate-to",{"title":690,"path":2433,"stem":2434,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fon-before-route-leave","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fon-before-route-leave",{"title":694,"path":2436,"stem":2437,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fon-before-route-update","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fon-before-route-update",{"title":698,"path":2439,"stem":2440,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fon-nuxt-ready","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fon-nuxt-ready",{"title":702,"path":2442,"stem":2443,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fprefetch-components","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fprefetch-components",{"title":706,"path":2445,"stem":2446,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fpreload-components","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fpreload-components",{"title":710,"path":2448,"stem":2449,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fpreload-route-components","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fpreload-route-components",{"title":714,"path":2451,"stem":2452,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fprerender-routes","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fprerender-routes",{"title":718,"path":2454,"stem":2455,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Frefresh-cookie","docs\u002F5.x\u002F4.api\u002F3.utils\u002Frefresh-cookie",{"title":722,"path":2457,"stem":2458,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Frefresh-nuxt-data","docs\u002F5.x\u002F4.api\u002F3.utils\u002Frefresh-nuxt-data",{"title":726,"path":2460,"stem":2461,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Freload-nuxt-app","docs\u002F5.x\u002F4.api\u002F3.utils\u002Freload-nuxt-app",{"title":730,"path":2463,"stem":2464,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fset-page-layout","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fset-page-layout",{"title":734,"path":2466,"stem":2467,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fset-response-status","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fset-response-status",{"title":738,"path":2469,"stem":2470,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fshow-error","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fshow-error",{"title":742,"path":2472,"stem":2473,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Futils\u002Fupdate-app-config","docs\u002F5.x\u002F4.api\u002F3.utils\u002Fupdate-app-config",{"title":746,"titleTemplate":747,"icon":748,"path":2475,"stem":2476,"children":2477,"page":108},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcommands","docs\u002F5.x\u002F4.api\u002F4.commands",[2478,2481,2484,2487,2490,2493,2496,2499,2502,2505,2508,2511,2514,2517,2520,2523],{"title":753,"path":2479,"stem":2480,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcommands\u002Fadd","docs\u002F5.x\u002F4.api\u002F4.commands\u002Fadd",{"title":757,"path":2482,"stem":2483,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcommands\u002Fanalyze","docs\u002F5.x\u002F4.api\u002F4.commands\u002Fanalyze",{"title":761,"path":2485,"stem":2486,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcommands\u002Fbuild","docs\u002F5.x\u002F4.api\u002F4.commands\u002Fbuild",{"title":765,"path":2488,"stem":2489,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcommands\u002Fbuild-module","docs\u002F5.x\u002F4.api\u002F4.commands\u002Fbuild-module",{"title":769,"path":2491,"stem":2492,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcommands\u002Fcleanup","docs\u002F5.x\u002F4.api\u002F4.commands\u002Fcleanup",{"title":773,"path":2494,"stem":2495,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcommands\u002Fdev","docs\u002F5.x\u002F4.api\u002F4.commands\u002Fdev",{"title":777,"path":2497,"stem":2498,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcommands\u002Fdevtools","docs\u002F5.x\u002F4.api\u002F4.commands\u002Fdevtools",{"title":781,"path":2500,"stem":2501,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcommands\u002Fgenerate","docs\u002F5.x\u002F4.api\u002F4.commands\u002Fgenerate",{"title":785,"path":2503,"stem":2504,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcommands\u002Finfo","docs\u002F5.x\u002F4.api\u002F4.commands\u002Finfo",{"title":789,"path":2506,"stem":2507,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcommands\u002Finit","docs\u002F5.x\u002F4.api\u002F4.commands\u002Finit",{"title":793,"path":2509,"stem":2510,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcommands\u002Fmodule","docs\u002F5.x\u002F4.api\u002F4.commands\u002Fmodule",{"title":797,"path":2512,"stem":2513,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcommands\u002Fprepare","docs\u002F5.x\u002F4.api\u002F4.commands\u002Fprepare",{"title":801,"path":2515,"stem":2516,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcommands\u002Fpreview","docs\u002F5.x\u002F4.api\u002F4.commands\u002Fpreview",{"title":805,"path":2518,"stem":2519,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcommands\u002Ftest","docs\u002F5.x\u002F4.api\u002F4.commands\u002Ftest",{"title":809,"path":2521,"stem":2522,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcommands\u002Ftypecheck","docs\u002F5.x\u002F4.api\u002F4.commands\u002Ftypecheck",{"title":813,"path":2524,"stem":2525,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fcommands\u002Fupgrade","docs\u002F5.x\u002F4.api\u002F4.commands\u002Fupgrade",{"title":411,"titleTemplate":817,"icon":818,"path":2527,"stem":2528,"children":2529,"page":108},"\u002Fdocs\u002F5.x\u002Fapi\u002Fkit","docs\u002F5.x\u002F4.api\u002F5.kit",[2530,2533,2536,2539,2542,2545,2548,2551,2554,2557,2560,2563,2566,2569,2572,2575,2578,2581],{"title":276,"path":2531,"stem":2532,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fkit\u002Fmodules","docs\u002F5.x\u002F4.api\u002F5.kit\u002F1.modules",{"title":399,"path":2534,"stem":2535,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fkit\u002Fruntime-config","docs\u002F5.x\u002F4.api\u002F5.kit\u002F10.runtime-config",{"title":829,"path":2537,"stem":2538,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fkit\u002Ftemplates","docs\u002F5.x\u002F4.api\u002F5.kit\u002F10.templates",{"title":833,"path":2540,"stem":2541,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fkit\u002Fnitro","docs\u002F5.x\u002F4.api\u002F5.kit\u002F11.nitro",{"title":837,"path":2543,"stem":2544,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fkit\u002Fresolving","docs\u002F5.x\u002F4.api\u002F5.kit\u002F12.resolving",{"title":841,"path":2546,"stem":2547,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fkit\u002Flogging","docs\u002F5.x\u002F4.api\u002F5.kit\u002F13.logging",{"title":845,"path":2549,"stem":2550,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fkit\u002Fbuilder","docs\u002F5.x\u002F4.api\u002F5.kit\u002F14.builder",{"title":849,"path":2552,"stem":2553,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fkit\u002Fexamples","docs\u002F5.x\u002F4.api\u002F5.kit\u002F15.examples",{"title":84,"path":2555,"stem":2556,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fkit\u002Flayers","docs\u002F5.x\u002F4.api\u002F5.kit\u002F16.layers",{"title":856,"path":2558,"stem":2559,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fkit\u002Fprogrammatic","docs\u002F5.x\u002F4.api\u002F5.kit\u002F2.programmatic",{"title":860,"path":2561,"stem":2562,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fkit\u002Fcompatibility","docs\u002F5.x\u002F4.api\u002F5.kit\u002F3.compatibility",{"title":268,"path":2564,"stem":2565,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fkit\u002Fautoimports","docs\u002F5.x\u002F4.api\u002F5.kit\u002F4.autoimports",{"title":434,"path":2567,"stem":2568,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fkit\u002Fcomponents","docs\u002F5.x\u002F4.api\u002F5.kit\u002F5.components",{"title":870,"path":2570,"stem":2571,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fkit\u002Fcontext","docs\u002F5.x\u002F4.api\u002F5.kit\u002F6.context",{"title":874,"path":2573,"stem":2574,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fkit\u002Fpages","docs\u002F5.x\u002F4.api\u002F5.kit\u002F7.pages",{"title":878,"path":2576,"stem":2577,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fkit\u002Flayout","docs\u002F5.x\u002F4.api\u002F5.kit\u002F8.layout",{"title":882,"path":2579,"stem":2580,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fkit\u002Fhead","docs\u002F5.x\u002F4.api\u002F5.kit\u002F9.head",{"title":886,"path":2582,"stem":2583,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fkit\u002Fplugins","docs\u002F5.x\u002F4.api\u002F5.kit\u002F9.plugins",{"title":890,"titleTemplate":6,"icon":891,"path":2585,"stem":2586,"children":2587,"page":108},"\u002Fdocs\u002F5.x\u002Fapi\u002Fadvanced","docs\u002F5.x\u002F4.api\u002F6.advanced",[2588,2591],{"title":407,"path":2589,"stem":2590,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fadvanced\u002Fhooks","docs\u002F5.x\u002F4.api\u002F6.advanced\u002F1.hooks",{"title":899,"path":2592,"stem":2593,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fapi\u002Fadvanced\u002Fimport-meta","docs\u002F5.x\u002F4.api\u002F6.advanced\u002F2.import-meta",{"title":903,"path":2595,"stem":2596,"titleTemplate":906,"icon":32},"\u002Fdocs\u002F5.x\u002Fapi\u002Fnuxt-config","docs\u002F5.x\u002F4.api\u002F6.nuxt-config",{"title":849,"titleTemplate":908,"icon":909,"path":2598,"stem":2599,"children":2600,"page":108},"\u002Fdocs\u002F5.x\u002Fexamples","docs\u002F5.x\u002F4.examples",[2601,2604,2623,2636,2667],{"title":914,"path":2602,"stem":2603,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fexamples\u002Fhello-world","docs\u002F5.x\u002F4.examples\u002F0.hello-world",{"title":395,"path":2605,"stem":2606,"children":2607,"page":108},"\u002Fdocs\u002F5.x\u002Fexamples\u002Ffeatures","docs\u002F5.x\u002F4.examples\u002F1.features",[2608,2611,2614,2617,2620],{"title":922,"path":2609,"stem":2610,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fexamples\u002Ffeatures\u002Fauto-imports","docs\u002F5.x\u002F4.examples\u002F1.features\u002F1.auto-imports",{"title":64,"path":2612,"stem":2613,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fexamples\u002Ffeatures\u002Fdata-fetching","docs\u002F5.x\u002F4.examples\u002F1.features\u002F2.data-fetching",{"title":69,"path":2615,"stem":2616,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fexamples\u002Ffeatures\u002Fstate-management","docs\u002F5.x\u002F4.examples\u002F1.features\u002F3.state-management",{"title":932,"path":2618,"stem":2619,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fexamples\u002Ffeatures\u002Fmeta-tags","docs\u002F5.x\u002F4.examples\u002F1.features\u002F4.meta-tags",{"title":936,"path":2621,"stem":2622,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fexamples\u002Ffeatures\u002Flayouts","docs\u002F5.x\u002F4.examples\u002F1.features\u002F5.layouts",{"title":49,"path":2624,"stem":2625,"children":2626,"page":108},"\u002Fdocs\u002F5.x\u002Fexamples\u002Frouting","docs\u002F5.x\u002F4.examples\u002F2.routing",[2627,2630,2633],{"title":944,"path":2628,"stem":2629,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fexamples\u002Frouting\u002Fmiddleware","docs\u002F5.x\u002F4.examples\u002F2.routing\u002Fmiddleware",{"title":874,"path":2631,"stem":2632,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fexamples\u002Frouting\u002Fpages","docs\u002F5.x\u002F4.examples\u002F2.routing\u002Fpages",{"title":951,"path":2634,"stem":2635,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fexamples\u002Frouting\u002Funiversal-router","docs\u002F5.x\u002F4.examples\u002F2.routing\u002Funiversal-router",{"title":890,"path":2637,"stem":2638,"children":2639,"page":108},"\u002Fdocs\u002F5.x\u002Fexamples\u002Fadvanced","docs\u002F5.x\u002F4.examples\u002F4.advanced",[2640,2643,2646,2649,2652,2655,2658,2661,2664],{"title":84,"path":2641,"stem":2642,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fexamples\u002Fadvanced\u002Fconfig-extends","docs\u002F5.x\u002F4.examples\u002F4.advanced\u002Fconfig-extends",{"title":74,"path":2644,"stem":2645,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fexamples\u002Fadvanced\u002Ferror-handling","docs\u002F5.x\u002F4.examples\u002F4.advanced\u002Ferror-handling",{"title":965,"path":2647,"stem":2648,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fexamples\u002Fadvanced\u002Fjsx","docs\u002F5.x\u002F4.examples\u002F4.advanced\u002Fjsx",{"title":969,"path":2650,"stem":2651,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fexamples\u002Fadvanced\u002Flocale","docs\u002F5.x\u002F4.examples\u002F4.advanced\u002Flocale",{"title":973,"path":2653,"stem":2654,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fexamples\u002Fadvanced\u002Fmodule-extend-pages","docs\u002F5.x\u002F4.examples\u002F4.advanced\u002Fmodule-extend-pages",{"title":977,"path":2656,"stem":2657,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fexamples\u002Fadvanced\u002Fteleport","docs\u002F5.x\u002F4.examples\u002F4.advanced\u002Fteleport",{"title":99,"path":2659,"stem":2660,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fexamples\u002Fadvanced\u002Ftesting","docs\u002F5.x\u002F4.examples\u002F4.advanced\u002Ftesting",{"title":519,"path":2662,"stem":2663,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fexamples\u002Fadvanced\u002Fuse-cookie","docs\u002F5.x\u002F4.examples\u002F4.advanced\u002Fuse-cookie",{"title":987,"path":2665,"stem":2666,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fexamples\u002Fadvanced\u002Fuse-custom-fetch-composable","docs\u002F5.x\u002F4.examples\u002F4.advanced\u002Fuse-custom-fetch-composable",{"title":991,"path":2668,"stem":2669,"children":2670,"page":108},"\u002Fdocs\u002F5.x\u002Fexamples\u002Fexperimental","docs\u002F5.x\u002F4.examples\u002F7.experimental",[2671],{"title":996,"path":2672,"stem":2673,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fexamples\u002Fexperimental\u002Fwasm","docs\u002F5.x\u002F4.examples\u002F7.experimental\u002Fwasm",{"title":1000,"titleTemplate":1001,"icon":1002,"path":2675,"stem":2676,"children":2677,"page":108},"\u002Fdocs\u002F5.x\u002Fcommunity","docs\u002F5.x\u002F5.community",[2678,2681,2684,2687,2690,2693],{"title":1007,"path":2679,"stem":2680,"titleTemplate":6,"icon":1010},"\u002Fdocs\u002F5.x\u002Fcommunity\u002Fgetting-help","docs\u002F5.x\u002F5.community\u002F2.getting-help",{"title":1012,"path":2682,"stem":2683,"titleTemplate":6,"icon":1015},"\u002Fdocs\u002F5.x\u002Fcommunity\u002Freporting-bugs","docs\u002F5.x\u002F5.community\u002F3.reporting-bugs",{"title":1017,"path":2685,"stem":2686,"titleTemplate":6,"icon":1020},"\u002Fdocs\u002F5.x\u002Fcommunity\u002Fcontribution","docs\u002F5.x\u002F5.community\u002F4.contribution",{"title":1022,"path":2688,"stem":2689,"titleTemplate":6,"icon":1025},"\u002Fdocs\u002F5.x\u002Fcommunity\u002Fframework-contribution","docs\u002F5.x\u002F5.community\u002F5.framework-contribution",{"title":1027,"path":2691,"stem":2692,"titleTemplate":6,"icon":1030},"\u002Fdocs\u002F5.x\u002Fcommunity\u002Froadmap","docs\u002F5.x\u002F5.community\u002F6.roadmap",{"title":1032,"path":2694,"stem":2695,"titleTemplate":6,"icon":1035},"\u002Fdocs\u002F5.x\u002Fcommunity\u002Fchangelog","docs\u002F5.x\u002F5.community\u002F7.changelog",{"title":1037,"titleTemplate":1038,"icon":1039,"path":2697,"stem":2698,"children":2699,"page":108},"\u002Fdocs\u002F5.x\u002Fbridge","docs\u002F5.x\u002F6.bridge",[2700,2703,2706,2709,2712,2715,2718,2721,2724,2727],{"title":1044,"path":2701,"stem":2702,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fbridge\u002Foverview","docs\u002F5.x\u002F6.bridge\u002F1.overview",{"title":29,"path":2704,"stem":2705,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fbridge\u002Fconfiguration","docs\u002F5.x\u002F6.bridge\u002F10.configuration",{"title":280,"path":2707,"stem":2708,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fbridge\u002Ftypescript","docs\u002F5.x\u002F6.bridge\u002F2.typescript",{"title":1054,"path":2710,"stem":2711,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fbridge\u002Fbridge-composition-api","docs\u002F5.x\u002F6.bridge\u002F3.bridge-composition-api",{"title":1058,"path":2713,"stem":2714,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fbridge\u002Fplugins-and-middleware","docs\u002F5.x\u002F6.bridge\u002F4.plugins-and-middleware",{"title":1062,"path":2716,"stem":2717,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fbridge\u002Fnuxt3-compatible-api","docs\u002F5.x\u002F6.bridge\u002F5.nuxt3-compatible-api",{"title":932,"path":2719,"stem":2720,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fbridge\u002Fmeta","docs\u002F5.x\u002F6.bridge\u002F6.meta",{"title":399,"path":2722,"stem":2723,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fbridge\u002Fruntime-config","docs\u002F5.x\u002F6.bridge\u002F7.runtime-config",{"title":833,"path":2725,"stem":2726,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fbridge\u002Fnitro","docs\u002F5.x\u002F6.bridge\u002F8.nitro",{"title":1075,"path":2728,"stem":2729,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fbridge\u002Fvite","docs\u002F5.x\u002F6.bridge\u002F9.vite",{"title":1079,"titleTemplate":1080,"icon":107,"path":2731,"stem":2732,"children":2733,"page":108},"\u002Fdocs\u002F5.x\u002Fmigration","docs\u002F5.x\u002F7.migration",[2734,2737,2740,2743,2746,2749,2752,2755,2758,2761,2764],{"title":1044,"path":2735,"stem":2736,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fmigration\u002Foverview","docs\u002F5.x\u002F7.migration\u002F1.overview",{"title":1088,"path":2738,"stem":2739,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fmigration\u002Fbundling","docs\u002F5.x\u002F7.migration\u002F10.bundling",{"title":79,"path":2741,"stem":2742,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fmigration\u002Fserver","docs\u002F5.x\u002F7.migration\u002F11.server",{"title":29,"path":2744,"stem":2745,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fmigration\u002Fconfiguration","docs\u002F5.x\u002F7.migration\u002F2.configuration",{"title":276,"path":2747,"stem":2748,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fmigration\u002Fmodule-authors","docs\u002F5.x\u002F7.migration\u002F20.module-authors",{"title":922,"path":2750,"stem":2751,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fmigration\u002Fauto-imports","docs\u002F5.x\u002F7.migration\u002F3.auto-imports",{"title":932,"path":2753,"stem":2754,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fmigration\u002Fmeta","docs\u002F5.x\u002F7.migration\u002F4.meta",{"title":1058,"path":2756,"stem":2757,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fmigration\u002Fplugins-and-middleware","docs\u002F5.x\u002F7.migration\u002F5.plugins-and-middleware",{"title":1110,"path":2759,"stem":2760,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fmigration\u002Fpages-and-layouts","docs\u002F5.x\u002F7.migration\u002F6.pages-and-layouts",{"title":1114,"path":2762,"stem":2763,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fmigration\u002Fcomponent-options","docs\u002F5.x\u002F7.migration\u002F7.component-options",{"title":399,"path":2765,"stem":2766,"titleTemplate":6},"\u002Fdocs\u002F5.x\u002Fmigration\u002Fruntime-config","docs\u002F5.x\u002F7.migration\u002F8.runtime-config",{"title":2768,"path":2769,"stem":2770,"children":2771,"page":108},"Blog","\u002Fblog","blog",[2772,2776,2780,2784,2788,2792,2796,2800,2804,2808,2812,2816,2820,2824,2828,2832,2836,2840,2844,2848,2852],{"title":2773,"path":2774,"stem":2775},"Announcing 3.0","\u002Fblog\u002Fv3","blog\u002F1.v3",{"title":2777,"path":2778,"stem":2779},"Nuxt 3.3","\u002Fblog\u002Fv3-3","blog\u002F10.v3-3",{"title":2781,"path":2782,"stem":2783},"Nuxt 3.4","\u002Fblog\u002Fv3-4","blog\u002F11.v3-4",{"title":2785,"path":2786,"stem":2787},"Nuxt 3.5","\u002Fblog\u002Fv3-5","blog\u002F12.v3-5",{"title":2789,"path":2790,"stem":2791},"Nuxt 3.6","\u002Fblog\u002Fv3-6","blog\u002F13.v3-6",{"title":2793,"path":2794,"stem":2795},"Nuxt on the Edge","\u002Fblog\u002Fnuxt-on-the-edge","blog\u002F14.nuxt-on-the-edge",{"title":2797,"path":2798,"stem":2799},"Nuxt DevTools v1.0","\u002Fblog\u002Fnuxt-devtools-v1-0","blog\u002F18.nuxt-devtools-v1-0",{"title":2801,"path":2802,"stem":2803},"Nuxt: A vision for 2023","\u002Fblog\u002Fvision-2023","blog\u002F2.vision-2023",{"title":2805,"path":2806,"stem":2807},"The Evolution of Shiki v1.0","\u002Fblog\u002Fshiki-v1","blog\u002F21.shiki-v1",{"title":2809,"path":2810,"stem":2811},"Refreshed Nuxt ESLint Integrations","\u002Fblog\u002Feslint-module","blog\u002F24.eslint-module",{"title":2813,"path":2814,"stem":2815},"Introducing Nuxt Scripts","\u002Fblog\u002Fnuxt-scripts","blog\u002F26.nuxt-scripts",{"title":2817,"path":2818,"stem":2819},"Introducing Nuxt Icon v1","\u002Fblog\u002Fnuxt-icon-v1-0","blog\u002F29.nuxt-icon-v1-0",{"title":2821,"path":2822,"stem":2823},"Introducing Nuxt DevTools","\u002Fblog\u002Fintroducing-nuxt-devtools","blog\u002F3.introducing-nuxt-devtools",{"title":2825,"path":2826,"stem":2827},"Announcing Nuxt 3 Release Candidate","\u002Fblog\u002Fnuxt3-rc","blog\u002F3.nuxt3-rc",{"title":2829,"path":2830,"stem":2831},"Nuxt 2 End-of-Life (EOL)","\u002Fblog\u002Fnuxt2-eol","blog\u002F4.nuxt2-eol",{"title":2833,"path":2834,"stem":2835},"Introducing Nuxt 3 Beta","\u002Fblog\u002Fnuxt3-beta","blog\u002F4.nuxt3-beta",{"title":2837,"path":2838,"stem":2839},"Going Full Static","\u002Fblog\u002Fgoing-full-static","blog\u002F5.going-full-static",{"title":2841,"path":2842,"stem":2843},"Introducing Smart Prefetching","\u002Fblog\u002Fintroducing-smart-prefetching","blog\u002F6.introducing-smart-prefetching",{"title":2845,"path":2846,"stem":2847},"Understanding how fetch works in Nuxt 2.12","\u002Fblog\u002Funderstanding-how-fetch-works-in-nuxt-2-12","blog\u002F7.understanding-how-fetch-works-in-nuxt-2-12",{"title":2849,"path":2850,"stem":2851},"Nuxt 2 Static Improvements","\u002Fblog\u002Fnuxt-static-improvements","blog\u002F8.nuxt-static-improvements",{"title":2853,"path":2854,"stem":2855},"Nuxt 2: From Terminal to Browser","\u002Fblog\u002Fnuxtjs-from-terminal-to-browser","blog\u002F9.nuxtjs-from-terminal-to-browser",{"v5":2857,"v4":2858,"v3":2859,"v2":2860},"5 (nightly)","4.4.2","3.21.2","2.18.1",{"id":2862,"title":2863,"body":6,"cta":6,"description":2864,"extension":2865,"head":6,"headline":6,"image":6,"links":6,"meta":2866,"navigation":2867,"path":2769,"seo":2869,"stem":2770,"__hash__":2870},"landing\u002Fblog.yml","The Nuxt Blog","Read the latest news about all Nuxt solutions, from framework announcements to integration tutorials.","yml",{},{"title":2768,"icon":2868},"i-lucide-newspaper",{"title":2863,"description":2864},"Lc2EpY1UJNPdQQzUd3zsnn49Lmt5fSqGXNCqXTgIsr4",[2872,4527,6212,8589,10166,11320,12247,13816,14541,15128,16926,17266,18234,19181,20578,20969,21558,21866,22562,24555,24723,25249,26657,27230,28414,30024,31039,31725,32393,33660,34089,34661,35108,35460,36214,36929,37643,38334,38560,38714,39073,39315,39912,40540,42154,42291],{"id":2873,"title":2874,"authors":2875,"body":2881,"category":4517,"date":4518,"description":4519,"draft":108,"extension":4520,"image":4521,"meta":4522,"navigation":108,"path":4523,"seo":4524,"stem":4525,"tags":6,"__hash__":4526},"blog\u002Fblog\u002F43.v4-4.md","Nuxt 4.4",[2876],{"name":2877,"avatar":2878,"to":2880},"Daniel Roe",{"src":2879},"https:\u002F\u002Fgithub.com\u002Fdanielroe.png","https:\u002F\u002Fbsky.app\u002Fprofile\u002Fdanielroe.dev",{"type":2882,"value":2883,"toc":4492},"minimark",[2884,2895,2917,3121,3127,3214,3217,3224,3232,3236,3240,3259,3265,3268,3274,3298,3390,3404,3475,3478,3485,3507,3773,3788,3791,3798,3817,3820,3824,3831,3840,3860,3914,3925,3928,3938,3949,4043,4046,4053,4072,4147,4150,4154,4177,4180,4187,4190,4193,4197,4212,4215,4223,4235,4239,4248,4294,4297,4301,4315,4333,4336,4342,4345,4379,4386,4389,4392,4396,4428,4432,4435,4456,4459,4470,4474,4485,4488],[2885,2886,2888,2889,2892,2893],"h2",{"id":2887},"createusefetch-and-createuseasyncdata","🏭 ",[2890,2891,1470],"code",{}," and ",[2890,2894,1466],{},[2896,2897,2898,2899,2903,2904,2892,2906,2908,2909,2916],"p",{},"You can now create ",[2900,2901,2902],"strong",{},"custom instances"," of ",[2890,2905,527],{},[2890,2907,515],{}," with your own default options (",[2910,2911,2915],"a",{"href":2912,"rel":2913},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32300",[2914],"nofollow","#32300",").",[2918,2919,2925],"pre",{"className":2920,"code":2921,"filename":2922,"language":2923,"meta":2924,"style":2924},"language-ts shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","\u002F\u002F Simple defaults\nexport const useClientFetch = createUseFetch({\n  server: false,\n})\n\n\u002F\u002F Dynamic defaults with full control over merging\nexport const useApiFetch = createUseFetch((currentOptions) => {\n  const runtimeConfig = useRuntimeConfig()\n\n  return {\n    ...currentOptions,\n    baseURL: currentOptions.baseURL ?? runtimeConfig.public.baseApiUrl,\n  }\n})\n","composables\u002Fapi.ts","ts","",[2890,2926,2927,2936,2965,2982,2991,2997,3003,3034,3052,3057,3065,3075,3108,3114],{"__ignoreMap":2924},[2928,2929,2932],"span",{"class":2930,"line":2931},"line",1,[2928,2933,2935],{"class":2934},"sWuyu","\u002F\u002F Simple defaults\n",[2928,2937,2939,2943,2947,2951,2955,2959,2962],{"class":2930,"line":2938},2,[2928,2940,2942],{"class":2941},"s8R28","export",[2928,2944,2946],{"class":2945},"smZ93"," const",[2928,2948,2950],{"class":2949},"sZSNi"," useClientFetch ",[2928,2952,2954],{"class":2953},"sDfIl","=",[2928,2956,2958],{"class":2957},"s3cPz"," createUseFetch",[2928,2960,2961],{"class":2949},"(",[2928,2963,2964],{"class":2953},"{\n",[2928,2966,2968,2972,2975,2979],{"class":2930,"line":2967},3,[2928,2969,2971],{"class":2970},"sRlkE","  server",[2928,2973,2974],{"class":2953},":",[2928,2976,2978],{"class":2977},"sbKd-"," false",[2928,2980,2981],{"class":2953},",\n",[2928,2983,2985,2988],{"class":2930,"line":2984},4,[2928,2986,2987],{"class":2953},"}",[2928,2989,2990],{"class":2949},")\n",[2928,2992,2994],{"class":2930,"line":2993},5,[2928,2995,2996],{"emptyLinePlaceholder":1196},"\n",[2928,2998,3000],{"class":2930,"line":2999},6,[2928,3001,3002],{"class":2934},"\u002F\u002F Dynamic defaults with full control over merging\n",[2928,3004,3006,3008,3010,3013,3015,3017,3019,3021,3025,3028,3031],{"class":2930,"line":3005},7,[2928,3007,2942],{"class":2941},[2928,3009,2946],{"class":2945},[2928,3011,3012],{"class":2949}," useApiFetch ",[2928,3014,2954],{"class":2953},[2928,3016,2958],{"class":2957},[2928,3018,2961],{"class":2949},[2928,3020,2961],{"class":2953},[2928,3022,3024],{"class":3023},"s1nJG","currentOptions",[2928,3026,3027],{"class":2953},")",[2928,3029,3030],{"class":2945}," =>",[2928,3032,3033],{"class":2953}," {\n",[2928,3035,3037,3040,3043,3046,3049],{"class":2930,"line":3036},8,[2928,3038,3039],{"class":2945},"  const",[2928,3041,3042],{"class":2949}," runtimeConfig",[2928,3044,3045],{"class":2953}," =",[2928,3047,3048],{"class":2957}," useRuntimeConfig",[2928,3050,3051],{"class":2970},"()\n",[2928,3053,3055],{"class":2930,"line":3054},9,[2928,3056,2996],{"emptyLinePlaceholder":1196},[2928,3058,3060,3063],{"class":2930,"line":3059},10,[2928,3061,3062],{"class":2941},"  return",[2928,3064,3033],{"class":2953},[2928,3066,3068,3071,3073],{"class":2930,"line":3067},11,[2928,3069,3070],{"class":2953},"    ...",[2928,3072,3024],{"class":2949},[2928,3074,2981],{"class":2953},[2928,3076,3078,3081,3083,3086,3089,3092,3095,3097,3099,3101,3103,3106],{"class":2930,"line":3077},12,[2928,3079,3080],{"class":2970},"    baseURL",[2928,3082,2974],{"class":2953},[2928,3084,3085],{"class":2949}," currentOptions",[2928,3087,3088],{"class":2953},".",[2928,3090,3091],{"class":2949},"baseURL",[2928,3093,3094],{"class":2953}," ??",[2928,3096,3042],{"class":2949},[2928,3098,3088],{"class":2953},[2928,3100,180],{"class":2949},[2928,3102,3088],{"class":2953},[2928,3104,3105],{"class":2949},"baseApiUrl",[2928,3107,2981],{"class":2953},[2928,3109,3111],{"class":2930,"line":3110},13,[2928,3112,3113],{"class":2953},"  }\n",[2928,3115,3117,3119],{"class":2930,"line":3116},14,[2928,3118,2987],{"class":2953},[2928,3120,2990],{"class":2949},[2896,3122,3123,3124,3126],{},"Then use them exactly like ",[2890,3125,527],{}," – they're fully typed and support all the same options:",[2918,3128,3133],{"className":3129,"code":3130,"filename":3131,"language":3132,"meta":2924,"style":2924},"language-vue shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Uses your baseURL from runtimeConfig automatically\nconst { data: users } = await useApiFetch('\u002Fusers')\n\u003C\u002Fscript>\n","pages\u002Fdashboard.vue","vue",[2890,3134,3135,3162,3167,3205],{"__ignoreMap":2924},[2928,3136,3137,3140,3143,3146,3149,3151,3154,3157,3159],{"class":2930,"line":2931},[2928,3138,3139],{"class":2953},"\u003C",[2928,3141,3142],{"class":2970},"script",[2928,3144,3145],{"class":2945}," setup",[2928,3147,3148],{"class":2945}," lang",[2928,3150,2954],{"class":2953},[2928,3152,3153],{"class":2953},"\"",[2928,3155,2923],{"class":3156},"sGFVr",[2928,3158,3153],{"class":2953},[2928,3160,3161],{"class":2953},">\n",[2928,3163,3164],{"class":2930,"line":2938},[2928,3165,3166],{"class":2934},"\u002F\u002F Uses your baseURL from runtimeConfig automatically\n",[2928,3168,3169,3172,3175,3178,3180,3183,3185,3187,3190,3193,3195,3198,3201,3203],{"class":2930,"line":2967},[2928,3170,3171],{"class":2945},"const",[2928,3173,3174],{"class":2953}," {",[2928,3176,3177],{"class":2970}," data",[2928,3179,2974],{"class":2953},[2928,3181,3182],{"class":2949}," users ",[2928,3184,2987],{"class":2953},[2928,3186,3045],{"class":2953},[2928,3188,3189],{"class":2941}," await",[2928,3191,3192],{"class":2957}," useApiFetch",[2928,3194,2961],{"class":2949},[2928,3196,3197],{"class":2953},"'",[2928,3199,3200],{"class":3156},"\u002Fusers",[2928,3202,3197],{"class":2953},[2928,3204,2990],{"class":2949},[2928,3206,3207,3210,3212],{"class":2930,"line":2984},[2928,3208,3209],{"class":2953},"\u003C\u002F",[2928,3211,3142],{"class":2970},[2928,3213,3161],{"class":2953},[2896,3215,3216],{},"When you pass a plain object, your usage options automatically override the defaults. When you pass a function, you get full control over how options are merged – which means you can compose interceptors, headers, and other complex options however you need.",[2896,3218,3219,3220,2892,3222,3088],{},"Under the hood, this is powered by a new Nuxt ad-hoc module that scans your composables directory and automatically registers your custom instances for key injection – so they work seamlessly with SSR, just like ",[2890,3221,515],{},[2890,3223,527],{},[2896,3225,3226,3227,3229,3230,3088],{},"There's also ",[2890,3228,1466],{}," for the same pattern with ",[2890,3231,515],{},[3233,3234],"read-more",{"to":3235},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fcreate-use-async-data",[2885,3237,3239],{"id":3238},"️-vue-router-v5","🗺️ Vue Router v5",[2896,3241,3242,3243,3248,3249,3254,3255,3258],{},"We've upgraded to ",[2910,3244,3247],{"href":3245,"rel":3246},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Frouter",[2914],"vue-router v5"," (",[2910,3250,3253],{"href":3251,"rel":3252},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F34181",[2914],"#34181","), which removes the dependency on ",[2890,3256,3257],{},"unplugin-vue-router",". This is the first major vue-router upgrade since Nuxt 3, and it comes with a bunch of improvements under the hood.",[2896,3260,3261,3262,3264],{},"For most apps, this should be a transparent upgrade. If you're using ",[2890,3263,3257],{}," directly, you can remove it from your dependencies.",[2896,3266,3267],{},"The next step will be taking typed routes out of experimental status. 👀",[2885,3269,3271,3272],{"id":3270},"typed-layout-props-in-definepagemeta","💪 Typed Layout Props in ",[2890,3273,678],{},[2896,3275,3276,3277,3248,3279,3284,3285,3288,3289,3292,3293,3297],{},"You can now pass props to your layouts directly from ",[2890,3278,678],{},[2910,3280,3283],{"href":3281,"rel":3282},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F34262",[2914],"#34262","). This means your layouts can be parameterised per-page without needing to use ",[2890,3286,3287],{},"provide","\u002F",[2890,3290,3291],{},"inject"," or other workarounds. Check out the ",[2910,3294,3296],{"href":3295},"\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Flayouts#layout-props","updated docs"," for the full details.",[2918,3299,3301],{"className":2920,"code":3300,"filename":3131,"language":2923,"meta":2924,"style":2924},"definePageMeta({\n  layout: {\n    name: 'panel',\n    props: {\n      sidebar: true,\n      title: 'Dashboard',\n    },\n  },\n})\n",[2890,3302,3303,3311,3320,3337,3346,3358,3374,3379,3384],{"__ignoreMap":2924},[2928,3304,3305,3307,3309],{"class":2930,"line":2931},[2928,3306,678],{"class":2957},[2928,3308,2961],{"class":2949},[2928,3310,2964],{"class":2953},[2928,3312,3313,3316,3318],{"class":2930,"line":2938},[2928,3314,3315],{"class":2970},"  layout",[2928,3317,2974],{"class":2953},[2928,3319,3033],{"class":2953},[2928,3321,3322,3325,3327,3330,3333,3335],{"class":2930,"line":2967},[2928,3323,3324],{"class":2970},"    name",[2928,3326,2974],{"class":2953},[2928,3328,3329],{"class":2953}," '",[2928,3331,3332],{"class":3156},"panel",[2928,3334,3197],{"class":2953},[2928,3336,2981],{"class":2953},[2928,3338,3339,3342,3344],{"class":2930,"line":2984},[2928,3340,3341],{"class":2970},"    props",[2928,3343,2974],{"class":2953},[2928,3345,3033],{"class":2953},[2928,3347,3348,3351,3353,3356],{"class":2930,"line":2993},[2928,3349,3350],{"class":2970},"      sidebar",[2928,3352,2974],{"class":2953},[2928,3354,3355],{"class":2977}," true",[2928,3357,2981],{"class":2953},[2928,3359,3360,3363,3365,3367,3370,3372],{"class":2930,"line":2999},[2928,3361,3362],{"class":2970},"      title",[2928,3364,2974],{"class":2953},[2928,3366,3329],{"class":2953},[2928,3368,3369],{"class":3156},"Dashboard",[2928,3371,3197],{"class":2953},[2928,3373,2981],{"class":2953},[2928,3375,3376],{"class":2930,"line":3005},[2928,3377,3378],{"class":2953},"    },\n",[2928,3380,3381],{"class":2930,"line":3036},[2928,3382,3383],{"class":2953},"  },\n",[2928,3385,3386,3388],{"class":2930,"line":3054},[2928,3387,2987],{"class":2953},[2928,3389,2990],{"class":2949},[2896,3391,3392,3393,3248,3396,3401,3402,3088],{},"Even better – the props are ",[2900,3394,3395],{},"fully typed",[2910,3397,3400],{"href":3398,"rel":3399},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F34409",[2914],"#34409","). If your layout defines props, you'll get autocomplete and type-checking in ",[2890,3403,678],{},[2918,3405,3408],{"className":3129,"code":3406,"filename":3407,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{\n  sidebar?: boolean\n  title?: string\n}>()\n\u003C\u002Fscript>\n","layouts\u002Fpanel.vue",[2890,3409,3410,3430,3438,3450,3460,3467],{"__ignoreMap":2924},[2928,3411,3412,3414,3416,3418,3420,3422,3424,3426,3428],{"class":2930,"line":2931},[2928,3413,3139],{"class":2953},[2928,3415,3142],{"class":2970},[2928,3417,3145],{"class":2945},[2928,3419,3148],{"class":2945},[2928,3421,2954],{"class":2953},[2928,3423,3153],{"class":2953},[2928,3425,2923],{"class":3156},[2928,3427,3153],{"class":2953},[2928,3429,3161],{"class":2953},[2928,3431,3432,3435],{"class":2930,"line":2938},[2928,3433,3434],{"class":2957},"defineProps",[2928,3436,3437],{"class":2953},"\u003C{\n",[2928,3439,3440,3443,3446],{"class":2930,"line":2967},[2928,3441,3442],{"class":2970},"  sidebar",[2928,3444,3445],{"class":2953},"?:",[2928,3447,3449],{"class":3448},"s52Pk"," boolean\n",[2928,3451,3452,3455,3457],{"class":2930,"line":2984},[2928,3453,3454],{"class":2970},"  title",[2928,3456,3445],{"class":2953},[2928,3458,3459],{"class":3448}," string\n",[2928,3461,3462,3465],{"class":2930,"line":2993},[2928,3463,3464],{"class":2953},"}>",[2928,3466,3051],{"class":2949},[2928,3468,3469,3471,3473],{"class":2930,"line":2999},[2928,3470,3209],{"class":2953},[2928,3472,3142],{"class":2970},[2928,3474,3161],{"class":2953},[3233,3476],{"to":3477},"\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Flayouts",[2885,3479,3481,3482,3484],{"id":3480},"️-useannouncer-composable","🗣️ ",[2890,3483,1477],{}," Composable",[2896,3486,3487,3488,3490,3491,3493,3494,3499,3500,3502,3503,3506],{},"Accessibility got a major boost with the new ",[2890,3489,1477],{}," composable and ",[2890,3492,1434],{}," component (",[2910,3495,3498],{"href":3496,"rel":3497},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F34318",[2914],"#34318","). While ",[2890,3501,595],{}," handles page navigation for screen readers, many apps need to announce ",[2900,3504,3505],{},"dynamic in-page changes"," – form submissions, loading states, search results, and more.",[3508,3509,3510,3580],"code-group",{},[2918,3511,3513],{"className":3129,"code":3512,"filename":219,"language":3132,"meta":2924,"style":2924},"\u003Ctemplate>\n  \u003CNuxtAnnouncer \u002F>\n  \u003CNuxtRouteAnnouncer \u002F>\n  \u003CNuxtLayout>\n    \u003CNuxtPage \u002F>\n  \u003C\u002FNuxtLayout>\n\u003C\u002Ftemplate>\n",[2890,3514,3515,3524,3535,3544,3553,3563,3572],{"__ignoreMap":2924},[2928,3516,3517,3519,3522],{"class":2930,"line":2931},[2928,3518,3139],{"class":2953},[2928,3520,3521],{"class":2970},"template",[2928,3523,3161],{"class":2953},[2928,3525,3526,3529,3532],{"class":2930,"line":2938},[2928,3527,3528],{"class":2953},"  \u003C",[2928,3530,3531],{"class":2970},"NuxtAnnouncer",[2928,3533,3534],{"class":2953}," \u002F>\n",[2928,3536,3537,3539,3542],{"class":2930,"line":2967},[2928,3538,3528],{"class":2953},[2928,3540,3541],{"class":2970},"NuxtRouteAnnouncer",[2928,3543,3534],{"class":2953},[2928,3545,3546,3548,3551],{"class":2930,"line":2984},[2928,3547,3528],{"class":2953},[2928,3549,3550],{"class":2970},"NuxtLayout",[2928,3552,3161],{"class":2953},[2928,3554,3555,3558,3561],{"class":2930,"line":2993},[2928,3556,3557],{"class":2953},"    \u003C",[2928,3559,3560],{"class":2970},"NuxtPage",[2928,3562,3534],{"class":2953},[2928,3564,3565,3568,3570],{"class":2930,"line":2999},[2928,3566,3567],{"class":2953},"  \u003C\u002F",[2928,3569,3550],{"class":2970},[2928,3571,3161],{"class":2953},[2928,3573,3574,3576,3578],{"class":2930,"line":3005},[2928,3575,3209],{"class":2953},[2928,3577,3521],{"class":2970},[2928,3579,3161],{"class":2953},[2918,3581,3584],{"className":3129,"code":3582,"filename":3583,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup lang=\"ts\">\nconst { polite, assertive } = useAnnouncer()\n\nasync function submitForm() {\n  try {\n    await $fetch('\u002Fapi\u002Fcontact', { method: 'POST', body: formData })\n    polite('Message sent successfully')\n  }\n  catch (error) {\n    assertive('Error: Failed to send message')\n  }\n}\n\u003C\u002Fscript>\n","components\u002FContactForm.vue",[2890,3585,3586,3606,3630,3634,3650,3657,3705,3721,3725,3740,3756,3760,3765],{"__ignoreMap":2924},[2928,3587,3588,3590,3592,3594,3596,3598,3600,3602,3604],{"class":2930,"line":2931},[2928,3589,3139],{"class":2953},[2928,3591,3142],{"class":2970},[2928,3593,3145],{"class":2945},[2928,3595,3148],{"class":2945},[2928,3597,2954],{"class":2953},[2928,3599,3153],{"class":2953},[2928,3601,2923],{"class":3156},[2928,3603,3153],{"class":2953},[2928,3605,3161],{"class":2953},[2928,3607,3608,3610,3612,3615,3618,3621,3623,3625,3628],{"class":2930,"line":2938},[2928,3609,3171],{"class":2945},[2928,3611,3174],{"class":2953},[2928,3613,3614],{"class":2949}," polite",[2928,3616,3617],{"class":2953},",",[2928,3619,3620],{"class":2949}," assertive ",[2928,3622,2987],{"class":2953},[2928,3624,3045],{"class":2953},[2928,3626,3627],{"class":2957}," useAnnouncer",[2928,3629,3051],{"class":2949},[2928,3631,3632],{"class":2930,"line":2967},[2928,3633,2996],{"emptyLinePlaceholder":1196},[2928,3635,3636,3639,3642,3645,3648],{"class":2930,"line":2984},[2928,3637,3638],{"class":2945},"async",[2928,3640,3641],{"class":2945}," function",[2928,3643,3644],{"class":2957}," submitForm",[2928,3646,3647],{"class":2953},"()",[2928,3649,3033],{"class":2953},[2928,3651,3652,3655],{"class":2930,"line":2993},[2928,3653,3654],{"class":2941},"  try",[2928,3656,3033],{"class":2953},[2928,3658,3659,3662,3665,3667,3669,3672,3674,3676,3678,3681,3683,3685,3688,3690,3692,3695,3697,3700,3703],{"class":2930,"line":2999},[2928,3660,3661],{"class":2941},"    await",[2928,3663,3664],{"class":2957}," $fetch",[2928,3666,2961],{"class":2970},[2928,3668,3197],{"class":2953},[2928,3670,3671],{"class":3156},"\u002Fapi\u002Fcontact",[2928,3673,3197],{"class":2953},[2928,3675,3617],{"class":2953},[2928,3677,3174],{"class":2953},[2928,3679,3680],{"class":2970}," method",[2928,3682,2974],{"class":2953},[2928,3684,3329],{"class":2953},[2928,3686,3687],{"class":3156},"POST",[2928,3689,3197],{"class":2953},[2928,3691,3617],{"class":2953},[2928,3693,3694],{"class":2970}," body",[2928,3696,2974],{"class":2953},[2928,3698,3699],{"class":2949}," formData",[2928,3701,3702],{"class":2953}," }",[2928,3704,2990],{"class":2970},[2928,3706,3707,3710,3712,3714,3717,3719],{"class":2930,"line":3005},[2928,3708,3709],{"class":2957},"    polite",[2928,3711,2961],{"class":2970},[2928,3713,3197],{"class":2953},[2928,3715,3716],{"class":3156},"Message sent successfully",[2928,3718,3197],{"class":2953},[2928,3720,2990],{"class":2970},[2928,3722,3723],{"class":2930,"line":3036},[2928,3724,3113],{"class":2953},[2928,3726,3727,3730,3732,3735,3738],{"class":2930,"line":3054},[2928,3728,3729],{"class":2941},"  catch",[2928,3731,3248],{"class":2970},[2928,3733,3734],{"class":2949},"error",[2928,3736,3737],{"class":2970},") ",[2928,3739,2964],{"class":2953},[2928,3741,3742,3745,3747,3749,3752,3754],{"class":2930,"line":3059},[2928,3743,3744],{"class":2957},"    assertive",[2928,3746,2961],{"class":2970},[2928,3748,3197],{"class":2953},[2928,3750,3751],{"class":3156},"Error: Failed to send message",[2928,3753,3197],{"class":2953},[2928,3755,2990],{"class":2970},[2928,3757,3758],{"class":2930,"line":3067},[2928,3759,3113],{"class":2953},[2928,3761,3762],{"class":2930,"line":3077},[2928,3763,3764],{"class":2953},"}\n",[2928,3766,3767,3769,3771],{"class":2930,"line":3110},[2928,3768,3209],{"class":2953},[2928,3770,3142],{"class":2970},[2928,3772,3161],{"class":2953},[3774,3775,3776],"note",{},[2896,3777,3778,3779,3784,3785,3787],{},"This is part of our ",[2910,3780,3783],{"href":3781,"rel":3782},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fissues\u002F23255",[2914],"accessibility roadmap",". You don't need to use it everywhere – for many interactions, moving focus to new content or using native form validation is sufficient. ",[2890,3786,1477],{}," is most useful when content changes dynamically without a corresponding focus change.",[3233,3789],{"to":3790},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-announcer",[2885,3792,3794,3795],{"id":3793},"migrate-to-unrouting","🚀 Migrate to ",[2890,3796,3797],{},"unrouting",[2896,3799,3800,3801,3248,3807,3812,3813,3816],{},"We've migrated Nuxt's file-system route generation to ",[2910,3802,3805],{"href":3803,"rel":3804},"https:\u002F\u002Fgithub.com\u002Funjs\u002Funrouting",[2914],[2890,3806,3797],{},[2910,3808,3811],{"href":3809,"rel":3810},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F34316",[2914],"#34316","), which uses a trie data structure for constructing routes. The cold start is roughly the same (~8ms vs ~6ms for large apps), but dev server changes are ",[2900,3814,3815],{},"up to 28x faster"," when you're not adding\u002Fremoving pages, and ~15% faster even when you are.",[2896,3818,3819],{},"This also makes route generation more deterministic – it's no longer sensitive to page file ordering.",[2885,3821,3823],{"id":3822},"smarter-payload-handling-for-cached-routes","🍫 Smarter Payload Handling for Cached Routes",[2896,3825,3826,3827,3830],{},"When a cached route (ISR\u002FSWR) is rendered at runtime with payload extraction enabled, the browser immediately fetches ",[2890,3828,3829],{},"_payload.json"," as a second request – which triggers a full SSR re-render of the same page. In serverless environments, this can spin up a second lambda before the first response has even finished streaming.",[2896,3832,3833,3834,3839],{},"This release addresses this with two changes (",[2910,3835,3838],{"href":3836,"rel":3837},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F34410",[2914],"#34410","):",[3841,3842,3843,3854],"ol",{},[3844,3845,3846,3847,3850,3851,3853],"li",{},"A new ",[2890,3848,3849],{},"payloadExtraction: 'client'"," mode that inlines the full payload in the initial HTML response while still generating ",[2890,3852,3829],{}," for client-side navigation",[3844,3855,3856,3857,3859],{},"A runtime in-memory LRU payload cache so that ",[2890,3858,3829],{}," requests can be served without a full re-render",[2918,3861,3863],{"className":2920,"code":3862,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  experimental: {\n    payloadExtraction: 'client',\n  },\n})\n",[2890,3864,3865,3879,3888,3904,3908],{"__ignoreMap":2924},[2928,3866,3867,3869,3872,3875,3877],{"class":2930,"line":2931},[2928,3868,2942],{"class":2941},[2928,3870,3871],{"class":2941}," default",[2928,3873,3874],{"class":2957}," defineNuxtConfig",[2928,3876,2961],{"class":2949},[2928,3878,2964],{"class":2953},[2928,3880,3881,3884,3886],{"class":2930,"line":2938},[2928,3882,3883],{"class":2970},"  experimental",[2928,3885,2974],{"class":2953},[2928,3887,3033],{"class":2953},[2928,3889,3890,3893,3895,3897,3900,3902],{"class":2930,"line":2967},[2928,3891,3892],{"class":2970},"    payloadExtraction",[2928,3894,2974],{"class":2953},[2928,3896,3329],{"class":2953},[2928,3898,3899],{"class":3156},"client",[2928,3901,3197],{"class":2953},[2928,3903,2981],{"class":2953},[2928,3905,3906],{"class":2930,"line":2984},[2928,3907,3383],{"class":2953},[2928,3909,3910,3912],{"class":2930,"line":2993},[2928,3911,2987],{"class":2953},[2928,3913,2990],{"class":2949},[3774,3915,3916],{},[2896,3917,3918,3920,3921,3924],{},[2890,3919,3849],{}," will become the default with ",[2890,3922,3923],{},"compatibilityVersion: 5",". The runtime cache is active for all users.",[3233,3926],{"to":3927},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fexperimental-features#payloadextraction",[2885,3929,3931,3932,3935,3936],{"id":3930},"refresh-option-for-usecookie","🍪 ",[2890,3933,3934],{},"refresh"," Option for ",[2890,3937,519],{},[2896,3939,3940,3941,3943,3944,3839],{},"If you're using cookies for session management, you've probably run into the problem of needing to extend a cookie's expiration without changing its value. The new ",[2890,3942,3934],{}," option makes this simple (",[2910,3945,3948],{"href":3946,"rel":3947},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33814",[2914],"#33814",[2918,3950,3952],{"className":2920,"code":3951,"language":2923,"meta":2924,"style":2924},"const session = useCookie('session-id', {\n  maxAge: 60 * 60,\n  refresh: true,\n})\n\n\u002F\u002F Extends expiration each time, even with the same value\nsession.value = session.value\n",[2890,3953,3954,3979,3997,4008,4014,4018,4023],{"__ignoreMap":2924},[2928,3955,3956,3958,3961,3963,3966,3968,3970,3973,3975,3977],{"class":2930,"line":2931},[2928,3957,3171],{"class":2945},[2928,3959,3960],{"class":2949}," session ",[2928,3962,2954],{"class":2953},[2928,3964,3965],{"class":2957}," useCookie",[2928,3967,2961],{"class":2949},[2928,3969,3197],{"class":2953},[2928,3971,3972],{"class":3156},"session-id",[2928,3974,3197],{"class":2953},[2928,3976,3617],{"class":2953},[2928,3978,3033],{"class":2953},[2928,3980,3981,3984,3986,3990,3993,3995],{"class":2930,"line":2938},[2928,3982,3983],{"class":2970},"  maxAge",[2928,3985,2974],{"class":2953},[2928,3987,3989],{"class":3988},"sYRBq"," 60",[2928,3991,3992],{"class":2953}," *",[2928,3994,3989],{"class":3988},[2928,3996,2981],{"class":2953},[2928,3998,3999,4002,4004,4006],{"class":2930,"line":2967},[2928,4000,4001],{"class":2970},"  refresh",[2928,4003,2974],{"class":2953},[2928,4005,3355],{"class":2977},[2928,4007,2981],{"class":2953},[2928,4009,4010,4012],{"class":2930,"line":2984},[2928,4011,2987],{"class":2953},[2928,4013,2990],{"class":2949},[2928,4015,4016],{"class":2930,"line":2993},[2928,4017,2996],{"emptyLinePlaceholder":1196},[2928,4019,4020],{"class":2930,"line":2999},[2928,4021,4022],{"class":2934},"\u002F\u002F Extends expiration each time, even with the same value\n",[2928,4024,4025,4028,4030,4033,4035,4038,4040],{"class":2930,"line":3005},[2928,4026,4027],{"class":2949},"session",[2928,4029,3088],{"class":2953},[2928,4031,4032],{"class":2949},"value ",[2928,4034,2954],{"class":2953},[2928,4036,4037],{"class":2949}," session",[2928,4039,3088],{"class":2953},[2928,4041,4042],{"class":2949},"value\n",[3233,4044],{"to":4045},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-cookie",[2885,4047,4049,4050,4052],{"id":4048},"️-usestate-reset-to-default","♻️ ",[2890,4051,619],{}," Reset to Default",[2896,4054,4055,2892,4057,4059,4060,3248,4063,4068,4069,4071],{},[2890,4056,619],{},[2890,4058,654],{}," now support resetting to the initial value instead of clearing to ",[2890,4061,4062],{},"undefined",[2910,4064,4067],{"href":4065,"rel":4066},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33527",[2914],"#33527","). This aligns with how ",[2890,4070,515],{}," handles resets and is more intuitive for state management.",[2918,4073,4075],{"className":2920,"code":4074,"language":2923,"meta":2924,"style":2924},"const count = useState('counter', () => 0)\ncount.value = 42\n\n\u002F\u002F Resets to 0 (the init value), not undefined\nclearNuxtState('counter')\n",[2890,4076,4077,4110,4124,4128,4133],{"__ignoreMap":2924},[2928,4078,4079,4081,4084,4086,4089,4091,4093,4096,4098,4100,4103,4105,4108],{"class":2930,"line":2931},[2928,4080,3171],{"class":2945},[2928,4082,4083],{"class":2949}," count ",[2928,4085,2954],{"class":2953},[2928,4087,4088],{"class":2957}," useState",[2928,4090,2961],{"class":2949},[2928,4092,3197],{"class":2953},[2928,4094,4095],{"class":3156},"counter",[2928,4097,3197],{"class":2953},[2928,4099,3617],{"class":2953},[2928,4101,4102],{"class":2953}," ()",[2928,4104,3030],{"class":2945},[2928,4106,4107],{"class":3988}," 0",[2928,4109,2990],{"class":2949},[2928,4111,4112,4115,4117,4119,4121],{"class":2930,"line":2938},[2928,4113,4114],{"class":2949},"count",[2928,4116,3088],{"class":2953},[2928,4118,4032],{"class":2949},[2928,4120,2954],{"class":2953},[2928,4122,4123],{"class":3988}," 42\n",[2928,4125,4126],{"class":2930,"line":2967},[2928,4127,2996],{"emptyLinePlaceholder":1196},[2928,4129,4130],{"class":2930,"line":2984},[2928,4131,4132],{"class":2934},"\u002F\u002F Resets to 0 (the init value), not undefined\n",[2928,4134,4135,4137,4139,4141,4143,4145],{"class":2930,"line":2993},[2928,4136,654],{"class":2957},[2928,4138,2961],{"class":2949},[2928,4140,3197],{"class":2953},[2928,4142,4095],{"class":3156},[2928,4144,3197],{"class":2953},[2928,4146,2990],{"class":2949},[3233,4148],{"to":4149},"\u002Fdocs\u002Fapi\u002Futils\u002Fclear-nuxt-state",[2885,4151,4153],{"id":4152},"️️-better-import-protection","🕵️‍♂️ Better Import Protection",[2896,4155,4156,4157,4162,4163,4166,4167,4170,4171,4176],{},"Inspired by features in ",[2910,4158,4161],{"href":4159,"rel":4160},"https:\u002F\u002Ftanstack.com\u002Fstart\u002Flatest\u002Fdocs\u002Fframework\u002Freact\u002Fguide\u002Fimport-protection",[2914],"TanStack Start",", import protection now shows ",[2900,4164,4165],{},"suggestions"," and a full ",[2900,4168,4169],{},"trace"," of where a problematic import originated (",[2910,4172,4175],{"href":4173,"rel":4174},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F34454",[2914],"#34454","). This makes it much easier to debug why a server-only import ended up in your client bundle.",[2896,4178,4179],{},"For example, if you accidentally import from a server route in a component:",[2896,4181,4182],{},[4183,4184],"img",{"alt":4185,"src":4186},"More useful import protection error","\u002Fassets\u002Fblog\u002Fimport-protection.png",[2896,4188,4189],{},"The trace shows the import chain (the component was imported from a page), the exact line of code, and actionable suggestions for how to fix it.",[2896,4191,4192],{},"We plan to continue work on improving our error messages. 🪵",[2885,4194,4196],{"id":4195},"view-transitions-types","🔮 View Transitions Types",[2896,4198,4199,4200,4205,4206,4211],{},"You can now define ",[2910,4201,4204],{"href":4202,"rel":4203},"https:\u002F\u002Fdeveloper.chrome.com\u002Fblog\u002Fview-transitions-update-io24#view-transition-types",[2914],"view transition types"," in Nuxt's experimental view transitions support (",[2910,4207,4210],{"href":4208,"rel":4209},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31982",[2914],"#31982","). This lets you use different transition styles for different navigation patterns (forwards vs. backwards, tabs vs. pages, etc.).",[3233,4213],{"to":4214},"\u002Fdocs\u002Fgetting-started\u002Ftransitions#view-transitions-api-experimental",[2885,4216,4218,4219,4222],{"id":4217},"improved-optimizedeps-hints","💡 Improved ",[2890,4220,4221],{},"optimizeDeps"," Hints",[2896,4224,4225,4226,4228,4229,4234],{},"When Vite discovers new dependencies at runtime and triggers page reloads, Nuxt now shows a clear, copy-pasteable ",[2890,4227,233],{}," snippet to pre-bundle them (",[2910,4230,4233],{"href":4231,"rel":4232},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F34320",[2914],"#34320","). It also warns about unresolvable entries at startup.",[2885,4236,4238],{"id":4237},"️-normalised-page-component-names-experimental","🏷️ Normalised Page Component Names (Experimental)",[2896,4240,4241,4242,4247],{},"A new experimental option normalises page component names to match route names (",[2910,4243,4246],{"href":4244,"rel":4245},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33513",[2914],"#33513","), which can help with consistency in devtools and debugging.",[2918,4249,4251],{"className":2920,"code":4250,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  experimental: {\n    normalizeComponentNames: true,\n  },\n})\n",[2890,4252,4253,4265,4273,4284,4288],{"__ignoreMap":2924},[2928,4254,4255,4257,4259,4261,4263],{"class":2930,"line":2931},[2928,4256,2942],{"class":2941},[2928,4258,3871],{"class":2941},[2928,4260,3874],{"class":2957},[2928,4262,2961],{"class":2949},[2928,4264,2964],{"class":2953},[2928,4266,4267,4269,4271],{"class":2930,"line":2938},[2928,4268,3883],{"class":2970},[2928,4270,2974],{"class":2953},[2928,4272,3033],{"class":2953},[2928,4274,4275,4278,4280,4282],{"class":2930,"line":2967},[2928,4276,4277],{"class":2970},"    normalizeComponentNames",[2928,4279,2974],{"class":2953},[2928,4281,3355],{"class":2977},[2928,4283,2981],{"class":2953},[2928,4285,4286],{"class":2930,"line":2984},[2928,4287,3383],{"class":2953},[2928,4289,4290,4292],{"class":2930,"line":2993},[2928,4291,2987],{"class":2953},[2928,4293,2990],{"class":2949},[3233,4295],{"to":4296},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fexperimental-features#normalizecomponentnames",[2885,4298,4300],{"id":4299},"build-profiling","⚡ Build Profiling",[2896,4302,4303,4304,4309,4310,3839],{},"Ever wondered where your build time goes? You can now get a detailed performance breakdown of your Nuxt builds (",[2910,4305,4308],{"href":4306,"rel":4307},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F34468",[2914],"#34468",", ",[2910,4311,4314],{"href":4312,"rel":4313},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fcli\u002Fpull\u002F1243",[2914],"nuxt\u002Fcli#1243",[2918,4316,4320],{"className":4317,"code":4318,"language":4319,"meta":2924,"style":2924},"language-bash shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","nuxt build --profile\n","bash",[2890,4321,4322],{"__ignoreMap":2924},[2928,4323,4324,4327,4330],{"class":2930,"line":2931},[2928,4325,4326],{"class":3448},"nuxt",[2928,4328,4329],{"class":3156}," build",[2928,4331,4332],{"class":3156}," --profile\n",[2896,4334,4335],{},"This produces a report showing duration, RSS delta, and heap delta for every build phase, module, and bundler plugin:",[2896,4337,4338],{},[4183,4339],{"alt":4340,"src":4341},"Build timings report printed to console","\u002Fassets\u002Fblog\u002Fbuild-profiler.png",[2896,4343,4344],{},"It also profiles individual modules and bundler plugins, making it easy to spot bottlenecks. Three output formats are written:",[4346,4347,4348,4361,4370],"ul",{},[3844,4349,4350,3248,4353,4356,4357,4360],{},[2900,4351,4352],{},"Chrome Trace",[2890,4354,4355],{},".nuxt\u002Fperf-trace.json",") – open in ",[2890,4358,4359],{},"chrome:\u002F\u002Ftracing"," or Perfetto for a visual timeline",[3844,4362,4363,3248,4366,4369],{},[2900,4364,4365],{},"JSON report",[2890,4367,4368],{},".nuxt\u002Fperf-report.json",") – machine-readable data for tracking over time",[3844,4371,4372,3248,4375,4378],{},[2900,4373,4374],{},"CPU profile",[2890,4376,4377],{},"nuxt-build.cpuprofile",") – open in Chrome DevTools or VS Code for flame graphs",[2896,4380,4381,4382,4385],{},"For even more detail, use ",[2890,4383,4384],{},"--profile=verbose"," to print timing breakdowns to the console.",[3233,4387],{"to":4388},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fbuild",[2896,4390,4391],{},"We'll be using this feature to make Nuxt even faster – and if performance is something you care about, this might be a good opportunity to contribute!",[2885,4393,4395],{"id":4394},"performance-improvements","🔥 Performance Improvements",[4346,4397,4398,4417],{},[3844,4399,4400,4403,4404,4407,4408,4411,4412,3027],{},[2900,4401,4402],{},"14,000x faster module ID parsing"," – replaced ",[2890,4405,4406],{},"new URL()"," + regex chain with a single ",[2890,4409,4410],{},"indexOf"," + slice (",[2910,4413,4416],{"href":4414,"rel":4415},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F34451",[2914],"#34451",[3844,4418,4419,4422,4423,3027],{},[2900,4420,4421],{},"Disabled NuxtLink visibility prefetching in dev"," – stops Vite from discovering and reloading deps unnecessarily during development (",[2910,4424,4427],{"href":4425,"rel":4426},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F34325",[2914],"#34325",[2885,4429,4431],{"id":4430},"︎-upgrading","⬆︎ Upgrading",[2896,4433,4434],{},"Our recommendation for upgrading is to run:",[2918,4436,4440],{"className":4437,"code":4438,"language":4439,"meta":2924,"style":2924},"language-sh shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","npx nuxt upgrade --dedupe\n","sh",[2890,4441,4442],{"__ignoreMap":2924},[2928,4443,4444,4447,4450,4453],{"class":2930,"line":2931},[2928,4445,4446],{"class":3448},"npx",[2928,4448,4449],{"class":3156}," nuxt",[2928,4451,4452],{"class":3156}," upgrade",[2928,4454,4455],{"class":3156}," --dedupe\n",[2896,4457,4458],{},"This will deduplicate your lockfile and help ensure you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.",[4460,4461,4462],"tip",{},[2896,4463,4464,4465,4469],{},"Check out our ",[2910,4466,4468],{"href":4467},"\u002Fdocs\u002Fgetting-started\u002Fupgrade","upgrade guide"," if upgrading from an older version.",[2885,4471,4473],{"id":4472},"full-release-notes","👉 Full Release Notes",[3233,4475,4479],{"to":4476,"icon":4477,"target":4478},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv4.4.0","i-simple-icons-github","_blank",[2896,4480,4481,4482,3088],{},"Read the full release notes of Nuxt ",[2890,4483,4484],{},"v4.4.0",[2896,4486,4487],{},"Thank you to all of the many contributors to this release! 💚",[4489,4490,4491],"style",{},"html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}html pre.shiki code .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .sYRBq, html code.shiki .sYRBq{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}",{"title":2924,"searchDepth":2938,"depth":2938,"links":4493},[4494,4496,4497,4499,4501,4503,4504,4506,4508,4509,4510,4512,4513,4514,4515,4516],{"id":2887,"depth":2938,"text":4495},"🏭 createUseFetch and createUseAsyncData",{"id":3238,"depth":2938,"text":3239},{"id":3270,"depth":2938,"text":4498},"💪 Typed Layout Props in definePageMeta",{"id":3480,"depth":2938,"text":4500},"🗣️ useAnnouncer Composable",{"id":3793,"depth":2938,"text":4502},"🚀 Migrate to unrouting",{"id":3822,"depth":2938,"text":3823},{"id":3930,"depth":2938,"text":4505},"🍪 refresh Option for useCookie",{"id":4048,"depth":2938,"text":4507},"♻️ useState Reset to Default",{"id":4152,"depth":2938,"text":4153},{"id":4195,"depth":2938,"text":4196},{"id":4217,"depth":2938,"text":4511},"💡 Improved optimizeDeps Hints",{"id":4237,"depth":2938,"text":4238},{"id":4299,"depth":2938,"text":4300},{"id":4394,"depth":2938,"text":4395},{"id":4430,"depth":2938,"text":4431},{"id":4472,"depth":2938,"text":4473},"Release","2026-03-12","Nuxt 4.4 brings custom useFetch\u002FuseAsyncData factories, vue-router v5, a new accessibility announcer, typed layout props, build profiling, smarter payload handling, and much more.","md","\u002Fassets\u002Fblog\u002Fv4.4.png",{},"\u002Fblog\u002Fv4-4",{"title":2874,"description":4519},"blog\u002F43.v4-4","JAN5rlHa_a1H_X4ER_OHGSFPPGxAVJJWKxM7LCnPDJ0",{"id":4528,"title":4529,"authors":4530,"body":4533,"category":4517,"date":6204,"description":6205,"draft":108,"extension":4520,"image":6206,"meta":6207,"navigation":108,"path":6208,"seo":6209,"stem":6210,"tags":6,"__hash__":6211},"blog\u002Fblog\u002F42.v4-3.md","Nuxt 4.3",[4531],{"name":2877,"avatar":4532,"to":2880},{"src":2879},{"type":2882,"value":4534,"toc":6176},[4535,4538,4542,4547,4556,4563,4568,4572,4582,4600,4609,4613,4616,4632,4750,4753,4761,4773,4777,4792,4795,4806,4877,4881,4890,4918,4922,4935,4996,5000,5017,5072,5178,5184,5190,5201,5283,5360,5368,5383,5444,5450,5454,5463,5474,5477,5498,5502,5510,5655,5658,5661,5664,5727,5731,5743,5747,5763,5772,5795,5799,5802,5901,6007,6011,6053,6057,6064,6100,6104,6106,6145,6147,6153,6155,6163,6171,6173],[2896,4536,4537],{},"Nuxt 4.3 brings powerful new features for layouts, caching, and developer experience – plus significant performance improvements under the hood.",[2885,4539,4541],{"id":4540},"some-news","📣 Some News",[4543,4544,4546],"h3",{"id":4545},"extended-v3-support","Extended v3 Support",[2896,4548,4549,4550,4555],{},"Early this month, I ",[2910,4551,4554],{"href":4552,"rel":4553},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fdiscussions\u002F33918",[2914],"opened a discussion"," to find out how the upgrade had gone from v3 to v4. I was really pleased to hear how well it had gone for most people.",[2896,4557,4558,4559,4562],{},"Having said that, we're committed to making sure no one gets left behind. And so we will ",[2900,4560,4561],{},"continue to provide security updates and critical bug fix releases"," beyond the previously announced end-of-life date of January 31, 2026, meaning Nuxt v3 will meet its end-of-life on July 31, 2026.",[4460,4564,4565],{},[2896,4566,4567],{},"As usual, today also brings a minor release for v3, with many of the same improvements backported from v4.3.",[4543,4569,4571],{"id":4570},"preparing-for-nuxt-5","Preparing for Nuxt 5",[2896,4573,4574,4575,4578,4579,3088],{},"We're closer than ever to the releases of Nuxt v5 and Nitro v3. In the coming weeks, the ",[2890,4576,4577],{},"main"," branch of the Nuxt repository will begin receiving initial commits for Nuxt 5. However, it's still ",[2900,4580,4581],{},"business as usual",[4346,4583,4584,4590],{},[3844,4585,4586,4587,4589],{},"Continue making pull requests to the ",[2890,4588,4577],{}," branch",[3844,4591,4592,4593,2892,4596,4599],{},"We'll backport changes to the ",[2890,4594,4595],{},"4.x",[2890,4597,4598],{},"3.x"," branches",[2896,4601,4602,4603,4605,4606,3088],{},"Keep an eye out on the ",[2910,4604,104],{"href":1180}," – we'll be adding details about how you can already start migrating your projects to prepare for Nuxt v4 with ",[2890,4607,4608],{},"future.compatibilityVersion: 5",[2885,4610,4612],{"id":4611},"️-route-rule-layouts","🗂️ Route Rule Layouts",[2896,4614,4615],{},"But that's enough about the future. We have a lot of good things for you today!",[2896,4617,4618,4619,4622,4623,4628,4629,4631],{},"First, you can now set layouts directly in route rules using the new ",[2890,4620,4621],{},"appLayout"," property (",[2910,4624,4627],{"href":4625,"rel":4626},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31092",[2914],"#31092","). This provides a centralized, declarative way to manage layouts across your application without scattering ",[2890,4630,678],{}," calls throughout your pages.",[2918,4633,4635],{"className":2920,"code":4634,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  routeRules: {\n    '\u002Fadmin\u002F**': { appLayout: 'admin' },\n    '\u002Fdashboard\u002F**': { appLayout: 'dashboard' },\n    '\u002Fauth\u002F**': { appLayout: 'minimal' }\n  }\n})\n",[2890,4636,4637,4649,4658,4687,4713,4740,4744],{"__ignoreMap":2924},[2928,4638,4639,4641,4643,4645,4647],{"class":2930,"line":2931},[2928,4640,2942],{"class":2941},[2928,4642,3871],{"class":2941},[2928,4644,3874],{"class":2957},[2928,4646,2961],{"class":2949},[2928,4648,2964],{"class":2953},[2928,4650,4651,4654,4656],{"class":2930,"line":2938},[2928,4652,4653],{"class":2970},"  routeRules",[2928,4655,2974],{"class":2953},[2928,4657,3033],{"class":2953},[2928,4659,4660,4663,4666,4668,4670,4672,4675,4677,4679,4682,4684],{"class":2930,"line":2967},[2928,4661,4662],{"class":2953},"    '",[2928,4664,4665],{"class":2970},"\u002Fadmin\u002F**",[2928,4667,3197],{"class":2953},[2928,4669,2974],{"class":2953},[2928,4671,3174],{"class":2953},[2928,4673,4674],{"class":2970}," appLayout",[2928,4676,2974],{"class":2953},[2928,4678,3329],{"class":2953},[2928,4680,4681],{"class":3156},"admin",[2928,4683,3197],{"class":2953},[2928,4685,4686],{"class":2953}," },\n",[2928,4688,4689,4691,4694,4696,4698,4700,4702,4704,4706,4709,4711],{"class":2930,"line":2984},[2928,4690,4662],{"class":2953},[2928,4692,4693],{"class":2970},"\u002Fdashboard\u002F**",[2928,4695,3197],{"class":2953},[2928,4697,2974],{"class":2953},[2928,4699,3174],{"class":2953},[2928,4701,4674],{"class":2970},[2928,4703,2974],{"class":2953},[2928,4705,3329],{"class":2953},[2928,4707,4708],{"class":3156},"dashboard",[2928,4710,3197],{"class":2953},[2928,4712,4686],{"class":2953},[2928,4714,4715,4717,4720,4722,4724,4726,4728,4730,4732,4735,4737],{"class":2930,"line":2993},[2928,4716,4662],{"class":2953},[2928,4718,4719],{"class":2970},"\u002Fauth\u002F**",[2928,4721,3197],{"class":2953},[2928,4723,2974],{"class":2953},[2928,4725,3174],{"class":2953},[2928,4727,4674],{"class":2970},[2928,4729,2974],{"class":2953},[2928,4731,3329],{"class":2953},[2928,4733,4734],{"class":3156},"minimal",[2928,4736,3197],{"class":2953},[2928,4738,4739],{"class":2953}," }\n",[2928,4741,4742],{"class":2930,"line":2999},[2928,4743,3113],{"class":2953},[2928,4745,4746,4748],{"class":2930,"line":3005},[2928,4747,2987],{"class":2953},[2928,4749,2990],{"class":2949},[2896,4751,4752],{},"This might be useful for:",[4346,4754,4755,4758],{},[3844,4756,4757],{},"Admin panels with a shared layout across many routes",[3844,4759,4760],{},"Marketing pages that need a different layout from the app",[4460,4762,4763],{},[2896,4764,4765,4766,3088],{},"Plus, you can pass props to layouts now! See ",[2910,4767,4769,4770,4772],{"href":4768},"#layout-props-with-setpagelayout","the ",[2890,4771,730],{}," improvements below",[2885,4774,4776],{"id":4775},"isrswr-payload-extraction","📦 ISR\u002FSWR Payload Extraction",[2896,4778,4779,4780,3248,4783,4788,4789,4791],{},"Payload extraction now works with ISR (incremental static regeneration), SWR (stale-while-revalidate) and cache ",[2890,4781,4782],{},"routeRules",[2910,4784,4787],{"href":4785,"rel":4786},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33467",[2914],"#33467","). Previously, only pre-rendered pages could generate ",[2890,4790,3829],{}," files.",[2896,4793,4794],{},"This means:",[4346,4796,4797,4800,4803],{},[3844,4798,4799],{},"Client-side navigation to ISR\u002FSWR pages can use cached payloads",[3844,4801,4802],{},"CDNs (Vercel, Netlify, Cloudflare) can cache payload files alongside HTML",[3844,4804,4805],{},"Fewer API calls during navigation – data can be prefetched and served from the cached payload",[2918,4807,4809],{"className":2920,"code":4808,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  routeRules: {\n    '\u002Fproducts\u002F**': { \n      isr: 3600, \u002F\u002F Revalidate every hour\n    }\n  }\n})\n",[2890,4810,4811,4823,4831,4847,4862,4867,4871],{"__ignoreMap":2924},[2928,4812,4813,4815,4817,4819,4821],{"class":2930,"line":2931},[2928,4814,2942],{"class":2941},[2928,4816,3871],{"class":2941},[2928,4818,3874],{"class":2957},[2928,4820,2961],{"class":2949},[2928,4822,2964],{"class":2953},[2928,4824,4825,4827,4829],{"class":2930,"line":2938},[2928,4826,4653],{"class":2970},[2928,4828,2974],{"class":2953},[2928,4830,3033],{"class":2953},[2928,4832,4833,4835,4838,4840,4842,4844],{"class":2930,"line":2967},[2928,4834,4662],{"class":2953},[2928,4836,4837],{"class":2970},"\u002Fproducts\u002F**",[2928,4839,3197],{"class":2953},[2928,4841,2974],{"class":2953},[2928,4843,3174],{"class":2953},[2928,4845,4846],{"class":2949}," \n",[2928,4848,4849,4852,4854,4857,4859],{"class":2930,"line":2984},[2928,4850,4851],{"class":2970},"      isr",[2928,4853,2974],{"class":2953},[2928,4855,4856],{"class":3988}," 3600",[2928,4858,3617],{"class":2953},[2928,4860,4861],{"class":2934}," \u002F\u002F Revalidate every hour\n",[2928,4863,4864],{"class":2930,"line":2993},[2928,4865,4866],{"class":2953},"    }\n",[2928,4868,4869],{"class":2930,"line":2999},[2928,4870,3113],{"class":2953},[2928,4872,4873,4875],{"class":2930,"line":3005},[2928,4874,2987],{"class":2953},[2928,4876,2990],{"class":2949},[2885,4878,4880],{"id":4879},"dev-mode-payload-extraction","🧹 Dev Mode Payload Extraction",[2896,4882,4883,4884,4889],{},"Related to the above, payload extraction now also works in development mode (",[2910,4885,4888],{"href":4886,"rel":4887},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F30784",[2914],"#30784","). This makes it easier to test and debug payload behavior without needing to run a production build.",[4891,4892,4893],"important",{},[2896,4894,4895,4896,4899,4900,4903,4904,4309,4907,4309,4910,4913,4914,4917],{},"Payload extraction works in dev mode with ",[2890,4897,4898],{},"nitro.static"," set to ",[2890,4901,4902],{},"true",", or for individual pages which have ",[2890,4905,4906],{},"isr",[2890,4908,4909],{},"swr",[2890,4911,4912],{},"prerender"," or ",[2890,4915,4916],{},"cache"," route rules.",[2885,4919,4921],{"id":4920},"disable-modules-from-layers","🚫 Disable Modules from Layers",[2896,4923,4924,4925,4930,4931,4934],{},"When extending Nuxt layers, you can now disable specific modules that you don't need (",[2910,4926,4929],{"href":4927,"rel":4928},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33883",[2914],"#33883","). Just pass ",[2890,4932,4933],{},"false"," to the module's options:",[2918,4936,4938],{"className":2920,"code":4937,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  extends: ['..\u002Fshared-layer'],\n  \u002F\u002F disable @nuxt\u002Fimage from layer\n  image: false,\n})\n",[2890,4939,4940,4952,4974,4979,4990],{"__ignoreMap":2924},[2928,4941,4942,4944,4946,4948,4950],{"class":2930,"line":2931},[2928,4943,2942],{"class":2941},[2928,4945,3871],{"class":2941},[2928,4947,3874],{"class":2957},[2928,4949,2961],{"class":2949},[2928,4951,2964],{"class":2953},[2928,4953,4954,4957,4959,4962,4964,4967,4969,4972],{"class":2930,"line":2938},[2928,4955,4956],{"class":2970},"  extends",[2928,4958,2974],{"class":2953},[2928,4960,4961],{"class":2949}," [",[2928,4963,3197],{"class":2953},[2928,4965,4966],{"class":3156},"..\u002Fshared-layer",[2928,4968,3197],{"class":2953},[2928,4970,4971],{"class":2949},"]",[2928,4973,2981],{"class":2953},[2928,4975,4976],{"class":2930,"line":2967},[2928,4977,4978],{"class":2934},"  \u002F\u002F disable @nuxt\u002Fimage from layer\n",[2928,4980,4981,4984,4986,4988],{"class":2930,"line":2984},[2928,4982,4983],{"class":2970},"  image",[2928,4985,2974],{"class":2953},[2928,4987,2978],{"class":2977},[2928,4989,2981],{"class":2953},[2928,4991,4992,4994],{"class":2930,"line":2993},[2928,4993,2987],{"class":2953},[2928,4995,2990],{"class":2949},[2885,4997,4999],{"id":4998},"️-route-groups-in-page-meta","🏷️ Route Groups in Page Meta",[2896,5001,5002,5006,5007,5010,5011,5016],{},[2910,5003,5005],{"href":5004},"\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fapp\u002Fpages#route-groups","Route groups"," (folders wrapped in parentheses like ",[2890,5008,5009],{},"(protected)\u002F",") are now exposed in page meta (",[2910,5012,5015],{"href":5013,"rel":5014},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33460",[2914],"#33460","). This makes it easy to check which groups a route belongs to in middleware or anywhere you have access to the route.",[2918,5018,5021],{"className":3129,"code":5019,"filename":5020,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup lang=\"ts\">\n\u002F\u002F This page's meta will include: { groups: ['protected'] }\nuseRoute().meta.groups\n\u003C\u002Fscript>\n","pages\u002F(protected)\u002Fdashboard.vue",[2890,5022,5023,5043,5048,5064],{"__ignoreMap":2924},[2928,5024,5025,5027,5029,5031,5033,5035,5037,5039,5041],{"class":2930,"line":2931},[2928,5026,3139],{"class":2953},[2928,5028,3142],{"class":2970},[2928,5030,3145],{"class":2945},[2928,5032,3148],{"class":2945},[2928,5034,2954],{"class":2953},[2928,5036,3153],{"class":2953},[2928,5038,2923],{"class":3156},[2928,5040,3153],{"class":2953},[2928,5042,3161],{"class":2953},[2928,5044,5045],{"class":2930,"line":2938},[2928,5046,5047],{"class":2934},"\u002F\u002F This page's meta will include: { groups: ['protected'] }\n",[2928,5049,5050,5052,5054,5056,5059,5061],{"class":2930,"line":2967},[2928,5051,591],{"class":2957},[2928,5053,3647],{"class":2949},[2928,5055,3088],{"class":2953},[2928,5057,5058],{"class":2949},"meta",[2928,5060,3088],{"class":2953},[2928,5062,5063],{"class":2949},"groups\n",[2928,5065,5066,5068,5070],{"class":2930,"line":2984},[2928,5067,3209],{"class":2953},[2928,5069,3142],{"class":2970},[2928,5071,3161],{"class":2953},[2918,5073,5076],{"className":2920,"code":5074,"filename":5075,"language":2923,"meta":2924,"style":2924},"export default defineNuxtRouteMiddleware((to) => {\n  if (to.meta.groups?.includes('protected') && !isAuthenticated()) {\n    return navigateTo('\u002Flogin')\n  }\n})\n","middleware\u002Fauth.ts",[2890,5077,5078,5100,5149,5168,5172],{"__ignoreMap":2924},[2928,5079,5080,5082,5084,5087,5089,5091,5094,5096,5098],{"class":2930,"line":2931},[2928,5081,2942],{"class":2941},[2928,5083,3871],{"class":2941},[2928,5085,5086],{"class":2957}," defineNuxtRouteMiddleware",[2928,5088,2961],{"class":2949},[2928,5090,2961],{"class":2953},[2928,5092,5093],{"class":3023},"to",[2928,5095,3027],{"class":2953},[2928,5097,3030],{"class":2945},[2928,5099,3033],{"class":2953},[2928,5101,5102,5105,5107,5109,5111,5113,5115,5118,5121,5124,5126,5128,5131,5133,5135,5138,5141,5144,5147],{"class":2930,"line":2938},[2928,5103,5104],{"class":2941},"  if",[2928,5106,3248],{"class":2970},[2928,5108,5093],{"class":2949},[2928,5110,3088],{"class":2953},[2928,5112,5058],{"class":2949},[2928,5114,3088],{"class":2953},[2928,5116,5117],{"class":2949},"groups",[2928,5119,5120],{"class":2953},"?.",[2928,5122,5123],{"class":2957},"includes",[2928,5125,2961],{"class":2970},[2928,5127,3197],{"class":2953},[2928,5129,5130],{"class":3156},"protected",[2928,5132,3197],{"class":2953},[2928,5134,3737],{"class":2970},[2928,5136,5137],{"class":2953},"&&",[2928,5139,5140],{"class":2953}," !",[2928,5142,5143],{"class":2957},"isAuthenticated",[2928,5145,5146],{"class":2970},"()) ",[2928,5148,2964],{"class":2953},[2928,5150,5151,5154,5157,5159,5161,5164,5166],{"class":2930,"line":2967},[2928,5152,5153],{"class":2941},"    return",[2928,5155,5156],{"class":2957}," navigateTo",[2928,5158,2961],{"class":2970},[2928,5160,3197],{"class":2953},[2928,5162,5163],{"class":3156},"\u002Flogin",[2928,5165,3197],{"class":2953},[2928,5167,2990],{"class":2970},[2928,5169,5170],{"class":2930,"line":2984},[2928,5171,3113],{"class":2953},[2928,5173,5174,5176],{"class":2930,"line":2993},[2928,5175,2987],{"class":2953},[2928,5177,2990],{"class":2949},[2896,5179,5180,5181,5183],{},"This provides a clean, convention-based approach to route-level authorization without needing to add ",[2890,5182,678],{}," to every protected page.",[2885,5185,5187,5188],{"id":5186},"layout-props-with-setpagelayout","🎨 Layout Props with ",[2890,5189,730],{},[2896,5191,5192,5193,5195,5196,3839],{},"The ",[2890,5194,730],{}," composable now accepts a second parameter to pass props to your layout (",[2910,5197,5200],{"href":5198,"rel":5199},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33805",[2914],"#33805",[2918,5202,5205],{"className":2920,"code":5203,"filename":5204,"language":2923,"meta":2924,"style":2924},"export default defineNuxtRouteMiddleware((to) => {\n  setPageLayout('admin', {\n    sidebar: true,\n    theme: 'dark'\n  })\n})\n","middleware\u002Fadmin.ts",[2890,5206,5207,5227,5244,5255,5270,5277],{"__ignoreMap":2924},[2928,5208,5209,5211,5213,5215,5217,5219,5221,5223,5225],{"class":2930,"line":2931},[2928,5210,2942],{"class":2941},[2928,5212,3871],{"class":2941},[2928,5214,5086],{"class":2957},[2928,5216,2961],{"class":2949},[2928,5218,2961],{"class":2953},[2928,5220,5093],{"class":3023},[2928,5222,3027],{"class":2953},[2928,5224,3030],{"class":2945},[2928,5226,3033],{"class":2953},[2928,5228,5229,5232,5234,5236,5238,5240,5242],{"class":2930,"line":2938},[2928,5230,5231],{"class":2957},"  setPageLayout",[2928,5233,2961],{"class":2970},[2928,5235,3197],{"class":2953},[2928,5237,4681],{"class":3156},[2928,5239,3197],{"class":2953},[2928,5241,3617],{"class":2953},[2928,5243,3033],{"class":2953},[2928,5245,5246,5249,5251,5253],{"class":2930,"line":2967},[2928,5247,5248],{"class":2970},"    sidebar",[2928,5250,2974],{"class":2953},[2928,5252,3355],{"class":2977},[2928,5254,2981],{"class":2953},[2928,5256,5257,5260,5262,5264,5267],{"class":2930,"line":2984},[2928,5258,5259],{"class":2970},"    theme",[2928,5261,2974],{"class":2953},[2928,5263,3329],{"class":2953},[2928,5265,5266],{"class":3156},"dark",[2928,5268,5269],{"class":2953},"'\n",[2928,5271,5272,5275],{"class":2930,"line":2993},[2928,5273,5274],{"class":2953},"  }",[2928,5276,2990],{"class":2970},[2928,5278,5279,5281],{"class":2930,"line":2999},[2928,5280,2987],{"class":2953},[2928,5282,2990],{"class":2949},[2918,5284,5287],{"className":3129,"code":5285,"filename":5286,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{\n  sidebar?: boolean\n  theme?: 'light' | 'dark'\n}>()\n\u003C\u002Fscript>\n","layouts\u002Fadmin.vue",[2890,5288,5289,5309,5315,5323,5346,5352],{"__ignoreMap":2924},[2928,5290,5291,5293,5295,5297,5299,5301,5303,5305,5307],{"class":2930,"line":2931},[2928,5292,3139],{"class":2953},[2928,5294,3142],{"class":2970},[2928,5296,3145],{"class":2945},[2928,5298,3148],{"class":2945},[2928,5300,2954],{"class":2953},[2928,5302,3153],{"class":2953},[2928,5304,2923],{"class":3156},[2928,5306,3153],{"class":2953},[2928,5308,3161],{"class":2953},[2928,5310,5311,5313],{"class":2930,"line":2938},[2928,5312,3434],{"class":2957},[2928,5314,3437],{"class":2953},[2928,5316,5317,5319,5321],{"class":2930,"line":2967},[2928,5318,3442],{"class":2970},[2928,5320,3445],{"class":2953},[2928,5322,3449],{"class":3448},[2928,5324,5325,5328,5330,5332,5335,5337,5340,5342,5344],{"class":2930,"line":2984},[2928,5326,5327],{"class":2970},"  theme",[2928,5329,3445],{"class":2953},[2928,5331,3329],{"class":2953},[2928,5333,5334],{"class":3156},"light",[2928,5336,3197],{"class":2953},[2928,5338,5339],{"class":2953}," |",[2928,5341,3329],{"class":2953},[2928,5343,5266],{"class":3156},[2928,5345,5269],{"class":2953},[2928,5347,5348,5350],{"class":2930,"line":2993},[2928,5349,3464],{"class":2953},[2928,5351,3051],{"class":2949},[2928,5353,5354,5356,5358],{"class":2930,"line":2999},[2928,5355,3209],{"class":2953},[2928,5357,3142],{"class":2970},[2928,5359,3161],{"class":2953},[2885,5361,5363,5364,5367],{"id":5362},"server-alias","🔧 ",[2890,5365,5366],{},"#server"," Alias",[2896,5369,3846,5370,5372,5373,5378,5379,5382],{},[2890,5371,5366],{}," alias provides clean imports within your server directory (",[2910,5374,5377],{"href":5375,"rel":5376},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33870",[2914],"#33870","), similar to how ",[2890,5380,5381],{},"#shared"," works:",[2918,5384,5387],{"className":2920,"code":5385,"filename":5386,"language":2923,"meta":2924,"style":2924},"\u002F\u002F Before: relative path hell\nimport { helper } from '..\u002F..\u002F..\u002F..\u002Futils\u002Fhelper'\n\n\u002F\u002F After: clean and predictable\nimport { helper } from '#server\u002Futils\u002Fhelper'\n","server\u002Fapi\u002Fusers\u002F[id]\u002Fprofile.ts",[2890,5388,5389,5394,5416,5420,5425],{"__ignoreMap":2924},[2928,5390,5391],{"class":2930,"line":2931},[2928,5392,5393],{"class":2934},"\u002F\u002F Before: relative path hell\n",[2928,5395,5396,5399,5401,5404,5406,5409,5411,5414],{"class":2930,"line":2938},[2928,5397,5398],{"class":2941},"import",[2928,5400,3174],{"class":2953},[2928,5402,5403],{"class":2949}," helper",[2928,5405,3702],{"class":2953},[2928,5407,5408],{"class":2941}," from",[2928,5410,3329],{"class":2953},[2928,5412,5413],{"class":3156},"..\u002F..\u002F..\u002F..\u002Futils\u002Fhelper",[2928,5415,5269],{"class":2953},[2928,5417,5418],{"class":2930,"line":2967},[2928,5419,2996],{"emptyLinePlaceholder":1196},[2928,5421,5422],{"class":2930,"line":2984},[2928,5423,5424],{"class":2934},"\u002F\u002F After: clean and predictable\n",[2928,5426,5427,5429,5431,5433,5435,5437,5439,5442],{"class":2930,"line":2993},[2928,5428,5398],{"class":2941},[2928,5430,3174],{"class":2953},[2928,5432,5403],{"class":2949},[2928,5434,3702],{"class":2953},[2928,5436,5408],{"class":2941},[2928,5438,3329],{"class":2953},[2928,5440,5441],{"class":3156},"#server\u002Futils\u002Fhelper",[2928,5443,5269],{"class":2953},[2896,5445,5446,5447,5449],{},"The alias includes import protection – you can't accidentally import ",[2890,5448,5366],{}," code from client or shared contexts.",[2885,5451,5453],{"id":5452},"draggable-error-overlay","🪟 Draggable Error Overlay",[2896,5455,5456,5457,5462],{},"The development error overlay introduced in Nuxt 4.2 is now draggable and can be minimized (",[2910,5458,5461],{"href":5459,"rel":5460},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33695",[2914],"#33695","). You can:",[4346,5464,5465,5468,5471],{},[3844,5466,5467],{},"Drag it to any corner of the screen (it snaps to edges)",[3844,5469,5470],{},"Minimize it to a small pill button when you want to keep working",[3844,5472,5473],{},"Your position and minimized state persist across page reloads",[2896,5475,5476],{},"This is a quality-of-life improvement when you're iterating on fixes and don't want the overlay blocking your view.",[5478,5479,5485,5490,5494],"video",{":controls":4902,"className":5480,"poster":5484},[5481,5482,5483],"rounded","dark:border","dark:border-gray-700","https:\u002F\u002Fres.cloudinary.com\u002Fdchoja2nb\u002Fvideo\u002Fupload\u002Fv1769103044\u002Fnuxt_4-3_error_caqkhk.jpg",[5486,5487],"source",{"src":5488,"type":5489},"https:\u002F\u002Fres.cloudinary.com\u002Fdchoja2nb\u002Fvideo\u002Fupload\u002Fv1769103044\u002Fnuxt_4-3_error_caqkhk.webm","video\u002Fwebm",[5486,5491],{"src":5492,"type":5493},"https:\u002F\u002Fres.cloudinary.com\u002Fdchoja2nb\u002Fvideo\u002Fupload\u002Fv1769103044\u002Fnuxt_4-3_error_caqkhk.mp4","video\u002Fmp4",[5486,5495],{"src":5496,"type":5497},"https:\u002F\u002Fres.cloudinary.com\u002Fdchoja2nb\u002Fvideo\u002Fupload\u002Fv1769103044\u002Fnuxt_4-3_error_caqkhk.ogg","video\u002Fogg",[2885,5499,5501],{"id":5500},"️-async-plugin-constructors","⚙️ Async Plugin Constructors",[2896,5503,5504,5505,3839],{},"Module authors can now use async functions when adding build plugins (",[2910,5506,5509],{"href":5507,"rel":5508},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33619",[2914],"#33619",[2918,5511,5514],{"className":2920,"code":5512,"filename":5513,"language":2923,"meta":2924,"style":2924},"export default defineNuxtModule({\n  async setup() {\n    \u002F\u002F Lazy load only when actually needed\n    addVitePlugin(() => import('my-cool-plugin').then(r => r.default()))\n    \n    \u002F\u002F No need to load webpack plugin if using Vite\n    addWebpackPlugin(() => import('my-cool-plugin\u002Fwebpack').then(r => r.default()))\n  }\n})\n","modules\u002Fmy-module.ts",[2890,5515,5516,5529,5540,5545,5593,5598,5603,5645,5649],{"__ignoreMap":2924},[2928,5517,5518,5520,5522,5525,5527],{"class":2930,"line":2931},[2928,5519,2942],{"class":2941},[2928,5521,3871],{"class":2941},[2928,5523,5524],{"class":2957}," defineNuxtModule",[2928,5526,2961],{"class":2949},[2928,5528,2964],{"class":2953},[2928,5530,5531,5534,5536,5538],{"class":2930,"line":2938},[2928,5532,5533],{"class":2945},"  async",[2928,5535,3145],{"class":2970},[2928,5537,3647],{"class":2953},[2928,5539,3033],{"class":2953},[2928,5541,5542],{"class":2930,"line":2967},[2928,5543,5544],{"class":2934},"    \u002F\u002F Lazy load only when actually needed\n",[2928,5546,5547,5550,5552,5554,5556,5559,5561,5563,5566,5568,5570,5572,5575,5577,5580,5582,5585,5587,5590],{"class":2930,"line":2984},[2928,5548,5549],{"class":2957},"    addVitePlugin",[2928,5551,2961],{"class":2970},[2928,5553,3647],{"class":2953},[2928,5555,3030],{"class":2945},[2928,5557,5558],{"class":2953}," import",[2928,5560,2961],{"class":2970},[2928,5562,3197],{"class":2953},[2928,5564,5565],{"class":3156},"my-cool-plugin",[2928,5567,3197],{"class":2953},[2928,5569,3027],{"class":2970},[2928,5571,3088],{"class":2953},[2928,5573,5574],{"class":2957},"then",[2928,5576,2961],{"class":2970},[2928,5578,5579],{"class":3023},"r",[2928,5581,3030],{"class":2945},[2928,5583,5584],{"class":2949}," r",[2928,5586,3088],{"class":2953},[2928,5588,5589],{"class":2957},"default",[2928,5591,5592],{"class":2970},"()))\n",[2928,5594,5595],{"class":2930,"line":2993},[2928,5596,5597],{"class":2970},"    \n",[2928,5599,5600],{"class":2930,"line":2999},[2928,5601,5602],{"class":2934},"    \u002F\u002F No need to load webpack plugin if using Vite\n",[2928,5604,5605,5608,5610,5612,5614,5616,5618,5620,5623,5625,5627,5629,5631,5633,5635,5637,5639,5641,5643],{"class":2930,"line":3005},[2928,5606,5607],{"class":2957},"    addWebpackPlugin",[2928,5609,2961],{"class":2970},[2928,5611,3647],{"class":2953},[2928,5613,3030],{"class":2945},[2928,5615,5558],{"class":2953},[2928,5617,2961],{"class":2970},[2928,5619,3197],{"class":2953},[2928,5621,5622],{"class":3156},"my-cool-plugin\u002Fwebpack",[2928,5624,3197],{"class":2953},[2928,5626,3027],{"class":2970},[2928,5628,3088],{"class":2953},[2928,5630,5574],{"class":2957},[2928,5632,2961],{"class":2970},[2928,5634,5579],{"class":3023},[2928,5636,3030],{"class":2945},[2928,5638,5584],{"class":2949},[2928,5640,3088],{"class":2953},[2928,5642,5589],{"class":2957},[2928,5644,5592],{"class":2970},[2928,5646,5647],{"class":2930,"line":3036},[2928,5648,3113],{"class":2953},[2928,5650,5651,5653],{"class":2930,"line":3054},[2928,5652,2987],{"class":2953},[2928,5654,2990],{"class":2949},[2896,5656,5657],{},"This enables true lazy loading of build plugins, avoiding unnecessary code loading when plugins aren't needed.",[2885,5659,5660],{"id":4394},"🚀 Performance Improvements",[2896,5662,5663],{},"This release includes several performance optimizations for faster builds:",[4346,5665,5666,5677,5697,5708],{},[3844,5667,5668,5671,5672,3027],{},[2900,5669,5670],{},"Hook filters"," - Internal plugins now use filters to avoid running hooks unnecessarily (",[2910,5673,5676],{"href":5674,"rel":5675},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33898",[2914],"#33898",[3844,5678,5679,5682,5683,5686,5687,4309,5692,3027],{},[2900,5680,5681],{},"SSR styles optimization"," - The ",[2890,5684,5685],{},"nuxt:ssr-styles"," plugin is now significantly faster (",[2910,5688,5691],{"href":5689,"rel":5690},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33862",[2914],"#33862",[2910,5693,5696],{"href":5694,"rel":5695},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33865",[2914],"#33865",[3844,5698,5699,5702,5703,3027],{},[2900,5700,5701],{},"Layer alias transform"," - Skipped when using Vite (it handles this natively) (",[2910,5704,5707],{"href":5705,"rel":5706},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33864",[2914],"#33864",[3844,5709,5710,5713,5714,5717,5718,5721,5722,3027],{},[2900,5711,5712],{},"Route rules compilation"," - Route rules are now compiled into a client chunk using ",[2890,5715,5716],{},"rou3",", removing the need for ",[2890,5719,5720],{},"radix3"," in the client bundle and eliminating app manifest fetches (",[2910,5723,5726],{"href":5724,"rel":5725},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33920",[2914],"#33920",[2885,5728,5730],{"id":5729},"inline-styles-for-webpackrspack","🎨 Inline Styles for Webpack\u002FRspack",[2896,5732,5192,5733,5736,5737,5742],{},[2890,5734,5735],{},"inlineStyles"," feature now works with webpack and rspack builders (",[2910,5738,5741],{"href":5739,"rel":5740},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33966",[2914],"#33966","), not just Vite. This enables critical CSS inlining for better Core Web Vitals regardless of your bundler choice.",[2885,5744,5746],{"id":5745},"️-deprecations","⚠️ Deprecations",[4543,5748,5750,5753,5754,4309,5757,5753,5760],{"id":5749},"statuscode-status-statusmessage-statustext",[2890,5751,5752],{},"statusCode"," → ",[2890,5755,5756],{},"status",[2890,5758,5759],{},"statusMessage",[2890,5761,5762],{},"statusText",[2896,5764,5765,5766,5771],{},"In preparation for Nitro v3 and H3 v2, we're moving to use Web API naming conventions (",[2910,5767,5770],{"href":5768,"rel":5769},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33912",[2914],"#33912","). The old properties still work but are deprecated in advance of v5:",[2918,5773,5777],{"className":5774,"code":5775,"language":5776,"meta":2924,"style":2924},"language-diff shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","- throw createError({ statusCode: 404, statusMessage: 'Not Found' })\n+ throw createError({ status: 404, statusText: 'Not Found' })\n","diff",[2890,5778,5779,5787],{"__ignoreMap":2924},[2928,5780,5781,5784],{"class":2930,"line":2931},[2928,5782,5783],{"class":2953},"-",[2928,5785,5786],{"class":2970}," throw createError({ statusCode: 404, statusMessage: 'Not Found' })\n",[2928,5788,5789,5792],{"class":2930,"line":2938},[2928,5790,5791],{"class":2953},"+",[2928,5793,5794],{"class":3156}," throw createError({ status: 404, statusText: 'Not Found' })\n",[2885,5796,5798],{"id":5797},"bug-fixes","🐛 Bug Fixes",[2896,5800,5801],{},"Notable fixes in this release:",[4346,5803,5804,5821,5829,5840,5853,5861,5869,5877,5889],{},[3844,5805,5806,5807,5810,5811,4309,5816,3027],{},"Fixed head component deduplication using ",[2890,5808,5809],{},"key"," attribute (",[2910,5812,5815],{"href":5813,"rel":5814},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33958",[2914],"#33958",[2910,5817,5820],{"href":5818,"rel":5819},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33963",[2914],"#33963",[3844,5822,5823,5824,3027],{},"Fixed async data properties not being reactive in Options API (",[2910,5825,5828],{"href":5826,"rel":5827},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F34119",[2914],"#34119",[3844,5830,5831,5832,5834,5835,3027],{},"Fixed ",[2890,5833,519],{}," unsafe number parsing during decode (",[2910,5836,5839],{"href":5837,"rel":5838},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F34007",[2914],"#34007",[3844,5841,5831,5842,5844,5845,5847,5848,3027],{},[2890,5843,3560],{}," not re-rendering when nested ",[2890,5846,3550],{}," has layouts disabled (",[2910,5849,5852],{"href":5850,"rel":5851},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F34078",[2914],"#34078",[3844,5854,5855,5856,3027],{},"Fixed client-side pathname decoding for non-ASCII route aliases (",[2910,5857,5860],{"href":5858,"rel":5859},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F34043",[2914],"#34043",[3844,5862,5863,5864,3027],{},"Fixed suspense remounting when navigating after pending state (",[2910,5865,5868],{"href":5866,"rel":5867},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33991",[2914],"#33991",[3844,5870,5871,5872,3027],{},"Fixed clipboard copy in error overlay (",[2910,5873,5876],{"href":5874,"rel":5875},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33873",[2914],"#33873",[3844,5878,5879,5880,5883,5884,3027],{},"Enabled ",[2890,5881,5882],{},"allowArbitraryExtensions"," by default in TypeScript config (",[2910,5885,5888],{"href":5886,"rel":5887},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F34084",[2914],"#34084",[3844,5890,5891,5892,5895,5896,3027],{},"Added ",[2890,5893,5894],{},"noUncheckedIndexedAccess"," to server tsconfig for safer typing (",[2910,5897,5900],{"href":5898,"rel":5899},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33985",[2914],"#33985",[4891,5902,5903,5914,5917,6004],{},[2896,5904,5905,5906,5908,5909,2916],{},"Enabling ",[2890,5907,5894],{}," in the Nitro server TypeScript config improves type safety but may surface new type errors in your server code. This change was necessary because Nuxt's app context performs type checks on server routes (",[2910,5910,5913],{"href":5911,"rel":5912},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fguide\u002Fmodules\u002Frecipes-advanced#known-limitations",[2914],"learn more",[2896,5915,5916],{},"While we recommend keeping this enabled for better type safety, you can disable it if needed:",[2918,5918,5920],{"className":2920,"code":5919,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  nitro: {\n    typescript: {\n      tsConfig: {\n        compilerOptions: {\n          noUncheckedIndexedAccess: false\n        }\n      }\n    }\n  }\n})\n",[2890,5921,5922,5934,5943,5952,5961,5970,5980,5985,5990,5994,5998],{"__ignoreMap":2924},[2928,5923,5924,5926,5928,5930,5932],{"class":2930,"line":2931},[2928,5925,2942],{"class":2941},[2928,5927,3871],{"class":2941},[2928,5929,3874],{"class":2957},[2928,5931,2961],{"class":2949},[2928,5933,2964],{"class":2953},[2928,5935,5936,5939,5941],{"class":2930,"line":2938},[2928,5937,5938],{"class":2970},"  nitro",[2928,5940,2974],{"class":2953},[2928,5942,3033],{"class":2953},[2928,5944,5945,5948,5950],{"class":2930,"line":2967},[2928,5946,5947],{"class":2970},"    typescript",[2928,5949,2974],{"class":2953},[2928,5951,3033],{"class":2953},[2928,5953,5954,5957,5959],{"class":2930,"line":2984},[2928,5955,5956],{"class":2970},"      tsConfig",[2928,5958,2974],{"class":2953},[2928,5960,3033],{"class":2953},[2928,5962,5963,5966,5968],{"class":2930,"line":2993},[2928,5964,5965],{"class":2970},"        compilerOptions",[2928,5967,2974],{"class":2953},[2928,5969,3033],{"class":2953},[2928,5971,5972,5975,5977],{"class":2930,"line":2999},[2928,5973,5974],{"class":2970},"          noUncheckedIndexedAccess",[2928,5976,2974],{"class":2953},[2928,5978,5979],{"class":2977}," false\n",[2928,5981,5982],{"class":2930,"line":3005},[2928,5983,5984],{"class":2953},"        }\n",[2928,5986,5987],{"class":2930,"line":3036},[2928,5988,5989],{"class":2953},"      }\n",[2928,5991,5992],{"class":2930,"line":3054},[2928,5993,4866],{"class":2953},[2928,5995,5996],{"class":2930,"line":3059},[2928,5997,3113],{"class":2953},[2928,5999,6000,6002],{"class":2930,"line":3067},[2928,6001,2987],{"class":2953},[2928,6003,2990],{"class":2949},[2896,6005,6006],{},"Note that disabling this may allow type errors to slip through that could cause runtime issues with indexed access.",[2885,6008,6010],{"id":6009},"documentation","📚 Documentation",[4346,6012,6013,6021,6029,6037,6045],{},[3844,6014,6015,6016,3027],{},"Improved module author guides with clearer structure (",[2910,6017,6020],{"href":6018,"rel":6019},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33803",[2914],"#33803",[3844,6022,6023,6024,3027],{},"Added MCP setup instructions for Claude Desktop (",[2910,6025,6028],{"href":6026,"rel":6027},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33914",[2914],"#33914",[3844,6030,6031,6032,3027],{},"Added layers directory documentation (",[2910,6033,6036],{"href":6034,"rel":6035},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33967",[2914],"#33967",[3844,6038,6039,6040,3027],{},"Added Deno package manager examples (",[2910,6041,6044],{"href":6042,"rel":6043},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F34070",[2914],"#34070",[3844,6046,6047,6048,3027],{},"Clarified type-checking context limitations for server routes (",[2910,6049,6052],{"href":6050,"rel":6051},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33964",[2914],"#33964",[2885,6054,6056],{"id":6055},"nuxt-3210","🎉 Nuxt 3.21.0",[2896,6058,6059,6060,6063],{},"Alongside v4.3.0, we're releasing ",[2900,6061,6062],{},"Nuxt v3.21.0"," with many of the same improvements backported to the 3.x branch. This release includes:",[4346,6065,6066,6077,6083,6091],{},[3844,6067,6068,6071,6072,4309,6074,6076],{},[2900,6069,6070],{},"All the same features",": Route rule layouts, ISR payload extraction, layout props with ",[2890,6073,730],{},[2890,6075,5366],{}," alias, draggable error overlay, and more",[3844,6078,6079,6082],{},[2900,6080,6081],{},"All performance improvements",": SSR styles optimization, hook filters, and route rules compilation",[3844,6084,6085,6088,6089],{},[2900,6086,6087],{},"Module disabling",": Disable layer modules by setting options to ",[2890,6090,4933],{},[3844,6092,6093,6096,6097,6099],{},[2900,6094,6095],{},"Critical bug fixes",": Async data reactivity in Options API, ",[2890,6098,519],{}," number parsing, head component deduplication, and more",[2885,6101,6103],{"id":6102},"upgrading","✅ Upgrading",[2896,6105,4434],{},[2918,6107,6109],{"className":4437,"code":6108,"language":4439,"meta":2924,"style":2924},"npx nuxt upgrade --dedupe\n\n# or, if you are upgrading to v3.21\nnpx nuxt@latest upgrade --dedupe --channel=v3\n",[2890,6110,6111,6121,6125,6130],{"__ignoreMap":2924},[2928,6112,6113,6115,6117,6119],{"class":2930,"line":2931},[2928,6114,4446],{"class":3448},[2928,6116,4449],{"class":3156},[2928,6118,4452],{"class":3156},[2928,6120,4455],{"class":3156},[2928,6122,6123],{"class":2930,"line":2938},[2928,6124,2996],{"emptyLinePlaceholder":1196},[2928,6126,6127],{"class":2930,"line":2967},[2928,6128,6129],{"class":2934},"# or, if you are upgrading to v3.21\n",[2928,6131,6132,6134,6137,6139,6142],{"class":2930,"line":2984},[2928,6133,4446],{"class":3448},[2928,6135,6136],{"class":3156}," nuxt@latest",[2928,6138,4452],{"class":3156},[2928,6140,6141],{"class":3156}," --dedupe",[2928,6143,6144],{"class":3156}," --channel=v3\n",[2896,6146,4458],{},[4460,6148,6149],{},[2896,6150,4464,6151,4469],{},[2910,6152,4468],{"href":4467},[2885,6154,4473],{"id":4472},[3233,6156,6158],{"icon":4477,"target":4478,"to":6157},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv4.3.0",[2896,6159,4481,6160,3088],{},[2890,6161,6162],{},"v4.3.0",[3233,6164,6166],{"icon":4477,"target":4478,"to":6165},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv3.21.0",[2896,6167,4481,6168,3088],{},[2890,6169,6170],{},"v3.21.0",[2896,6172,4487],{},[4489,6174,6175],{},"html pre.shiki code .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sYRBq, html code.shiki .sYRBq{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}",{"title":2924,"searchDepth":2938,"depth":2938,"links":6177},[6178,6182,6183,6184,6185,6186,6187,6189,6191,6192,6193,6194,6195,6199,6200,6201,6202,6203],{"id":4540,"depth":2938,"text":4541,"children":6179},[6180,6181],{"id":4545,"depth":2967,"text":4546},{"id":4570,"depth":2967,"text":4571},{"id":4611,"depth":2938,"text":4612},{"id":4775,"depth":2938,"text":4776},{"id":4879,"depth":2938,"text":4880},{"id":4920,"depth":2938,"text":4921},{"id":4998,"depth":2938,"text":4999},{"id":5186,"depth":2938,"text":6188},"🎨 Layout Props with setPageLayout",{"id":5362,"depth":2938,"text":6190},"🔧 #server Alias",{"id":5452,"depth":2938,"text":5453},{"id":5500,"depth":2938,"text":5501},{"id":4394,"depth":2938,"text":5660},{"id":5729,"depth":2938,"text":5730},{"id":5745,"depth":2938,"text":5746,"children":6196},[6197],{"id":5749,"depth":2967,"text":6198},"statusCode → status, statusMessage → statusText",{"id":5797,"depth":2938,"text":5798},{"id":6009,"depth":2938,"text":6010},{"id":6055,"depth":2938,"text":6056},{"id":6102,"depth":2938,"text":6103},{"id":4472,"depth":2938,"text":4473},"2026-01-22","Nuxt 4.3 is out – route rule layouts, ISR payload extraction, draggable error overlay, and more!","\u002Fassets\u002Fblog\u002Fv4.3.png",{},"\u002Fblog\u002Fv4-3",{"title":4529,"description":6205},"blog\u002F42.v4-3","LYwQcngCFsO1cUeBNIJaz0bKhQorponwuvSjtkGbx0M",{"id":6213,"title":6214,"authors":6215,"body":6226,"category":8580,"date":8581,"description":8582,"draft":108,"extension":4520,"image":8583,"meta":8584,"navigation":108,"path":8585,"seo":8586,"stem":8587,"tags":6,"__hash__":8588},"blog\u002Fblog\u002F40.building-nuxt-mcp.md","Building an MCP Server for Nuxt",[6216,6221],{"name":6217,"avatar":6218,"to":6220},"Hugo Richard",{"src":6219},"https:\u002F\u002Fgithub.com\u002Fhugorcd.png","https:\u002F\u002Fx.com\u002Fhugorcd",{"name":6222,"avatar":6223,"to":6225},"Sébastien Chopin",{"src":6224},"https:\u002F\u002Fgithub.com\u002FAtinux.png","https:\u002F\u002Fx.com\u002FAtinux",{"type":2882,"value":6227,"toc":8556},[6228,6237,6246,6250,6258,6261,6281,6285,6292,6324,6338,6342,6349,6357,6360,6364,6368,6371,6441,6448,6452,6459,6911,6914,6948,6957,6961,6964,6971,7044,7047,7455,7458,7462,7465,8026,8029,8033,8036,8071,8075,8086,8131,8143,8147,8150,8154,8176,8180,8183,8249,8253,8259,8420,8426,8430,8433,8496,8503,8507,8510,8514,8517,8524,8528,8534,8537,8553],[2896,6229,6230,6231,6236],{},"AI assistants are becoming an increasingly important part of the developer experience. To help them provide accurate, up-to-date information about Nuxt, we built an MCP server that exposes our documentation, blog posts, and deployment guides in a structured way. Here's how we did it with the ",[2910,6232,6235],{"href":6233,"rel":6234},"https:\u002F\u002Fmcp-toolkit.nuxt.dev",[2914],"Nuxt MCP Toolkit",", and how you can build your own.",[6238,6239,6240],"callout",{"icon":309},[2896,6241,6242,6243,3088],{},"Want to test the Nuxt MCP server? Jump to the ",[2910,6244,6245],{"href":1324},"Nuxt MCP Server Documentation",[2885,6247,6249],{"id":6248},"what-is-mcp-and-why-did-we-build-it","What is MCP and why did we build it?",[2896,6251,5192,6252,6257],{},[2910,6253,6256],{"href":6254,"rel":6255},"https:\u002F\u002Fmodelcontextprotocol.io\u002F",[2914],"Model Context Protocol (MCP)"," is an open standard that enables AI assistants to securely access data and tools. Think of it as an API specifically designed for AI assistants: rather than returning HTML or generic JSON, it provides structured, semantic data that LLMs can easily understand and use.",[2896,6259,6260],{},"MCP defines three main primitives:",[4346,6262,6263,6269,6275],{},[3844,6264,6265,6268],{},[2900,6266,6267],{},"Resources",": Allow servers to share data that provides context to language models, such as files, database schemas, or application-specific information. Each resource is uniquely identified by a URI.",[3844,6270,6271,6274],{},[2900,6272,6273],{},"Tools",": Enable AI models to interact with external systems and perform operations (like searching or API calls)",[3844,6276,6277,6280],{},[2900,6278,6279],{},"Prompts",": Reusable prompt templates with arguments that can be invoked by users",[4543,6282,6284],{"id":6283},"why-mcp-over-rag","Why MCP over RAG?",[2896,6286,6287,6288,6291],{},"We've observed that AI assistants using MCP servers provide ",[2900,6289,6290],{},"significantly better responses"," than traditional RAG (Retrieval-Augmented Generation) approaches:",[4346,6293,6294,6300,6306,6312,6318],{},[3844,6295,6296,6299],{},[2900,6297,6298],{},"Structured data in, structured data out",": Tools accept well-defined parameters and return typed data that prevents hallucinations",[3844,6301,6302,6305],{},[2900,6303,6304],{},"Composable tools",": AI assistants can chain tools together, using the output of one tool as input for another (e.g., search for a topic, then fetch the full content)",[3844,6307,6308,6311],{},[2900,6309,6310],{},"Faster and more accurate",": No need to process and chunk large documents at query time",[3844,6313,6314,6317],{},[2900,6315,6316],{},"Always up-to-date",": Direct access to your content layer without reindexing",[3844,6319,6320,6323],{},[2900,6321,6322],{},"Context-aware navigation",": The AI can intelligently navigate relationships between content",[2896,6325,6326,6327,2892,6332,6337],{},"Both ",[2910,6328,6331],{"href":6329,"rel":6330},"https:\u002F\u002Fnuxt.com\u002Fmcp",[2914],"Nuxt",[2910,6333,6336],{"href":6334,"rel":6335},"https:\u002F\u002Fui.nuxt.com\u002Fmcp",[2914],"Nuxt UI"," now have MCP servers with similar architectures, making it easier for AI assistants to help developers with these frameworks.",[2885,6339,6341],{"id":6340},"technical-architecture","Technical architecture",[2896,6343,6344,6345,6348],{},"Our MCP server is built directly into nuxt.com using the ",[2910,6346,6235],{"href":6233,"rel":6347},[2914]," module. The module provides automatic discovery of tools, resources, and prompts from your server directory:",[2918,6350,6355],{"className":6351,"code":6353,"language":6354},[6352],"language-text","nuxt.com\u002F\n├── server\u002F\n│   └── mcp\u002F\n│       ├── tools\u002F\n│       │   ├── list-documentation-pages.ts\n│       │   ├── get-documentation-page.ts\n│       │   └── ...\n│       ├── resources\u002F\n│       │   ├── nuxt-documentation-pages.ts\n│       │   └── ...\n│       └── prompts\u002F\n│           ├── find-documentation-for-topic.ts\n│           └── ...\n└── nuxt.config.ts\n","text",[2890,6356,6353],{"__ignoreMap":2924},[2896,6358,6359],{},"The architecture is straightforward: you define your tools, resources, and prompts as individual files, and the module automatically registers them and exposes an HTTP endpoint for MCP clients to connect. No manual server setup, no transport configuration, just create files in the right directories and they're ready to use.",[2885,6361,6363],{"id":6362},"implementation-deep-dive","Implementation deep dive",[4543,6365,6367],{"id":6366},"module-setup","Module setup",[2896,6369,6370],{},"Getting started is as simple as adding the module to your Nuxt config:",[2918,6372,6374],{"className":2920,"code":6373,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  modules: ['@nuxtjs\u002Fmcp-toolkit'],\n  mcp: {\n    name: 'Nuxt',\n  }\n})\n",[2890,6375,6376,6388,6408,6417,6431,6435],{"__ignoreMap":2924},[2928,6377,6378,6380,6382,6384,6386],{"class":2930,"line":2931},[2928,6379,2942],{"class":2941},[2928,6381,3871],{"class":2941},[2928,6383,3874],{"class":2957},[2928,6385,2961],{"class":2949},[2928,6387,2964],{"class":2953},[2928,6389,6390,6393,6395,6397,6399,6402,6404,6406],{"class":2930,"line":2938},[2928,6391,6392],{"class":2970},"  modules",[2928,6394,2974],{"class":2953},[2928,6396,4961],{"class":2949},[2928,6398,3197],{"class":2953},[2928,6400,6401],{"class":3156},"@nuxtjs\u002Fmcp-toolkit",[2928,6403,3197],{"class":2953},[2928,6405,4971],{"class":2949},[2928,6407,2981],{"class":2953},[2928,6409,6410,6413,6415],{"class":2930,"line":2967},[2928,6411,6412],{"class":2970},"  mcp",[2928,6414,2974],{"class":2953},[2928,6416,3033],{"class":2953},[2928,6418,6419,6421,6423,6425,6427,6429],{"class":2930,"line":2984},[2928,6420,3324],{"class":2970},[2928,6422,2974],{"class":2953},[2928,6424,3329],{"class":2953},[2928,6426,6331],{"class":3156},[2928,6428,3197],{"class":2953},[2928,6430,2981],{"class":2953},[2928,6432,6433],{"class":2930,"line":2993},[2928,6434,3113],{"class":2953},[2928,6436,6437,6439],{"class":2930,"line":2999},[2928,6438,2987],{"class":2953},[2928,6440,2990],{"class":2949},[2896,6442,6443,6444,6447],{},"That's it. The module will automatically scan your ",[2890,6445,6446],{},"server\u002Fmcp\u002F"," directory and register everything it finds.",[4543,6449,6451],{"id":6450},"tools-operations-for-ai-models","Tools: Operations for AI models",[2896,6453,6454,6455,6458],{},"Tools enable language models to interact with external systems by accepting parameters and performing operations. Here's how we implemented our ",[2890,6456,6457],{},"list_documentation_pages"," tool:",[2918,6460,6463],{"className":2920,"code":6461,"filename":6462,"language":2923,"meta":2924,"style":2924},"import { z } from 'zod'\nimport { queryCollection } from '@nuxt\u002Fcontent\u002Fserver'\n\nexport default defineMcpTool({\n  description: `Lists all available Nuxt documentation pages with their categories and basic information.\n\nWHEN TO USE: Use this tool when you need to EXPLORE or SEARCH for documentation about a topic but don't know the exact page path.\n\nWHEN NOT TO USE: If you already know the specific page path, use get_documentation_page directly instead.`,\n  inputSchema: {\n    version: z.enum(['3.x', '4.x', 'all']).optional().default('4.x').describe('Documentation version to fetch')\n  },\n  cache: '1h',\n  async handler({ version }) {\n    const event = useEvent()\n\n    const allDocs = await queryCollection(event, 'docsv4')\n      .select('title', 'path', 'description')\n      .all()\n\n    return jsonResult(allDocs.map(doc => ({\n      title: doc.title,\n      path: doc.path,\n      description: doc.description,\n      url: `https:\u002F\u002Fnuxt.com${doc.path}`\n    })))\n  }\n})\n","server\u002Fmcp\u002Ftools\u002Flist-documentation-pages.ts",[2890,6464,6465,6485,6505,6509,6522,6535,6539,6544,6548,6558,6567,6647,6651,6667,6685,6701,6706,6736,6774,6783,6788,6817,6833,6849,6865,6890,6899,6904],{"__ignoreMap":2924},[2928,6466,6467,6469,6471,6474,6476,6478,6480,6483],{"class":2930,"line":2931},[2928,6468,5398],{"class":2941},[2928,6470,3174],{"class":2953},[2928,6472,6473],{"class":2949}," z",[2928,6475,3702],{"class":2953},[2928,6477,5408],{"class":2941},[2928,6479,3329],{"class":2953},[2928,6481,6482],{"class":3156},"zod",[2928,6484,5269],{"class":2953},[2928,6486,6487,6489,6491,6494,6496,6498,6500,6503],{"class":2930,"line":2938},[2928,6488,5398],{"class":2941},[2928,6490,3174],{"class":2953},[2928,6492,6493],{"class":2949}," queryCollection",[2928,6495,3702],{"class":2953},[2928,6497,5408],{"class":2941},[2928,6499,3329],{"class":2953},[2928,6501,6502],{"class":3156},"@nuxt\u002Fcontent\u002Fserver",[2928,6504,5269],{"class":2953},[2928,6506,6507],{"class":2930,"line":2967},[2928,6508,2996],{"emptyLinePlaceholder":1196},[2928,6510,6511,6513,6515,6518,6520],{"class":2930,"line":2984},[2928,6512,2942],{"class":2941},[2928,6514,3871],{"class":2941},[2928,6516,6517],{"class":2957}," defineMcpTool",[2928,6519,2961],{"class":2949},[2928,6521,2964],{"class":2953},[2928,6523,6524,6527,6529,6532],{"class":2930,"line":2993},[2928,6525,6526],{"class":2970},"  description",[2928,6528,2974],{"class":2953},[2928,6530,6531],{"class":2953}," `",[2928,6533,6534],{"class":3156},"Lists all available Nuxt documentation pages with their categories and basic information.\n",[2928,6536,6537],{"class":2930,"line":2999},[2928,6538,2996],{"emptyLinePlaceholder":1196},[2928,6540,6541],{"class":2930,"line":3005},[2928,6542,6543],{"class":3156},"WHEN TO USE: Use this tool when you need to EXPLORE or SEARCH for documentation about a topic but don't know the exact page path.\n",[2928,6545,6546],{"class":2930,"line":3036},[2928,6547,2996],{"emptyLinePlaceholder":1196},[2928,6549,6550,6553,6556],{"class":2930,"line":3054},[2928,6551,6552],{"class":3156},"WHEN NOT TO USE: If you already know the specific page path, use get_documentation_page directly instead.",[2928,6554,6555],{"class":2953},"`",[2928,6557,2981],{"class":2953},[2928,6559,6560,6563,6565],{"class":2930,"line":3059},[2928,6561,6562],{"class":2970},"  inputSchema",[2928,6564,2974],{"class":2953},[2928,6566,3033],{"class":2953},[2928,6568,6569,6572,6574,6576,6578,6581,6584,6586,6588,6590,6592,6594,6596,6598,6600,6602,6605,6607,6610,6612,6615,6617,6619,6621,6623,6625,6627,6629,6631,6633,6636,6638,6640,6643,6645],{"class":2930,"line":3067},[2928,6570,6571],{"class":2970},"    version",[2928,6573,2974],{"class":2953},[2928,6575,6473],{"class":2949},[2928,6577,3088],{"class":2953},[2928,6579,6580],{"class":2957},"enum",[2928,6582,6583],{"class":2949},"([",[2928,6585,3197],{"class":2953},[2928,6587,4598],{"class":3156},[2928,6589,3197],{"class":2953},[2928,6591,3617],{"class":2953},[2928,6593,3329],{"class":2953},[2928,6595,4595],{"class":3156},[2928,6597,3197],{"class":2953},[2928,6599,3617],{"class":2953},[2928,6601,3329],{"class":2953},[2928,6603,6604],{"class":3156},"all",[2928,6606,3197],{"class":2953},[2928,6608,6609],{"class":2949},"])",[2928,6611,3088],{"class":2953},[2928,6613,6614],{"class":2957},"optional",[2928,6616,3647],{"class":2949},[2928,6618,3088],{"class":2953},[2928,6620,5589],{"class":2957},[2928,6622,2961],{"class":2949},[2928,6624,3197],{"class":2953},[2928,6626,4595],{"class":3156},[2928,6628,3197],{"class":2953},[2928,6630,3027],{"class":2949},[2928,6632,3088],{"class":2953},[2928,6634,6635],{"class":2957},"describe",[2928,6637,2961],{"class":2949},[2928,6639,3197],{"class":2953},[2928,6641,6642],{"class":3156},"Documentation version to fetch",[2928,6644,3197],{"class":2953},[2928,6646,2990],{"class":2949},[2928,6648,6649],{"class":2930,"line":3077},[2928,6650,3383],{"class":2953},[2928,6652,6653,6656,6658,6660,6663,6665],{"class":2930,"line":3110},[2928,6654,6655],{"class":2970},"  cache",[2928,6657,2974],{"class":2953},[2928,6659,3329],{"class":2953},[2928,6661,6662],{"class":3156},"1h",[2928,6664,3197],{"class":2953},[2928,6666,2981],{"class":2953},[2928,6668,6669,6671,6674,6677,6680,6683],{"class":2930,"line":3116},[2928,6670,5533],{"class":2945},[2928,6672,6673],{"class":2970}," handler",[2928,6675,6676],{"class":2953},"({",[2928,6678,6679],{"class":3023}," version",[2928,6681,6682],{"class":2953}," })",[2928,6684,3033],{"class":2953},[2928,6686,6688,6691,6694,6696,6699],{"class":2930,"line":6687},15,[2928,6689,6690],{"class":2945},"    const",[2928,6692,6693],{"class":2949}," event",[2928,6695,3045],{"class":2953},[2928,6697,6698],{"class":2957}," useEvent",[2928,6700,3051],{"class":2970},[2928,6702,6704],{"class":2930,"line":6703},16,[2928,6705,2996],{"emptyLinePlaceholder":1196},[2928,6707,6709,6711,6714,6716,6718,6720,6722,6725,6727,6729,6732,6734],{"class":2930,"line":6708},17,[2928,6710,6690],{"class":2945},[2928,6712,6713],{"class":2949}," allDocs",[2928,6715,3045],{"class":2953},[2928,6717,3189],{"class":2941},[2928,6719,6493],{"class":2957},[2928,6721,2961],{"class":2970},[2928,6723,6724],{"class":2949},"event",[2928,6726,3617],{"class":2953},[2928,6728,3329],{"class":2953},[2928,6730,6731],{"class":3156},"docsv4",[2928,6733,3197],{"class":2953},[2928,6735,2990],{"class":2970},[2928,6737,6739,6742,6745,6747,6749,6752,6754,6756,6758,6761,6763,6765,6767,6770,6772],{"class":2930,"line":6738},18,[2928,6740,6741],{"class":2953},"      .",[2928,6743,6744],{"class":2957},"select",[2928,6746,2961],{"class":2970},[2928,6748,3197],{"class":2953},[2928,6750,6751],{"class":3156},"title",[2928,6753,3197],{"class":2953},[2928,6755,3617],{"class":2953},[2928,6757,3329],{"class":2953},[2928,6759,6760],{"class":3156},"path",[2928,6762,3197],{"class":2953},[2928,6764,3617],{"class":2953},[2928,6766,3329],{"class":2953},[2928,6768,6769],{"class":3156},"description",[2928,6771,3197],{"class":2953},[2928,6773,2990],{"class":2970},[2928,6775,6777,6779,6781],{"class":2930,"line":6776},19,[2928,6778,6741],{"class":2953},[2928,6780,6604],{"class":2957},[2928,6782,3051],{"class":2970},[2928,6784,6786],{"class":2930,"line":6785},20,[2928,6787,2996],{"emptyLinePlaceholder":1196},[2928,6789,6791,6793,6796,6798,6801,6803,6806,6808,6811,6813,6815],{"class":2930,"line":6790},21,[2928,6792,5153],{"class":2941},[2928,6794,6795],{"class":2957}," jsonResult",[2928,6797,2961],{"class":2970},[2928,6799,6800],{"class":2949},"allDocs",[2928,6802,3088],{"class":2953},[2928,6804,6805],{"class":2957},"map",[2928,6807,2961],{"class":2970},[2928,6809,6810],{"class":3023},"doc",[2928,6812,3030],{"class":2945},[2928,6814,3248],{"class":2970},[2928,6816,2964],{"class":2953},[2928,6818,6820,6822,6824,6827,6829,6831],{"class":2930,"line":6819},22,[2928,6821,3362],{"class":2970},[2928,6823,2974],{"class":2953},[2928,6825,6826],{"class":2949}," doc",[2928,6828,3088],{"class":2953},[2928,6830,6751],{"class":2949},[2928,6832,2981],{"class":2953},[2928,6834,6836,6839,6841,6843,6845,6847],{"class":2930,"line":6835},23,[2928,6837,6838],{"class":2970},"      path",[2928,6840,2974],{"class":2953},[2928,6842,6826],{"class":2949},[2928,6844,3088],{"class":2953},[2928,6846,6760],{"class":2949},[2928,6848,2981],{"class":2953},[2928,6850,6852,6855,6857,6859,6861,6863],{"class":2930,"line":6851},24,[2928,6853,6854],{"class":2970},"      description",[2928,6856,2974],{"class":2953},[2928,6858,6826],{"class":2949},[2928,6860,3088],{"class":2953},[2928,6862,6769],{"class":2949},[2928,6864,2981],{"class":2953},[2928,6866,6868,6871,6873,6875,6878,6881,6883,6885,6887],{"class":2930,"line":6867},25,[2928,6869,6870],{"class":2970},"      url",[2928,6872,2974],{"class":2953},[2928,6874,6531],{"class":2953},[2928,6876,6877],{"class":3156},"https:\u002F\u002Fnuxt.com",[2928,6879,6880],{"class":2953},"${",[2928,6882,6810],{"class":2949},[2928,6884,3088],{"class":2953},[2928,6886,6760],{"class":2949},[2928,6888,6889],{"class":2953},"}`\n",[2928,6891,6893,6896],{"class":2930,"line":6892},26,[2928,6894,6895],{"class":2953},"    }",[2928,6897,6898],{"class":2970},")))\n",[2928,6900,6902],{"class":2930,"line":6901},27,[2928,6903,3113],{"class":2953},[2928,6905,6907,6909],{"class":2930,"line":6906},28,[2928,6908,2987],{"class":2953},[2928,6910,2990],{"class":2949},[2896,6912,6913],{},"Notice a few key things:",[4346,6915,6916,6924,6932,6940],{},[3844,6917,6918,6923],{},[2900,6919,6920],{},[2890,6921,6922],{},"defineMcpTool"," is auto-imported, no need to import it manually",[3844,6925,6926,6931],{},[2900,6927,6928],{},[2890,6929,6930],{},"inputSchema"," uses Zod for parameter validation",[3844,6933,6934,6939],{},[2900,6935,6936],{},[2890,6937,6938],{},"cache: '1h'"," enables built-in response caching",[3844,6941,6942,6947],{},[2900,6943,6944],{},[2890,6945,6946],{},"jsonResult()"," is a helper that formats the response correctly",[2896,6949,6950,6951,6954,6955,2916],{},"The tool name is automatically derived from the filename (",[2890,6952,6953],{},"list-documentation-pages.ts"," becomes ",[2890,6956,6457],{},[4543,6958,6960],{"id":6959},"resources-context-for-language-models","Resources: Context for language models",[2896,6962,6963],{},"Resources allow servers to share data that provides context to language models, such as files, database schemas, or application-specific information. Each resource is uniquely identified by a URI.",[2896,6965,6966,6967,6970],{},"The simplest way to expose a file is using the ",[2890,6968,6969],{},"file"," property, which automatically handles URI generation, MIME type detection, and file reading:",[2918,6972,6975],{"className":2920,"code":6973,"filename":6974,"language":2923,"meta":2924,"style":2924},"export default defineMcpResource({\n  name: 'readme',\n  description: 'Project README file',\n  file: 'README.md' \u002F\u002F Relative to project root\n})\n","server\u002Fmcp\u002Fresources\u002Freadme.ts",[2890,6976,6977,6990,7006,7021,7038],{"__ignoreMap":2924},[2928,6978,6979,6981,6983,6986,6988],{"class":2930,"line":2931},[2928,6980,2942],{"class":2941},[2928,6982,3871],{"class":2941},[2928,6984,6985],{"class":2957}," defineMcpResource",[2928,6987,2961],{"class":2949},[2928,6989,2964],{"class":2953},[2928,6991,6992,6995,6997,6999,7002,7004],{"class":2930,"line":2938},[2928,6993,6994],{"class":2970},"  name",[2928,6996,2974],{"class":2953},[2928,6998,3329],{"class":2953},[2928,7000,7001],{"class":3156},"readme",[2928,7003,3197],{"class":2953},[2928,7005,2981],{"class":2953},[2928,7007,7008,7010,7012,7014,7017,7019],{"class":2930,"line":2967},[2928,7009,6526],{"class":2970},[2928,7011,2974],{"class":2953},[2928,7013,3329],{"class":2953},[2928,7015,7016],{"class":3156},"Project README file",[2928,7018,3197],{"class":2953},[2928,7020,2981],{"class":2953},[2928,7022,7023,7026,7028,7030,7033,7035],{"class":2930,"line":2984},[2928,7024,7025],{"class":2970},"  file",[2928,7027,2974],{"class":2953},[2928,7029,3329],{"class":2953},[2928,7031,7032],{"class":3156},"README.md",[2928,7034,3197],{"class":2953},[2928,7036,7037],{"class":2934}," \u002F\u002F Relative to project root\n",[2928,7039,7040,7042],{"class":2930,"line":2993},[2928,7041,2987],{"class":2953},[2928,7043,2990],{"class":2949},[2896,7045,7046],{},"For dynamic resources, you can use a custom handler:",[2918,7048,7051],{"className":2920,"code":7049,"filename":7050,"language":2923,"meta":2924,"style":2924},"import { queryCollection } from '@nuxt\u002Fcontent\u002Fserver'\n\nexport default defineMcpResource({\n  uri: 'resource:\u002F\u002Fnuxt-com\u002Fdocumentation-pages',\n  description: 'Complete list of available Nuxt documentation pages (defaults to v4.x)',\n  cache: '1h',\n  async handler(uri: URL) {\n    const event = useEvent()\n\n    const allDocs = await queryCollection(event, 'docsv4')\n      .select('title', 'path', 'description')\n      .all()\n\n    const result = allDocs.map(doc => ({\n      title: doc.title,\n      path: doc.path,\n      description: doc.description,\n      version: '4.x',\n      url: `https:\u002F\u002Fnuxt.com${doc.path}`\n    }))\n\n    return {\n      contents: [{\n        uri: uri.href,\n        mimeType: 'application\u002Fjson',\n        text: JSON.stringify(result, null, 2)\n      }]\n    }\n  }\n})\n","server\u002Fmcp\u002Fresources\u002Fnuxt-documentation-pages.ts",[2890,7052,7053,7071,7075,7087,7103,7118,7132,7152,7164,7168,7194,7226,7234,7238,7263,7277,7291,7305,7320,7340,7347,7351,7357,7368,7385,7401,7431,7439,7443,7448],{"__ignoreMap":2924},[2928,7054,7055,7057,7059,7061,7063,7065,7067,7069],{"class":2930,"line":2931},[2928,7056,5398],{"class":2941},[2928,7058,3174],{"class":2953},[2928,7060,6493],{"class":2949},[2928,7062,3702],{"class":2953},[2928,7064,5408],{"class":2941},[2928,7066,3329],{"class":2953},[2928,7068,6502],{"class":3156},[2928,7070,5269],{"class":2953},[2928,7072,7073],{"class":2930,"line":2938},[2928,7074,2996],{"emptyLinePlaceholder":1196},[2928,7076,7077,7079,7081,7083,7085],{"class":2930,"line":2967},[2928,7078,2942],{"class":2941},[2928,7080,3871],{"class":2941},[2928,7082,6985],{"class":2957},[2928,7084,2961],{"class":2949},[2928,7086,2964],{"class":2953},[2928,7088,7089,7092,7094,7096,7099,7101],{"class":2930,"line":2984},[2928,7090,7091],{"class":2970},"  uri",[2928,7093,2974],{"class":2953},[2928,7095,3329],{"class":2953},[2928,7097,7098],{"class":3156},"resource:\u002F\u002Fnuxt-com\u002Fdocumentation-pages",[2928,7100,3197],{"class":2953},[2928,7102,2981],{"class":2953},[2928,7104,7105,7107,7109,7111,7114,7116],{"class":2930,"line":2993},[2928,7106,6526],{"class":2970},[2928,7108,2974],{"class":2953},[2928,7110,3329],{"class":2953},[2928,7112,7113],{"class":3156},"Complete list of available Nuxt documentation pages (defaults to v4.x)",[2928,7115,3197],{"class":2953},[2928,7117,2981],{"class":2953},[2928,7119,7120,7122,7124,7126,7128,7130],{"class":2930,"line":2999},[2928,7121,6655],{"class":2970},[2928,7123,2974],{"class":2953},[2928,7125,3329],{"class":2953},[2928,7127,6662],{"class":3156},[2928,7129,3197],{"class":2953},[2928,7131,2981],{"class":2953},[2928,7133,7134,7136,7138,7140,7143,7145,7148,7150],{"class":2930,"line":3005},[2928,7135,5533],{"class":2945},[2928,7137,6673],{"class":2970},[2928,7139,2961],{"class":2953},[2928,7141,7142],{"class":3023},"uri",[2928,7144,2974],{"class":2953},[2928,7146,7147],{"class":3448}," URL",[2928,7149,3027],{"class":2953},[2928,7151,3033],{"class":2953},[2928,7153,7154,7156,7158,7160,7162],{"class":2930,"line":3036},[2928,7155,6690],{"class":2945},[2928,7157,6693],{"class":2949},[2928,7159,3045],{"class":2953},[2928,7161,6698],{"class":2957},[2928,7163,3051],{"class":2970},[2928,7165,7166],{"class":2930,"line":3054},[2928,7167,2996],{"emptyLinePlaceholder":1196},[2928,7169,7170,7172,7174,7176,7178,7180,7182,7184,7186,7188,7190,7192],{"class":2930,"line":3059},[2928,7171,6690],{"class":2945},[2928,7173,6713],{"class":2949},[2928,7175,3045],{"class":2953},[2928,7177,3189],{"class":2941},[2928,7179,6493],{"class":2957},[2928,7181,2961],{"class":2970},[2928,7183,6724],{"class":2949},[2928,7185,3617],{"class":2953},[2928,7187,3329],{"class":2953},[2928,7189,6731],{"class":3156},[2928,7191,3197],{"class":2953},[2928,7193,2990],{"class":2970},[2928,7195,7196,7198,7200,7202,7204,7206,7208,7210,7212,7214,7216,7218,7220,7222,7224],{"class":2930,"line":3067},[2928,7197,6741],{"class":2953},[2928,7199,6744],{"class":2957},[2928,7201,2961],{"class":2970},[2928,7203,3197],{"class":2953},[2928,7205,6751],{"class":3156},[2928,7207,3197],{"class":2953},[2928,7209,3617],{"class":2953},[2928,7211,3329],{"class":2953},[2928,7213,6760],{"class":3156},[2928,7215,3197],{"class":2953},[2928,7217,3617],{"class":2953},[2928,7219,3329],{"class":2953},[2928,7221,6769],{"class":3156},[2928,7223,3197],{"class":2953},[2928,7225,2990],{"class":2970},[2928,7227,7228,7230,7232],{"class":2930,"line":3077},[2928,7229,6741],{"class":2953},[2928,7231,6604],{"class":2957},[2928,7233,3051],{"class":2970},[2928,7235,7236],{"class":2930,"line":3110},[2928,7237,2996],{"emptyLinePlaceholder":1196},[2928,7239,7240,7242,7245,7247,7249,7251,7253,7255,7257,7259,7261],{"class":2930,"line":3116},[2928,7241,6690],{"class":2945},[2928,7243,7244],{"class":2949}," result",[2928,7246,3045],{"class":2953},[2928,7248,6713],{"class":2949},[2928,7250,3088],{"class":2953},[2928,7252,6805],{"class":2957},[2928,7254,2961],{"class":2970},[2928,7256,6810],{"class":3023},[2928,7258,3030],{"class":2945},[2928,7260,3248],{"class":2970},[2928,7262,2964],{"class":2953},[2928,7264,7265,7267,7269,7271,7273,7275],{"class":2930,"line":6687},[2928,7266,3362],{"class":2970},[2928,7268,2974],{"class":2953},[2928,7270,6826],{"class":2949},[2928,7272,3088],{"class":2953},[2928,7274,6751],{"class":2949},[2928,7276,2981],{"class":2953},[2928,7278,7279,7281,7283,7285,7287,7289],{"class":2930,"line":6703},[2928,7280,6838],{"class":2970},[2928,7282,2974],{"class":2953},[2928,7284,6826],{"class":2949},[2928,7286,3088],{"class":2953},[2928,7288,6760],{"class":2949},[2928,7290,2981],{"class":2953},[2928,7292,7293,7295,7297,7299,7301,7303],{"class":2930,"line":6708},[2928,7294,6854],{"class":2970},[2928,7296,2974],{"class":2953},[2928,7298,6826],{"class":2949},[2928,7300,3088],{"class":2953},[2928,7302,6769],{"class":2949},[2928,7304,2981],{"class":2953},[2928,7306,7307,7310,7312,7314,7316,7318],{"class":2930,"line":6738},[2928,7308,7309],{"class":2970},"      version",[2928,7311,2974],{"class":2953},[2928,7313,3329],{"class":2953},[2928,7315,4595],{"class":3156},[2928,7317,3197],{"class":2953},[2928,7319,2981],{"class":2953},[2928,7321,7322,7324,7326,7328,7330,7332,7334,7336,7338],{"class":2930,"line":6776},[2928,7323,6870],{"class":2970},[2928,7325,2974],{"class":2953},[2928,7327,6531],{"class":2953},[2928,7329,6877],{"class":3156},[2928,7331,6880],{"class":2953},[2928,7333,6810],{"class":2949},[2928,7335,3088],{"class":2953},[2928,7337,6760],{"class":2949},[2928,7339,6889],{"class":2953},[2928,7341,7342,7344],{"class":2930,"line":6785},[2928,7343,6895],{"class":2953},[2928,7345,7346],{"class":2970},"))\n",[2928,7348,7349],{"class":2930,"line":6790},[2928,7350,2996],{"emptyLinePlaceholder":1196},[2928,7352,7353,7355],{"class":2930,"line":6819},[2928,7354,5153],{"class":2941},[2928,7356,3033],{"class":2953},[2928,7358,7359,7362,7364,7366],{"class":2930,"line":6835},[2928,7360,7361],{"class":2970},"      contents",[2928,7363,2974],{"class":2953},[2928,7365,4961],{"class":2970},[2928,7367,2964],{"class":2953},[2928,7369,7370,7373,7375,7378,7380,7383],{"class":2930,"line":6851},[2928,7371,7372],{"class":2970},"        uri",[2928,7374,2974],{"class":2953},[2928,7376,7377],{"class":2949}," uri",[2928,7379,3088],{"class":2953},[2928,7381,7382],{"class":2949},"href",[2928,7384,2981],{"class":2953},[2928,7386,7387,7390,7392,7394,7397,7399],{"class":2930,"line":6867},[2928,7388,7389],{"class":2970},"        mimeType",[2928,7391,2974],{"class":2953},[2928,7393,3329],{"class":2953},[2928,7395,7396],{"class":3156},"application\u002Fjson",[2928,7398,3197],{"class":2953},[2928,7400,2981],{"class":2953},[2928,7402,7403,7406,7408,7411,7413,7416,7418,7421,7423,7426,7429],{"class":2930,"line":6892},[2928,7404,7405],{"class":2970},"        text",[2928,7407,2974],{"class":2953},[2928,7409,7410],{"class":2949}," JSON",[2928,7412,3088],{"class":2953},[2928,7414,7415],{"class":2957},"stringify",[2928,7417,2961],{"class":2970},[2928,7419,7420],{"class":2949},"result",[2928,7422,3617],{"class":2953},[2928,7424,7425],{"class":2953}," null,",[2928,7427,7428],{"class":3988}," 2",[2928,7430,2990],{"class":2970},[2928,7432,7433,7436],{"class":2930,"line":6901},[2928,7434,7435],{"class":2953},"      }",[2928,7437,7438],{"class":2970},"]\n",[2928,7440,7441],{"class":2930,"line":6906},[2928,7442,4866],{"class":2953},[2928,7444,7446],{"class":2930,"line":7445},29,[2928,7447,3113],{"class":2953},[2928,7449,7451,7453],{"class":2930,"line":7450},30,[2928,7452,2987],{"class":2953},[2928,7454,2990],{"class":2949},[2896,7456,7457],{},"Unlike tools, which are model-controlled, resources are application-driven, the host application determines how to incorporate them based on user needs, such as through UI elements for explicit selection or automatic context inclusion.",[4543,7459,7461],{"id":7460},"prompts-reusable-templates","Prompts: Reusable templates",[2896,7463,7464],{},"Prompts are reusable templates with arguments that users can invoke. They return a conversation format that guides the AI through specific workflows:",[2918,7466,7469],{"className":2920,"code":7467,"filename":7468,"language":2923,"meta":2924,"style":2924},"import { z } from 'zod'\nimport { queryCollection } from '@nuxt\u002Fcontent\u002Fserver'\n\nexport default defineMcpPrompt({\n  description: 'Find the best Nuxt documentation for a specific topic or feature',\n  inputSchema: {\n    topic: z.string().describe('Describe what you want to learn about'),\n    version: z.enum(['3.x', '4.x']).optional().describe('Documentation version to search')\n  },\n  async handler({ topic, version = '4.x' }) {\n    const event = useEvent()\n    const docsVersion = version === '4.x' ? 'docsv4' : 'docsv3'\n\n    const allDocs = await queryCollection(event, docsVersion)\n      .select('title', 'path', 'description')\n      .all()\n\n    const allPages = allDocs?.map(doc => ({\n      title: doc.title,\n      path: doc.path,\n      description: doc.description,\n      url: `https:\u002F\u002Fnuxt.com${doc.path}`\n    })) || []\n\n    return {\n      messages: [{\n        role: 'user' as const,\n        content: {\n          type: 'text' as const,\n          text: `Help me find the best Nuxt documentation for this topic: \"${topic}\". Here are all available documentation pages: ${JSON.stringify(allPages, null, 2)}`\n        }\n      }]\n    }\n  }\n})\n","server\u002Fmcp\u002Fprompts\u002Ffind-documentation-for-topic.ts",[2890,7470,7471,7489,7507,7511,7524,7539,7547,7580,7631,7635,7662,7674,7713,7717,7739,7771,7779,7783,7808,7822,7836,7850,7870,7883,7887,7893,7904,7925,7934,7953,7997,8002,8009,8014,8019],{"__ignoreMap":2924},[2928,7472,7473,7475,7477,7479,7481,7483,7485,7487],{"class":2930,"line":2931},[2928,7474,5398],{"class":2941},[2928,7476,3174],{"class":2953},[2928,7478,6473],{"class":2949},[2928,7480,3702],{"class":2953},[2928,7482,5408],{"class":2941},[2928,7484,3329],{"class":2953},[2928,7486,6482],{"class":3156},[2928,7488,5269],{"class":2953},[2928,7490,7491,7493,7495,7497,7499,7501,7503,7505],{"class":2930,"line":2938},[2928,7492,5398],{"class":2941},[2928,7494,3174],{"class":2953},[2928,7496,6493],{"class":2949},[2928,7498,3702],{"class":2953},[2928,7500,5408],{"class":2941},[2928,7502,3329],{"class":2953},[2928,7504,6502],{"class":3156},[2928,7506,5269],{"class":2953},[2928,7508,7509],{"class":2930,"line":2967},[2928,7510,2996],{"emptyLinePlaceholder":1196},[2928,7512,7513,7515,7517,7520,7522],{"class":2930,"line":2984},[2928,7514,2942],{"class":2941},[2928,7516,3871],{"class":2941},[2928,7518,7519],{"class":2957}," defineMcpPrompt",[2928,7521,2961],{"class":2949},[2928,7523,2964],{"class":2953},[2928,7525,7526,7528,7530,7532,7535,7537],{"class":2930,"line":2993},[2928,7527,6526],{"class":2970},[2928,7529,2974],{"class":2953},[2928,7531,3329],{"class":2953},[2928,7533,7534],{"class":3156},"Find the best Nuxt documentation for a specific topic or feature",[2928,7536,3197],{"class":2953},[2928,7538,2981],{"class":2953},[2928,7540,7541,7543,7545],{"class":2930,"line":2999},[2928,7542,6562],{"class":2970},[2928,7544,2974],{"class":2953},[2928,7546,3033],{"class":2953},[2928,7548,7549,7552,7554,7556,7558,7561,7563,7565,7567,7569,7571,7574,7576,7578],{"class":2930,"line":3005},[2928,7550,7551],{"class":2970},"    topic",[2928,7553,2974],{"class":2953},[2928,7555,6473],{"class":2949},[2928,7557,3088],{"class":2953},[2928,7559,7560],{"class":2957},"string",[2928,7562,3647],{"class":2949},[2928,7564,3088],{"class":2953},[2928,7566,6635],{"class":2957},[2928,7568,2961],{"class":2949},[2928,7570,3197],{"class":2953},[2928,7572,7573],{"class":3156},"Describe what you want to learn about",[2928,7575,3197],{"class":2953},[2928,7577,3027],{"class":2949},[2928,7579,2981],{"class":2953},[2928,7581,7582,7584,7586,7588,7590,7592,7594,7596,7598,7600,7602,7604,7606,7608,7610,7612,7614,7616,7618,7620,7622,7624,7627,7629],{"class":2930,"line":3036},[2928,7583,6571],{"class":2970},[2928,7585,2974],{"class":2953},[2928,7587,6473],{"class":2949},[2928,7589,3088],{"class":2953},[2928,7591,6580],{"class":2957},[2928,7593,6583],{"class":2949},[2928,7595,3197],{"class":2953},[2928,7597,4598],{"class":3156},[2928,7599,3197],{"class":2953},[2928,7601,3617],{"class":2953},[2928,7603,3329],{"class":2953},[2928,7605,4595],{"class":3156},[2928,7607,3197],{"class":2953},[2928,7609,6609],{"class":2949},[2928,7611,3088],{"class":2953},[2928,7613,6614],{"class":2957},[2928,7615,3647],{"class":2949},[2928,7617,3088],{"class":2953},[2928,7619,6635],{"class":2957},[2928,7621,2961],{"class":2949},[2928,7623,3197],{"class":2953},[2928,7625,7626],{"class":3156},"Documentation version to search",[2928,7628,3197],{"class":2953},[2928,7630,2990],{"class":2949},[2928,7632,7633],{"class":2930,"line":3054},[2928,7634,3383],{"class":2953},[2928,7636,7637,7639,7641,7643,7646,7648,7650,7652,7654,7656,7658,7660],{"class":2930,"line":3059},[2928,7638,5533],{"class":2945},[2928,7640,6673],{"class":2970},[2928,7642,6676],{"class":2953},[2928,7644,7645],{"class":3023}," topic",[2928,7647,3617],{"class":2953},[2928,7649,6679],{"class":3023},[2928,7651,3045],{"class":2953},[2928,7653,3329],{"class":2953},[2928,7655,4595],{"class":3156},[2928,7657,3197],{"class":2953},[2928,7659,6682],{"class":2953},[2928,7661,3033],{"class":2953},[2928,7663,7664,7666,7668,7670,7672],{"class":2930,"line":3067},[2928,7665,6690],{"class":2945},[2928,7667,6693],{"class":2949},[2928,7669,3045],{"class":2953},[2928,7671,6698],{"class":2957},[2928,7673,3051],{"class":2970},[2928,7675,7676,7678,7681,7683,7685,7688,7690,7692,7694,7697,7699,7701,7703,7706,7708,7711],{"class":2930,"line":3077},[2928,7677,6690],{"class":2945},[2928,7679,7680],{"class":2949}," docsVersion",[2928,7682,3045],{"class":2953},[2928,7684,6679],{"class":2949},[2928,7686,7687],{"class":2953}," ===",[2928,7689,3329],{"class":2953},[2928,7691,4595],{"class":3156},[2928,7693,3197],{"class":2953},[2928,7695,7696],{"class":2953}," ?",[2928,7698,3329],{"class":2953},[2928,7700,6731],{"class":3156},[2928,7702,3197],{"class":2953},[2928,7704,7705],{"class":2953}," :",[2928,7707,3329],{"class":2953},[2928,7709,7710],{"class":3156},"docsv3",[2928,7712,5269],{"class":2953},[2928,7714,7715],{"class":2930,"line":3110},[2928,7716,2996],{"emptyLinePlaceholder":1196},[2928,7718,7719,7721,7723,7725,7727,7729,7731,7733,7735,7737],{"class":2930,"line":3116},[2928,7720,6690],{"class":2945},[2928,7722,6713],{"class":2949},[2928,7724,3045],{"class":2953},[2928,7726,3189],{"class":2941},[2928,7728,6493],{"class":2957},[2928,7730,2961],{"class":2970},[2928,7732,6724],{"class":2949},[2928,7734,3617],{"class":2953},[2928,7736,7680],{"class":2949},[2928,7738,2990],{"class":2970},[2928,7740,7741,7743,7745,7747,7749,7751,7753,7755,7757,7759,7761,7763,7765,7767,7769],{"class":2930,"line":6687},[2928,7742,6741],{"class":2953},[2928,7744,6744],{"class":2957},[2928,7746,2961],{"class":2970},[2928,7748,3197],{"class":2953},[2928,7750,6751],{"class":3156},[2928,7752,3197],{"class":2953},[2928,7754,3617],{"class":2953},[2928,7756,3329],{"class":2953},[2928,7758,6760],{"class":3156},[2928,7760,3197],{"class":2953},[2928,7762,3617],{"class":2953},[2928,7764,3329],{"class":2953},[2928,7766,6769],{"class":3156},[2928,7768,3197],{"class":2953},[2928,7770,2990],{"class":2970},[2928,7772,7773,7775,7777],{"class":2930,"line":6703},[2928,7774,6741],{"class":2953},[2928,7776,6604],{"class":2957},[2928,7778,3051],{"class":2970},[2928,7780,7781],{"class":2930,"line":6708},[2928,7782,2996],{"emptyLinePlaceholder":1196},[2928,7784,7785,7787,7790,7792,7794,7796,7798,7800,7802,7804,7806],{"class":2930,"line":6738},[2928,7786,6690],{"class":2945},[2928,7788,7789],{"class":2949}," allPages",[2928,7791,3045],{"class":2953},[2928,7793,6713],{"class":2949},[2928,7795,5120],{"class":2953},[2928,7797,6805],{"class":2957},[2928,7799,2961],{"class":2970},[2928,7801,6810],{"class":3023},[2928,7803,3030],{"class":2945},[2928,7805,3248],{"class":2970},[2928,7807,2964],{"class":2953},[2928,7809,7810,7812,7814,7816,7818,7820],{"class":2930,"line":6776},[2928,7811,3362],{"class":2970},[2928,7813,2974],{"class":2953},[2928,7815,6826],{"class":2949},[2928,7817,3088],{"class":2953},[2928,7819,6751],{"class":2949},[2928,7821,2981],{"class":2953},[2928,7823,7824,7826,7828,7830,7832,7834],{"class":2930,"line":6785},[2928,7825,6838],{"class":2970},[2928,7827,2974],{"class":2953},[2928,7829,6826],{"class":2949},[2928,7831,3088],{"class":2953},[2928,7833,6760],{"class":2949},[2928,7835,2981],{"class":2953},[2928,7837,7838,7840,7842,7844,7846,7848],{"class":2930,"line":6790},[2928,7839,6854],{"class":2970},[2928,7841,2974],{"class":2953},[2928,7843,6826],{"class":2949},[2928,7845,3088],{"class":2953},[2928,7847,6769],{"class":2949},[2928,7849,2981],{"class":2953},[2928,7851,7852,7854,7856,7858,7860,7862,7864,7866,7868],{"class":2930,"line":6819},[2928,7853,6870],{"class":2970},[2928,7855,2974],{"class":2953},[2928,7857,6531],{"class":2953},[2928,7859,6877],{"class":3156},[2928,7861,6880],{"class":2953},[2928,7863,6810],{"class":2949},[2928,7865,3088],{"class":2953},[2928,7867,6760],{"class":2949},[2928,7869,6889],{"class":2953},[2928,7871,7872,7874,7877,7880],{"class":2930,"line":6835},[2928,7873,6895],{"class":2953},[2928,7875,7876],{"class":2970},")) ",[2928,7878,7879],{"class":2953},"||",[2928,7881,7882],{"class":2970}," []\n",[2928,7884,7885],{"class":2930,"line":6851},[2928,7886,2996],{"emptyLinePlaceholder":1196},[2928,7888,7889,7891],{"class":2930,"line":6867},[2928,7890,5153],{"class":2941},[2928,7892,3033],{"class":2953},[2928,7894,7895,7898,7900,7902],{"class":2930,"line":6892},[2928,7896,7897],{"class":2970},"      messages",[2928,7899,2974],{"class":2953},[2928,7901,4961],{"class":2970},[2928,7903,2964],{"class":2953},[2928,7905,7906,7909,7911,7913,7916,7918,7921,7923],{"class":2930,"line":6901},[2928,7907,7908],{"class":2970},"        role",[2928,7910,2974],{"class":2953},[2928,7912,3329],{"class":2953},[2928,7914,7915],{"class":3156},"user",[2928,7917,3197],{"class":2953},[2928,7919,7920],{"class":2941}," as",[2928,7922,2946],{"class":2945},[2928,7924,2981],{"class":2953},[2928,7926,7927,7930,7932],{"class":2930,"line":6906},[2928,7928,7929],{"class":2970},"        content",[2928,7931,2974],{"class":2953},[2928,7933,3033],{"class":2953},[2928,7935,7936,7939,7941,7943,7945,7947,7949,7951],{"class":2930,"line":7445},[2928,7937,7938],{"class":2970},"          type",[2928,7940,2974],{"class":2953},[2928,7942,3329],{"class":2953},[2928,7944,6354],{"class":3156},[2928,7946,3197],{"class":2953},[2928,7948,7920],{"class":2941},[2928,7950,2946],{"class":2945},[2928,7952,2981],{"class":2953},[2928,7954,7955,7958,7960,7962,7965,7967,7970,7972,7975,7977,7980,7982,7984,7987,7989,7991,7993,7995],{"class":2930,"line":7450},[2928,7956,7957],{"class":2970},"          text",[2928,7959,2974],{"class":2953},[2928,7961,6531],{"class":2953},[2928,7963,7964],{"class":3156},"Help me find the best Nuxt documentation for this topic: \"",[2928,7966,6880],{"class":2953},[2928,7968,7969],{"class":2949},"topic",[2928,7971,2987],{"class":2953},[2928,7973,7974],{"class":3156},"\". Here are all available documentation pages: ",[2928,7976,6880],{"class":2953},[2928,7978,7979],{"class":2949},"JSON",[2928,7981,3088],{"class":2953},[2928,7983,7415],{"class":2957},[2928,7985,7986],{"class":2949},"(allPages",[2928,7988,3617],{"class":2953},[2928,7990,7425],{"class":2953},[2928,7992,7428],{"class":3988},[2928,7994,3027],{"class":2949},[2928,7996,6889],{"class":2953},[2928,7998,8000],{"class":2930,"line":7999},31,[2928,8001,5984],{"class":2953},[2928,8003,8005,8007],{"class":2930,"line":8004},32,[2928,8006,7435],{"class":2953},[2928,8008,7438],{"class":2970},[2928,8010,8012],{"class":2930,"line":8011},33,[2928,8013,4866],{"class":2953},[2928,8015,8017],{"class":2930,"line":8016},34,[2928,8018,3113],{"class":2953},[2928,8020,8022,8024],{"class":2930,"line":8021},35,[2928,8023,2987],{"class":2953},[2928,8025,2990],{"class":2949},[2896,8027,8028],{},"Prompts differ from tools in that they are user-invoked and return conversation messages, while tools are model-controlled and return structured data.",[4543,8030,8032],{"id":8031},"built-in-helpers","Built-in helpers",[2896,8034,8035],{},"The module provides several auto-imported helpers to simplify common patterns:",[4346,8037,8038,8055,8063],{},[3844,8039,8040,4309,8044,4309,8049,8054],{},[2900,8041,8042],{},[2890,8043,6922],{},[2900,8045,8046],{},[2890,8047,8048],{},"defineMcpResource",[2900,8050,8051],{},[2890,8052,8053],{},"defineMcpPrompt",": Define your MCP primitives",[3844,8056,8057,8062],{},[2900,8058,8059],{},[2890,8060,8061],{},"jsonResult(data)",": Format a JSON response for tools",[3844,8064,8065,8070],{},[2900,8066,8067],{},[2890,8068,8069],{},"errorResult(message)",": Return an error response from tools",[4543,8072,8074],{"id":8073},"using-nuxt-server-utilities","Using Nuxt server utilities",[2896,8076,8077,8078,8081,8082,8085],{},"To use Nuxt server utilities like ",[2890,8079,8080],{},"useEvent()"," in your handlers, enable ",[2890,8083,8084],{},"asyncContext"," in your Nuxt config:",[2918,8087,8089],{"className":2920,"code":8088,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  experimental: {\n    asyncContext: true\n  }\n})\n",[2890,8090,8091,8103,8111,8121,8125],{"__ignoreMap":2924},[2928,8092,8093,8095,8097,8099,8101],{"class":2930,"line":2931},[2928,8094,2942],{"class":2941},[2928,8096,3871],{"class":2941},[2928,8098,3874],{"class":2957},[2928,8100,2961],{"class":2949},[2928,8102,2964],{"class":2953},[2928,8104,8105,8107,8109],{"class":2930,"line":2938},[2928,8106,3883],{"class":2970},[2928,8108,2974],{"class":2953},[2928,8110,3033],{"class":2953},[2928,8112,8113,8116,8118],{"class":2930,"line":2967},[2928,8114,8115],{"class":2970},"    asyncContext",[2928,8117,2974],{"class":2953},[2928,8119,8120],{"class":2977}," true\n",[2928,8122,8123],{"class":2930,"line":2984},[2928,8124,3113],{"class":2953},[2928,8126,8127,8129],{"class":2930,"line":2993},[2928,8128,2987],{"class":2953},[2928,8130,2990],{"class":2949},[2896,8132,8133,8134,8137,8138,3088],{},"Then you can access the H3 event and use Nuxt server composables like ",[2890,8135,8136],{},"queryCollection"," from ",[2910,8139,8142],{"href":8140,"rel":8141},"https:\u002F\u002Fcontent.nuxt.com",[2914],"Nuxt Content",[2885,8144,8146],{"id":8145},"building-your-own-mcp-server","Building your own MCP server",[2896,8148,8149],{},"Ready to build an MCP server for your own application? With the Nuxt MCP Toolkit, it takes just a few minutes.",[4543,8151,8153],{"id":8152},"_1-install-the-module","1. Install the module",[2918,8155,8158],{"className":4317,"code":8156,"filename":8157,"language":4319,"meta":2924,"style":2924},"npx nuxi module add mcp-toolkit\n","Terminal",[2890,8159,8160],{"__ignoreMap":2924},[2928,8161,8162,8164,8167,8170,8173],{"class":2930,"line":2931},[2928,8163,4446],{"class":3448},[2928,8165,8166],{"class":3156}," nuxi",[2928,8168,8169],{"class":3156}," module",[2928,8171,8172],{"class":3156}," add",[2928,8174,8175],{"class":3156}," mcp-toolkit\n",[4543,8177,8179],{"id":8178},"_2-configure-the-module","2. Configure the module",[2896,8181,8182],{},"Add basic configuration to your Nuxt config:",[2918,8184,8186],{"className":2920,"code":8185,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  modules: ['@nuxtjs\u002Fmcp-toolkit'],\n  mcp: {\n    name: 'my-app'\n  }\n})\n",[2890,8187,8188,8200,8218,8226,8239,8243],{"__ignoreMap":2924},[2928,8189,8190,8192,8194,8196,8198],{"class":2930,"line":2931},[2928,8191,2942],{"class":2941},[2928,8193,3871],{"class":2941},[2928,8195,3874],{"class":2957},[2928,8197,2961],{"class":2949},[2928,8199,2964],{"class":2953},[2928,8201,8202,8204,8206,8208,8210,8212,8214,8216],{"class":2930,"line":2938},[2928,8203,6392],{"class":2970},[2928,8205,2974],{"class":2953},[2928,8207,4961],{"class":2949},[2928,8209,3197],{"class":2953},[2928,8211,6401],{"class":3156},[2928,8213,3197],{"class":2953},[2928,8215,4971],{"class":2949},[2928,8217,2981],{"class":2953},[2928,8219,8220,8222,8224],{"class":2930,"line":2967},[2928,8221,6412],{"class":2970},[2928,8223,2974],{"class":2953},[2928,8225,3033],{"class":2953},[2928,8227,8228,8230,8232,8234,8237],{"class":2930,"line":2984},[2928,8229,3324],{"class":2970},[2928,8231,2974],{"class":2953},[2928,8233,3329],{"class":2953},[2928,8235,8236],{"class":3156},"my-app",[2928,8238,5269],{"class":2953},[2928,8240,8241],{"class":2930,"line":2993},[2928,8242,3113],{"class":2953},[2928,8244,8245,8247],{"class":2930,"line":2999},[2928,8246,2987],{"class":2953},[2928,8248,2990],{"class":2949},[4543,8250,8252],{"id":8251},"_3-create-your-first-tool","3. Create your first tool",[2896,8254,8255,8256,2974],{},"Create a file in ",[2890,8257,8258],{},"server\u002Fmcp\u002Ftools\u002F",[2918,8260,8263],{"className":2920,"code":8261,"filename":8262,"language":2923,"meta":2924,"style":2924},"import { z } from 'zod'\n\nexport default defineMcpTool({\n  description: 'Search through my content',\n  inputSchema: {\n    query: z.string().describe('Search query')\n  },\n  async handler({ query }) {\n    \u002F\u002F Your search logic here\n    const results = await searchContent(query)\n    return jsonResult(results)\n  }\n})\n","server\u002Fmcp\u002Ftools\u002Fsearch.ts",[2890,8264,8265,8283,8287,8299,8314,8322,8352,8356,8371,8376,8397,8410,8414],{"__ignoreMap":2924},[2928,8266,8267,8269,8271,8273,8275,8277,8279,8281],{"class":2930,"line":2931},[2928,8268,5398],{"class":2941},[2928,8270,3174],{"class":2953},[2928,8272,6473],{"class":2949},[2928,8274,3702],{"class":2953},[2928,8276,5408],{"class":2941},[2928,8278,3329],{"class":2953},[2928,8280,6482],{"class":3156},[2928,8282,5269],{"class":2953},[2928,8284,8285],{"class":2930,"line":2938},[2928,8286,2996],{"emptyLinePlaceholder":1196},[2928,8288,8289,8291,8293,8295,8297],{"class":2930,"line":2967},[2928,8290,2942],{"class":2941},[2928,8292,3871],{"class":2941},[2928,8294,6517],{"class":2957},[2928,8296,2961],{"class":2949},[2928,8298,2964],{"class":2953},[2928,8300,8301,8303,8305,8307,8310,8312],{"class":2930,"line":2984},[2928,8302,6526],{"class":2970},[2928,8304,2974],{"class":2953},[2928,8306,3329],{"class":2953},[2928,8308,8309],{"class":3156},"Search through my content",[2928,8311,3197],{"class":2953},[2928,8313,2981],{"class":2953},[2928,8315,8316,8318,8320],{"class":2930,"line":2993},[2928,8317,6562],{"class":2970},[2928,8319,2974],{"class":2953},[2928,8321,3033],{"class":2953},[2928,8323,8324,8327,8329,8331,8333,8335,8337,8339,8341,8343,8345,8348,8350],{"class":2930,"line":2999},[2928,8325,8326],{"class":2970},"    query",[2928,8328,2974],{"class":2953},[2928,8330,6473],{"class":2949},[2928,8332,3088],{"class":2953},[2928,8334,7560],{"class":2957},[2928,8336,3647],{"class":2949},[2928,8338,3088],{"class":2953},[2928,8340,6635],{"class":2957},[2928,8342,2961],{"class":2949},[2928,8344,3197],{"class":2953},[2928,8346,8347],{"class":3156},"Search query",[2928,8349,3197],{"class":2953},[2928,8351,2990],{"class":2949},[2928,8353,8354],{"class":2930,"line":3005},[2928,8355,3383],{"class":2953},[2928,8357,8358,8360,8362,8364,8367,8369],{"class":2930,"line":3036},[2928,8359,5533],{"class":2945},[2928,8361,6673],{"class":2970},[2928,8363,6676],{"class":2953},[2928,8365,8366],{"class":3023}," query",[2928,8368,6682],{"class":2953},[2928,8370,3033],{"class":2953},[2928,8372,8373],{"class":2930,"line":3054},[2928,8374,8375],{"class":2934},"    \u002F\u002F Your search logic here\n",[2928,8377,8378,8380,8383,8385,8387,8390,8392,8395],{"class":2930,"line":3059},[2928,8379,6690],{"class":2945},[2928,8381,8382],{"class":2949}," results",[2928,8384,3045],{"class":2953},[2928,8386,3189],{"class":2941},[2928,8388,8389],{"class":2957}," searchContent",[2928,8391,2961],{"class":2970},[2928,8393,8394],{"class":2949},"query",[2928,8396,2990],{"class":2970},[2928,8398,8399,8401,8403,8405,8408],{"class":2930,"line":3067},[2928,8400,5153],{"class":2941},[2928,8402,6795],{"class":2957},[2928,8404,2961],{"class":2970},[2928,8406,8407],{"class":2949},"results",[2928,8409,2990],{"class":2970},[2928,8411,8412],{"class":2930,"line":3077},[2928,8413,3113],{"class":2953},[2928,8415,8416,8418],{"class":2930,"line":3110},[2928,8417,2987],{"class":2953},[2928,8419,2990],{"class":2949},[2896,8421,8422,8423,3088],{},"That's it! Your MCP server is now accessible at ",[2890,8424,8425],{},"https:\u002F\u002Fyour-domain.com\u002Fmcp",[4543,8427,8429],{"id":8428},"_4-add-resources-and-prompts-optional","4. Add resources and prompts (optional)",[2896,8431,8432],{},"You can also add resources and prompts following the same pattern:",[2918,8434,8436],{"className":2920,"code":8435,"filename":6974,"language":2923,"meta":2924,"style":2924},"export default defineMcpResource({\n  name: 'readme',\n  description: 'Project README file',\n  file: 'README.md'\n})\n",[2890,8437,8438,8450,8464,8478,8490],{"__ignoreMap":2924},[2928,8439,8440,8442,8444,8446,8448],{"class":2930,"line":2931},[2928,8441,2942],{"class":2941},[2928,8443,3871],{"class":2941},[2928,8445,6985],{"class":2957},[2928,8447,2961],{"class":2949},[2928,8449,2964],{"class":2953},[2928,8451,8452,8454,8456,8458,8460,8462],{"class":2930,"line":2938},[2928,8453,6994],{"class":2970},[2928,8455,2974],{"class":2953},[2928,8457,3329],{"class":2953},[2928,8459,7001],{"class":3156},[2928,8461,3197],{"class":2953},[2928,8463,2981],{"class":2953},[2928,8465,8466,8468,8470,8472,8474,8476],{"class":2930,"line":2967},[2928,8467,6526],{"class":2970},[2928,8469,2974],{"class":2953},[2928,8471,3329],{"class":2953},[2928,8473,7016],{"class":3156},[2928,8475,3197],{"class":2953},[2928,8477,2981],{"class":2953},[2928,8479,8480,8482,8484,8486,8488],{"class":2930,"line":2984},[2928,8481,7025],{"class":2970},[2928,8483,2974],{"class":2953},[2928,8485,3329],{"class":2953},[2928,8487,7032],{"class":3156},[2928,8489,5269],{"class":2953},[2928,8491,8492,8494],{"class":2930,"line":2993},[2928,8493,2987],{"class":2953},[2928,8495,2990],{"class":2949},[2896,8497,8498,8499,3088],{},"For more advanced configuration options, check out the ",[2910,8500,8502],{"href":6233,"rel":8501},[2914],"Nuxt MCP Toolkit documentation",[2885,8504,8506],{"id":8505},"get-started-with-the-nuxt-mcp-server","Get started with the Nuxt MCP server",[2896,8508,8509],{},"Ready to experience the power of MCP with Nuxt? Our server is already live and provides access to all Nuxt documentation, blog posts, and deployment guides.",[4543,8511,8513],{"id":8512},"quick-install-for-cursor","Quick install for Cursor",[2896,8515,8516],{},"The easiest way to get started is with Cursor's one-click installation:",[8518,8519],"u-button",{"color":8520,"icon":8521,"label":8522,"to":8523},"neutral","i-custom-cursor","Install Nuxt MCP Server in Cursor","cursor:\u002F\u002Fanysphere.cursor-deeplink\u002Fmcp\u002Finstall?name=nuxt&config=eyJ0eXBlIjoiaHR0cCIsInVybCI6Imh0dHBzOi8vbnV4dC5jb20vbWNwIn0%3D",[4543,8525,8527],{"id":8526},"other-ai-assistants","Other AI assistants",[2896,8529,8530,8531,3088],{},"The Nuxt MCP server works with Claude Desktop, Windsurf, Visual Studio Code, ChatGPT, and many other MCP-compatible AI assistants. For complete setup instructions for all platforms, check out our ",[2910,8532,8533],{"href":1324},"MCP documentation",[2896,8535,8536],{},"We encourage you to build MCP servers for your own applications. Whether it's documentation, API references, or domain-specific knowledge, MCP makes it easy for AI assistants to provide accurate, helpful information to your users.",[2896,8538,8539,8540,8545,8546,8552],{},"The complete source code for our MCP server is available on ",[2910,8541,8544],{"href":8542,"rel":8543},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.com",[2914],"GitHub"," in the ",[2910,8547,8550],{"href":8548,"rel":8549},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.com\u002Ftree\u002Fmain\u002Fserver\u002Fmcp",[2914],[2890,8551,6446],{}," directory. Feel free to use it as inspiration for your own implementation!",[4489,8554,8555],{},"html pre.shiki code .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .sYRBq, html code.shiki .sYRBq{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}html pre.shiki code .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}",{"title":2924,"searchDepth":2938,"depth":2938,"links":8557},[8558,8561,8562,8570,8576],{"id":6248,"depth":2938,"text":6249,"children":8559},[8560],{"id":6283,"depth":2967,"text":6284},{"id":6340,"depth":2938,"text":6341},{"id":6362,"depth":2938,"text":6363,"children":8563},[8564,8565,8566,8567,8568,8569],{"id":6366,"depth":2967,"text":6367},{"id":6450,"depth":2967,"text":6451},{"id":6959,"depth":2967,"text":6960},{"id":7460,"depth":2967,"text":7461},{"id":8031,"depth":2967,"text":8032},{"id":8073,"depth":2967,"text":8074},{"id":8145,"depth":2938,"text":8146,"children":8571},[8572,8573,8574,8575],{"id":8152,"depth":2967,"text":8153},{"id":8178,"depth":2967,"text":8179},{"id":8251,"depth":2967,"text":8252},{"id":8428,"depth":2967,"text":8429},{"id":8505,"depth":2938,"text":8506,"children":8577},[8578,8579],{"id":8512,"depth":2967,"text":8513},{"id":8526,"depth":2967,"text":8527},"Article","2025-11-13","How we built the Nuxt MCP server to enable AI assistants to access our documentation through structured data and composable tools.","\u002Fassets\u002Fblog\u002Fbuilding-nuxt-mcp.png",{},"\u002Fblog\u002Fbuilding-nuxt-mcp",{"title":6214,"description":8582},"blog\u002F40.building-nuxt-mcp","kjGNhLsPig_46sTrndetqE3ZkV2pjCuNIr5xyXWOrCs",{"id":8590,"title":8591,"authors":8592,"body":8595,"category":4517,"date":10158,"description":10159,"draft":108,"extension":4520,"image":10160,"meta":10161,"navigation":108,"path":10162,"seo":10163,"stem":10164,"tags":6,"__hash__":10165},"blog\u002Fblog\u002F41.nuxt-image-v2.md","Nuxt Image v2",[8593],{"name":2877,"avatar":8594,"to":2880},{"src":2879},{"type":2882,"value":8596,"toc":10127},[8597,8603,8608,8612,8620,8624,8639,8741,8745,8753,8834,8838,8845,9007,9011,9027,9031,9039,9170,9174,9178,9187,9336,9340,9347,9505,9508,9526,9530,9534,9542,9617,9620,9628,9777,9781,9784,9823,9827,9836,9840,9844,9850,9883,9886,9890,9900,9904,9925,9929,9945,9949,9952,9954,9962,9965,9980,9991,9994,9997,10076,10080,10083,10087,10109,10112,10121,10124],[2896,8598,8599,8600,8602],{},"We're excited to announce ",[2900,8601,8591],{},"! 🎉 This release focuses on TypeScript support, performance improvements, and better developer experience.",[3774,8604,8605],{},[2896,8606,8607],{},"Nuxt Image v2 works with Nuxt 3.1+. If you're on Nuxt 3.0.x, you'll need to upgrade to at least 3.1 first.",[2885,8609,8611],{"id":8610},"typescript-support","🎯 TypeScript support",[2896,8613,8614,8615,2916],{},"The biggest change in v2 is full TypeScript support throughout the module (",[2910,8616,8619],{"href":8617,"rel":8618},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fpull\u002F1802",[2914],"#1802",[4543,8621,8623],{"id":8622},"typed-composables","Typed composables",[2896,8625,5192,8626,8629,8630,8633,8634,3839],{},[2890,8627,8628],{},"$img"," helper and ",[2890,8631,8632],{},"useImage()"," composable have full type inference (",[2910,8635,8638],{"href":8636,"rel":8637},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fpull\u002F1844",[2914],"#1844",[2918,8640,8642],{"className":2920,"code":8641,"language":2923,"meta":2924,"style":2924},"const img = useImage()\n\n\u002F\u002F Full autocomplete for modifiers\nconst url = img('\u002Fimage.jpg', { \n  width: 300,\n  height: 200,\n  fit: 'cover' \u002F\u002F TypeScript knows the valid values!\n})\n",[2890,8643,8644,8658,8662,8667,8694,8706,8718,8735],{"__ignoreMap":2924},[2928,8645,8646,8648,8651,8653,8656],{"class":2930,"line":2931},[2928,8647,3171],{"class":2945},[2928,8649,8650],{"class":2949}," img ",[2928,8652,2954],{"class":2953},[2928,8654,8655],{"class":2957}," useImage",[2928,8657,3051],{"class":2949},[2928,8659,8660],{"class":2930,"line":2938},[2928,8661,2996],{"emptyLinePlaceholder":1196},[2928,8663,8664],{"class":2930,"line":2967},[2928,8665,8666],{"class":2934},"\u002F\u002F Full autocomplete for modifiers\n",[2928,8668,8669,8671,8674,8676,8679,8681,8683,8686,8688,8690,8692],{"class":2930,"line":2984},[2928,8670,3171],{"class":2945},[2928,8672,8673],{"class":2949}," url ",[2928,8675,2954],{"class":2953},[2928,8677,8678],{"class":2957}," img",[2928,8680,2961],{"class":2949},[2928,8682,3197],{"class":2953},[2928,8684,8685],{"class":3156},"\u002Fimage.jpg",[2928,8687,3197],{"class":2953},[2928,8689,3617],{"class":2953},[2928,8691,3174],{"class":2953},[2928,8693,4846],{"class":2949},[2928,8695,8696,8699,8701,8704],{"class":2930,"line":2993},[2928,8697,8698],{"class":2970},"  width",[2928,8700,2974],{"class":2953},[2928,8702,8703],{"class":3988}," 300",[2928,8705,2981],{"class":2953},[2928,8707,8708,8711,8713,8716],{"class":2930,"line":2999},[2928,8709,8710],{"class":2970},"  height",[2928,8712,2974],{"class":2953},[2928,8714,8715],{"class":3988}," 200",[2928,8717,2981],{"class":2953},[2928,8719,8720,8723,8725,8727,8730,8732],{"class":2930,"line":3005},[2928,8721,8722],{"class":2970},"  fit",[2928,8724,2974],{"class":2953},[2928,8726,3329],{"class":2953},[2928,8728,8729],{"class":3156},"cover",[2928,8731,3197],{"class":2953},[2928,8733,8734],{"class":2934}," \u002F\u002F TypeScript knows the valid values!\n",[2928,8736,8737,8739],{"class":2930,"line":3036},[2928,8738,2987],{"class":2953},[2928,8740,2990],{"class":2949},[4543,8742,8744],{"id":8743},"type-safe-configuration","Type-safe configuration",[2896,8746,8747,8748,8750,8751,2974],{},"Module options are now fully typed. For example, providers that require a ",[2890,8749,3091],{}," will enforce it at the type level in your ",[2890,8752,233],{},[2918,8754,8756],{"className":2920,"code":8755,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  image: {\n    provider: 'bunny',\n    bunny: {\n      baseURL: '...' \u002F\u002F TypeScript error if missing!\n    }\n  }\n})\n",[2890,8757,8758,8770,8778,8794,8803,8820,8824,8828],{"__ignoreMap":2924},[2928,8759,8760,8762,8764,8766,8768],{"class":2930,"line":2931},[2928,8761,2942],{"class":2941},[2928,8763,3871],{"class":2941},[2928,8765,3874],{"class":2957},[2928,8767,2961],{"class":2949},[2928,8769,2964],{"class":2953},[2928,8771,8772,8774,8776],{"class":2930,"line":2938},[2928,8773,4983],{"class":2970},[2928,8775,2974],{"class":2953},[2928,8777,3033],{"class":2953},[2928,8779,8780,8783,8785,8787,8790,8792],{"class":2930,"line":2967},[2928,8781,8782],{"class":2970},"    provider",[2928,8784,2974],{"class":2953},[2928,8786,3329],{"class":2953},[2928,8788,8789],{"class":3156},"bunny",[2928,8791,3197],{"class":2953},[2928,8793,2981],{"class":2953},[2928,8795,8796,8799,8801],{"class":2930,"line":2984},[2928,8797,8798],{"class":2970},"    bunny",[2928,8800,2974],{"class":2953},[2928,8802,3033],{"class":2953},[2928,8804,8805,8808,8810,8812,8815,8817],{"class":2930,"line":2993},[2928,8806,8807],{"class":2970},"      baseURL",[2928,8809,2974],{"class":2953},[2928,8811,3329],{"class":2953},[2928,8813,8814],{"class":3156},"...",[2928,8816,3197],{"class":2953},[2928,8818,8819],{"class":2934}," \u002F\u002F TypeScript error if missing!\n",[2928,8821,8822],{"class":2930,"line":2999},[2928,8823,4866],{"class":2953},[2928,8825,8826],{"class":2930,"line":3005},[2928,8827,3113],{"class":2953},[2928,8829,8830,8832],{"class":2930,"line":3036},[2928,8831,2987],{"class":2953},[2928,8833,2990],{"class":2949},[4543,8835,8837],{"id":8836},"typed-providers","Typed providers",[2896,8839,8840,8841,8844],{},"Finally, if you are using custom image providers, you should use the new ",[2890,8842,8843],{},"defineProvider"," for type-safe configuration:",[2918,8846,8848],{"className":2920,"code":8847,"language":2923,"meta":2924,"style":2924},"\u002F\u002F Before (v1)\nexport const getImage = (src, { modifiers, baseURL }) => {\n  \u002F\u002F ...\n  return { url }\n}\n\n\u002F\u002F After (v2)\nimport { defineProvider } from '@nuxt\u002Fimage\u002Fruntime'\n\nexport default defineProvider({\n  getImage(src, { modifiers, baseURL }) {\n    \u002F\u002F Fully typed modifiers\n    \u002F\u002F ...\n    return { url }\n  }\n})\n",[2890,8849,8850,8855,8889,8894,8905,8909,8913,8918,8938,8942,8954,8977,8982,8987,8997,9001],{"__ignoreMap":2924},[2928,8851,8852],{"class":2930,"line":2931},[2928,8853,8854],{"class":2934},"\u002F\u002F Before (v1)\n",[2928,8856,8857,8859,8861,8864,8866,8868,8871,8873,8875,8878,8880,8883,8885,8887],{"class":2930,"line":2938},[2928,8858,2942],{"class":2941},[2928,8860,2946],{"class":2945},[2928,8862,8863],{"class":2949}," getImage ",[2928,8865,2954],{"class":2953},[2928,8867,3248],{"class":2953},[2928,8869,8870],{"class":3023},"src",[2928,8872,3617],{"class":2953},[2928,8874,3174],{"class":2953},[2928,8876,8877],{"class":3023}," modifiers",[2928,8879,3617],{"class":2953},[2928,8881,8882],{"class":3023}," baseURL",[2928,8884,6682],{"class":2953},[2928,8886,3030],{"class":2945},[2928,8888,3033],{"class":2953},[2928,8890,8891],{"class":2930,"line":2967},[2928,8892,8893],{"class":2934},"  \u002F\u002F ...\n",[2928,8895,8896,8898,8900,8903],{"class":2930,"line":2984},[2928,8897,3062],{"class":2941},[2928,8899,3174],{"class":2953},[2928,8901,8902],{"class":2949}," url",[2928,8904,4739],{"class":2953},[2928,8906,8907],{"class":2930,"line":2993},[2928,8908,3764],{"class":2953},[2928,8910,8911],{"class":2930,"line":2999},[2928,8912,2996],{"emptyLinePlaceholder":1196},[2928,8914,8915],{"class":2930,"line":3005},[2928,8916,8917],{"class":2934},"\u002F\u002F After (v2)\n",[2928,8919,8920,8922,8924,8927,8929,8931,8933,8936],{"class":2930,"line":3036},[2928,8921,5398],{"class":2941},[2928,8923,3174],{"class":2953},[2928,8925,8926],{"class":2949}," defineProvider",[2928,8928,3702],{"class":2953},[2928,8930,5408],{"class":2941},[2928,8932,3329],{"class":2953},[2928,8934,8935],{"class":3156},"@nuxt\u002Fimage\u002Fruntime",[2928,8937,5269],{"class":2953},[2928,8939,8940],{"class":2930,"line":3054},[2928,8941,2996],{"emptyLinePlaceholder":1196},[2928,8943,8944,8946,8948,8950,8952],{"class":2930,"line":3059},[2928,8945,2942],{"class":2941},[2928,8947,3871],{"class":2941},[2928,8949,8926],{"class":2957},[2928,8951,2961],{"class":2949},[2928,8953,2964],{"class":2953},[2928,8955,8956,8959,8961,8963,8965,8967,8969,8971,8973,8975],{"class":2930,"line":3067},[2928,8957,8958],{"class":2970},"  getImage",[2928,8960,2961],{"class":2953},[2928,8962,8870],{"class":3023},[2928,8964,3617],{"class":2953},[2928,8966,3174],{"class":2953},[2928,8968,8877],{"class":3023},[2928,8970,3617],{"class":2953},[2928,8972,8882],{"class":3023},[2928,8974,6682],{"class":2953},[2928,8976,3033],{"class":2953},[2928,8978,8979],{"class":2930,"line":3077},[2928,8980,8981],{"class":2934},"    \u002F\u002F Fully typed modifiers\n",[2928,8983,8984],{"class":2930,"line":3110},[2928,8985,8986],{"class":2934},"    \u002F\u002F ...\n",[2928,8988,8989,8991,8993,8995],{"class":2930,"line":3116},[2928,8990,5153],{"class":2941},[2928,8992,3174],{"class":2953},[2928,8994,8902],{"class":2949},[2928,8996,4739],{"class":2953},[2928,8998,8999],{"class":2930,"line":6687},[2928,9000,3113],{"class":2953},[2928,9002,9003,9005],{"class":2930,"line":6703},[2928,9004,2987],{"class":2953},[2928,9006,2990],{"class":2949},[2885,9008,9010],{"id":9009},"ipx-v3","🚀 IPX v3",[2896,9012,9013,9014,9019,9020,9023,9024,9026],{},"We've upgraded to IPX v3 (",[2910,9015,9018],{"href":9016,"rel":9017},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fpull\u002F1799",[2914],"#1799",") for better performance and better ",[2890,9021,9022],{},"sharp"," binary handling. The upgrade includes automatic detection of the correct ",[2890,9025,9022],{}," binaries for your deployment architecture.",[2885,9028,9030],{"id":9029},"server-side-utilities","🔌 Server-side utilities",[2896,9032,9033,9034,2916],{},"You can now use image helpers directly in Nitro server endpoints (",[2910,9035,9038],{"href":9036,"rel":9037},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fpull\u002F1473",[2914],"#1473",[2918,9040,9043],{"className":2920,"code":9041,"filename":9042,"language":2923,"meta":2924,"style":2924},"export default defineEventHandler((event) => {\n  const img = useImage()\n  \n  return {\n    url: img('\u002Fhero.jpg', { \n      width: 1200, \n      height: 630,\n      fit: 'cover' \n    })\n  }\n})\n","server\u002Fapi\u002Fog-image.ts",[2890,9044,9045,9066,9078,9083,9089,9113,9127,9139,9154,9160,9164],{"__ignoreMap":2924},[2928,9046,9047,9049,9051,9054,9056,9058,9060,9062,9064],{"class":2930,"line":2931},[2928,9048,2942],{"class":2941},[2928,9050,3871],{"class":2941},[2928,9052,9053],{"class":2957}," defineEventHandler",[2928,9055,2961],{"class":2949},[2928,9057,2961],{"class":2953},[2928,9059,6724],{"class":3023},[2928,9061,3027],{"class":2953},[2928,9063,3030],{"class":2945},[2928,9065,3033],{"class":2953},[2928,9067,9068,9070,9072,9074,9076],{"class":2930,"line":2938},[2928,9069,3039],{"class":2945},[2928,9071,8678],{"class":2949},[2928,9073,3045],{"class":2953},[2928,9075,8655],{"class":2957},[2928,9077,3051],{"class":2970},[2928,9079,9080],{"class":2930,"line":2967},[2928,9081,9082],{"class":2970},"  \n",[2928,9084,9085,9087],{"class":2930,"line":2984},[2928,9086,3062],{"class":2941},[2928,9088,3033],{"class":2953},[2928,9090,9091,9094,9096,9098,9100,9102,9105,9107,9109,9111],{"class":2930,"line":2993},[2928,9092,9093],{"class":2970},"    url",[2928,9095,2974],{"class":2953},[2928,9097,8678],{"class":2957},[2928,9099,2961],{"class":2970},[2928,9101,3197],{"class":2953},[2928,9103,9104],{"class":3156},"\u002Fhero.jpg",[2928,9106,3197],{"class":2953},[2928,9108,3617],{"class":2953},[2928,9110,3174],{"class":2953},[2928,9112,4846],{"class":2970},[2928,9114,9115,9118,9120,9123,9125],{"class":2930,"line":2999},[2928,9116,9117],{"class":2970},"      width",[2928,9119,2974],{"class":2953},[2928,9121,9122],{"class":3988}," 1200",[2928,9124,3617],{"class":2953},[2928,9126,4846],{"class":2970},[2928,9128,9129,9132,9134,9137],{"class":2930,"line":3005},[2928,9130,9131],{"class":2970},"      height",[2928,9133,2974],{"class":2953},[2928,9135,9136],{"class":3988}," 630",[2928,9138,2981],{"class":2953},[2928,9140,9141,9144,9146,9148,9150,9152],{"class":2930,"line":3036},[2928,9142,9143],{"class":2970},"      fit",[2928,9145,2974],{"class":2953},[2928,9147,3329],{"class":2953},[2928,9149,8729],{"class":3156},[2928,9151,3197],{"class":2953},[2928,9153,4846],{"class":2970},[2928,9155,9156,9158],{"class":2930,"line":3054},[2928,9157,6895],{"class":2953},[2928,9159,2990],{"class":2970},[2928,9161,9162],{"class":2930,"line":3059},[2928,9163,3113],{"class":2953},[2928,9165,9166,9168],{"class":2930,"line":3067},[2928,9167,2987],{"class":2953},[2928,9169,2990],{"class":2949},[2885,9171,9173],{"id":9172},"component-improvements","🎨 Component improvements",[4543,9175,9177],{"id":9176},"template-refs","Template refs",[2896,9179,9180,9182,9183,9186],{},[2890,9181,496],{}," now exposes the underlying ",[2890,9184,9185],{},"\u003Cimg>"," element via template refs:",[2918,9188,9190],{"className":3129,"code":9189,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup>\nconst img = useTemplateRef('img')\n\nonMounted(() => {\n  \u002F\u002F Direct access to the native img element\n  console.log(img.value.imgEl)\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CNuxtImg ref=\"img\" src=\"\u002Fimage.jpg\" \u002F>\n\u003C\u002Ftemplate>\n",[2890,9191,9192,9202,9223,9227,9240,9245,9271,9277,9285,9289,9297,9328],{"__ignoreMap":2924},[2928,9193,9194,9196,9198,9200],{"class":2930,"line":2931},[2928,9195,3139],{"class":2953},[2928,9197,3142],{"class":2970},[2928,9199,3145],{"class":2945},[2928,9201,3161],{"class":2953},[2928,9203,9204,9206,9208,9210,9213,9215,9217,9219,9221],{"class":2930,"line":2938},[2928,9205,3171],{"class":2945},[2928,9207,8650],{"class":2949},[2928,9209,2954],{"class":2953},[2928,9211,9212],{"class":2957}," useTemplateRef",[2928,9214,2961],{"class":2949},[2928,9216,3197],{"class":2953},[2928,9218,4183],{"class":3156},[2928,9220,3197],{"class":2953},[2928,9222,2990],{"class":2949},[2928,9224,9225],{"class":2930,"line":2967},[2928,9226,2996],{"emptyLinePlaceholder":1196},[2928,9228,9229,9232,9234,9236,9238],{"class":2930,"line":2984},[2928,9230,9231],{"class":2957},"onMounted",[2928,9233,2961],{"class":2949},[2928,9235,3647],{"class":2953},[2928,9237,3030],{"class":2945},[2928,9239,3033],{"class":2953},[2928,9241,9242],{"class":2930,"line":2993},[2928,9243,9244],{"class":2934},"  \u002F\u002F Direct access to the native img element\n",[2928,9246,9247,9250,9252,9255,9257,9259,9261,9264,9266,9269],{"class":2930,"line":2999},[2928,9248,9249],{"class":2949},"  console",[2928,9251,3088],{"class":2953},[2928,9253,9254],{"class":2957},"log",[2928,9256,2961],{"class":2970},[2928,9258,4183],{"class":2949},[2928,9260,3088],{"class":2953},[2928,9262,9263],{"class":2949},"value",[2928,9265,3088],{"class":2953},[2928,9267,9268],{"class":2949},"imgEl",[2928,9270,2990],{"class":2970},[2928,9272,9273,9275],{"class":2930,"line":3005},[2928,9274,2987],{"class":2953},[2928,9276,2990],{"class":2949},[2928,9278,9279,9281,9283],{"class":2930,"line":3036},[2928,9280,3209],{"class":2953},[2928,9282,3142],{"class":2970},[2928,9284,3161],{"class":2953},[2928,9286,9287],{"class":2930,"line":3054},[2928,9288,2996],{"emptyLinePlaceholder":1196},[2928,9290,9291,9293,9295],{"class":2930,"line":3059},[2928,9292,3139],{"class":2953},[2928,9294,3521],{"class":2970},[2928,9296,3161],{"class":2953},[2928,9298,9299,9301,9304,9307,9309,9311,9313,9315,9318,9320,9322,9324,9326],{"class":2930,"line":3067},[2928,9300,3528],{"class":2953},[2928,9302,9303],{"class":2970},"NuxtImg",[2928,9305,9306],{"class":2945}," ref",[2928,9308,2954],{"class":2953},[2928,9310,3153],{"class":2953},[2928,9312,4183],{"class":3156},[2928,9314,3153],{"class":2953},[2928,9316,9317],{"class":2945}," src",[2928,9319,2954],{"class":2953},[2928,9321,3153],{"class":2953},[2928,9323,8685],{"class":3156},[2928,9325,3153],{"class":2953},[2928,9327,3534],{"class":2953},[2928,9329,9330,9332,9334],{"class":2930,"line":3077},[2928,9331,3209],{"class":2953},[2928,9333,3521],{"class":2970},[2928,9335,3161],{"class":2953},[4543,9337,9339],{"id":9338},"typed-slots","Typed slots",[2896,9341,6326,9342,2892,9344,9346],{},[2890,9343,496],{},[2890,9345,452],{}," now have properly typed default slots.",[2918,9348,9350],{"className":3129,"code":9349,"language":3132,"meta":2924,"style":2924},"\u003Ctemplate>\n  \u003CNuxtImg src=\"\u002Fimage.jpg\" custom>\n    \u003Ctemplate #default=\"{ imgAttrs, isLoaded, src }\">\n      \u003Cimg v-bind=\"imgAttrs\" :src=\"src\">\n      \u003Cspan v-if=\"!isLoaded\">Loading...\u003C\u002Fspan>\n    \u003C\u002Ftemplate>\n  \u003C\u002FNuxtImg>\n\u003C\u002Ftemplate>\n",[2890,9351,9352,9360,9381,9418,9450,9480,9489,9497],{"__ignoreMap":2924},[2928,9353,9354,9356,9358],{"class":2930,"line":2931},[2928,9355,3139],{"class":2953},[2928,9357,3521],{"class":2970},[2928,9359,3161],{"class":2953},[2928,9361,9362,9364,9366,9368,9370,9372,9374,9376,9379],{"class":2930,"line":2938},[2928,9363,3528],{"class":2953},[2928,9365,9303],{"class":2970},[2928,9367,9317],{"class":2945},[2928,9369,2954],{"class":2953},[2928,9371,3153],{"class":2953},[2928,9373,8685],{"class":3156},[2928,9375,3153],{"class":2953},[2928,9377,9378],{"class":2945}," custom",[2928,9380,3161],{"class":2953},[2928,9382,9383,9385,9387,9390,9392,9394,9396,9399,9402,9404,9407,9409,9412,9414,9416],{"class":2930,"line":2967},[2928,9384,3557],{"class":2953},[2928,9386,3521],{"class":2970},[2928,9388,9389],{"class":2953}," #",[2928,9391,5589],{"class":2945},[2928,9393,2954],{"class":2953},[2928,9395,3153],{"class":2953},[2928,9397,9398],{"class":2953},"{",[2928,9400,9401],{"class":2949}," imgAttrs",[2928,9403,3617],{"class":2953},[2928,9405,9406],{"class":2949}," isLoaded",[2928,9408,3617],{"class":2953},[2928,9410,9411],{"class":2949}," src ",[2928,9413,2987],{"class":2953},[2928,9415,3153],{"class":2953},[2928,9417,3161],{"class":2953},[2928,9419,9420,9423,9425,9428,9430,9432,9435,9437,9440,9442,9444,9446,9448],{"class":2930,"line":2984},[2928,9421,9422],{"class":2953},"      \u003C",[2928,9424,4183],{"class":2970},[2928,9426,9427],{"class":2945}," v-bind",[2928,9429,2954],{"class":2953},[2928,9431,3153],{"class":2953},[2928,9433,9434],{"class":3156},"imgAttrs",[2928,9436,3153],{"class":2953},[2928,9438,9439],{"class":2945}," :src",[2928,9441,2954],{"class":2953},[2928,9443,3153],{"class":2953},[2928,9445,8870],{"class":3156},[2928,9447,3153],{"class":2953},[2928,9449,3161],{"class":2953},[2928,9451,9452,9454,9456,9459,9461,9463,9466,9468,9471,9474,9476,9478],{"class":2930,"line":2993},[2928,9453,9422],{"class":2953},[2928,9455,2928],{"class":2970},[2928,9457,9458],{"class":2945}," v-if",[2928,9460,2954],{"class":2953},[2928,9462,3153],{"class":2953},[2928,9464,9465],{"class":3156},"!isLoaded",[2928,9467,3153],{"class":2953},[2928,9469,9470],{"class":2953},">",[2928,9472,9473],{"class":2949},"Loading...",[2928,9475,3209],{"class":2953},[2928,9477,2928],{"class":2970},[2928,9479,3161],{"class":2953},[2928,9481,9482,9485,9487],{"class":2930,"line":2999},[2928,9483,9484],{"class":2953},"    \u003C\u002F",[2928,9486,3521],{"class":2970},[2928,9488,3161],{"class":2953},[2928,9490,9491,9493,9495],{"class":2930,"line":3005},[2928,9492,3567],{"class":2953},[2928,9494,9303],{"class":2970},[2928,9496,3161],{"class":2953},[2928,9498,9499,9501,9503],{"class":2930,"line":3036},[2928,9500,3209],{"class":2953},[2928,9502,3521],{"class":2970},[2928,9504,3161],{"class":2953},[2896,9506,9507],{},"The slot provides:",[4346,9509,9510,9515,9521],{},[3844,9511,9512,9514],{},[2890,9513,9434],{}," - All computed image attributes (sizes, srcset, etc.)",[3844,9516,9517,9520],{},[2890,9518,9519],{},"isLoaded"," - Whether the placeholder has loaded",[3844,9522,9523,9525],{},[2890,9524,8870],{}," - The computed image source URL",[2885,9527,9529],{"id":9528},"new-providers","🌐 New providers",[4543,9531,9533],{"id":9532},"shopify","Shopify",[2896,9535,9536,9537,3839],{},"You can now configure the Shopify provider (",[2910,9538,9541],{"href":9539,"rel":9540},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fpull\u002F1890",[2914],"#1890",[2918,9543,9545],{"className":2920,"code":9544,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  image: {\n    provider: 'shopify',\n    shopify: {\n      baseURL: 'https:\u002F\u002Fyour-store.myshopify.com'\n    }\n  }\n})\n",[2890,9546,9547,9559,9567,9581,9590,9603,9607,9611],{"__ignoreMap":2924},[2928,9548,9549,9551,9553,9555,9557],{"class":2930,"line":2931},[2928,9550,2942],{"class":2941},[2928,9552,3871],{"class":2941},[2928,9554,3874],{"class":2957},[2928,9556,2961],{"class":2949},[2928,9558,2964],{"class":2953},[2928,9560,9561,9563,9565],{"class":2930,"line":2938},[2928,9562,4983],{"class":2970},[2928,9564,2974],{"class":2953},[2928,9566,3033],{"class":2953},[2928,9568,9569,9571,9573,9575,9577,9579],{"class":2930,"line":2967},[2928,9570,8782],{"class":2970},[2928,9572,2974],{"class":2953},[2928,9574,3329],{"class":2953},[2928,9576,9532],{"class":3156},[2928,9578,3197],{"class":2953},[2928,9580,2981],{"class":2953},[2928,9582,9583,9586,9588],{"class":2930,"line":2984},[2928,9584,9585],{"class":2970},"    shopify",[2928,9587,2974],{"class":2953},[2928,9589,3033],{"class":2953},[2928,9591,9592,9594,9596,9598,9601],{"class":2930,"line":2993},[2928,9593,8807],{"class":2970},[2928,9595,2974],{"class":2953},[2928,9597,3329],{"class":2953},[2928,9599,9600],{"class":3156},"https:\u002F\u002Fyour-store.myshopify.com",[2928,9602,5269],{"class":2953},[2928,9604,9605],{"class":2930,"line":2999},[2928,9606,4866],{"class":2953},[2928,9608,9609],{"class":2930,"line":3005},[2928,9610,3113],{"class":2953},[2928,9612,9613,9615],{"class":2930,"line":3036},[2928,9614,2987],{"class":2953},[2928,9616,2990],{"class":2949},[4543,9618,8544],{"id":9619},"github",[2896,9621,9622,9623,3839],{},"This provider lets you inject GitHub avatars and user content (",[2910,9624,9627],{"href":9625,"rel":9626},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fpull\u002F1990",[2914],"#1990",[2918,9629,9631],{"className":3129,"code":9630,"language":3132,"meta":2924,"style":2924},"\u003C!-- Width and height -->\n\u003CNuxtImg provider=\"github\" src=\"nuxt\" height=\"50\" width=\"50\" \u002F>\n\n\u003C!-- Width only -->\n\u003CNuxtImg provider=\"github\" src=\"unjs\" width=\"512\" \u002F>\n\n\u003C!-- Default size -->\n\u003CNuxtImg provider=\"github\" src=\"npm\" \u002F>\n",[2890,9632,9633,9638,9690,9694,9699,9739,9743,9748],{"__ignoreMap":2924},[2928,9634,9635],{"class":2930,"line":2931},[2928,9636,9637],{"class":2934},"\u003C!-- Width and height -->\n",[2928,9639,9640,9642,9644,9647,9649,9651,9653,9655,9657,9659,9661,9663,9665,9668,9670,9672,9675,9677,9680,9682,9684,9686,9688],{"class":2930,"line":2938},[2928,9641,3139],{"class":2953},[2928,9643,9303],{"class":2970},[2928,9645,9646],{"class":2945}," provider",[2928,9648,2954],{"class":2953},[2928,9650,3153],{"class":2953},[2928,9652,9619],{"class":3156},[2928,9654,3153],{"class":2953},[2928,9656,9317],{"class":2945},[2928,9658,2954],{"class":2953},[2928,9660,3153],{"class":2953},[2928,9662,4326],{"class":3156},[2928,9664,3153],{"class":2953},[2928,9666,9667],{"class":2945}," height",[2928,9669,2954],{"class":2953},[2928,9671,3153],{"class":2953},[2928,9673,9674],{"class":3156},"50",[2928,9676,3153],{"class":2953},[2928,9678,9679],{"class":2945}," width",[2928,9681,2954],{"class":2953},[2928,9683,3153],{"class":2953},[2928,9685,9674],{"class":3156},[2928,9687,3153],{"class":2953},[2928,9689,3534],{"class":2953},[2928,9691,9692],{"class":2930,"line":2967},[2928,9693,2996],{"emptyLinePlaceholder":1196},[2928,9695,9696],{"class":2930,"line":2984},[2928,9697,9698],{"class":2934},"\u003C!-- Width only -->\n",[2928,9700,9701,9703,9705,9707,9709,9711,9713,9715,9717,9719,9721,9724,9726,9728,9730,9732,9735,9737],{"class":2930,"line":2993},[2928,9702,3139],{"class":2953},[2928,9704,9303],{"class":2970},[2928,9706,9646],{"class":2945},[2928,9708,2954],{"class":2953},[2928,9710,3153],{"class":2953},[2928,9712,9619],{"class":3156},[2928,9714,3153],{"class":2953},[2928,9716,9317],{"class":2945},[2928,9718,2954],{"class":2953},[2928,9720,3153],{"class":2953},[2928,9722,9723],{"class":3156},"unjs",[2928,9725,3153],{"class":2953},[2928,9727,9679],{"class":2945},[2928,9729,2954],{"class":2953},[2928,9731,3153],{"class":2953},[2928,9733,9734],{"class":3156},"512",[2928,9736,3153],{"class":2953},[2928,9738,3534],{"class":2953},[2928,9740,9741],{"class":2930,"line":2999},[2928,9742,2996],{"emptyLinePlaceholder":1196},[2928,9744,9745],{"class":2930,"line":3005},[2928,9746,9747],{"class":2934},"\u003C!-- Default size -->\n",[2928,9749,9750,9752,9754,9756,9758,9760,9762,9764,9766,9768,9770,9773,9775],{"class":2930,"line":3036},[2928,9751,3139],{"class":2953},[2928,9753,9303],{"class":2970},[2928,9755,9646],{"class":2945},[2928,9757,2954],{"class":2953},[2928,9759,3153],{"class":2953},[2928,9761,9619],{"class":3156},[2928,9763,3153],{"class":2953},[2928,9765,9317],{"class":2945},[2928,9767,2954],{"class":2953},[2928,9769,3153],{"class":2953},[2928,9771,9772],{"class":3156},"npm",[2928,9774,3153],{"class":2953},[2928,9776,3534],{"class":2953},[2885,9778,9780],{"id":9779},"performance","⚡ Performance",[2896,9782,9783],{},"We've made several optimizations to reduce bundle size and improve runtime performance:",[4346,9785,9786,9801,9812],{},[3844,9787,9788,3248,9791,9796,9797,9800],{},[2900,9789,9790],{},"Better URL encoding",[2910,9792,9795],{"href":9793,"rel":9794},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fpull\u002F1813",[2914],"#1813",") - Switched to ",[2890,9798,9799],{},"URLSearchParams"," for more reliable parameter handling",[3844,9802,9803,3248,9806,9811],{},[2900,9804,9805],{},"Reduced runtime utilities",[2910,9807,9810],{"href":9808,"rel":9809},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fpull\u002F1816",[2914],"#1816",") - Removed unused code and simplified implementations",[3844,9813,9814,3248,9817,9822],{},[2900,9815,9816],{},"Streamlined screen sizes",[2910,9818,9821],{"href":9819,"rel":9820},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fpull\u002F1931",[2914],"#1931",") - Aligned default breakpoints with Tailwind CSS",[2885,9824,9826],{"id":9825},"better-layer-support","🎯 Better layer support",[2896,9828,9829,9830,9835],{},"Nuxt Image now properly supports custom image directories within Nuxt layers (",[2910,9831,9834],{"href":9832,"rel":9833},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fpull\u002F1880",[2914],"#1880","), making it easier to organize images in modular projects.",[2885,9837,9839],{"id":9838},"️-breaking-changes","⚠️ Breaking changes",[4543,9841,9843],{"id":9842},"provider-api","Provider API",[2896,9845,9846,9847,9849],{},"The biggest breaking change is how providers are defined. All providers now use a default export with the ",[2890,9848,8843],{}," wrapper:",[2918,9851,9853],{"className":5774,"code":9852,"language":5776,"meta":2924,"style":2924},"- export const getImage = (src, { modifiers }) => { ... }\n+ export default defineProvider({\n+   getImage(src, { modifiers }) { ... }\n+ })\n",[2890,9854,9855,9862,9869,9876],{"__ignoreMap":2924},[2928,9856,9857,9859],{"class":2930,"line":2931},[2928,9858,5783],{"class":2953},[2928,9860,9861],{"class":2970}," export const getImage = (src, { modifiers }) => { ... }\n",[2928,9863,9864,9866],{"class":2930,"line":2938},[2928,9865,5791],{"class":2953},[2928,9867,9868],{"class":3156}," export default defineProvider({\n",[2928,9870,9871,9873],{"class":2930,"line":2967},[2928,9872,5791],{"class":2953},[2928,9874,9875],{"class":3156},"   getImage(src, { modifiers }) { ... }\n",[2928,9877,9878,9880],{"class":2930,"line":2984},[2928,9879,5791],{"class":2953},[2928,9881,9882],{"class":3156}," })\n",[2896,9884,9885],{},"If you maintain a custom provider, you'll need to update it. But you get full TypeScript support in return!",[4543,9887,9889],{"id":9888},"removed-providers","Removed providers",[2896,9891,9892,9893,2892,9896,9899],{},"The deprecated ",[2890,9894,9895],{},"layer0",[2890,9897,9898],{},"edgio"," providers have been removed.",[4543,9901,9903],{"id":9902},"url-formatters","URL formatters",[2896,9905,9906,9907,9910,9911,9914,9915,9918,9919,9924],{},"If you have custom providers using ",[2890,9908,9909],{},"joinWith"," for parameter formatting, you'll need to update them to use the ",[2890,9912,9913],{},"formatter"," function with ",[2890,9916,9917],{},"createOperationsGenerator",". See the ",[2910,9920,9923],{"href":9921,"rel":9922},"https:\u002F\u002Fimage.nuxt.com\u002Fget-started\u002Fmigration#url-formatter-changes",[2914],"migration guide"," for details.",[4543,9926,9928],{"id":9927},"screen-sizes","Screen sizes",[2896,9930,9931,9932,9935,9936,9939,9940,9944],{},"Default screen sizes now match Tailwind CSS. We've removed ",[2890,9933,9934],{},"xs"," (320px) and ",[2890,9937,9938],{},"xxl"," (2560px). See the ",[2910,9941,9923],{"href":9942,"rel":9943},"https:\u002F\u002Fimage.nuxt.com\u002Fget-started\u002Fmigration#screen-size-changes",[2914]," for how to add them back if needed.",[4543,9946,9948],{"id":9947},"removed-utilities","Removed utilities",[2896,9950,9951],{},"We've removed several unused runtime utilities. If you were importing internal utilities directly, check if they still exist.",[2885,9953,6103],{"id":6102},[2896,9955,9956,9957,9961],{},"Check out our comprehensive ",[2910,9958,9923],{"href":9959,"rel":9960},"https:\u002F\u002Fimage.nuxt.com\u002Fget-started\u002Fmigration",[2914]," for step-by-step upgrade instructions.",[2896,9963,9964],{},"The quick version:",[2918,9966,9968],{"className":4317,"code":9967,"filename":8157,"language":4319,"meta":2924,"style":2924},"npm install @nuxt\u002Fimage@latest\n",[2890,9969,9970],{"__ignoreMap":2924},[2928,9971,9972,9974,9977],{"class":2930,"line":2931},[2928,9973,9772],{"class":3448},[2928,9975,9976],{"class":3156}," install",[2928,9978,9979],{"class":3156}," @nuxt\u002Fimage@latest\n",[2896,9981,9982,9983,9985,9986,9990],{},"Most apps can upgrade with no code changes. If you have custom providers, you'll need to update them to use ",[2890,9984,8843],{}," - see the ",[2910,9987,9923],{"href":9988,"rel":9989},"https:\u002F\u002Fimage.nuxt.com\u002Fget-started\u002Fmigration#custom-provider-updates",[2914]," for examples.",[2885,9992,9993],{"id":5797},"🐛 Bug fixes",[2896,9995,9996],{},"This release includes several fixes:",[4346,9998,9999,10010,10021,10032,10043,10054,10065],{},[3844,10000,10001,10004,10005,3027],{},[2900,10002,10003],{},"Preload links",": Fixed preload for multiple densities with single size (",[2910,10006,10009],{"href":10007,"rel":10008},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fpull\u002F1851",[2914],"#1851",[3844,10011,10012,10015,10016,3027],{},[2900,10013,10014],{},"Crossorigin attributes",": Correct crossorigin on preload links (",[2910,10017,10020],{"href":10018,"rel":10019},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fpull\u002F1836",[2914],"#1836",[3844,10022,10023,10026,10027,3027],{},[2900,10024,10025],{},"Provider-specific formats",": AWS Amplify and Vercel providers now have proper format allow lists (",[2910,10028,10031],{"href":10029,"rel":10030},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fpull\u002F1996",[2914],"#1996",[3844,10033,10034,10037,10038,3027],{},[2900,10035,10036],{},"Hygraph",": Prevented broken image URLs (",[2910,10039,10042],{"href":10040,"rel":10041},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fpull\u002F1999",[2914],"#1999",[3844,10044,10045,10048,10049,3027],{},[2900,10046,10047],{},"Preset sizes",": Fixed preset size application when component sizes prop is undefined (",[2910,10050,10053],{"href":10051,"rel":10052},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fpull\u002F1919",[2914],"#1919",[3844,10055,10056,10059,10060,3027],{},[2900,10057,10058],{},"Cloudflare",": Don't add baseURL if there are no operations (",[2910,10061,10064],{"href":10062,"rel":10063},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fpull\u002F1790",[2914],"#1790",[3844,10066,10067,10070,10071,3027],{},[2900,10068,10069],{},"IPX",": Always use IPX provider if external baseURL is provided (",[2910,10072,10075],{"href":10073,"rel":10074},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fpull\u002F1800",[2914],"#1800",[2885,10077,10079],{"id":10078},"thank-you","🙏 Thank you",[2896,10081,10082],{},"Thank you to all the contributors who made this release possible! This includes contributions from dozens of community members who helped with features, bug fixes, documentation improvements, and feedback.",[2885,10084,10086],{"id":10085},"resources","📚 Resources",[4346,10088,10089,10096,10103],{},[3844,10090,10091],{},[2910,10092,10095],{"href":10093,"rel":10094},"https:\u002F\u002Fimage.nuxt.com",[2914],"Documentation",[3844,10097,10098],{},[2910,10099,10102],{"href":10100,"rel":10101},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage",[2914],"GitHub Repository",[3844,10104,10105],{},[2910,10106,10108],{"href":9959,"rel":10107},[2914],"Migration Guide",[2885,10110,10111],{"id":4472},"👉 Full release notes",[3233,10113,10115],{"icon":4477,"target":4478,"to":10114},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Freleases\u002Ftag\u002Fv2.0.0",[2896,10116,10117,10118,3088],{},"Read the full release notes of Nuxt Image ",[2890,10119,10120],{},"v2.0.0",[2896,10122,10123],{},"Happy optimizing! 🖼️✨",[4489,10125,10126],{},"html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sYRBq, html code.shiki .sYRBq{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}",{"title":2924,"searchDepth":2938,"depth":2938,"links":10128},[10129,10134,10135,10136,10140,10144,10145,10146,10153,10154,10155,10156,10157],{"id":8610,"depth":2938,"text":8611,"children":10130},[10131,10132,10133],{"id":8622,"depth":2967,"text":8623},{"id":8743,"depth":2967,"text":8744},{"id":8836,"depth":2967,"text":8837},{"id":9009,"depth":2938,"text":9010},{"id":9029,"depth":2938,"text":9030},{"id":9172,"depth":2938,"text":9173,"children":10137},[10138,10139],{"id":9176,"depth":2967,"text":9177},{"id":9338,"depth":2967,"text":9339},{"id":9528,"depth":2938,"text":9529,"children":10141},[10142,10143],{"id":9532,"depth":2967,"text":9533},{"id":9619,"depth":2967,"text":8544},{"id":9779,"depth":2938,"text":9780},{"id":9825,"depth":2938,"text":9826},{"id":9838,"depth":2938,"text":9839,"children":10147},[10148,10149,10150,10151,10152],{"id":9842,"depth":2967,"text":9843},{"id":9888,"depth":2967,"text":9889},{"id":9902,"depth":2967,"text":9903},{"id":9927,"depth":2967,"text":9928},{"id":9947,"depth":2967,"text":9948},{"id":6102,"depth":2938,"text":6103},{"id":5797,"depth":2938,"text":9993},{"id":10078,"depth":2938,"text":10079},{"id":10085,"depth":2938,"text":10086},{"id":4472,"depth":2938,"text":10111},"2025-11-05","Nuxt Image v2 is out - with full TypeScript support, IPX v3, and new providers!","\u002Fassets\u002Fblog\u002Fnuxt-image-v2.png",{},"\u002Fblog\u002Fnuxt-image-v2",{"title":8591,"description":10159},"blog\u002F41.nuxt-image-v2","p5vlncpxEIn1rVz88SMT67vB1d_He6-LkkalmOl6E_g",{"id":10167,"title":10168,"authors":10169,"body":10172,"category":4517,"date":11312,"description":11313,"draft":108,"extension":4520,"image":11314,"meta":11315,"navigation":108,"path":11316,"seo":11317,"stem":11318,"tags":6,"__hash__":11319},"blog\u002Fblog\u002F40.v4-2.md","Nuxt 4.2",[10170],{"name":2877,"avatar":10171,"to":2880},{"src":2879},{"type":2882,"value":10173,"toc":11297},[10174,10177,10181,10196,10208,10354,10366,10476,10480,10494,10500,10503,10507,10520,10523,10526,10529,10573,10583,10629,10632,10638,10646,10657,10660,10666,10669,10672,10696,10700,10714,10721,10730,10951,10954,10998,11001,11005,11016,11019,11068,11079,11088,11132,11135,11140,11144,11194,11198,11255,11257,11259,11273,11276,11278,11286,11289,11294],[2896,10175,10176],{},"We're excited to announce Nuxt 4.2, bringing new capabilities for better TypeScript DX, enhanced error handling, and improved control over data fetching! 🎉",[2885,10178,10180],{"id":10179},"abort-control-for-data-fetching","🎯 Abort Control for Data Fetching",[2896,10182,10183,10184,10187,10188,10190,10191,2916],{},"You can now use ",[2890,10185,10186],{},"AbortController"," signals directly within ",[2890,10189,515],{},", giving you fine-grained control over request cancellation (",[2910,10192,10195],{"href":10193,"rel":10194},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32531",[2914],"#32531",[2896,10197,10198,10199,10201,10202,10205,10206,3088],{},"This works by passing an internal signal to your ",[2890,10200,515],{}," ",[2890,10203,10204],{},"handler"," to cancel any promise that can be canceled, such as ",[2890,10207,630],{},[2918,10209,10211],{"className":3129,"code":10210,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup lang=\"ts\">\nconst { data, error, clear, refresh } = await useAsyncData('users', (_nuxtApp, { signal }) => $fetch('\u002Fapi\u002Fusers', {\n  signal\n}))\n\nrefresh() \u002F\u002F will actually cancel the $fetch request (if dedupe: cancel)\n  \nclear() \u002F\u002F will cancel the latest pending handler\n\u003C\u002Fscript>\n",[2890,10212,10213,10233,10307,10312,10318,10322,10332,10336,10346],{"__ignoreMap":2924},[2928,10214,10215,10217,10219,10221,10223,10225,10227,10229,10231],{"class":2930,"line":2931},[2928,10216,3139],{"class":2953},[2928,10218,3142],{"class":2970},[2928,10220,3145],{"class":2945},[2928,10222,3148],{"class":2945},[2928,10224,2954],{"class":2953},[2928,10226,3153],{"class":2953},[2928,10228,2923],{"class":3156},[2928,10230,3153],{"class":2953},[2928,10232,3161],{"class":2953},[2928,10234,10235,10237,10239,10241,10243,10246,10248,10251,10253,10256,10258,10260,10262,10265,10267,10269,10272,10274,10276,10278,10281,10283,10285,10288,10290,10292,10294,10296,10298,10301,10303,10305],{"class":2930,"line":2938},[2928,10236,3171],{"class":2945},[2928,10238,3174],{"class":2953},[2928,10240,3177],{"class":2949},[2928,10242,3617],{"class":2953},[2928,10244,10245],{"class":2949}," error",[2928,10247,3617],{"class":2953},[2928,10249,10250],{"class":2949}," clear",[2928,10252,3617],{"class":2953},[2928,10254,10255],{"class":2949}," refresh ",[2928,10257,2987],{"class":2953},[2928,10259,3045],{"class":2953},[2928,10261,3189],{"class":2941},[2928,10263,10264],{"class":2957}," useAsyncData",[2928,10266,2961],{"class":2949},[2928,10268,3197],{"class":2953},[2928,10270,10271],{"class":3156},"users",[2928,10273,3197],{"class":2953},[2928,10275,3617],{"class":2953},[2928,10277,3248],{"class":2953},[2928,10279,10280],{"class":3023},"_nuxtApp",[2928,10282,3617],{"class":2953},[2928,10284,3174],{"class":2953},[2928,10286,10287],{"class":3023}," signal",[2928,10289,6682],{"class":2953},[2928,10291,3030],{"class":2945},[2928,10293,3664],{"class":2957},[2928,10295,2961],{"class":2949},[2928,10297,3197],{"class":2953},[2928,10299,10300],{"class":3156},"\u002Fapi\u002Fusers",[2928,10302,3197],{"class":2953},[2928,10304,3617],{"class":2953},[2928,10306,3033],{"class":2953},[2928,10308,10309],{"class":2930,"line":2967},[2928,10310,10311],{"class":2949},"  signal\n",[2928,10313,10314,10316],{"class":2930,"line":2984},[2928,10315,2987],{"class":2953},[2928,10317,7346],{"class":2949},[2928,10319,10320],{"class":2930,"line":2993},[2928,10321,2996],{"emptyLinePlaceholder":1196},[2928,10323,10324,10326,10329],{"class":2930,"line":2999},[2928,10325,3934],{"class":2957},[2928,10327,10328],{"class":2949},"() ",[2928,10330,10331],{"class":2934},"\u002F\u002F will actually cancel the $fetch request (if dedupe: cancel)\n",[2928,10333,10334],{"class":2930,"line":3005},[2928,10335,9082],{"class":2949},[2928,10337,10338,10341,10343],{"class":2930,"line":3036},[2928,10339,10340],{"class":2957},"clear",[2928,10342,10328],{"class":2949},[2928,10344,10345],{"class":2934},"\u002F\u002F will cancel the latest pending handler\n",[2928,10347,10348,10350,10352],{"class":2930,"line":3054},[2928,10349,3209],{"class":2953},[2928,10351,3142],{"class":2970},[2928,10353,3161],{"class":2953},[2896,10355,10356,10357,10359,10360,3288,10362,10365],{},"You also pass an ",[2890,10358,10186],{}," signal directly to ",[2890,10361,3934],{},[2890,10363,10364],{},"execute",", giving you fine-grained control over request cancellation. This is particularly useful when you need to abort requests based on user actions or component lifecycle events.",[2918,10367,10369],{"className":2920,"code":10368,"language":2923,"meta":2924,"style":2924},"const { data, refresh } = await useAsyncData('posts', fetchPosts)\n\n\u002F\u002F Abort an ongoing refresh\nconst abortController = new AbortController()\nrefresh({ signal: abortController.signal })\n\n\u002F\u002F Later...\nabortController.abort()\n",[2890,10370,10371,10405,10409,10414,10431,10455,10459,10464],{"__ignoreMap":2924},[2928,10372,10373,10375,10377,10379,10381,10383,10385,10387,10389,10391,10393,10395,10398,10400,10402],{"class":2930,"line":2931},[2928,10374,3171],{"class":2945},[2928,10376,3174],{"class":2953},[2928,10378,3177],{"class":2949},[2928,10380,3617],{"class":2953},[2928,10382,10255],{"class":2949},[2928,10384,2987],{"class":2953},[2928,10386,3045],{"class":2953},[2928,10388,3189],{"class":2941},[2928,10390,10264],{"class":2957},[2928,10392,2961],{"class":2949},[2928,10394,3197],{"class":2953},[2928,10396,10397],{"class":3156},"posts",[2928,10399,3197],{"class":2953},[2928,10401,3617],{"class":2953},[2928,10403,10404],{"class":2949}," fetchPosts)\n",[2928,10406,10407],{"class":2930,"line":2938},[2928,10408,2996],{"emptyLinePlaceholder":1196},[2928,10410,10411],{"class":2930,"line":2967},[2928,10412,10413],{"class":2934},"\u002F\u002F Abort an ongoing refresh\n",[2928,10415,10416,10418,10421,10423,10426,10429],{"class":2930,"line":2984},[2928,10417,3171],{"class":2945},[2928,10419,10420],{"class":2949}," abortController ",[2928,10422,2954],{"class":2953},[2928,10424,10425],{"class":2953}," new",[2928,10427,10428],{"class":2957}," AbortController",[2928,10430,3051],{"class":2949},[2928,10432,10433,10435,10437,10439,10441,10443,10446,10448,10451,10453],{"class":2930,"line":2993},[2928,10434,3934],{"class":2957},[2928,10436,2961],{"class":2949},[2928,10438,9398],{"class":2953},[2928,10440,10287],{"class":2970},[2928,10442,2974],{"class":2953},[2928,10444,10445],{"class":2949}," abortController",[2928,10447,3088],{"class":2953},[2928,10449,10450],{"class":2949},"signal ",[2928,10452,2987],{"class":2953},[2928,10454,2990],{"class":2949},[2928,10456,10457],{"class":2930,"line":2999},[2928,10458,2996],{"emptyLinePlaceholder":1196},[2928,10460,10461],{"class":2930,"line":3005},[2928,10462,10463],{"class":2934},"\u002F\u002F Later...\n",[2928,10465,10466,10469,10471,10474],{"class":2930,"line":3036},[2928,10467,10468],{"class":2949},"abortController",[2928,10470,3088],{"class":2953},[2928,10472,10473],{"class":2957},"abort",[2928,10475,3051],{"class":2949},[2885,10477,10479],{"id":10478},"better-error-pages-in-development","🎨 Better Error Pages in Development",[2896,10481,10482,10483,10487,10488,10493],{},"When an error occurs during development, Nuxt will now display both your custom error page ",[10484,10485,10486],"em",{},"and"," a detailed technical error overlay (",[2910,10489,10492],{"href":10490,"rel":10491},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33359",[2914],"#33359","). This gives you the best of both worlds – you can see what your users will experience while also having immediate access to stack traces and debugging information.",[2896,10495,10496],{},[4183,10497],{"alt":10498,"src":10499},"Screenshot of the new development error page","\u002Fassets\u002Fblog\u002Fnuxt-error-page.png",[2896,10501,10502],{},"The technical overlay appears as a toggleable panel that doesn't interfere with your custom error page, making it easier to debug issues while maintaining a realistic preview of your error handling.",[2885,10504,10506],{"id":10505},"opt-in-vite-environment-api","🔮 Opt-in Vite Environment API",[2896,10508,10509,10510,3248,10515,2916],{},"For those wanting to experiment with cutting-edge features, you can now opt into the ",[2910,10511,10514],{"href":10512,"rel":10513},"https:\u002F\u002Fvite.dev\u002Fguide\u002Fapi-environment",[2914],"Vite Environment API",[2910,10516,10519],{"href":10517,"rel":10518},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33492",[2914],"#33492",[2896,10521,10522],{},"The Vite Environment API is a major architectural improvement in Vite 6. It closes the gap between development and production by allowing the Vite dev server to handle multiple environments concurrently (rather than requiring multiple Vite dev servers, as we have done previously in Nuxt).",[2896,10524,10525],{},"This should improve performance when developing and eliminate some edge case bugs.",[2896,10527,10528],{},"... and it is the foundation for implementing Nitro as a Vite environment, which should speed up the dev server still further, as well as allowing more greater alignment in development with your Nitro preset.",[2918,10530,10532],{"className":2920,"code":10531,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  experimental: {\n    viteEnvironmentApi: true\n  }\n})\n",[2890,10533,10534,10546,10554,10563,10567],{"__ignoreMap":2924},[2928,10535,10536,10538,10540,10542,10544],{"class":2930,"line":2931},[2928,10537,2942],{"class":2941},[2928,10539,3871],{"class":2941},[2928,10541,3874],{"class":2957},[2928,10543,2961],{"class":2949},[2928,10545,2964],{"class":2953},[2928,10547,10548,10550,10552],{"class":2930,"line":2938},[2928,10549,3883],{"class":2970},[2928,10551,2974],{"class":2953},[2928,10553,3033],{"class":2953},[2928,10555,10556,10559,10561],{"class":2930,"line":2967},[2928,10557,10558],{"class":2970},"    viteEnvironmentApi",[2928,10560,2974],{"class":2953},[2928,10562,8120],{"class":2977},[2928,10564,10565],{"class":2930,"line":2984},[2928,10566,3113],{"class":2953},[2928,10568,10569,10571],{"class":2930,"line":2993},[2928,10570,2987],{"class":2953},[2928,10572,2990],{"class":2949},[2896,10574,10575,10576,10579,10580,2974],{},"This is also the first breaking change for Nuxt v5. You can opt in to these breaking changes by setting ",[2890,10577,10578],{},"compatibilityVersion"," to ",[2890,10581,10582],{},"5",[2918,10584,10586],{"className":2920,"code":10585,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  future: {\n    compatibilityVersion: 5\n  },\n})\n",[2890,10587,10588,10600,10609,10619,10623],{"__ignoreMap":2924},[2928,10589,10590,10592,10594,10596,10598],{"class":2930,"line":2931},[2928,10591,2942],{"class":2941},[2928,10593,3871],{"class":2941},[2928,10595,3874],{"class":2957},[2928,10597,2961],{"class":2949},[2928,10599,2964],{"class":2953},[2928,10601,10602,10605,10607],{"class":2930,"line":2938},[2928,10603,10604],{"class":2970},"  future",[2928,10606,2974],{"class":2953},[2928,10608,3033],{"class":2953},[2928,10610,10611,10614,10616],{"class":2930,"line":2967},[2928,10612,10613],{"class":2970},"    compatibilityVersion",[2928,10615,2974],{"class":2953},[2928,10617,10618],{"class":3988}," 5\n",[2928,10620,10621],{"class":2930,"line":2984},[2928,10622,3383],{"class":2953},[2928,10624,10625,10627],{"class":2930,"line":2993},[2928,10626,2987],{"class":2953},[2928,10628,2990],{"class":2949},[2896,10630,10631],{},"Please only use this for testing, as this opts in to unlimited future breaking changes, including updating to Nitro v3 once we ship the Nuxt integration.",[6238,10633,10635],{"type":10634},"warning",[2896,10636,10637],{},"This is highly experimental and the API may change. Only enable if you're prepared for potential breaking changes and want to help shape the future of Nuxt!",[2885,10639,10641,10642,10645],{"id":10640},"new-nuxtnitro-server-package","📦 New ",[2890,10643,10644],{},"@nuxt\u002Fnitro-server"," Package",[2896,10647,10648,10649,3248,10651,10656],{},"We've extracted Nitro server integration into its own package: ",[2890,10650,10644],{},[2910,10652,10655],{"href":10653,"rel":10654},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33462",[2914],"#33462","). This architectural change allows for different Nitro integration patterns and paves the way for future innovations in server-side rendering.",[2896,10658,10659],{},"While this change is mostly internal, it's part of our ongoing effort to make Nuxt more modular and flexible. The new package provides standalone Nitro integration and sets the foundation for alternative integration approaches (such as using Nitro as a Vite plugin in Nuxt v5+).",[6238,10661,10663],{"type":10662},"info",[2896,10664,10665],{},"This is an internal refactor – no changes should be required in your code.",[2885,10667,10668],{"id":4394},"⚡ Performance Improvements",[2896,10670,10671],{},"We've also shipped several performance enhancements:",[4346,10673,10674,10685],{},[3844,10675,10676,10679,10680,3027],{},[2900,10677,10678],{},"Precomputed renderer dependencies"," – We now compute renderer dependencies at build time rather than runtime, improving cold start and initial render performance (",[2910,10681,10684],{"href":10682,"rel":10683},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33361",[2914],"#33361",[3844,10686,10687,10690,10691,3027],{},[2900,10688,10689],{},"Reduced dependencies"," – Removed unnecessary dependencies from kit and schema packages (",[2910,10692,10695],{"href":10693,"rel":10694},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fcommit\u002F7ae2cf563",[2914],"7ae2cf563",[4543,10697,10699],{"id":10698},"async-data-handler-extraction","📉 Async Data Handler Extraction",[2896,10701,10702,10703,10708,10709,2892,10711,10713],{},"One of the most exciting performance improvements is the new experimental async data handler extraction (",[2910,10704,10707],{"href":10705,"rel":10706},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33131",[2914],"#33131","). When enabled, handler functions passed to ",[2890,10710,515],{},[2890,10712,543],{}," are automatically extracted into separate chunks and dynamically imported.",[2896,10715,10716,10717,10720],{},"This is ",[2900,10718,10719],{},"particularly effective for prerendered static sites",", as the data fetching logic is only needed at build time and can be completely excluded from the client bundle.",[6238,10722,10723],{"type":10662},[2896,10724,10725,10726,10729],{},"In testing with a previous version of nuxt.com, this feature ",[2900,10727,10728],{},"reduced JavaScript bundle size by 39%","! Of course, your mileage may vary depending on how much data fetching logic you have.",[2918,10731,10734],{"className":3129,"code":10732,"filename":10733,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup lang=\"ts\">\n\u002F\u002F This handler will be extracted into a separate chunk\n\u002F\u002F and only loaded when needed\nconst { data: post } = await useAsyncData('post', async () => {\n  const content = await queryContent(`\u002Fblog\u002F${route.params.slug}`).findOne()\n  \n  \u002F\u002F Complex data processing that you don't want in the client bundle\n  const processed = await processMarkdown(content)\n  const related = await findRelatedPosts(content.tags)\n  \n  return {\n    ...processed,\n    related\n  }\n})\n\u003C\u002Fscript>\n","pages\u002Fblog\u002F[slug].vue",[2890,10735,10736,10756,10761,10766,10807,10855,10859,10864,10884,10909,10913,10919,10928,10933,10937,10943],{"__ignoreMap":2924},[2928,10737,10738,10740,10742,10744,10746,10748,10750,10752,10754],{"class":2930,"line":2931},[2928,10739,3139],{"class":2953},[2928,10741,3142],{"class":2970},[2928,10743,3145],{"class":2945},[2928,10745,3148],{"class":2945},[2928,10747,2954],{"class":2953},[2928,10749,3153],{"class":2953},[2928,10751,2923],{"class":3156},[2928,10753,3153],{"class":2953},[2928,10755,3161],{"class":2953},[2928,10757,10758],{"class":2930,"line":2938},[2928,10759,10760],{"class":2934},"\u002F\u002F This handler will be extracted into a separate chunk\n",[2928,10762,10763],{"class":2930,"line":2967},[2928,10764,10765],{"class":2934},"\u002F\u002F and only loaded when needed\n",[2928,10767,10768,10770,10772,10774,10776,10779,10781,10783,10785,10787,10789,10791,10794,10796,10798,10801,10803,10805],{"class":2930,"line":2984},[2928,10769,3171],{"class":2945},[2928,10771,3174],{"class":2953},[2928,10773,3177],{"class":2970},[2928,10775,2974],{"class":2953},[2928,10777,10778],{"class":2949}," post ",[2928,10780,2987],{"class":2953},[2928,10782,3045],{"class":2953},[2928,10784,3189],{"class":2941},[2928,10786,10264],{"class":2957},[2928,10788,2961],{"class":2949},[2928,10790,3197],{"class":2953},[2928,10792,10793],{"class":3156},"post",[2928,10795,3197],{"class":2953},[2928,10797,3617],{"class":2953},[2928,10799,10800],{"class":2945}," async",[2928,10802,4102],{"class":2953},[2928,10804,3030],{"class":2945},[2928,10806,3033],{"class":2953},[2928,10808,10809,10811,10814,10816,10818,10821,10823,10825,10828,10830,10833,10835,10838,10840,10843,10846,10848,10850,10853],{"class":2930,"line":2993},[2928,10810,3039],{"class":2945},[2928,10812,10813],{"class":2949}," content",[2928,10815,3045],{"class":2953},[2928,10817,3189],{"class":2941},[2928,10819,10820],{"class":2957}," queryContent",[2928,10822,2961],{"class":2970},[2928,10824,6555],{"class":2953},[2928,10826,10827],{"class":3156},"\u002Fblog\u002F",[2928,10829,6880],{"class":2953},[2928,10831,10832],{"class":2949},"route",[2928,10834,3088],{"class":2953},[2928,10836,10837],{"class":2949},"params",[2928,10839,3088],{"class":2953},[2928,10841,10842],{"class":2949},"slug",[2928,10844,10845],{"class":2953},"}`",[2928,10847,3027],{"class":2970},[2928,10849,3088],{"class":2953},[2928,10851,10852],{"class":2957},"findOne",[2928,10854,3051],{"class":2970},[2928,10856,10857],{"class":2930,"line":2999},[2928,10858,9082],{"class":2970},[2928,10860,10861],{"class":2930,"line":3005},[2928,10862,10863],{"class":2934},"  \u002F\u002F Complex data processing that you don't want in the client bundle\n",[2928,10865,10866,10868,10871,10873,10875,10878,10880,10882],{"class":2930,"line":3036},[2928,10867,3039],{"class":2945},[2928,10869,10870],{"class":2949}," processed",[2928,10872,3045],{"class":2953},[2928,10874,3189],{"class":2941},[2928,10876,10877],{"class":2957}," processMarkdown",[2928,10879,2961],{"class":2970},[2928,10881,142],{"class":2949},[2928,10883,2990],{"class":2970},[2928,10885,10886,10888,10891,10893,10895,10898,10900,10902,10904,10907],{"class":2930,"line":3054},[2928,10887,3039],{"class":2945},[2928,10889,10890],{"class":2949}," related",[2928,10892,3045],{"class":2953},[2928,10894,3189],{"class":2941},[2928,10896,10897],{"class":2957}," findRelatedPosts",[2928,10899,2961],{"class":2970},[2928,10901,142],{"class":2949},[2928,10903,3088],{"class":2953},[2928,10905,10906],{"class":2949},"tags",[2928,10908,2990],{"class":2970},[2928,10910,10911],{"class":2930,"line":3059},[2928,10912,9082],{"class":2970},[2928,10914,10915,10917],{"class":2930,"line":3067},[2928,10916,3062],{"class":2941},[2928,10918,3033],{"class":2953},[2928,10920,10921,10923,10926],{"class":2930,"line":3077},[2928,10922,3070],{"class":2953},[2928,10924,10925],{"class":2949},"processed",[2928,10927,2981],{"class":2953},[2928,10929,10930],{"class":2930,"line":3110},[2928,10931,10932],{"class":2949},"    related\n",[2928,10934,10935],{"class":2930,"line":3116},[2928,10936,3113],{"class":2953},[2928,10938,10939,10941],{"class":2930,"line":6687},[2928,10940,2987],{"class":2953},[2928,10942,2990],{"class":2949},[2928,10944,10945,10947,10949],{"class":2930,"line":6703},[2928,10946,3209],{"class":2953},[2928,10948,3142],{"class":2970},[2928,10950,3161],{"class":2953},[2896,10952,10953],{},"For static\u002Fprerendered sites, enable it in your config:",[2918,10955,10957],{"className":2920,"code":10956,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  experimental: {\n    extractAsyncDataHandlers: true\n  }\n})\n",[2890,10958,10959,10971,10979,10988,10992],{"__ignoreMap":2924},[2928,10960,10961,10963,10965,10967,10969],{"class":2930,"line":2931},[2928,10962,2942],{"class":2941},[2928,10964,3871],{"class":2941},[2928,10966,3874],{"class":2957},[2928,10968,2961],{"class":2949},[2928,10970,2964],{"class":2953},[2928,10972,10973,10975,10977],{"class":2930,"line":2938},[2928,10974,3883],{"class":2970},[2928,10976,2974],{"class":2953},[2928,10978,3033],{"class":2953},[2928,10980,10981,10984,10986],{"class":2930,"line":2967},[2928,10982,10983],{"class":2970},"    extractAsyncDataHandlers",[2928,10985,2974],{"class":2953},[2928,10987,8120],{"class":2977},[2928,10989,10990],{"class":2930,"line":2984},[2928,10991,3113],{"class":2953},[2928,10993,10994,10996],{"class":2930,"line":2993},[2928,10995,2987],{"class":2953},[2928,10997,2990],{"class":2949},[2896,10999,11000],{},"The extracted handlers are then tree-shaken from your client bundle when prerendering, as the data is already available in the payload. This results in significantly smaller JavaScript files shipped to your users.",[2885,11002,11004],{"id":11003},"experimental-typescript-plugin-support","🔧 Experimental TypeScript Plugin Support",[2896,11006,11007,11008,11015],{},"We're introducing experimental support for enhanced TypeScript developer experience through the ",[2910,11009,11012],{"href":11010,"rel":11011},"https:\u002F\u002Fgithub.com\u002FKazariEX\u002Fdxup",[2914],[2890,11013,11014],{},"@dxup\u002Fnuxt"," module.",[2896,11017,11018],{},"This module adds a number of TypeScript plugins that aim to improve your experience when using Nuxt-specific features:",[4346,11020,11021,11027,11036,11048,11054],{},[3844,11022,11023,11026],{},[2900,11024,11025],{},"Smart component renaming",": Automatically updates all references when you rename auto-imported component files",[3844,11028,11029,11032,11033],{},[2900,11030,11031],{},"Go to definition for dynamic imports",": Navigate directly to files when using glob patterns like ",[2890,11034,11035],{},"import(`~\u002Fassets\u002F${name}.webp`)",[3844,11037,11038,11041,11042,4309,11044,4309,11046,3027],{},[2900,11039,11040],{},"Nitro route navigation",": Jump to server route handlers from data fetching functions (",[2890,11043,630],{},[2890,11045,527],{},[2890,11047,547],{},[3844,11049,11050,11053],{},[2900,11051,11052],{},"Runtime config navigation",": Go to definition works seamlessly with runtime config properties",[3844,11055,11056,11059,11060,11067],{},[2900,11057,11058],{},"Enhanced auto-import support",": Includes the ",[2910,11061,11064],{"href":11062,"rel":11063},"https:\u002F\u002Fgithub.com\u002FKazariEX\u002Fdxup\u002Ftree\u002Fmain\u002Fpackages\u002Funimport",[2914],[2890,11065,11066],{},"@dxup\u002Funimport"," plugin for better navigation with auto-imported composables and utilities",[3774,11069,11071],{"to":11070},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fexperimental-features#typescriptplugin",[2896,11072,11073,11074,3088],{},"Read more in ",[2900,11075,11076],{},[2910,11077,11078],{"href":11070},"the documentation",[2896,11080,11081,11082,10579,11085,11087],{},"To enable this feature, set ",[2890,11083,11084],{},"experimental.typescriptPlugin",[2890,11086,4902],{}," in your Nuxt configuration:",[2918,11089,11091],{"className":2920,"code":11090,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  experimental: {\n    typescriptPlugin: true\n  }\n})\n",[2890,11092,11093,11105,11113,11122,11126],{"__ignoreMap":2924},[2928,11094,11095,11097,11099,11101,11103],{"class":2930,"line":2931},[2928,11096,2942],{"class":2941},[2928,11098,3871],{"class":2941},[2928,11100,3874],{"class":2957},[2928,11102,2961],{"class":2949},[2928,11104,2964],{"class":2953},[2928,11106,11107,11109,11111],{"class":2930,"line":2938},[2928,11108,3883],{"class":2970},[2928,11110,2974],{"class":2953},[2928,11112,3033],{"class":2953},[2928,11114,11115,11118,11120],{"class":2930,"line":2967},[2928,11116,11117],{"class":2970},"    typescriptPlugin",[2928,11119,2974],{"class":2953},[2928,11121,8120],{"class":2977},[2928,11123,11124],{"class":2930,"line":2984},[2928,11125,3113],{"class":2953},[2928,11127,11128,11130],{"class":2930,"line":2993},[2928,11129,2987],{"class":2953},[2928,11131,2990],{"class":2949},[2896,11133,11134],{},"Once enabled, the module will be automatically installed and configured by Nuxt.",[10634,11136,11137],{},[2896,11138,11139],{},"This feature also requires selecting the workspace TypeScript version in VS Code. Run the \"TypeScript: Select TypeScript Version\" command and choose \"Use Workspace Version\".",[2885,11141,11143],{"id":11142},"other-improvements","🎁 Other Improvements",[4346,11145,11146,11160,11179],{},[3844,11147,11148,11154,11155,3027],{},[2900,11149,11150,11151],{},"Component ",[2890,11152,11153],{},"declarationPath"," – You can now specify a custom declaration path for components (",[2910,11156,11159],{"href":11157,"rel":11158},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33419",[2914],"#33419",[3844,11161,11162,11165,11166,11169,11170,11173,11174,3027],{},[2900,11163,11164],{},"Module resolution extensions"," – Kit's ",[2890,11167,11168],{},"resolveModule"," now accepts an ",[2890,11171,11172],{},"extensions"," option (",[2910,11175,11178],{"href":11176,"rel":11177},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33328",[2914],"#33328",[3844,11180,11181,11184,11185,11188,11189,3027],{},[2900,11182,11183],{},"Global head utility"," – New ",[2890,11186,11187],{},"setGlobalHead"," utility in kit for easier head management (",[2910,11190,11193],{"href":11191,"rel":11192},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33512",[2914],"#33512",[2885,11195,11197],{"id":11196},"important-fixes","🩹 Important Fixes",[4346,11199,11200,11210,11222,11235,11247],{},[3844,11201,11202,11203,3248,11205,3027],{},"Route hash is now preserved when redirecting based on ",[2890,11204,4782],{},[2910,11206,11209],{"href":11207,"rel":11208},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33222",[2914],"#33222",[3844,11211,11212,11213,11216,11217,3027],{},"Fixed concurrent calls to ",[2890,11214,11215],{},"loadNuxtConfig"," with proper cleanup (",[2910,11218,11221],{"href":11219,"rel":11220},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33420",[2914],"#33420",[3844,11223,11224,11225,11227,11228,3248,11230,3027],{},"Object-format ",[2890,11226,7382],{}," now works correctly in ",[2890,11229,476],{},[2910,11231,11234],{"href":11232,"rel":11233},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fcommit\u002Fc69e4c30d",[2914],"c69e4c30d",[3844,11236,11237,11238,11241,11242,3027],{},"Component auto-imports now work as arguments to Vue's ",[2890,11239,11240],{},"h()"," function (",[2910,11243,11246],{"href":11244,"rel":11245},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33509",[2914],"#33509",[3844,11248,11249,11250,3027],{},"Fixed app config array handling during HMR (",[2910,11251,11254],{"href":11252,"rel":11253},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33555",[2914],"#33555",[2885,11256,6103],{"id":6102},[2896,11258,4434],{},[2918,11260,11261],{"className":4437,"code":4438,"language":4439,"meta":2924,"style":2924},[2890,11262,11263],{"__ignoreMap":2924},[2928,11264,11265,11267,11269,11271],{"class":2930,"line":2931},[2928,11266,4446],{"class":3448},[2928,11268,4449],{"class":3156},[2928,11270,4452],{"class":3156},[2928,11272,4455],{"class":3156},[2896,11274,11275],{},"This will refresh your lockfile and pull in all the latest dependencies that Nuxt relies on, especially from the unjs ecosystem.",[2885,11277,4473],{"id":4472},[3233,11279,11281],{"icon":4477,"target":4478,"to":11280},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv4.2.0",[2896,11282,4481,11283,3088],{},[2890,11284,11285],{},"v4.2.0",[2896,11287,11288],{},"Thank you for reading this far! We hope you enjoy the new release. Please do let us know if you have any feedback or issues.",[2896,11290,11291],{},[2900,11292,11293],{},"Happy Nuxting ✨",[4489,11295,11296],{},"html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}html pre.shiki code .sYRBq, html code.shiki .sYRBq{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}",{"title":2924,"searchDepth":2938,"depth":2938,"links":11298},[11299,11300,11301,11302,11304,11307,11308,11309,11310,11311],{"id":10179,"depth":2938,"text":10180},{"id":10478,"depth":2938,"text":10479},{"id":10505,"depth":2938,"text":10506},{"id":10640,"depth":2938,"text":11303},"📦 New @nuxt\u002Fnitro-server Package",{"id":4394,"depth":2938,"text":10668,"children":11305},[11306],{"id":10698,"depth":2967,"text":10699},{"id":11003,"depth":2938,"text":11004},{"id":11142,"depth":2938,"text":11143},{"id":11196,"depth":2938,"text":11197},{"id":6102,"depth":2938,"text":6103},{"id":4472,"depth":2938,"text":4473},"2025-10-25","Nuxt 4.2 is out - with experimental TypeScript plugin support, better error handling in development, abort control for data fetching, and more!","\u002Fassets\u002Fblog\u002Fv4.2.png",{},"\u002Fblog\u002Fv4-2",{"title":10168,"description":11313},"blog\u002F40.v4-2","Bc0o4v6rZnY2ofQaORK-2ChSjtxX8aEsoZygpORRMB8",{"id":11321,"title":11322,"authors":11323,"body":11335,"category":4517,"date":12239,"description":12240,"draft":108,"extension":4520,"image":12241,"meta":12242,"navigation":108,"path":12243,"seo":12244,"stem":12245,"tags":6,"__hash__":12246},"blog\u002Fblog\u002F39.nuxt-ui-v4.md","Nuxt UI v4",[11324,11329,11333],{"name":11325,"avatar":11326,"to":11328},"Benjamin Canac",{"src":11327},"https:\u002F\u002Fgithub.com\u002Fbenjamincanac.png","https:\u002F\u002Fx.com\u002Fbenjamincanac",{"name":6222,"avatar":11330,"to":11332},{"src":11331},"https:\u002F\u002Fgithub.com\u002Fatinux.png","https:\u002F\u002Fx.com\u002Fatinux",{"name":6217,"avatar":11334,"to":6220},{"src":6219},{"type":2882,"value":11336,"toc":12227},[11337,11347,11368,11377,11381,11384,11391,11462,11465,11898,11902,11909,11916,11923,11927,11931,11934,11938,11941,11948,11952,11955,11976,11980,11995,11999,12002,12005,12009,12012,12179,12182,12196,12200,12203,12206,12209,12224],[2896,11338,11339,11340,11346],{},"Today, we’re releasing ",[2910,11341,11344],{"href":11342,"rel":11343},"https:\u002F\u002Fui.nuxt.com",[2914],[2900,11345,11322],{},", a major milestone that sets a new standard for our component library. With this release, we are unifying Nuxt UI and Nuxt UI Pro into a single, powerful, and completely free open-source library.",[2896,11348,11349,11350,11355,11356,11361,11362,11367],{},"This marks an exciting new chapter for the Vue and Nuxt ecosystems, made possible by ",[2910,11351,11354],{"href":11352,"rel":11353},"https:\u002F\u002Fnuxtlabs.com",[2914],"NuxtLabs joining Vercel",". Our shared commitment to the open-source community has allowed us to make every component, from a ",[2910,11357,11360],{"href":11358,"rel":11359},"https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Fbutton",[2914],"simple button"," to the most advanced ",[2910,11363,11366],{"href":11364,"rel":11365},"https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Fdashboard-sidebar",[2914],"dashboard sidebar",", accessible to everyone.",[2896,11369,11370,11371,11376],{},"What was previously a premium offering is now available to all. Over 100 components, advanced sections, and ",[2910,11372,11375],{"href":11373,"rel":11374},"https:\u002F\u002Fui.nuxt.com\u002Ftemplates",[2914],"production-ready templates"," are now yours to build with, unified in one place.",[2885,11378,11380],{"id":11379},"build-anything-faster-than-ever","Build anything, faster than ever",[2896,11382,11383],{},"Nuxt UI v4 makes it easy to build modern, polished apps quickly. You can create complex interfaces like landing pages, pricing pages, docs, blogs, portfolios, etc. without starting from scratch.",[2896,11385,11386,11387,11390],{},"This is possible because Nuxt UI v4 unifies everything you need into a single ",[2890,11388,11389],{},"@nuxt\u002Fui"," package:",[4346,11392,11393,11399,11440,11446],{},[3844,11394,11395,11398],{},[2900,11396,11397],{},"110+ components:"," An extensive library to build anything from simple websites to complex applications.",[3844,11400,11401,11404,11405,4309,11410,4309,11415,4309,11419,4309,11424,4309,11429,11434,11435,3088],{},[2900,11402,11403],{},"12 free templates:"," Start your next project in minutes with a production-ready template for a ",[2910,11406,11409],{"href":11407,"rel":11408},"https:\u002F\u002Flanding-template.nuxt.dev",[2914],"Landing Page",[2910,11411,11414],{"href":11412,"rel":11413},"https:\u002F\u002Fsaas-template.nuxt.dev",[2914],"SaaS",[2910,11416,3369],{"href":11417,"rel":11418},"https:\u002F\u002Fdashboard-template.nuxt.dev",[2914],[2910,11420,11423],{"href":11421,"rel":11422},"https:\u002F\u002Fdocs-template.nuxt.dev",[2914],"Docs site",[2910,11425,11428],{"href":11426,"rel":11427},"https:\u002F\u002Fportfolio-template.nuxt.dev",[2914],"Portfolio",[2910,11430,11433],{"href":11431,"rel":11432},"https:\u002F\u002Fchat-template.nuxt.dev",[2914],"Chat app",", or ",[2910,11436,11439],{"href":11437,"rel":11438},"https:\u002F\u002Fchangelog-template.nuxt.dev",[2914],"Changelog",[3844,11441,11442,11445],{},[2900,11443,11444],{},"Rich Content & Typography:"," Beautifully render Markdown and build content-rich sites with our advanced prose components, fully integrated with Nuxt Content.",[3844,11447,11448,11451,11452,2892,11457,3088],{},[2900,11449,11450],{},"Vue and Nuxt Compatibility:"," Works in any Vue or Nuxt project, as well as ",[2910,11453,11456],{"href":11454,"rel":11455},"https:\u002F\u002Fgithub.com\u002Fnuxt-ui-templates\u002Fstarter-adonis",[2914],"Adonis",[2910,11458,11461],{"href":11459,"rel":11460},"https:\u002F\u002Fgithub.com\u002Fnuxt-ui-templates\u002Fstarter-laravel",[2914],"Laravel",[2896,11463,11464],{},"The entire Pro suite is now yours. Build with powerful components previously exclusive to our paid users, now free for everyone.",[11466,11467,11470,11887],"tabs",{"className":11468},[11469],"gap-0",[11471,11472,11474],"div",{"label":11473},"index.vue",[2918,11475,11477],{"className":3129,"code":11476,"language":3132,"meta":2924,"style":2924},"  \u003Ctemplate>\n    \u003CUApp>\n      \u003CUHeader>\n        \u003CUNavigationMenu :items=\"navigation\" \u002F>\n        \u003Ctemplate #right>\n          \u003CUColorModeButton \u002F>\n          \u003CUButton icon=\"i-simple-icons-github\" \u002F>\n        \u003C\u002Ftemplate>\n      \u003C\u002FUHeader>\n\n      \u003CUPageHero\n        title=\"Nuxt UI - Starter\"\n        description=\"Nuxt UI is a free and open-source UI library for Nuxt applications. Create beautiful & responsive applications in minutes.\"\n        :links=\"heroLinks\"\n      \u002F>\n\n      \u003CUPageSection\n        title=\"The freedom to build anything\"\n        description=\"Nuxt UI ships with a comprehensive set of components that cover a wide range of use-cases. Carefully crafted to reduce boilerplate code without sacrificing flexibility.\"\n        :features=\"features\"\n      \u002F>\n\n      \u003CUPageSection title=\"Pricing\">\n        \u003CUPricingPlans :plans=\"plans\" \u002F>\n      \u003C\u002FUPageSection>\n\n      \u003CUPageSection>\n        \u003CUPageCTA\n          title=\"Start with Nuxt UI today!\"\n          description=\"Nuxt UI is a free and open-source UI library for Nuxt applications.\"\n          variant=\"subtle\"\n          :links=\"ctaLinks\"\n        \u002F>\n      \u003C\u002FUPageSection>\n\n      \u003CUFooter :items=\"footerItems\" \u002F>\n    \u003C\u002FUApp>\n  \u003C\u002Ftemplate>\n",[2890,11478,11479,11487,11496,11505,11527,11540,11550,11570,11579,11588,11592,11599,11614,11628,11642,11647,11651,11658,11671,11684,11698,11702,11706,11727,11748,11756,11760,11768,11775,11789,11803,11817,11831,11836,11844,11848,11869,11878],{"__ignoreMap":2924},[2928,11480,11481,11483,11485],{"class":2930,"line":2931},[2928,11482,3528],{"class":2953},[2928,11484,3521],{"class":2970},[2928,11486,3161],{"class":2953},[2928,11488,11489,11491,11494],{"class":2930,"line":2938},[2928,11490,3557],{"class":2953},[2928,11492,11493],{"class":2970},"UApp",[2928,11495,3161],{"class":2953},[2928,11497,11498,11500,11503],{"class":2930,"line":2967},[2928,11499,9422],{"class":2953},[2928,11501,11502],{"class":2970},"UHeader",[2928,11504,3161],{"class":2953},[2928,11506,11507,11510,11513,11516,11518,11520,11523,11525],{"class":2930,"line":2984},[2928,11508,11509],{"class":2953},"        \u003C",[2928,11511,11512],{"class":2970},"UNavigationMenu",[2928,11514,11515],{"class":2945}," :items",[2928,11517,2954],{"class":2953},[2928,11519,3153],{"class":2953},[2928,11521,11522],{"class":3156},"navigation",[2928,11524,3153],{"class":2953},[2928,11526,3534],{"class":2953},[2928,11528,11529,11531,11533,11535,11538],{"class":2930,"line":2993},[2928,11530,11509],{"class":2953},[2928,11532,3521],{"class":2970},[2928,11534,9389],{"class":2953},[2928,11536,11537],{"class":2945},"right",[2928,11539,3161],{"class":2953},[2928,11541,11542,11545,11548],{"class":2930,"line":2999},[2928,11543,11544],{"class":2953},"          \u003C",[2928,11546,11547],{"class":2970},"UColorModeButton",[2928,11549,3534],{"class":2953},[2928,11551,11552,11554,11557,11560,11562,11564,11566,11568],{"class":2930,"line":3005},[2928,11553,11544],{"class":2953},[2928,11555,11556],{"class":2970},"UButton",[2928,11558,11559],{"class":2945}," icon",[2928,11561,2954],{"class":2953},[2928,11563,3153],{"class":2953},[2928,11565,4477],{"class":3156},[2928,11567,3153],{"class":2953},[2928,11569,3534],{"class":2953},[2928,11571,11572,11575,11577],{"class":2930,"line":3036},[2928,11573,11574],{"class":2953},"        \u003C\u002F",[2928,11576,3521],{"class":2970},[2928,11578,3161],{"class":2953},[2928,11580,11581,11584,11586],{"class":2930,"line":3054},[2928,11582,11583],{"class":2953},"      \u003C\u002F",[2928,11585,11502],{"class":2970},[2928,11587,3161],{"class":2953},[2928,11589,11590],{"class":2930,"line":3059},[2928,11591,2996],{"emptyLinePlaceholder":1196},[2928,11593,11594,11596],{"class":2930,"line":3067},[2928,11595,9422],{"class":2953},[2928,11597,11598],{"class":2970},"UPageHero\n",[2928,11600,11601,11604,11606,11608,11611],{"class":2930,"line":3077},[2928,11602,11603],{"class":2945},"        title",[2928,11605,2954],{"class":2953},[2928,11607,3153],{"class":2953},[2928,11609,11610],{"class":3156},"Nuxt UI - Starter",[2928,11612,11613],{"class":2953},"\"\n",[2928,11615,11616,11619,11621,11623,11626],{"class":2930,"line":3110},[2928,11617,11618],{"class":2945},"        description",[2928,11620,2954],{"class":2953},[2928,11622,3153],{"class":2953},[2928,11624,11625],{"class":3156},"Nuxt UI is a free and open-source UI library for Nuxt applications. Create beautiful & responsive applications in minutes.",[2928,11627,11613],{"class":2953},[2928,11629,11630,11633,11635,11637,11640],{"class":2930,"line":3116},[2928,11631,11632],{"class":2945},"        :links",[2928,11634,2954],{"class":2953},[2928,11636,3153],{"class":2953},[2928,11638,11639],{"class":3156},"heroLinks",[2928,11641,11613],{"class":2953},[2928,11643,11644],{"class":2930,"line":6687},[2928,11645,11646],{"class":2953},"      \u002F>\n",[2928,11648,11649],{"class":2930,"line":6703},[2928,11650,2996],{"emptyLinePlaceholder":1196},[2928,11652,11653,11655],{"class":2930,"line":6708},[2928,11654,9422],{"class":2953},[2928,11656,11657],{"class":2970},"UPageSection\n",[2928,11659,11660,11662,11664,11666,11669],{"class":2930,"line":6738},[2928,11661,11603],{"class":2945},[2928,11663,2954],{"class":2953},[2928,11665,3153],{"class":2953},[2928,11667,11668],{"class":3156},"The freedom to build anything",[2928,11670,11613],{"class":2953},[2928,11672,11673,11675,11677,11679,11682],{"class":2930,"line":6776},[2928,11674,11618],{"class":2945},[2928,11676,2954],{"class":2953},[2928,11678,3153],{"class":2953},[2928,11680,11681],{"class":3156},"Nuxt UI ships with a comprehensive set of components that cover a wide range of use-cases. Carefully crafted to reduce boilerplate code without sacrificing flexibility.",[2928,11683,11613],{"class":2953},[2928,11685,11686,11689,11691,11693,11696],{"class":2930,"line":6785},[2928,11687,11688],{"class":2945},"        :features",[2928,11690,2954],{"class":2953},[2928,11692,3153],{"class":2953},[2928,11694,11695],{"class":3156},"features",[2928,11697,11613],{"class":2953},[2928,11699,11700],{"class":2930,"line":6790},[2928,11701,11646],{"class":2953},[2928,11703,11704],{"class":2930,"line":6819},[2928,11705,2996],{"emptyLinePlaceholder":1196},[2928,11707,11708,11710,11713,11716,11718,11720,11723,11725],{"class":2930,"line":6835},[2928,11709,9422],{"class":2953},[2928,11711,11712],{"class":2970},"UPageSection",[2928,11714,11715],{"class":2945}," title",[2928,11717,2954],{"class":2953},[2928,11719,3153],{"class":2953},[2928,11721,11722],{"class":3156},"Pricing",[2928,11724,3153],{"class":2953},[2928,11726,3161],{"class":2953},[2928,11728,11729,11731,11734,11737,11739,11741,11744,11746],{"class":2930,"line":6851},[2928,11730,11509],{"class":2953},[2928,11732,11733],{"class":2970},"UPricingPlans",[2928,11735,11736],{"class":2945}," :plans",[2928,11738,2954],{"class":2953},[2928,11740,3153],{"class":2953},[2928,11742,11743],{"class":3156},"plans",[2928,11745,3153],{"class":2953},[2928,11747,3534],{"class":2953},[2928,11749,11750,11752,11754],{"class":2930,"line":6867},[2928,11751,11583],{"class":2953},[2928,11753,11712],{"class":2970},[2928,11755,3161],{"class":2953},[2928,11757,11758],{"class":2930,"line":6892},[2928,11759,2996],{"emptyLinePlaceholder":1196},[2928,11761,11762,11764,11766],{"class":2930,"line":6901},[2928,11763,9422],{"class":2953},[2928,11765,11712],{"class":2970},[2928,11767,3161],{"class":2953},[2928,11769,11770,11772],{"class":2930,"line":6906},[2928,11771,11509],{"class":2953},[2928,11773,11774],{"class":2970},"UPageCTA\n",[2928,11776,11777,11780,11782,11784,11787],{"class":2930,"line":7445},[2928,11778,11779],{"class":2945},"          title",[2928,11781,2954],{"class":2953},[2928,11783,3153],{"class":2953},[2928,11785,11786],{"class":3156},"Start with Nuxt UI today!",[2928,11788,11613],{"class":2953},[2928,11790,11791,11794,11796,11798,11801],{"class":2930,"line":7450},[2928,11792,11793],{"class":2945},"          description",[2928,11795,2954],{"class":2953},[2928,11797,3153],{"class":2953},[2928,11799,11800],{"class":3156},"Nuxt UI is a free and open-source UI library for Nuxt applications.",[2928,11802,11613],{"class":2953},[2928,11804,11805,11808,11810,11812,11815],{"class":2930,"line":7999},[2928,11806,11807],{"class":2945},"          variant",[2928,11809,2954],{"class":2953},[2928,11811,3153],{"class":2953},[2928,11813,11814],{"class":3156},"subtle",[2928,11816,11613],{"class":2953},[2928,11818,11819,11822,11824,11826,11829],{"class":2930,"line":8004},[2928,11820,11821],{"class":2945},"          :links",[2928,11823,2954],{"class":2953},[2928,11825,3153],{"class":2953},[2928,11827,11828],{"class":3156},"ctaLinks",[2928,11830,11613],{"class":2953},[2928,11832,11833],{"class":2930,"line":8011},[2928,11834,11835],{"class":2953},"        \u002F>\n",[2928,11837,11838,11840,11842],{"class":2930,"line":8016},[2928,11839,11583],{"class":2953},[2928,11841,11712],{"class":2970},[2928,11843,3161],{"class":2953},[2928,11845,11846],{"class":2930,"line":8021},[2928,11847,2996],{"emptyLinePlaceholder":1196},[2928,11849,11851,11853,11856,11858,11860,11862,11865,11867],{"class":2930,"line":11850},36,[2928,11852,9422],{"class":2953},[2928,11854,11855],{"class":2970},"UFooter",[2928,11857,11515],{"class":2945},[2928,11859,2954],{"class":2953},[2928,11861,3153],{"class":2953},[2928,11863,11864],{"class":3156},"footerItems",[2928,11866,3153],{"class":2953},[2928,11868,3534],{"class":2953},[2928,11870,11872,11874,11876],{"class":2930,"line":11871},37,[2928,11873,9484],{"class":2953},[2928,11875,11493],{"class":2970},[2928,11877,3161],{"class":2953},[2928,11879,11881,11883,11885],{"class":2930,"line":11880},38,[2928,11882,3567],{"class":2953},[2928,11884,3521],{"class":2970},[2928,11886,3161],{"class":2953},[11888,11889,11895],"code-preview",{":ui":11890,"className":11891,"label":11894},"{\"preview\":\"p-0\"}",[11892,11893],"[&>div]:*:my-0","w-full","Preview",[11896,11897],"index-example",{},[2885,11899,11901],{"id":11900},"from-design-to-code-seamlessly","From design to code, seamlessly",[2896,11903,11904,11905,11908],{},"A successful project starts with a solid design system. In v4, we are releasing the ",[2900,11906,11907],{},"complete Figma Kit"," for free, mirroring the entire component library.",[2896,11910,11911,11912,11915],{},"With over ",[2900,11913,11914],{},"2,000 component variants and design tokens",", you now have a single Figma entry point that contains every component along with detailed explanations about structure and usage. Designers and developers work from the same comprehensive source, making collaboration seamless and ensuring a perfect match between design and implementation.",[8518,11917],{"className":11918,"icon":11920,"label":11921,"target":4478,"to":11922},[11919],"mb-4","i-simple-icons-figma","Get the Figma Kit →","https:\u002F\u002Fgo.nuxt.com\u002Ffigma-ui",[11924,11925],"carousel",{":items":11926},"[\"\u002Fassets\u002Fblog\u002Ffigma-kit\u002F1.png\",\"\u002Fassets\u002Fblog\u002Ffigma-kit\u002F2.png\",\"\u002Fassets\u002Fblog\u002Ffigma-kit\u002F3.png\"]",[2885,11928,11930],{"id":11929},"an-upgraded-developer-experience","An upgraded developer experience",[2896,11932,11933],{},"Beyond new components, v4 brings significant improvements to your workflow.",[4543,11935,11937],{"id":11936},"effortless-migration","Effortless migration",[2896,11939,11940],{},"Unlike the major overhaul from v2 to v3, the migration to v4 is simple. This release focuses on unification, not breaking changes. Most components work identically, and your existing code will remain largely intact.",[2896,11942,4464,11943,11947],{},[2910,11944,9923],{"href":11945,"rel":11946},"https:\u002F\u002Fui.nuxt.com\u002Fgetting-started\u002Fmigration\u002Fv4",[2914]," for a complete walkthrough.",[4543,11949,11951],{"id":11950},"a-refined-documentation","A refined documentation",[2896,11953,11954],{},"We've completely overhauled our documentation to make it clearer and more intuitive. We’ve restructured the layout and split complex topics into dedicated pages, ensuring you can find the information you need, faster.",[2896,11956,11957,11958,11965,11966,11975],{},"Our documentation is also now fully AI-ready. It's powered by our new ",[2900,11959,11960],{},[2910,11961,11964],{"href":11962,"rel":11963},"https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fgetting-started\u002Fai\u002Fmcp",[2914],"Model Context Protocol (MCP) server",", which allows AI tools like Cursor to access component documentation and metadata directly. In addition, we provide ",[2900,11967,11968],{},[2910,11969,11972,11974],{"href":11970,"rel":11971},"https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fgetting-started\u002Fai\u002Fllms-txt",[2914],[2890,11973,318],{}," files",", a structured format that enables any AI assistant to understand our components, theming, and best practices. Your AI tools now have first-class access to our entire library, right inside your editor.",[4543,11977,11979],{"id":11978},"ready-for-the-next-wave-of-ai","Ready for the next wave of AI",[2896,11981,11982,11983,11986,11987,11990,11991,11994],{},"Our AI chat components now support ",[2900,11984,11985],{},"Vercel's AI SDK v5",". The new ",[2890,11988,11989],{},"Chat"," class and message format (with ",[2890,11992,11993],{},"parts",") ensure compatibility with the latest AI SDK improvements, keeping you at the forefront of AI development.",[2885,11996,11998],{"id":11997},"a-thank-you-to-our-pro-users","A thank you to our pro users",[2896,12000,12001],{},"We want to extend a special thanks to everyone who supported Nuxt UI Pro. Your early adoption and feedback were instrumental in shaping Nuxt UI. You helped us fund, maintain, and improve the project, allowing us to reach this milestone where we can now offer these powerful tools to the entire community.",[2896,12003,12004],{},"Your support made this moment possible.",[2885,12006,12008],{"id":12007},"start-building-today","Start building today",[2896,12010,12011],{},"Get started with Nuxt UI v4 by creating a new project with any of our free templates:",[3508,12013,12014,12038,12059,12079,12099,12119,12139,12159],{},[2918,12015,12018],{"className":4317,"code":12016,"filename":12017,"language":4319,"meta":2924,"style":2924},"npm create nuxt@latest -- -t ui\n","Starter",[2890,12019,12020],{"__ignoreMap":2924},[2928,12021,12022,12024,12027,12029,12032,12035],{"class":2930,"line":2931},[2928,12023,9772],{"class":3448},[2928,12025,12026],{"class":3156}," create",[2928,12028,6136],{"class":3156},[2928,12030,12031],{"class":3156}," --",[2928,12033,12034],{"class":3156}," -t",[2928,12036,12037],{"class":3156}," ui\n",[2918,12039,12042],{"className":4317,"code":12040,"filename":12041,"language":4319,"meta":2924,"style":2924},"npm create nuxt@latest -- -t github:nuxt-ui-templates\u002Flanding\n","Landing",[2890,12043,12044],{"__ignoreMap":2924},[2928,12045,12046,12048,12050,12052,12054,12056],{"class":2930,"line":2931},[2928,12047,9772],{"class":3448},[2928,12049,12026],{"class":3156},[2928,12051,6136],{"class":3156},[2928,12053,12031],{"class":3156},[2928,12055,12034],{"class":3156},[2928,12057,12058],{"class":3156}," github:nuxt-ui-templates\u002Flanding\n",[2918,12060,12062],{"className":4317,"code":12061,"filename":5,"language":4319,"meta":2924,"style":2924},"npm create nuxt@latest -- -t github:nuxt-ui-templates\u002Fdocs\n",[2890,12063,12064],{"__ignoreMap":2924},[2928,12065,12066,12068,12070,12072,12074,12076],{"class":2930,"line":2931},[2928,12067,9772],{"class":3448},[2928,12069,12026],{"class":3156},[2928,12071,6136],{"class":3156},[2928,12073,12031],{"class":3156},[2928,12075,12034],{"class":3156},[2928,12077,12078],{"class":3156}," github:nuxt-ui-templates\u002Fdocs\n",[2918,12080,12082],{"className":4317,"code":12081,"filename":11414,"language":4319,"meta":2924,"style":2924},"npm create nuxt@latest -- -t github:nuxt-ui-templates\u002Fsaas\n",[2890,12083,12084],{"__ignoreMap":2924},[2928,12085,12086,12088,12090,12092,12094,12096],{"class":2930,"line":2931},[2928,12087,9772],{"class":3448},[2928,12089,12026],{"class":3156},[2928,12091,6136],{"class":3156},[2928,12093,12031],{"class":3156},[2928,12095,12034],{"class":3156},[2928,12097,12098],{"class":3156}," github:nuxt-ui-templates\u002Fsaas\n",[2918,12100,12102],{"className":4317,"code":12101,"filename":3369,"language":4319,"meta":2924,"style":2924},"npm create nuxt@latest -- -t github:nuxt-ui-templates\u002Fdashboard\n",[2890,12103,12104],{"__ignoreMap":2924},[2928,12105,12106,12108,12110,12112,12114,12116],{"class":2930,"line":2931},[2928,12107,9772],{"class":3448},[2928,12109,12026],{"class":3156},[2928,12111,6136],{"class":3156},[2928,12113,12031],{"class":3156},[2928,12115,12034],{"class":3156},[2928,12117,12118],{"class":3156}," github:nuxt-ui-templates\u002Fdashboard\n",[2918,12120,12122],{"className":4317,"code":12121,"filename":11989,"language":4319,"meta":2924,"style":2924},"npm create nuxt@latest -- -t github:nuxt-ui-templates\u002Fchat\n",[2890,12123,12124],{"__ignoreMap":2924},[2928,12125,12126,12128,12130,12132,12134,12136],{"class":2930,"line":2931},[2928,12127,9772],{"class":3448},[2928,12129,12026],{"class":3156},[2928,12131,6136],{"class":3156},[2928,12133,12031],{"class":3156},[2928,12135,12034],{"class":3156},[2928,12137,12138],{"class":3156}," github:nuxt-ui-templates\u002Fchat\n",[2918,12140,12142],{"className":4317,"code":12141,"filename":11428,"language":4319,"meta":2924,"style":2924},"npm create nuxt@latest -- -t github:nuxt-ui-templates\u002Fportfolio\n",[2890,12143,12144],{"__ignoreMap":2924},[2928,12145,12146,12148,12150,12152,12154,12156],{"class":2930,"line":2931},[2928,12147,9772],{"class":3448},[2928,12149,12026],{"class":3156},[2928,12151,6136],{"class":3156},[2928,12153,12031],{"class":3156},[2928,12155,12034],{"class":3156},[2928,12157,12158],{"class":3156}," github:nuxt-ui-templates\u002Fportfolio\n",[2918,12160,12162],{"className":4317,"code":12161,"filename":11439,"language":4319,"meta":2924,"style":2924},"npm create nuxt@latest -- -t github:nuxt-ui-templates\u002Fchangelog\n",[2890,12163,12164],{"__ignoreMap":2924},[2928,12165,12166,12168,12170,12172,12174,12176],{"class":2930,"line":2931},[2928,12167,9772],{"class":3448},[2928,12169,12026],{"class":3156},[2928,12171,6136],{"class":3156},[2928,12173,12031],{"class":3156},[2928,12175,12034],{"class":3156},[2928,12177,12178],{"class":3156}," github:nuxt-ui-templates\u002Fchangelog\n",[2896,12180,12181],{},"Or add it to your existing project:",[2918,12183,12185],{"className":4317,"code":12184,"language":4319,"meta":2924,"style":2924},"npm install @nuxt\u002Fui@latest\n",[2890,12186,12187],{"__ignoreMap":2924},[2928,12188,12189,12191,12193],{"class":2930,"line":2931},[2928,12190,9772],{"class":3448},[2928,12192,9976],{"class":3156},[2928,12194,12195],{"class":3156}," @nuxt\u002Fui@latest\n",[2885,12197,12199],{"id":12198},"the-future-is-open","The future is open",[2896,12201,12202],{},"With a unified codebase and the backing of Vercel, we're more excited than ever to push the boundaries of component development. This release wouldn't have been possible without the support of our amazing community, and every contributor who has helped shape Nuxt UI.",[2896,12204,12205],{},"We can't wait to see what you build. The future of UI development is free, open, and more powerful than ever.",[12207,12208],"hr",{},[2896,12210,12211],{},[10484,12212,12213,12214,12217,12218,12223],{},"Ready to get started? Check out the ",[2910,12215,6009],{"href":11342,"rel":12216},[2914]," and join our ",[2910,12219,12222],{"href":12220,"rel":12221},"https:\u002F\u002Fdiscord.nuxt.com",[2914],"Discord community"," to connect with other developers building amazing things with Nuxt UI.",[4489,12225,12226],{},"html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}",{"title":2924,"searchDepth":2938,"depth":2938,"links":12228},[12229,12230,12231,12236,12237,12238],{"id":11379,"depth":2938,"text":11380},{"id":11900,"depth":2938,"text":11901},{"id":11929,"depth":2938,"text":11930,"children":12232},[12233,12234,12235],{"id":11936,"depth":2967,"text":11937},{"id":11950,"depth":2967,"text":11951},{"id":11978,"depth":2967,"text":11979},{"id":11997,"depth":2938,"text":11998},{"id":12007,"depth":2938,"text":12008},{"id":12198,"depth":2938,"text":12199},"2025-09-22","Nuxt UI v4 unifies Nuxt UI and Nuxt UI Pro into one powerful, completely free library. With over 110 components, 12 templates, and a comprehensive Figma kit, all of this is available for free.","\u002Fassets\u002Fblog\u002Fnuxt-ui-v4.png",{},"\u002Fblog\u002Fnuxt-ui-v4",{"title":11322,"description":12240},"blog\u002F39.nuxt-ui-v4","iPmbZYmaR7eqvb27GaghWt1xvP0rPEmBFB1jOrDe1yI",{"id":12248,"title":12249,"authors":12250,"body":12253,"category":4517,"date":13808,"description":13809,"draft":108,"extension":4520,"image":13810,"meta":13811,"navigation":108,"path":13812,"seo":13813,"stem":13814,"tags":6,"__hash__":13815},"blog\u002Fblog\u002F38.v4-1.md","Nuxt 4.1",[12251],{"name":2877,"avatar":12252,"to":2880},{"src":2879},{"type":2882,"value":12254,"toc":13786},[12255,12259,12263,12272,12313,12320,12323,12345,12348,12361,12364,12408,12412,12424,12429,12640,12643,12651,12656,12660,12669,12748,12757,12761,12777,12920,12925,12929,12933,12942,13126,13133,13137,13152,13322,13338,13343,13347,13363,13436,13440,13452,13522,13526,13530,13533,13546,13637,13641,13644,13670,13674,13726,13728,13731,13745,13747,13751,13758,13761,13764,13772,13780,13783],[2885,12256,12258],{"id":12257},"build-and-performance-improvements","🔥 Build and Performance Improvements",[4543,12260,12262],{"id":12261},"enhanced-chunk-stability","🍫 Enhanced Chunk Stability",[2896,12264,12265,12266,12271],{},"Build stability has been significantly improved with import maps (",[2910,12267,12270],{"href":12268,"rel":12269},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33075",[2914],"#33075","). This prevents cascading hash changes that could invalidate large portions of your build when small changes are made:",[2918,12273,12277],{"className":12274,"code":12275,"language":12276,"meta":2924,"style":2924},"language-html shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","\u003C!-- Automatically injected import map -->\n\u003Cscript type=\"importmap\">{\"imports\":{\"#entry\":\"\u002F_nuxt\u002FDC5HVSK5.js\"}}\u003C\u002Fscript>\n","html",[2890,12278,12279,12284],{"__ignoreMap":2924},[2928,12280,12281],{"class":2930,"line":2931},[2928,12282,12283],{"class":2934},"\u003C!-- Automatically injected import map -->\n",[2928,12285,12286,12288,12290,12293,12295,12297,12300,12302,12304,12307,12309,12311],{"class":2930,"line":2938},[2928,12287,3139],{"class":2953},[2928,12289,3142],{"class":2970},[2928,12291,12292],{"class":2945}," type",[2928,12294,2954],{"class":2953},[2928,12296,3153],{"class":2953},[2928,12298,12299],{"class":3156},"importmap",[2928,12301,3153],{"class":2953},[2928,12303,9470],{"class":2953},[2928,12305,12306],{"class":2949},"{\"imports\":{\"#entry\":\"\u002F_nuxt\u002FDC5HVSK5.js\"}}",[2928,12308,3209],{"class":2953},[2928,12310,3142],{"class":2970},[2928,12312,3161],{"class":2953},[2896,12314,12315,12316,12319],{},"By default, JS chunks emitted in a Vite build are hashed, which means they can be cached immutably. However, this can cause a significant issue: a change to a single component can cause ",[10484,12317,12318],{},"every"," hash to be invalidated, massively increasing the chance of 404s.",[2896,12321,12322],{},"In short:",[3841,12324,12325,12328,12331,12337],{},[3844,12326,12327],{},"a component is changed slightly - the hash of its JS chunk changes",[3844,12329,12330],{},"the page which uses the component has to be updated to reference the new file name",[3844,12332,4769,12333,12336],{},[10484,12334,12335],{},"entry"," now has its hash changed because it dynamically imports the page",[3844,12338,12339,12344],{},[10484,12340,12341],{},[2900,12342,12343],{},"every other file"," which imports the entry has its hash changed because the entry file name is changed",[2896,12346,12347],{},"Obviously this wasn't optimal. With this new feature, the hash of (otherwise) unchanged files which import the entry won't be affected.",[2896,12349,12350,12351,12356,12357,12360],{},"This feature is automatically enabled and helps maintain better cache efficiency in production. It does require ",[2910,12352,12355],{"href":12353,"rel":12354},"https:\u002F\u002Fcaniuse.com\u002Fimport-maps",[2914],"native import map support",", but Nuxt will automatically disable it if you have configured ",[2890,12358,12359],{},"vite.build.target"," to include a browser that doesn't support import maps.",[2896,12362,12363],{},"And of course you can disable it if needed:",[2918,12365,12367],{"className":2920,"code":12366,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  experimental: {\n    entryImportMap: false\n  }\n})\n",[2890,12368,12369,12381,12389,12398,12402],{"__ignoreMap":2924},[2928,12370,12371,12373,12375,12377,12379],{"class":2930,"line":2931},[2928,12372,2942],{"class":2941},[2928,12374,3871],{"class":2941},[2928,12376,3874],{"class":2957},[2928,12378,2961],{"class":2949},[2928,12380,2964],{"class":2953},[2928,12382,12383,12385,12387],{"class":2930,"line":2938},[2928,12384,3883],{"class":2970},[2928,12386,2974],{"class":2953},[2928,12388,3033],{"class":2953},[2928,12390,12391,12394,12396],{"class":2930,"line":2967},[2928,12392,12393],{"class":2970},"    entryImportMap",[2928,12395,2974],{"class":2953},[2928,12397,5979],{"class":2977},[2928,12399,12400],{"class":2930,"line":2984},[2928,12401,3113],{"class":2953},[2928,12403,12404,12406],{"class":2930,"line":2993},[2928,12405,2987],{"class":2953},[2928,12407,2990],{"class":2949},[4543,12409,12411],{"id":12410},"experimental-rolldown-support","🦀 Experimental Rolldown Support",[2896,12413,12414,12415,3248,12418,12423],{},"Nuxt now includes experimental support for ",[2890,12416,12417],{},"rolldown-vite",[2910,12419,12422],{"href":12420,"rel":12421},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31812",[2914],"#31812","), bringing Rust-powered bundling for potentially faster builds.",[2896,12425,12426,12427,2974],{},"To try Rolldown in your Nuxt project, you need to override Vite with the rolldown-powered version since Vite is a dependency of Nuxt. Add the following to your ",[2890,12428,237],{},[3508,12430,12432,12485,12548,12595],{"sync":12431},"pm",[2918,12433,12437],{"className":12434,"code":12435,"filename":9772,"language":12436,"meta":2924,"style":2924},"language-json shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","{\n  \"overrides\": {\n    \"vite\": \"npm:rolldown-vite@latest\"\n  }\n}\n","json",[2890,12438,12439,12443,12457,12477,12481],{"__ignoreMap":2924},[2928,12440,12441],{"class":2930,"line":2931},[2928,12442,2964],{"class":2953},[2928,12444,12445,12448,12451,12453,12455],{"class":2930,"line":2938},[2928,12446,12447],{"class":2953},"  \"",[2928,12449,12450],{"class":2945},"overrides",[2928,12452,3153],{"class":2953},[2928,12454,2974],{"class":2953},[2928,12456,3033],{"class":2953},[2928,12458,12459,12462,12465,12467,12469,12472,12475],{"class":2930,"line":2967},[2928,12460,12461],{"class":2953},"    \"",[2928,12463,12464],{"class":3448},"vite",[2928,12466,3153],{"class":2953},[2928,12468,2974],{"class":2953},[2928,12470,12471],{"class":2953}," \"",[2928,12473,12474],{"class":3156},"npm:rolldown-vite@latest",[2928,12476,11613],{"class":2953},[2928,12478,12479],{"class":2930,"line":2984},[2928,12480,3113],{"class":2953},[2928,12482,12483],{"class":2930,"line":2993},[2928,12484,3764],{"class":2953},[2918,12486,12489],{"className":12434,"code":12487,"filename":12488,"language":12436,"meta":2924,"style":2924},"{\n  \"pnpm\": {\n    \"overrides\": {\n      \"vite\": \"npm:rolldown-vite@latest\"\n    }\n  }\n}\n","pnpm",[2890,12490,12491,12495,12507,12519,12536,12540,12544],{"__ignoreMap":2924},[2928,12492,12493],{"class":2930,"line":2931},[2928,12494,2964],{"class":2953},[2928,12496,12497,12499,12501,12503,12505],{"class":2930,"line":2938},[2928,12498,12447],{"class":2953},[2928,12500,12488],{"class":2945},[2928,12502,3153],{"class":2953},[2928,12504,2974],{"class":2953},[2928,12506,3033],{"class":2953},[2928,12508,12509,12511,12513,12515,12517],{"class":2930,"line":2967},[2928,12510,12461],{"class":2953},[2928,12512,12450],{"class":3448},[2928,12514,3153],{"class":2953},[2928,12516,2974],{"class":2953},[2928,12518,3033],{"class":2953},[2928,12520,12521,12524,12526,12528,12530,12532,12534],{"class":2930,"line":2984},[2928,12522,12523],{"class":2953},"      \"",[2928,12525,12464],{"class":3988},[2928,12527,3153],{"class":2953},[2928,12529,2974],{"class":2953},[2928,12531,12471],{"class":2953},[2928,12533,12474],{"class":3156},[2928,12535,11613],{"class":2953},[2928,12537,12538],{"class":2930,"line":2993},[2928,12539,4866],{"class":2953},[2928,12541,12542],{"class":2930,"line":2999},[2928,12543,3113],{"class":2953},[2928,12545,12546],{"class":2930,"line":3005},[2928,12547,3764],{"class":2953},[2918,12549,12552],{"className":12434,"code":12550,"filename":12551,"language":12436,"meta":2924,"style":2924},"{\n  \"resolutions\": {\n    \"vite\": \"npm:rolldown-vite@latest\"\n  }\n}\n","yarn",[2890,12553,12554,12558,12571,12587,12591],{"__ignoreMap":2924},[2928,12555,12556],{"class":2930,"line":2931},[2928,12557,2964],{"class":2953},[2928,12559,12560,12562,12565,12567,12569],{"class":2930,"line":2938},[2928,12561,12447],{"class":2953},[2928,12563,12564],{"class":2945},"resolutions",[2928,12566,3153],{"class":2953},[2928,12568,2974],{"class":2953},[2928,12570,3033],{"class":2953},[2928,12572,12573,12575,12577,12579,12581,12583,12585],{"class":2930,"line":2967},[2928,12574,12461],{"class":2953},[2928,12576,12464],{"class":3448},[2928,12578,3153],{"class":2953},[2928,12580,2974],{"class":2953},[2928,12582,12471],{"class":2953},[2928,12584,12474],{"class":3156},[2928,12586,11613],{"class":2953},[2928,12588,12589],{"class":2930,"line":2984},[2928,12590,3113],{"class":2953},[2928,12592,12593],{"class":2930,"line":2993},[2928,12594,3764],{"class":2953},[2918,12596,12598],{"className":12434,"code":12435,"filename":12597,"language":12436,"meta":2924,"style":2924},"bun",[2890,12599,12600,12604,12616,12632,12636],{"__ignoreMap":2924},[2928,12601,12602],{"class":2930,"line":2931},[2928,12603,2964],{"class":2953},[2928,12605,12606,12608,12610,12612,12614],{"class":2930,"line":2938},[2928,12607,12447],{"class":2953},[2928,12609,12450],{"class":2945},[2928,12611,3153],{"class":2953},[2928,12613,2974],{"class":2953},[2928,12615,3033],{"class":2953},[2928,12617,12618,12620,12622,12624,12626,12628,12630],{"class":2930,"line":2967},[2928,12619,12461],{"class":2953},[2928,12621,12464],{"class":3448},[2928,12623,3153],{"class":2953},[2928,12625,2974],{"class":2953},[2928,12627,12471],{"class":2953},[2928,12629,12474],{"class":3156},[2928,12631,11613],{"class":2953},[2928,12633,12634],{"class":2930,"line":2984},[2928,12635,3113],{"class":2953},[2928,12637,12638],{"class":2930,"line":2993},[2928,12639,3764],{"class":2953},[2896,12641,12642],{},"After adding the override, reinstall your dependencies. Nuxt will automatically detect when Rolldown is available and adjust its build configuration accordingly.",[2896,12644,12645,12646,3088],{},"For more details on Rolldown integration, see the ",[2910,12647,12650],{"href":12648,"rel":12649},"https:\u002F\u002Fvite.dev\u002Fguide\u002Frolldown",[2914],"Vite Rolldown guide",[3774,12652,12653],{},[2896,12654,12655],{},"This is experimental and may have some limitations, but offers a glimpse into the future of high-performance bundling in Nuxt.",[2885,12657,12659],{"id":12658},"improved-lazy-hydration","🧪 Improved Lazy Hydration",[2896,12661,12662,12663,12668],{},"Lazy hydration macros now work without auto-imports (",[2910,12664,12667],{"href":12665,"rel":12666},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33037",[2914],"#33037","), making them more reliable when component auto-discovery is disabled:",[2918,12670,12672],{"className":3129,"code":12671,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup>\n\u002F\u002F Works even with components: false\nconst LazyComponent = defineLazyHydrationComponent(\n  'visible',\n  () => import('.\u002FMyComponent.vue')\n)\n\u003C\u002Fscript>\n",[2890,12673,12674,12684,12689,12704,12716,12736,12740],{"__ignoreMap":2924},[2928,12675,12676,12678,12680,12682],{"class":2930,"line":2931},[2928,12677,3139],{"class":2953},[2928,12679,3142],{"class":2970},[2928,12681,3145],{"class":2945},[2928,12683,3161],{"class":2953},[2928,12685,12686],{"class":2930,"line":2938},[2928,12687,12688],{"class":2934},"\u002F\u002F Works even with components: false\n",[2928,12690,12691,12693,12696,12698,12701],{"class":2930,"line":2967},[2928,12692,3171],{"class":2945},[2928,12694,12695],{"class":2949}," LazyComponent ",[2928,12697,2954],{"class":2953},[2928,12699,12700],{"class":2957}," defineLazyHydrationComponent",[2928,12702,12703],{"class":2949},"(\n",[2928,12705,12706,12709,12712,12714],{"class":2930,"line":2984},[2928,12707,12708],{"class":2953},"  '",[2928,12710,12711],{"class":3156},"visible",[2928,12713,3197],{"class":2953},[2928,12715,2981],{"class":2953},[2928,12717,12718,12721,12723,12725,12727,12729,12732,12734],{"class":2930,"line":2993},[2928,12719,12720],{"class":2953},"  ()",[2928,12722,3030],{"class":2945},[2928,12724,5558],{"class":2953},[2928,12726,2961],{"class":2949},[2928,12728,3197],{"class":2953},[2928,12730,12731],{"class":3156},".\u002FMyComponent.vue",[2928,12733,3197],{"class":2953},[2928,12735,2990],{"class":2949},[2928,12737,12738],{"class":2930,"line":2999},[2928,12739,2990],{"class":2949},[2928,12741,12742,12744,12746],{"class":2930,"line":3005},[2928,12743,3209],{"class":2953},[2928,12745,3142],{"class":2970},[2928,12747,3161],{"class":2953},[2896,12749,12750,12751,12753,12754,12756],{},"This ensures that components that are not \"discovered\" through Nuxt (e.g., because ",[2890,12752,132],{}," is set to ",[2890,12755,4933],{}," in the config) can still be used in lazy hydration macros.",[2885,12758,12760],{"id":12759},"enhanced-page-rules","📄 Enhanced Page Rules",[2896,12762,12763,12764,12767,12768,12770,12771,12776],{},"If you have enabled experimental extraction of route rules, these are now exposed on a dedicated ",[2890,12765,12766],{},"rules"," property on ",[2890,12769,3560],{}," objects (",[2910,12772,12775],{"href":12773,"rel":12774},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32897",[2914],"#32897","), making them more accessible to modules and improving the overall architecture:",[2918,12778,12780],{"className":2920,"code":12779,"language":2923,"meta":2924,"style":2924},"\u002F\u002F In your module\nnuxt.hook('pages:extend', pages => {\n  pages.push({\n    path: '\u002Fapi-docs',\n    rules: { \n      prerender: true,\n      cors: true,\n      headers: { 'Cache-Control': 's-maxage=31536000' }\n    }\n  })\n})\n",[2890,12781,12782,12787,12814,12828,12844,12855,12866,12877,12904,12908,12914],{"__ignoreMap":2924},[2928,12783,12784],{"class":2930,"line":2931},[2928,12785,12786],{"class":2934},"\u002F\u002F In your module\n",[2928,12788,12789,12791,12793,12796,12798,12800,12803,12805,12807,12810,12812],{"class":2930,"line":2938},[2928,12790,4326],{"class":2949},[2928,12792,3088],{"class":2953},[2928,12794,12795],{"class":2957},"hook",[2928,12797,2961],{"class":2949},[2928,12799,3197],{"class":2953},[2928,12801,12802],{"class":3156},"pages:extend",[2928,12804,3197],{"class":2953},[2928,12806,3617],{"class":2953},[2928,12808,12809],{"class":3023}," pages",[2928,12811,3030],{"class":2945},[2928,12813,3033],{"class":2953},[2928,12815,12816,12819,12821,12824,12826],{"class":2930,"line":2967},[2928,12817,12818],{"class":2949},"  pages",[2928,12820,3088],{"class":2953},[2928,12822,12823],{"class":2957},"push",[2928,12825,2961],{"class":2970},[2928,12827,2964],{"class":2953},[2928,12829,12830,12833,12835,12837,12840,12842],{"class":2930,"line":2984},[2928,12831,12832],{"class":2970},"    path",[2928,12834,2974],{"class":2953},[2928,12836,3329],{"class":2953},[2928,12838,12839],{"class":3156},"\u002Fapi-docs",[2928,12841,3197],{"class":2953},[2928,12843,2981],{"class":2953},[2928,12845,12846,12849,12851,12853],{"class":2930,"line":2993},[2928,12847,12848],{"class":2970},"    rules",[2928,12850,2974],{"class":2953},[2928,12852,3174],{"class":2953},[2928,12854,4846],{"class":2970},[2928,12856,12857,12860,12862,12864],{"class":2930,"line":2999},[2928,12858,12859],{"class":2970},"      prerender",[2928,12861,2974],{"class":2953},[2928,12863,3355],{"class":2977},[2928,12865,2981],{"class":2953},[2928,12867,12868,12871,12873,12875],{"class":2930,"line":3005},[2928,12869,12870],{"class":2970},"      cors",[2928,12872,2974],{"class":2953},[2928,12874,3355],{"class":2977},[2928,12876,2981],{"class":2953},[2928,12878,12879,12882,12884,12886,12888,12891,12893,12895,12897,12900,12902],{"class":2930,"line":3036},[2928,12880,12881],{"class":2970},"      headers",[2928,12883,2974],{"class":2953},[2928,12885,3174],{"class":2953},[2928,12887,3329],{"class":2953},[2928,12889,12890],{"class":2970},"Cache-Control",[2928,12892,3197],{"class":2953},[2928,12894,2974],{"class":2953},[2928,12896,3329],{"class":2953},[2928,12898,12899],{"class":3156},"s-maxage=31536000",[2928,12901,3197],{"class":2953},[2928,12903,4739],{"class":2953},[2928,12905,12906],{"class":2930,"line":3054},[2928,12907,4866],{"class":2953},[2928,12909,12910,12912],{"class":2930,"line":3059},[2928,12911,5274],{"class":2953},[2928,12913,2990],{"class":2970},[2928,12915,12916,12918],{"class":2930,"line":3067},[2928,12917,2987],{"class":2953},[2928,12919,2990],{"class":2949},[2896,12921,5192,12922,12924],{},[2890,12923,682],{}," function continues to work exactly as before, but now provides better integration possibilities for modules.",[2885,12926,12928],{"id":12927},"module-development-enhancements","🚀 Module Development Enhancements",[4543,12930,12932],{"id":12931},"module-dependencies-and-integration","🪾 Module Dependencies and Integration",[2896,12934,12935,12936,12941],{},"Modules can now specify dependencies and modify options for other modules (",[2910,12937,12940],{"href":12938,"rel":12939},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33063",[2914],"#33063","). This enables better module integration and ensures proper setup order:",[2918,12943,12945],{"className":2920,"code":12944,"language":2923,"meta":2924,"style":2924},"export default defineNuxtModule({\n  meta: {\n    name: 'my-module',\n  },\n  moduleDependencies: {\n    'some-module': {\n      \u002F\u002F You can specify a version constraint for the module\n      version: '>=2',\n      \u002F\u002F By default moduleDependencies will be added to the list of modules \n      \u002F\u002F to be installed by Nuxt unless `optional` is set.\n      optional: true,\n      \u002F\u002F Any configuration that should override `nuxt.options`.\n      overrides: {},\n      \u002F\u002F Any configuration that should be set. It will override module defaults but\n      \u002F\u002F will not override any configuration set in `nuxt.options`.\n      defaults: {}\n    }\n  },\n  setup (options, nuxt) {\n    \u002F\u002F Your module setup logic\n  }\n})\n",[2890,12946,12947,12959,12968,12983,12987,12996,13009,13014,13029,13034,13039,13050,13055,13065,13070,13075,13085,13089,13093,13111,13116,13120],{"__ignoreMap":2924},[2928,12948,12949,12951,12953,12955,12957],{"class":2930,"line":2931},[2928,12950,2942],{"class":2941},[2928,12952,3871],{"class":2941},[2928,12954,5524],{"class":2957},[2928,12956,2961],{"class":2949},[2928,12958,2964],{"class":2953},[2928,12960,12961,12964,12966],{"class":2930,"line":2938},[2928,12962,12963],{"class":2970},"  meta",[2928,12965,2974],{"class":2953},[2928,12967,3033],{"class":2953},[2928,12969,12970,12972,12974,12976,12979,12981],{"class":2930,"line":2967},[2928,12971,3324],{"class":2970},[2928,12973,2974],{"class":2953},[2928,12975,3329],{"class":2953},[2928,12977,12978],{"class":3156},"my-module",[2928,12980,3197],{"class":2953},[2928,12982,2981],{"class":2953},[2928,12984,12985],{"class":2930,"line":2984},[2928,12986,3383],{"class":2953},[2928,12988,12989,12992,12994],{"class":2930,"line":2993},[2928,12990,12991],{"class":2970},"  moduleDependencies",[2928,12993,2974],{"class":2953},[2928,12995,3033],{"class":2953},[2928,12997,12998,13000,13003,13005,13007],{"class":2930,"line":2999},[2928,12999,4662],{"class":2953},[2928,13001,13002],{"class":2970},"some-module",[2928,13004,3197],{"class":2953},[2928,13006,2974],{"class":2953},[2928,13008,3033],{"class":2953},[2928,13010,13011],{"class":2930,"line":3005},[2928,13012,13013],{"class":2934},"      \u002F\u002F You can specify a version constraint for the module\n",[2928,13015,13016,13018,13020,13022,13025,13027],{"class":2930,"line":3036},[2928,13017,7309],{"class":2970},[2928,13019,2974],{"class":2953},[2928,13021,3329],{"class":2953},[2928,13023,13024],{"class":3156},">=2",[2928,13026,3197],{"class":2953},[2928,13028,2981],{"class":2953},[2928,13030,13031],{"class":2930,"line":3054},[2928,13032,13033],{"class":2934},"      \u002F\u002F By default moduleDependencies will be added to the list of modules \n",[2928,13035,13036],{"class":2930,"line":3059},[2928,13037,13038],{"class":2934},"      \u002F\u002F to be installed by Nuxt unless `optional` is set.\n",[2928,13040,13041,13044,13046,13048],{"class":2930,"line":3067},[2928,13042,13043],{"class":2970},"      optional",[2928,13045,2974],{"class":2953},[2928,13047,3355],{"class":2977},[2928,13049,2981],{"class":2953},[2928,13051,13052],{"class":2930,"line":3077},[2928,13053,13054],{"class":2934},"      \u002F\u002F Any configuration that should override `nuxt.options`.\n",[2928,13056,13057,13060,13062],{"class":2930,"line":3110},[2928,13058,13059],{"class":2970},"      overrides",[2928,13061,2974],{"class":2953},[2928,13063,13064],{"class":2953}," {},\n",[2928,13066,13067],{"class":2930,"line":3116},[2928,13068,13069],{"class":2934},"      \u002F\u002F Any configuration that should be set. It will override module defaults but\n",[2928,13071,13072],{"class":2930,"line":6687},[2928,13073,13074],{"class":2934},"      \u002F\u002F will not override any configuration set in `nuxt.options`.\n",[2928,13076,13077,13080,13082],{"class":2930,"line":6703},[2928,13078,13079],{"class":2970},"      defaults",[2928,13081,2974],{"class":2953},[2928,13083,13084],{"class":2953}," {}\n",[2928,13086,13087],{"class":2930,"line":6708},[2928,13088,4866],{"class":2953},[2928,13090,13091],{"class":2930,"line":6738},[2928,13092,3383],{"class":2953},[2928,13094,13095,13098,13100,13103,13105,13107,13109],{"class":2930,"line":6776},[2928,13096,13097],{"class":2970},"  setup",[2928,13099,3248],{"class":2953},[2928,13101,13102],{"class":3023},"options",[2928,13104,3617],{"class":2953},[2928,13106,4449],{"class":3023},[2928,13108,3027],{"class":2953},[2928,13110,3033],{"class":2953},[2928,13112,13113],{"class":2930,"line":6785},[2928,13114,13115],{"class":2934},"    \u002F\u002F Your module setup logic\n",[2928,13117,13118],{"class":2930,"line":6790},[2928,13119,3113],{"class":2953},[2928,13121,13122,13124],{"class":2930,"line":6819},[2928,13123,2987],{"class":2953},[2928,13125,2990],{"class":2949},[2896,13127,13128,13129,13132],{},"This replaces the deprecated ",[2890,13130,13131],{},"installModule"," function and provides a more robust way to handle module dependencies with version constraints and configuration merging.",[4543,13134,13136],{"id":13135},"module-lifecycle-hooks","🪝 Module Lifecycle Hooks",[2896,13138,13139,13140,2892,13143,3248,13146,13151],{},"Module authors now have access to two new lifecycle hooks: ",[2890,13141,13142],{},"onInstall",[2890,13144,13145],{},"onUpgrade",[2910,13147,13150],{"href":13148,"rel":13149},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32397",[2914],"#32397","). These hooks allow modules to perform additional setup steps when first installed or when upgraded to a new version:",[2918,13153,13155],{"className":2920,"code":13154,"language":2923,"meta":2924,"style":2924},"export default defineNuxtModule({\n  meta: {\n    name: 'my-module',\n    version: '1.0.0',\n  },\n\n  onInstall(nuxt) {\n    \u002F\u002F This will be run when the module is first installed\n    console.log('Setting up my-module for the first time!')\n  },\n\n  onUpgrade(inlineOptions, nuxt, previousVersion) {\n    \u002F\u002F This will be run when the module is upgraded\n    console.log(`Upgrading my-module from v${previousVersion}`)\n  }\n})\n",[2890,13156,13157,13169,13177,13191,13206,13210,13214,13227,13232,13252,13256,13260,13283,13288,13312,13316],{"__ignoreMap":2924},[2928,13158,13159,13161,13163,13165,13167],{"class":2930,"line":2931},[2928,13160,2942],{"class":2941},[2928,13162,3871],{"class":2941},[2928,13164,5524],{"class":2957},[2928,13166,2961],{"class":2949},[2928,13168,2964],{"class":2953},[2928,13170,13171,13173,13175],{"class":2930,"line":2938},[2928,13172,12963],{"class":2970},[2928,13174,2974],{"class":2953},[2928,13176,3033],{"class":2953},[2928,13178,13179,13181,13183,13185,13187,13189],{"class":2930,"line":2967},[2928,13180,3324],{"class":2970},[2928,13182,2974],{"class":2953},[2928,13184,3329],{"class":2953},[2928,13186,12978],{"class":3156},[2928,13188,3197],{"class":2953},[2928,13190,2981],{"class":2953},[2928,13192,13193,13195,13197,13199,13202,13204],{"class":2930,"line":2984},[2928,13194,6571],{"class":2970},[2928,13196,2974],{"class":2953},[2928,13198,3329],{"class":2953},[2928,13200,13201],{"class":3156},"1.0.0",[2928,13203,3197],{"class":2953},[2928,13205,2981],{"class":2953},[2928,13207,13208],{"class":2930,"line":2993},[2928,13209,3383],{"class":2953},[2928,13211,13212],{"class":2930,"line":2999},[2928,13213,2996],{"emptyLinePlaceholder":1196},[2928,13215,13216,13219,13221,13223,13225],{"class":2930,"line":3005},[2928,13217,13218],{"class":2970},"  onInstall",[2928,13220,2961],{"class":2953},[2928,13222,4326],{"class":3023},[2928,13224,3027],{"class":2953},[2928,13226,3033],{"class":2953},[2928,13228,13229],{"class":2930,"line":3036},[2928,13230,13231],{"class":2934},"    \u002F\u002F This will be run when the module is first installed\n",[2928,13233,13234,13237,13239,13241,13243,13245,13248,13250],{"class":2930,"line":3054},[2928,13235,13236],{"class":2949},"    console",[2928,13238,3088],{"class":2953},[2928,13240,9254],{"class":2957},[2928,13242,2961],{"class":2970},[2928,13244,3197],{"class":2953},[2928,13246,13247],{"class":3156},"Setting up my-module for the first time!",[2928,13249,3197],{"class":2953},[2928,13251,2990],{"class":2970},[2928,13253,13254],{"class":2930,"line":3059},[2928,13255,3383],{"class":2953},[2928,13257,13258],{"class":2930,"line":3067},[2928,13259,2996],{"emptyLinePlaceholder":1196},[2928,13261,13262,13265,13267,13270,13272,13274,13276,13279,13281],{"class":2930,"line":3077},[2928,13263,13264],{"class":2970},"  onUpgrade",[2928,13266,2961],{"class":2953},[2928,13268,13269],{"class":3023},"inlineOptions",[2928,13271,3617],{"class":2953},[2928,13273,4449],{"class":3023},[2928,13275,3617],{"class":2953},[2928,13277,13278],{"class":3023}," previousVersion",[2928,13280,3027],{"class":2953},[2928,13282,3033],{"class":2953},[2928,13284,13285],{"class":2930,"line":3110},[2928,13286,13287],{"class":2934},"    \u002F\u002F This will be run when the module is upgraded\n",[2928,13289,13290,13292,13294,13296,13298,13300,13303,13305,13308,13310],{"class":2930,"line":3116},[2928,13291,13236],{"class":2949},[2928,13293,3088],{"class":2953},[2928,13295,9254],{"class":2957},[2928,13297,2961],{"class":2970},[2928,13299,6555],{"class":2953},[2928,13301,13302],{"class":3156},"Upgrading my-module from v",[2928,13304,6880],{"class":2953},[2928,13306,13307],{"class":2949},"previousVersion",[2928,13309,10845],{"class":2953},[2928,13311,2990],{"class":2970},[2928,13313,13314],{"class":2930,"line":6687},[2928,13315,3113],{"class":2953},[2928,13317,13318,13320],{"class":2930,"line":6703},[2928,13319,2987],{"class":2953},[2928,13321,2990],{"class":2949},[2896,13323,13324,13325,2892,13328,13331,13332,13334,13335,13337],{},"The hooks are only triggered when both ",[2890,13326,13327],{},"name",[2890,13329,13330],{},"version"," are provided in the module metadata. Nuxt uses the ",[2890,13333,215],{}," file internally to track module versions and trigger the appropriate hooks. (If you haven't come across it before, the ",[2890,13336,215],{}," file should be committed to version control.)",[4460,13339,13340],{},[2896,13341,13342],{},"This means module authors can begin implementing their own 'setup wizards' to provide a better experience when some setup is required after installing a module.",[4543,13344,13346],{"id":13345},"enhanced-file-resolution","🙈 Enhanced File Resolution",[2896,13348,13349,13350,13353,13354,3248,13357,13362],{},"The new ",[2890,13351,13352],{},"ignore"," option for ",[2890,13355,13356],{},"resolveFiles",[2910,13358,13361],{"href":13359,"rel":13360},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32858",[2914],"#32858",") allows module authors to exclude specific files based on glob patterns:",[2918,13364,13366],{"className":2920,"code":13365,"language":2923,"meta":2924,"style":2924},"\u002F\u002F Resolve all .vue files except test files\nconst files = await resolveFiles(srcDir, '**\u002F*.vue', {\n  ignore: ['**\u002F*.test.vue', '**\u002F__tests__\u002F**']\n})\n",[2890,13367,13368,13373,13403,13430],{"__ignoreMap":2924},[2928,13369,13370],{"class":2930,"line":2931},[2928,13371,13372],{"class":2934},"\u002F\u002F Resolve all .vue files except test files\n",[2928,13374,13375,13377,13380,13382,13384,13387,13390,13392,13394,13397,13399,13401],{"class":2930,"line":2938},[2928,13376,3171],{"class":2945},[2928,13378,13379],{"class":2949}," files ",[2928,13381,2954],{"class":2953},[2928,13383,3189],{"class":2941},[2928,13385,13386],{"class":2957}," resolveFiles",[2928,13388,13389],{"class":2949},"(srcDir",[2928,13391,3617],{"class":2953},[2928,13393,3329],{"class":2953},[2928,13395,13396],{"class":3156},"**\u002F*.vue",[2928,13398,3197],{"class":2953},[2928,13400,3617],{"class":2953},[2928,13402,3033],{"class":2953},[2928,13404,13405,13408,13410,13412,13414,13417,13419,13421,13423,13426,13428],{"class":2930,"line":2967},[2928,13406,13407],{"class":2970},"  ignore",[2928,13409,2974],{"class":2953},[2928,13411,4961],{"class":2949},[2928,13413,3197],{"class":2953},[2928,13415,13416],{"class":3156},"**\u002F*.test.vue",[2928,13418,3197],{"class":2953},[2928,13420,3617],{"class":2953},[2928,13422,3329],{"class":2953},[2928,13424,13425],{"class":3156},"**\u002F__tests__\u002F**",[2928,13427,3197],{"class":2953},[2928,13429,7438],{"class":2949},[2928,13431,13432,13434],{"class":2930,"line":2984},[2928,13433,2987],{"class":2953},[2928,13435,2990],{"class":2949},[4543,13437,13439],{"id":13438},"layer-directories-utility","📂 Layer Directories Utility",[2896,13441,3846,13442,13445,13446,13451],{},[2890,13443,13444],{},"getLayerDirectories"," utility (",[2910,13447,13450],{"href":13448,"rel":13449},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33098",[2914],"#33098",") provides a clean interface for accessing layer directories without directly accessing private APIs:",[2918,13453,13455],{"className":2920,"code":13454,"language":2923,"meta":2924,"style":2924},"import { getLayerDirectories } from '@nuxt\u002Fkit'\n\nconst layerDirs = await getLayerDirectories(nuxt)\n\u002F\u002F Access key directories:\n\u002F\u002F layerDirs.app        - \u002Fapp\u002F by default\n\u002F\u002F layerDirs.appPages   - \u002Fapp\u002Fpages by default\n\u002F\u002F layerDirs.server     - \u002Fserver by default\n\u002F\u002F layerDirs.public     - \u002Fpublic by default\n",[2890,13456,13457,13477,13481,13497,13502,13507,13512,13517],{"__ignoreMap":2924},[2928,13458,13459,13461,13463,13466,13468,13470,13472,13475],{"class":2930,"line":2931},[2928,13460,5398],{"class":2941},[2928,13462,3174],{"class":2953},[2928,13464,13465],{"class":2949}," getLayerDirectories",[2928,13467,3702],{"class":2953},[2928,13469,5408],{"class":2941},[2928,13471,3329],{"class":2953},[2928,13473,13474],{"class":3156},"@nuxt\u002Fkit",[2928,13476,5269],{"class":2953},[2928,13478,13479],{"class":2930,"line":2938},[2928,13480,2996],{"emptyLinePlaceholder":1196},[2928,13482,13483,13485,13488,13490,13492,13494],{"class":2930,"line":2967},[2928,13484,3171],{"class":2945},[2928,13486,13487],{"class":2949}," layerDirs ",[2928,13489,2954],{"class":2953},[2928,13491,3189],{"class":2941},[2928,13493,13465],{"class":2957},[2928,13495,13496],{"class":2949},"(nuxt)\n",[2928,13498,13499],{"class":2930,"line":2984},[2928,13500,13501],{"class":2934},"\u002F\u002F Access key directories:\n",[2928,13503,13504],{"class":2930,"line":2993},[2928,13505,13506],{"class":2934},"\u002F\u002F layerDirs.app        - \u002Fapp\u002F by default\n",[2928,13508,13509],{"class":2930,"line":2999},[2928,13510,13511],{"class":2934},"\u002F\u002F layerDirs.appPages   - \u002Fapp\u002Fpages by default\n",[2928,13513,13514],{"class":2930,"line":3005},[2928,13515,13516],{"class":2934},"\u002F\u002F layerDirs.server     - \u002Fserver by default\n",[2928,13518,13519],{"class":2930,"line":3036},[2928,13520,13521],{"class":2934},"\u002F\u002F layerDirs.public     - \u002Fpublic by default\n",[2885,13523,13525],{"id":13524},"developer-experience-improvements","✨ Developer Experience Improvements",[4543,13527,13529],{"id":13528},"simplified-kit-utilities","🎱 Simplified Kit Utilities",[2896,13531,13532],{},"Several kit utilities have been improved for better developer experience:",[4346,13534,13535],{},[3844,13536,13537,13540,13541,3839],{},[2890,13538,13539],{},"addServerImports"," now supports single imports (",[2910,13542,13545],{"href":13543,"rel":13544},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32289",[2914],"#32289",[2918,13547,13549],{"className":2920,"code":13548,"language":2923,"meta":2924,"style":2924},"\u002F\u002F Before: required array\naddServerImports([{ from: 'my-package', name: 'myUtility' }])\n\n\u002F\u002F Now: can pass directly\naddServerImports({ from: 'my-package', name: 'myUtility' })\n",[2890,13550,13551,13556,13594,13598,13603],{"__ignoreMap":2924},[2928,13552,13553],{"class":2930,"line":2931},[2928,13554,13555],{"class":2934},"\u002F\u002F Before: required array\n",[2928,13557,13558,13560,13562,13564,13566,13568,13570,13573,13575,13577,13580,13582,13584,13587,13589,13591],{"class":2930,"line":2938},[2928,13559,13539],{"class":2957},[2928,13561,6583],{"class":2949},[2928,13563,9398],{"class":2953},[2928,13565,5408],{"class":2970},[2928,13567,2974],{"class":2953},[2928,13569,3329],{"class":2953},[2928,13571,13572],{"class":3156},"my-package",[2928,13574,3197],{"class":2953},[2928,13576,3617],{"class":2953},[2928,13578,13579],{"class":2970}," name",[2928,13581,2974],{"class":2953},[2928,13583,3329],{"class":2953},[2928,13585,13586],{"class":3156},"myUtility",[2928,13588,3197],{"class":2953},[2928,13590,3702],{"class":2953},[2928,13592,13593],{"class":2949},"])\n",[2928,13595,13596],{"class":2930,"line":2967},[2928,13597,2996],{"emptyLinePlaceholder":1196},[2928,13599,13600],{"class":2930,"line":2984},[2928,13601,13602],{"class":2934},"\u002F\u002F Now: can pass directly\n",[2928,13604,13605,13607,13609,13611,13613,13615,13617,13619,13621,13623,13625,13627,13629,13631,13633,13635],{"class":2930,"line":2993},[2928,13606,13539],{"class":2957},[2928,13608,2961],{"class":2949},[2928,13610,9398],{"class":2953},[2928,13612,5408],{"class":2970},[2928,13614,2974],{"class":2953},[2928,13616,3329],{"class":2953},[2928,13618,13572],{"class":3156},[2928,13620,3197],{"class":2953},[2928,13622,3617],{"class":2953},[2928,13624,13579],{"class":2970},[2928,13626,2974],{"class":2953},[2928,13628,3329],{"class":2953},[2928,13630,13586],{"class":3156},[2928,13632,3197],{"class":2953},[2928,13634,3702],{"class":2953},[2928,13636,2990],{"class":2949},[4543,13638,13640],{"id":13639},"performance-optimizations","🔥 Performance Optimizations",[2896,13642,13643],{},"This release includes several internal performance optimizations:",[4346,13645,13646,13654,13662],{},[3844,13647,13648,13649,3027],{},"Improved route rules cache management (",[2910,13650,13653],{"href":13651,"rel":13652},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32877",[2914],"#32877",[3844,13655,13656,13657,3027],{},"Optimized app manifest watching (",[2910,13658,13661],{"href":13659,"rel":13660},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32880",[2914],"#32880",[3844,13663,13664,13665,3027],{},"Better TypeScript processing for page metadata (",[2910,13666,13669],{"href":13667,"rel":13668},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32920",[2914],"#32920",[2885,13671,13673],{"id":13672},"notable-fixes","🐛 Notable Fixes",[4346,13675,13676,13687,13700,13708,13716],{},[3844,13677,13678,13679,13681,13682,3027],{},"Improved ",[2890,13680,527],{}," hook typing (",[2910,13683,13686],{"href":13684,"rel":13685},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32891",[2914],"#32891",[3844,13688,13689,13690,4309,13695,3027],{},"Better handling of TypeScript expressions in page metadata (",[2910,13691,13694],{"href":13692,"rel":13693},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32902",[2914],"#32902",[2910,13696,13699],{"href":13697,"rel":13698},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32914",[2914],"#32914",[3844,13701,13702,13703,3027],{},"Enhanced route matching and synchronization (",[2910,13704,13707],{"href":13705,"rel":13706},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32899",[2914],"#32899",[3844,13709,13710,13711,3027],{},"Reduced verbosity of Vue server warnings in development (",[2910,13712,13715],{"href":13713,"rel":13714},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F33018",[2914],"#33018",[3844,13717,13718,13719,3248,13721,3027],{},"Better handling of relative time calculations in ",[2890,13720,464],{},[2910,13722,13725],{"href":13723,"rel":13724},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32893",[2914],"#32893",[2885,13727,6103],{"id":6102},[2896,13729,13730],{},"As usual, our recommendation for upgrading is to run:",[2918,13732,13733],{"className":4437,"code":4438,"language":4439,"meta":2924,"style":2924},[2890,13734,13735],{"__ignoreMap":2924},[2928,13736,13737,13739,13741,13743],{"class":2930,"line":2931},[2928,13738,4446],{"class":3448},[2928,13740,4449],{"class":3156},[2928,13742,4452],{"class":3156},[2928,13744,4455],{"class":3156},[2896,13746,11275],{},[2885,13748,13750],{"id":13749},"nuxt-319","📦 Nuxt 3.19",[2896,13752,13753,13754,13757],{},"All of these features are also available in ",[2900,13755,13756],{},"Nuxt 3.19",", which has been released alongside v4.1. As part of our commitment to the v3 branch, we continue to backport compatible v4 features to ensure v3 users can benefit from the latest improvements.",[2896,13759,13760],{},"If you're still using Nuxt 3, you can upgrade to v3.19 to get access to all these features while staying on the stable v3 release line.",[2885,13762,13763],{"id":4472},"Full release notes",[3233,13765,13767],{"icon":4477,"target":4478,"to":13766},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv4.1.0",[2896,13768,4481,13769,3088],{},[2890,13770,13771],{},"v4.1.0",[3233,13773,13775],{"icon":4477,"target":4478,"to":13774},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv3.19.0",[2896,13776,4481,13777,3088],{},[2890,13778,13779],{},"v3.19.0",[2896,13781,13782],{},"Thank you to everyone who contributed! We're excited to see what you build with these new features. ❤️",[4489,13784,13785],{},"html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .sYRBq, html code.shiki .sYRBq{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}html pre.shiki code .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":2924,"searchDepth":2938,"depth":2938,"links":13787},[13788,13792,13793,13794,13800,13804,13805,13806,13807],{"id":12257,"depth":2938,"text":12258,"children":13789},[13790,13791],{"id":12261,"depth":2967,"text":12262},{"id":12410,"depth":2967,"text":12411},{"id":12658,"depth":2938,"text":12659},{"id":12759,"depth":2938,"text":12760},{"id":12927,"depth":2938,"text":12928,"children":13795},[13796,13797,13798,13799],{"id":12931,"depth":2967,"text":12932},{"id":13135,"depth":2967,"text":13136},{"id":13345,"depth":2967,"text":13346},{"id":13438,"depth":2967,"text":13439},{"id":13524,"depth":2938,"text":13525,"children":13801},[13802,13803],{"id":13528,"depth":2967,"text":13529},{"id":13639,"depth":2967,"text":13640},{"id":13672,"depth":2938,"text":13673},{"id":6102,"depth":2938,"text":6103},{"id":13749,"depth":2938,"text":13750},{"id":4472,"depth":2938,"text":13763},"2025-09-02","Nuxt 4.1 is out - bringing enhanced build stability, better development experience, and powerful new features for module authors!","\u002Fassets\u002Fblog\u002Fv4.1.png",{},"\u002Fblog\u002Fv4-1",{"title":12249,"description":13809},"blog\u002F38.v4-1","zhEhFiytb5piLeBPvl7TzvTuYUrVTl1ZN-XiKA7Ig4I",{"id":13817,"title":13818,"authors":13819,"body":13822,"category":4517,"date":14533,"description":14534,"draft":108,"extension":4520,"image":14535,"meta":14536,"navigation":108,"path":14537,"seo":14538,"stem":14539,"tags":6,"__hash__":14540},"blog\u002Fblog\u002F37.v3-18.md","Nuxt 3.18",[13820],{"name":2877,"avatar":13821,"to":2880},{"src":2879},{"type":2882,"value":13823,"toc":14514},[13824,13828,13840,13992,13995,13999,14022,14026,14030,14042,14046,14049,14080,14087,14101,14240,14244,14256,14260,14263,14267,14279,14365,14369,14384,14388,14391,14431,14433,14436,14475,14477,14479,14495,14498,14500,14508,14511],[2885,13825,13827],{"id":13826},"lazy-hydration-macros","🧪 Lazy Hydration Macros",[2896,13829,13830,13831,3248,13834,13839],{},"Building on the delayed hydration support from v3.16, we now support ",[2900,13832,13833],{},"lazy hydration macros",[2910,13835,13838],{"href":13836,"rel":13837},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31192",[2914],"#31192",")! These provide a more ergonomic way to control component hydration:",[2918,13841,13843],{"className":3129,"code":13842,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup lang=\"ts\">\nconst LazyHydrationMyComponent = defineLazyHydrationComponent(\n  'visible',\n  () => import('.\u002Fcomponents\u002FMyComponent.vue')\n)\n\u003C\u002Fscript>\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- \n      Hydration will be triggered when\n      the element(s) is 100px away from entering the viewport.\n    -->\n    \u003CLazyHydrationMyComponent :hydrate-on-visible=\"{ rootMargin: '100px' }\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[2890,13844,13845,13865,13878,13888,13907,13911,13919,13927,13935,13940,13945,13950,13955,13976,13984],{"__ignoreMap":2924},[2928,13846,13847,13849,13851,13853,13855,13857,13859,13861,13863],{"class":2930,"line":2931},[2928,13848,3139],{"class":2953},[2928,13850,3142],{"class":2970},[2928,13852,3145],{"class":2945},[2928,13854,3148],{"class":2945},[2928,13856,2954],{"class":2953},[2928,13858,3153],{"class":2953},[2928,13860,2923],{"class":3156},[2928,13862,3153],{"class":2953},[2928,13864,3161],{"class":2953},[2928,13866,13867,13869,13872,13874,13876],{"class":2930,"line":2938},[2928,13868,3171],{"class":2945},[2928,13870,13871],{"class":2949}," LazyHydrationMyComponent ",[2928,13873,2954],{"class":2953},[2928,13875,12700],{"class":2957},[2928,13877,12703],{"class":2949},[2928,13879,13880,13882,13884,13886],{"class":2930,"line":2967},[2928,13881,12708],{"class":2953},[2928,13883,12711],{"class":3156},[2928,13885,3197],{"class":2953},[2928,13887,2981],{"class":2953},[2928,13889,13890,13892,13894,13896,13898,13900,13903,13905],{"class":2930,"line":2984},[2928,13891,12720],{"class":2953},[2928,13893,3030],{"class":2945},[2928,13895,5558],{"class":2953},[2928,13897,2961],{"class":2949},[2928,13899,3197],{"class":2953},[2928,13901,13902],{"class":3156},".\u002Fcomponents\u002FMyComponent.vue",[2928,13904,3197],{"class":2953},[2928,13906,2990],{"class":2949},[2928,13908,13909],{"class":2930,"line":2993},[2928,13910,2990],{"class":2949},[2928,13912,13913,13915,13917],{"class":2930,"line":2999},[2928,13914,3209],{"class":2953},[2928,13916,3142],{"class":2970},[2928,13918,3161],{"class":2953},[2928,13920,13921,13923,13925],{"class":2930,"line":3005},[2928,13922,3139],{"class":2953},[2928,13924,3521],{"class":2970},[2928,13926,3161],{"class":2953},[2928,13928,13929,13931,13933],{"class":2930,"line":3036},[2928,13930,3528],{"class":2953},[2928,13932,11471],{"class":2970},[2928,13934,3161],{"class":2953},[2928,13936,13937],{"class":2930,"line":3054},[2928,13938,13939],{"class":2934},"    \u003C!-- \n",[2928,13941,13942],{"class":2930,"line":3059},[2928,13943,13944],{"class":2934},"      Hydration will be triggered when\n",[2928,13946,13947],{"class":2930,"line":3067},[2928,13948,13949],{"class":2934},"      the element(s) is 100px away from entering the viewport.\n",[2928,13951,13952],{"class":2930,"line":3077},[2928,13953,13954],{"class":2934},"    -->\n",[2928,13956,13957,13959,13962,13965,13967,13969,13972,13974],{"class":2930,"line":3110},[2928,13958,3557],{"class":2953},[2928,13960,13961],{"class":2970},"LazyHydrationMyComponent",[2928,13963,13964],{"class":2945}," :hydrate-on-visible",[2928,13966,2954],{"class":2953},[2928,13968,3153],{"class":2953},[2928,13970,13971],{"class":3156},"{ rootMargin: '100px' }",[2928,13973,3153],{"class":2953},[2928,13975,3534],{"class":2953},[2928,13977,13978,13980,13982],{"class":2930,"line":3116},[2928,13979,3567],{"class":2953},[2928,13981,11471],{"class":2970},[2928,13983,3161],{"class":2953},[2928,13985,13986,13988,13990],{"class":2930,"line":6687},[2928,13987,3209],{"class":2953},[2928,13989,3521],{"class":2970},[2928,13991,3161],{"class":2953},[2896,13993,13994],{},"These macros make it possible to use Nuxt's lazy hydration utilities alongside explicit component imports.",[2885,13996,13998],{"id":13997},"️-accessibility-improvements","♿️ Accessibility Improvements",[2896,14000,14001,14002,14004,14005,3248,14007,14012,14013,14015,14016,14018,14019,14021],{},"We've enhanced accessibility by including ",[2890,14003,460],{}," in the built-in ",[2890,14006,219],{},[2910,14008,14011],{"href":14009,"rel":14010},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32621",[2914],"#32621","). This means page changes will be announced to screen readers, making navigation more accessible for users with visual impairments. (This only applies if you do not have an ",[2890,14014,219],{}," in your project. If you do, please keep ",[2890,14017,460],{}," in your ",[2890,14020,219],{},"!)",[2885,14023,14025],{"id":14024},"️-enhanced-development-experience","🛠️ Enhanced Development Experience",[4543,14027,14029],{"id":14028},"chrome-devtools-workspace-integration","Chrome DevTools Workspace Integration",[2896,14031,14032,14033,3248,14036,14041],{},"We've added ",[2900,14034,14035],{},"Chrome DevTools workspace integration",[2910,14037,14040],{"href":14038,"rel":14039},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32084",[2914],"#32084","), allowing you to edit your Nuxt source files directly from Chrome DevTools. This creates a better debugging experience where changes made in DevTools are reflected in your actual source files.",[4543,14043,14045],{"id":14044},"better-component-type-safety","Better Component Type Safety",[2896,14047,14048],{},"Component type safety has been improved with:",[4346,14050,14051,14066],{},[3844,14052,14053,3248,14060,14065],{},[2900,14054,14055,14056,2892,14058],{},"Typed slots for ",[2890,14057,440],{},[2890,14059,444],{},[2910,14061,14064],{"href":14062,"rel":14063},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32707",[2914],"#32707",") - better IntelliSense and error checking",[3844,14067,14068,3248,14074,14079],{},[2900,14069,14070,14071,14073],{},"Exported ",[2890,14072,464],{}," prop types",[2910,14075,14078],{"href":14076,"rel":14077},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32547",[2914],"#32547",") - easier to extend and customize",[4543,14081,14083,14084],{"id":14082},"new-auto-import-onwatchercleanup","New Auto-Import: ",[2890,14085,14086],{},"onWatcherCleanup",[2896,14088,5192,14089,14091,14092,14094,14095,14100],{},[2890,14090,14086],{}," function from ",[2890,14093,3132],{}," is now available as an auto-import (",[2910,14096,14099],{"href":14097,"rel":14098},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32396",[2914],"#32396","), making it easier to clean up watchers and prevent memory leaks:",[2918,14102,14104],{"className":2920,"code":14103,"language":2923,"meta":2924,"style":2924},"const { data } = useAsyncData('users', fetchUsers)\n\nwatch(data, (newData) => {\n  const interval = setInterval(() => {\n    \u002F\u002F Some periodic task\n  }, 1000)\n  \n  \u002F\u002F Clean up when the watcher is stopped\n  onWatcherCleanup(() => {\n    clearInterval(interval)\n  })\n})\n",[2890,14105,14106,14134,14138,14159,14179,14184,14194,14198,14203,14216,14228,14234],{"__ignoreMap":2924},[2928,14107,14108,14110,14112,14115,14117,14119,14121,14123,14125,14127,14129,14131],{"class":2930,"line":2931},[2928,14109,3171],{"class":2945},[2928,14111,3174],{"class":2953},[2928,14113,14114],{"class":2949}," data ",[2928,14116,2987],{"class":2953},[2928,14118,3045],{"class":2953},[2928,14120,10264],{"class":2957},[2928,14122,2961],{"class":2949},[2928,14124,3197],{"class":2953},[2928,14126,10271],{"class":3156},[2928,14128,3197],{"class":2953},[2928,14130,3617],{"class":2953},[2928,14132,14133],{"class":2949}," fetchUsers)\n",[2928,14135,14136],{"class":2930,"line":2938},[2928,14137,2996],{"emptyLinePlaceholder":1196},[2928,14139,14140,14143,14146,14148,14150,14153,14155,14157],{"class":2930,"line":2967},[2928,14141,14142],{"class":2957},"watch",[2928,14144,14145],{"class":2949},"(data",[2928,14147,3617],{"class":2953},[2928,14149,3248],{"class":2953},[2928,14151,14152],{"class":3023},"newData",[2928,14154,3027],{"class":2953},[2928,14156,3030],{"class":2945},[2928,14158,3033],{"class":2953},[2928,14160,14161,14163,14166,14168,14171,14173,14175,14177],{"class":2930,"line":2984},[2928,14162,3039],{"class":2945},[2928,14164,14165],{"class":2949}," interval",[2928,14167,3045],{"class":2953},[2928,14169,14170],{"class":2957}," setInterval",[2928,14172,2961],{"class":2970},[2928,14174,3647],{"class":2953},[2928,14176,3030],{"class":2945},[2928,14178,3033],{"class":2953},[2928,14180,14181],{"class":2930,"line":2993},[2928,14182,14183],{"class":2934},"    \u002F\u002F Some periodic task\n",[2928,14185,14186,14189,14192],{"class":2930,"line":2999},[2928,14187,14188],{"class":2953},"  },",[2928,14190,14191],{"class":3988}," 1000",[2928,14193,2990],{"class":2970},[2928,14195,14196],{"class":2930,"line":3005},[2928,14197,9082],{"class":2970},[2928,14199,14200],{"class":2930,"line":3036},[2928,14201,14202],{"class":2934},"  \u002F\u002F Clean up when the watcher is stopped\n",[2928,14204,14205,14208,14210,14212,14214],{"class":2930,"line":3054},[2928,14206,14207],{"class":2957},"  onWatcherCleanup",[2928,14209,2961],{"class":2970},[2928,14211,3647],{"class":2953},[2928,14213,3030],{"class":2945},[2928,14215,3033],{"class":2953},[2928,14217,14218,14221,14223,14226],{"class":2930,"line":3059},[2928,14219,14220],{"class":2957},"    clearInterval",[2928,14222,2961],{"class":2970},[2928,14224,14225],{"class":2949},"interval",[2928,14227,2990],{"class":2970},[2928,14229,14230,14232],{"class":2930,"line":3067},[2928,14231,5274],{"class":2953},[2928,14233,2990],{"class":2970},[2928,14235,14236,14238],{"class":2930,"line":3077},[2928,14237,2987],{"class":2953},[2928,14239,2990],{"class":2949},[2885,14241,14243],{"id":14242},"observability-enhancements","📊 Observability Enhancements",[2896,14245,14246,14247,3248,14250,14255],{},"Page routes are now ",[2900,14248,14249],{},"exposed to Nitro for observability",[2910,14251,14254],{"href":14252,"rel":14253},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32617",[2914],"#32617","), enabling better monitoring and analytics integration with supported platforms. This allows observability tools to track page-level metrics more effectively.",[2885,14257,14259],{"id":14258},"module-development-improvements","🔧 Module Development Improvements",[2896,14261,14262],{},"Module authors get several quality-of-life improvements:",[4543,14264,14266],{"id":14265},"simplified-server-imports","Simplified Server Imports",[2896,14268,5192,14269,14271,14272,3248,14275,14278],{},[2890,14270,13539],{}," kit utility now ",[2900,14273,14274],{},"supports single imports",[2910,14276,13545],{"href":13543,"rel":14277},[2914],"), making it easier to add individual server utilities:",[2918,14280,14282],{"className":2920,"code":14281,"language":2923,"meta":2924,"style":2924},"\u002F\u002F Before: had to wrap in array\naddServerImports([{ from: 'my-package', name: 'myUtility' }])\n\n\u002F\u002F Now: can pass directly\naddServerImports({ from: 'my-package', name: 'myUtility' })\n",[2890,14283,14284,14289,14323,14327,14331],{"__ignoreMap":2924},[2928,14285,14286],{"class":2930,"line":2931},[2928,14287,14288],{"class":2934},"\u002F\u002F Before: had to wrap in array\n",[2928,14290,14291,14293,14295,14297,14299,14301,14303,14305,14307,14309,14311,14313,14315,14317,14319,14321],{"class":2930,"line":2938},[2928,14292,13539],{"class":2957},[2928,14294,6583],{"class":2949},[2928,14296,9398],{"class":2953},[2928,14298,5408],{"class":2970},[2928,14300,2974],{"class":2953},[2928,14302,3329],{"class":2953},[2928,14304,13572],{"class":3156},[2928,14306,3197],{"class":2953},[2928,14308,3617],{"class":2953},[2928,14310,13579],{"class":2970},[2928,14312,2974],{"class":2953},[2928,14314,3329],{"class":2953},[2928,14316,13586],{"class":3156},[2928,14318,3197],{"class":2953},[2928,14320,3702],{"class":2953},[2928,14322,13593],{"class":2949},[2928,14324,14325],{"class":2930,"line":2967},[2928,14326,2996],{"emptyLinePlaceholder":1196},[2928,14328,14329],{"class":2930,"line":2984},[2928,14330,13602],{"class":2934},[2928,14332,14333,14335,14337,14339,14341,14343,14345,14347,14349,14351,14353,14355,14357,14359,14361,14363],{"class":2930,"line":2993},[2928,14334,13539],{"class":2957},[2928,14336,2961],{"class":2949},[2928,14338,9398],{"class":2953},[2928,14340,5408],{"class":2970},[2928,14342,2974],{"class":2953},[2928,14344,3329],{"class":2953},[2928,14346,13572],{"class":3156},[2928,14348,3197],{"class":2953},[2928,14350,3617],{"class":2953},[2928,14352,13579],{"class":2970},[2928,14354,2974],{"class":2953},[2928,14356,3329],{"class":2953},[2928,14358,13586],{"class":3156},[2928,14360,3197],{"class":2953},[2928,14362,3702],{"class":2953},[2928,14364,2990],{"class":2949},[4543,14366,14368],{"id":14367},"typescript-configuration","TypeScript Configuration",[2896,14370,14371,14372,3248,14378,14383],{},"Modules can now ",[2900,14373,14374,14375],{},"add to ",[2890,14376,14377],{},"typescript.hoist",[2910,14379,14382],{"href":14380,"rel":14381},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32601",[2914],"#32601","), giving them more control over TypeScript configuration and type generation.",[2885,14385,14387],{"id":14386},"️-performance-improvements","⚡️ Performance Improvements",[2896,14389,14390],{},"We've made several performance optimizations:",[4346,14392,14393,14405],{},[3844,14394,14395,14398,14399,14404],{},[2900,14396,14397],{},"Improved Vite-node communication"," via internal socket (",[2910,14400,14403],{"href":14401,"rel":14402},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32417",[2914],"#32417",") for faster development builds",[3844,14406,14407,3248,14413,14418,14419,3248,14425,14430],{},[2900,14408,14409,14410],{},"Migration to ",[2890,14411,14412],{},"oxc-walker",[2910,14414,14417],{"href":14415,"rel":14416},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32250",[2914],"#32250",") and ",[2900,14420,14421,14422,14424],{},"oxc for ",[2890,14423,507],{}," transforms",[2910,14426,14429],{"href":14427,"rel":14428},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32045",[2914],"#32045",") for faster code transformations",[2885,14432,5798],{"id":5797},[2896,14434,14435],{},"This release also includes several important fixes:",[4346,14437,14438,14449,14464],{},[3844,14439,14440,14443,14444,3027],{},[2900,14441,14442],{},"Improved data fetching",": When computed keys change, old data is now properly retained (",[2910,14445,14448],{"href":14446,"rel":14447},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32616",[2914],"#32616",[3844,14450,14451,14454,14455,14458,14459,3027],{},[2900,14452,14453],{},"Better scroll behavior",": ",[2890,14456,14457],{},"scrollBehaviorType"," is now only used for hash scrolling (",[2910,14460,14463],{"href":14461,"rel":14462},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32622",[2914],"#32622",[3844,14465,14466,14469,14470,3027],{},[2900,14467,14468],{},"Fixed directory aliases",": Added trailing slashes to some directory aliases for better consistency (",[2910,14471,14474],{"href":14472,"rel":14473},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F32755",[2914],"#32755",[2885,14476,6103],{"id":6102},[2896,14478,13730],{},[2918,14480,14482],{"className":4437,"code":14481,"language":4439,"meta":2924,"style":2924},"npx nuxi@latest upgrade --dedupe\n",[2890,14483,14484],{"__ignoreMap":2924},[2928,14485,14486,14488,14491,14493],{"class":2930,"line":2931},[2928,14487,4446],{"class":3448},[2928,14489,14490],{"class":3156}," nuxi@latest",[2928,14492,4452],{"class":3156},[2928,14494,4455],{"class":3156},[2896,14496,14497],{},"This refreshes your lockfile and pulls in all the latest dependencies that Nuxt relies on, especially from the unjs ecosystem.",[2885,14499,13763],{"id":4472},[3233,14501,14503],{"icon":4477,"target":4478,"to":14502},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv3.18.0",[2896,14504,4481,14505,3088],{},[2890,14506,14507],{},"v3.18.0",[2896,14509,14510],{},"A huge thank you to everyone who's been a part of this release. Over the next six months, we'll continue backporting compatible v4 features and bug fixes, so please keep the feedback coming! ❤️",[4489,14512,14513],{},"html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sYRBq, html code.shiki .sYRBq{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}",{"title":2924,"searchDepth":2938,"depth":2938,"links":14515},[14516,14517,14518,14524,14525,14529,14530,14531,14532],{"id":13826,"depth":2938,"text":13827},{"id":13997,"depth":2938,"text":13998},{"id":14024,"depth":2938,"text":14025,"children":14519},[14520,14521,14522],{"id":14028,"depth":2967,"text":14029},{"id":14044,"depth":2967,"text":14045},{"id":14082,"depth":2967,"text":14523},"New Auto-Import: onWatcherCleanup",{"id":14242,"depth":2938,"text":14243},{"id":14258,"depth":2938,"text":14259,"children":14526},[14527,14528],{"id":14265,"depth":2967,"text":14266},{"id":14367,"depth":2967,"text":14368},{"id":14386,"depth":2938,"text":14387},{"id":5797,"depth":2938,"text":5798},{"id":6102,"depth":2938,"text":6103},{"id":4472,"depth":2938,"text":13763},"2025-07-28","Nuxt 3.18 is out - bringing v4 features to v3, improved accessibility, better browser dev tooling integration, and performance enhancements!","\u002Fassets\u002Fblog\u002Fv3.18.png",{},"\u002Fblog\u002Fv3-18",{"title":13818,"description":14534},"blog\u002F37.v3-18","kBjuo_w932b40zRWgCOU0RQ_xhb9YJ1xqk9jgONJ-ao",{"id":14542,"title":14543,"authors":14544,"body":14547,"category":4517,"date":15120,"description":15121,"draft":108,"extension":4520,"image":15122,"meta":15123,"navigation":108,"path":15124,"seo":15125,"stem":15126,"tags":6,"__hash__":15127},"blog\u002Fblog\u002F36.v4.md","Announcing Nuxt 4.0",[14545],{"name":2877,"avatar":14546,"to":2880},{"src":2879},{"type":2882,"value":14548,"toc":15104},[14549,14555,14558,14561,14565,14568,14601,14604,14607,14610,14616,14620,14626,14782,14792,14800,14805,14813,14817,14825,14828,14832,14838,14846,14849,14853,14859,14889,14892,14896,14899,14902,14919,14922,14926,14928,14942,14945,14949,14958,15022,15026,15032,15035,15039,15042,15045,15077,15081,15084,15087,15090,15098,15101],[2896,14550,14551,14554],{},[2900,14552,14553],{},"Nuxt 4.0 is here!"," 🎉",[2896,14556,14557],{},"After a year of real-world testing, we're excited to announce the official release of Nuxt 4. This is a stability-focused major release, introducing a few thoughtful breaking changes in order to improve development experience.",[2896,14559,14560],{},"If you've been following along, you'll recognize many of these features and changes — and if you're new to them, we hope you'll welcome them.",[2885,14562,14564],{"id":14563},"whats-new","🔥 What's new?",[2896,14566,14567],{},"Nuxt 4 is all about making your development experience smoother:",[4346,14569,14570,14579,14585,14595],{},[3844,14571,14572,14575,14576,14578],{},[2900,14573,14574],{},"Cleaner project organization"," with the new ",[2890,14577,1195],{}," directory structure",[3844,14580,14581,14584],{},[2900,14582,14583],{},"Smarter data fetching"," - we've taken the opportunity to address some inconsistencies and improve performance with the data layer",[3844,14586,14587,14590,14591,14594],{},[2900,14588,14589],{},"Better TypeScript support"," with project-based separation between the different contexts in your project - app code, server code, ",[2890,14592,14593],{},"shared\u002F"," folder, and configuration",[3844,14596,14597,14600],{},[2900,14598,14599],{},"Faster CLI and development"," with adoption of internal sockets and a faster CLI",[2896,14602,14603],{},"Why these features in particular? Mostly because these kind of improvements have required making changes that are technically breaking.",[2896,14605,14606],{},"In general, we aim for a hype-free approach to releases. Rather than save up features for a big release, we've been shipping improvements in Nuxt 3 minor releases.",[2896,14608,14609],{},"We've also spent a lot of time figuring out how to implement these changes in a backwards-compatible way, and I hope that means that most Nuxt 3 projects can upgrade with a minimum of effort.",[2896,14611,14612,14613,14615],{},"I'd advise reading through the ",[2910,14614,4468],{"href":1180}," before you start, to understand what areas of your app might be affected.",[4543,14617,14619],{"id":14618},"️-new-project-structure","🗂️ New project structure",[2896,14621,14622,14623,14625],{},"The biggest visible change is how projects are organized. Your application code now lives in an ",[2890,14624,1195],{}," directory by default:",[2918,14627,14629],{"className":4317,"code":14628,"language":4319,"meta":2924,"style":2924},"my-nuxt-app\u002F\n├─ app\u002F\n│  ├─ assets\u002F\n│  ├─ components\u002F\n│  ├─ composables\u002F\n│  ├─ layouts\u002F\n│  ├─ middleware\u002F\n│  ├─ pages\u002F\n│  ├─ plugins\u002F\n│  ├─ utils\u002F\n│  ├─ app.vue\n│  ├─ app.config.ts\n│  └─ error.vue\n├─ content\u002F\n├─ public\u002F\n├─ shared\u002F\n├─ server\u002F\n└─ nuxt.config.ts\n",[2890,14630,14631,14636,14644,14655,14664,14673,14682,14691,14700,14709,14718,14727,14736,14746,14753,14760,14767,14774],{"__ignoreMap":2924},[2928,14632,14633],{"class":2930,"line":2931},[2928,14634,14635],{"class":3448},"my-nuxt-app\u002F\n",[2928,14637,14638,14641],{"class":2930,"line":2938},[2928,14639,14640],{"class":3448},"├─",[2928,14642,14643],{"class":3156}," app\u002F\n",[2928,14645,14646,14649,14652],{"class":2930,"line":2967},[2928,14647,14648],{"class":3448},"│",[2928,14650,14651],{"class":3156},"  ├─",[2928,14653,14654],{"class":3156}," assets\u002F\n",[2928,14656,14657,14659,14661],{"class":2930,"line":2984},[2928,14658,14648],{"class":3448},[2928,14660,14651],{"class":3156},[2928,14662,14663],{"class":3156}," components\u002F\n",[2928,14665,14666,14668,14670],{"class":2930,"line":2993},[2928,14667,14648],{"class":3448},[2928,14669,14651],{"class":3156},[2928,14671,14672],{"class":3156}," composables\u002F\n",[2928,14674,14675,14677,14679],{"class":2930,"line":2999},[2928,14676,14648],{"class":3448},[2928,14678,14651],{"class":3156},[2928,14680,14681],{"class":3156}," layouts\u002F\n",[2928,14683,14684,14686,14688],{"class":2930,"line":3005},[2928,14685,14648],{"class":3448},[2928,14687,14651],{"class":3156},[2928,14689,14690],{"class":3156}," middleware\u002F\n",[2928,14692,14693,14695,14697],{"class":2930,"line":3036},[2928,14694,14648],{"class":3448},[2928,14696,14651],{"class":3156},[2928,14698,14699],{"class":3156}," pages\u002F\n",[2928,14701,14702,14704,14706],{"class":2930,"line":3054},[2928,14703,14648],{"class":3448},[2928,14705,14651],{"class":3156},[2928,14707,14708],{"class":3156}," plugins\u002F\n",[2928,14710,14711,14713,14715],{"class":2930,"line":3059},[2928,14712,14648],{"class":3448},[2928,14714,14651],{"class":3156},[2928,14716,14717],{"class":3156}," utils\u002F\n",[2928,14719,14720,14722,14724],{"class":2930,"line":3067},[2928,14721,14648],{"class":3448},[2928,14723,14651],{"class":3156},[2928,14725,14726],{"class":3156}," app.vue\n",[2928,14728,14729,14731,14733],{"class":2930,"line":3077},[2928,14730,14648],{"class":3448},[2928,14732,14651],{"class":3156},[2928,14734,14735],{"class":3156}," app.config.ts\n",[2928,14737,14738,14740,14743],{"class":2930,"line":3110},[2928,14739,14648],{"class":3448},[2928,14741,14742],{"class":3156},"  └─",[2928,14744,14745],{"class":3156}," error.vue\n",[2928,14747,14748,14750],{"class":2930,"line":3116},[2928,14749,14640],{"class":3448},[2928,14751,14752],{"class":3156}," content\u002F\n",[2928,14754,14755,14757],{"class":2930,"line":6687},[2928,14756,14640],{"class":3448},[2928,14758,14759],{"class":3156}," public\u002F\n",[2928,14761,14762,14764],{"class":2930,"line":6703},[2928,14763,14640],{"class":3448},[2928,14765,14766],{"class":3156}," shared\u002F\n",[2928,14768,14769,14771],{"class":2930,"line":6708},[2928,14770,14640],{"class":3448},[2928,14772,14773],{"class":3156}," server\u002F\n",[2928,14775,14776,14779],{"class":2930,"line":6738},[2928,14777,14778],{"class":3448},"└─",[2928,14780,14781],{"class":3156}," nuxt.config.ts\n",[2896,14783,14784,14785,2892,14788,14791],{},"This helps keep your code separate from ",[2890,14786,14787],{},"node_modules\u002F",[2890,14789,14790],{},".git\u002F",", which makes file watchers faster (especially on Windows and Linux). It also gives your IDE better context about whether you're working with client or server code.",[4460,14793,14794],{},[2896,14795,14796,14799],{},[2900,14797,14798],{},"Don't want to migrate?"," That's totally fine! Nuxt will detect your existing structure and keep working exactly as before.",[14801,14802,14804],"h4",{"id":14803},"updated-ui-templates","🎨 Updated UI templates",[2896,14806,14807,14808,2916],{},"Nuxt’s starter templates have an all new look, with improved accessibility, default titles, and template polish (",[2910,14809,14812],{"href":14810,"rel":14811},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27843",[2914],"#27843",[4543,14814,14816],{"id":14815},"smarter-data-fetching","🔄 Smarter data fetching",[2896,14818,14819,14820,2892,14822,14824],{},"We've made ",[2890,14821,515],{},[2890,14823,527],{}," work better. Multiple components using the same key now share their data automatically. There's also automatic cleanup when components unmount, and you can use reactive keys to refetch data when needed. Plus, we've given you more control over when cached data gets used.",[2896,14826,14827],{},"Some of these features have already been made available in Nuxt v3 minor releases, because we've been rolling this out gradually. Nuxt v4 brings different defaults, and we expect to continue to work on this data layer in the days to come.",[4543,14829,14831],{"id":14830},"better-typescript-experience","🔧 Better TypeScript experience",[2896,14833,14834,14835,14837],{},"Nuxt now creates separate TypeScript projects for your app code, server code, ",[2890,14836,14593],{}," folder, and builder code. This should mean better autocompletion, more accurate type inference and fewer confusing errors when you're working in different contexts.",[4460,14839,14840],{},[2896,14841,14842,14843,14845],{},"With Nuxt 4, you will only need one ",[2890,14844,242],{}," file in your project root!",[2896,14847,14848],{},"This is probably the single issue that is most likely to cause surprises when upgrading, but it should also make your TypeScript experience much smoother in the long run. Please report any issues you encounter. 🙏",[4543,14850,14852],{"id":14851},"faster-cli-and-development","⚡ Faster CLI and development",[2896,14854,14855,14856,3088],{},"In parallel with the release of v4, we've been working on speeding up ",[2890,14857,14858],{},"@nuxt\u002Fcli",[4346,14860,14861,14867,14873,14883],{},[3844,14862,14863,14866],{},[2900,14864,14865],{},"Faster cold starts"," - Development server startup is noticeably faster",[3844,14868,14869,14872],{},[2900,14870,14871],{},"Node.js compile cache"," - Automatic reuse of the v8 compile cache",[3844,14874,14875,14878,14879,14882],{},[2900,14876,14877],{},"Native file watching"," - Uses ",[2890,14880,14881],{},"fs.watch"," APIs for fewer system resources",[3844,14884,14885,14888],{},[2900,14886,14887],{},"Socket-based communication"," - The CLI and Vite dev server now communicate via internal sockets instead of network ports, reducing overhead — particularly on Windows",[2896,14890,14891],{},"These improvements combined can make a really noticeable difference in your day-to-day development experience, and we have more planned.",[2885,14893,14895],{"id":14894},"how-to-upgrade","🚀 How to upgrade",[2896,14897,14898],{},"Although any major release brings breaking changes, one of our main aims for this release is to ensure that the upgrade path is as smooth as possible. Most of the breaking changes have been testable with a compatibility flag for over a year.",[2896,14900,14901],{},"Most projects should upgrade smoothly, but there are a few things to be aware of:",[4346,14903,14904,14910,14913,14916],{},[3844,14905,14906,14907,14909],{},"Nuxt 2 compatibility has been removed from ",[2890,14908,13474],{},". (This will particularly affect module authors.)",[3844,14911,14912],{},"Some legacy utilities and deprecated features have been cleaned up.",[3844,14914,14915],{},"The new TypeScript setup might surface some type issues that were hidden before.",[3844,14917,14918],{},"A few modules might need further updates for full Nuxt 4 compatibility.",[2896,14920,14921],{},"Don't worry though — for most breaking changes, there are configuration options to revert to the old behavior while you adjust.",[4543,14923,14925],{"id":14924},"_1-update-nuxt","1. Update Nuxt",[2896,14927,4434],{},[2918,14929,14930],{"className":4437,"code":4438,"language":4439,"meta":2924,"style":2924},[2890,14931,14932],{"__ignoreMap":2924},[2928,14933,14934,14936,14938,14940],{"class":2930,"line":2931},[2928,14935,4446],{"class":3448},[2928,14937,4449],{"class":3156},[2928,14939,4452],{"class":3156},[2928,14941,4455],{"class":3156},[2896,14943,14944],{},"This will deduplicate your lockfile as well, and help ensure that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.",[4543,14946,14948],{"id":14947},"_2-optional-use-migration-tools","2. Optional: use migration tools",[2896,14950,14951,14952,14957],{},"We’ve also partnered with ",[2910,14953,14956],{"href":14954,"rel":14955},"https:\u002F\u002Fgithub.com\u002Fcodemod-com\u002Fcodemod",[2914],"Codemod"," to automate many, though not all, migration steps:",[3508,14959,14960,14975,14991,15006],{},[2918,14961,14963],{"className":4317,"code":14962,"filename":9772,"language":4319,"meta":2924,"style":2924},"npx codemod@latest nuxt\u002F4\u002Fmigration-recipe\n",[2890,14964,14965],{"__ignoreMap":2924},[2928,14966,14967,14969,14972],{"class":2930,"line":2931},[2928,14968,4446],{"class":3448},[2928,14970,14971],{"class":3156}," codemod@latest",[2928,14973,14974],{"class":3156}," nuxt\u002F4\u002Fmigration-recipe\n",[2918,14976,14978],{"className":4317,"code":14977,"filename":12551,"language":4319,"meta":2924,"style":2924},"yarn dlx codemod@latest nuxt\u002F4\u002Fmigration-recipe\n",[2890,14979,14980],{"__ignoreMap":2924},[2928,14981,14982,14984,14987,14989],{"class":2930,"line":2931},[2928,14983,12551],{"class":3448},[2928,14985,14986],{"class":3156}," dlx",[2928,14988,14971],{"class":3156},[2928,14990,14974],{"class":3156},[2918,14992,14994],{"className":4317,"code":14993,"filename":12488,"language":4319,"meta":2924,"style":2924},"pnpm dlx codemod@latest nuxt\u002F4\u002Fmigration-recipe\n",[2890,14995,14996],{"__ignoreMap":2924},[2928,14997,14998,15000,15002,15004],{"class":2930,"line":2931},[2928,14999,12488],{"class":3448},[2928,15001,14986],{"class":3156},[2928,15003,14971],{"class":3156},[2928,15005,14974],{"class":3156},[2918,15007,15009],{"className":4317,"code":15008,"filename":12597,"language":4319,"meta":2924,"style":2924},"bun x codemod@latest nuxt\u002F4\u002Fmigration-recipe\n",[2890,15010,15011],{"__ignoreMap":2924},[2928,15012,15013,15015,15018,15020],{"class":2930,"line":2931},[2928,15014,12597],{"class":3448},[2928,15016,15017],{"class":3156}," x",[2928,15019,14971],{"class":3156},[2928,15021,14974],{"class":3156},[4543,15023,15025],{"id":15024},"_3-test-and-adjust","3. Test and adjust",[2896,15027,15028,15029,15031],{},"Run your tests, check that everything builds correctly, and fix any issues that come up. The ",[2910,15030,4468],{"href":1180}," has detailed migration steps for specific scenarios.",[2896,15033,15034],{},"We'd recommend reading through it in full before starting your upgrade, to understand what areas of your app might be affected.",[2885,15036,15038],{"id":15037},"️-whats-next","🗺️ What's next?",[2896,15040,15041],{},"We're planning quick patch releases to address any issues that come up. Nuxt 3 will continue to receive maintenance updates (both bug fixes and backports of features from Nuxt 4) until the end of January 2026, so there's no rush if you need time to migrate.",[2896,15043,15044],{},"Looking ahead, we plan to release Nuxt 5 on the sooner side, which will bring Nitro v3 and h3 v2 for even better performance, as well as adopting the Vite Environment API for an improved (and faster!) development experience. And there's a lot more in the works too!",[2896,15046,15047,15048,15053,15054,15058,15059,15064,15065,15070,15071,15076],{},"And, quite apart from major releases, we have a lot of exciting features planned to make their way into Nuxt 3.x and 4.x release branches, including support for SSR streaming (",[2910,15049,15052],{"href":15050,"rel":15051},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fissues\u002F4753",[2914],"#4753","), a first-party accessibility module (",[2910,15055,15057],{"href":3781,"rel":15056},[2914],"#23255","), built-in fetch caching strategies (",[2910,15060,15063],{"href":15061,"rel":15062},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fissues\u002F26017",[2914],"#26017","), more strongly typed fetch calls (landing in Nitro v3), dynamic route discovery (",[2910,15066,15069],{"href":15067,"rel":15068},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fissues\u002F32196",[2914],"#32196","), multi-app support (",[2910,15072,15075],{"href":15073,"rel":15074},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fissues\u002F21635",[2914],"#21635",") and more.",[2885,15078,15080],{"id":15079},"️-thank-you","❤️ Thank you",[2896,15082,15083],{},"This release is credit to so many people, particularly those who have been testing v4 compatibility mode over the past year. I'm really grateful — thank you for all your help!",[2896,15085,15086],{},"Happy coding with Nuxt 4! 🚀",[2885,15088,15089],{"id":4472},"📑 Full release notes",[3233,15091,15093],{"icon":4477,"target":4478,"to":15092},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv4.0.0",[2896,15094,4481,15095,3088],{},[2890,15096,15097],{},"v4.0.0",[2896,15099,15100],{},"A huge thank you to everyone who's been a part of this release. ❤️",[4489,15102,15103],{},"html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}",{"title":2924,"searchDepth":2938,"depth":2938,"links":15105},[15106,15112,15117,15118,15119],{"id":14563,"depth":2938,"text":14564,"children":15107},[15108,15109,15110,15111],{"id":14618,"depth":2967,"text":14619},{"id":14815,"depth":2967,"text":14816},{"id":14830,"depth":2967,"text":14831},{"id":14851,"depth":2967,"text":14852},{"id":14894,"depth":2938,"text":14895,"children":15113},[15114,15115,15116],{"id":14924,"depth":2967,"text":14925},{"id":14947,"depth":2967,"text":14948},{"id":15024,"depth":2967,"text":15025},{"id":15037,"depth":2938,"text":15038},{"id":15079,"depth":2938,"text":15080},{"id":4472,"depth":2938,"text":15089},"2025-07-15","Nuxt 4.0 is here! A thoughtful evolution focused on developer experience, with better project organization, smarter data fetching, and improved type safety.","\u002Fassets\u002Fblog\u002Fv4.png",{},"\u002Fblog\u002Fv4",{"title":14543,"description":15121},"blog\u002F36.v4","atrPh2uJLHO0gYavD0_ehT-h7GwIA9lrCT8Xf8_WJFU",{"id":15129,"title":15130,"authors":15131,"body":15136,"category":8580,"date":16918,"description":16919,"draft":108,"extension":4520,"image":16920,"meta":16921,"navigation":108,"path":16922,"seo":16923,"stem":16924,"tags":6,"__hash__":16925},"blog\u002Fblog\u002F35.building-a-feedback-widget.md","Building a Privacy-First Feedback Widget",[15132,15134],{"name":6217,"avatar":15133,"to":6220},{"src":6219},{"name":6222,"avatar":15135,"to":6225},{"src":6224},{"type":2882,"value":15137,"toc":16908},[15138,15141,15145,15148,15151,15171,15185,15187,15190,15194,15207,15210,15601,15609,15613,15627,15907,15910,15930,15935,15949,15953,15962,16341,16354,16650,16653,16660,16664,16667,16888,16891,16895,16898,16905],[2896,15139,15140],{},"Documentation is at the heart of the Nuxt developer experience. To continuously improve it, we needed a simple and effective way to collect user feedback directly on each page. Here's how we designed and implemented our feedback widget, drawing inspiration from Plausible's privacy-first approach.",[2885,15142,15144],{"id":15143},"why-a-feedback-widget","Why a feedback widget?",[2896,15146,15147],{},"Currently, users can provide feedback on our documentation by creating GitHub issues or contacting us directly. While these channels are valuable and remain important, they require users to leave their current context and take several steps to share their thoughts.",[2896,15149,15150],{},"We wanted something different:",[4346,15152,15153,15159,15165],{},[3844,15154,15155,15158],{},[2900,15156,15157],{},"Contextual",": Directly integrated into each documentation page",[3844,15160,15161,15164],{},[2900,15162,15163],{},"Frictionless",": Maximum 2 clicks to provide feedback",[3844,15166,15167,15170],{},[2900,15168,15169],{},"Privacy-respecting",": No personal tracking, GDPR compliant by design",[5478,15172,15176,15179,15182],{":controls":4902,"className":15173,"poster":15175},[15174],"rounded-lg","https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fso_0\u002Fv1749746517\u002Fnuxt\u002Fnuxt-feedback_lh6zyg.jpg",[5486,15177],{"src":15178,"type":5489},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1749746517\u002Fnuxt\u002Fnuxt-feedback_lh6zyg.webm",[5486,15180],{"src":15181,"type":5493},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1749746517\u002Fnuxt\u002Fnuxt-feedback_lh6zyg.mp4",[5486,15183],{"src":15184,"type":5497},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1749746517\u002Fnuxt\u002Fnuxt-feedback_lh6zyg.ogg",[2885,15186,6341],{"id":6340},[2896,15188,15189],{},"Our solution consists of three main components:",[4543,15191,15193],{"id":15192},"_1-frontend-with-motion-animations","1. Frontend with Motion animations",[2896,15195,15196,15197,15202,15203,15206],{},"The interface combines Vue 3's Composition API with ",[2910,15198,15201],{"href":15199,"rel":15200},"https:\u002F\u002Fmotion.dev\u002Fdocs\u002Fvue",[2914],"Motion for Vue"," to create an engaging user experience. The widget uses layout animations for smooth state transitions and spring physics for natural feedback. The ",[2890,15204,15205],{},"useFeedback"," composable handles all state management and automatically resets when users navigate between pages.",[2896,15208,15209],{},"Here's the success state animation, for example:",[2918,15211,15213],{"className":3129,"code":15212,"language":3132,"meta":2924,"style":2924},"\u003Ctemplate>\n  \u003C!-- ... -->\n  \u003Cmotion.div\n    v-if=\"isSubmitted\"\n    key=\"success\"\n    :initial=\"{ opacity: 0, scale: 0.95 }\"\n    :animate=\"{ opacity: 1, scale: 1 }\"\n    :transition=\"{ duration: 0.3 }\"\n    class=\"flex items-center gap-3 py-2\"\n    role=\"status\"\n    aria-live=\"polite\"\n    aria-label=\"Feedback submitted successfully\"\n  >\n    \u003Cmotion.div\n      :initial=\"{ scale: 0 }\"\n      :animate=\"{ scale: 1 }\"\n      :transition=\"{ delay: 0.1, type: 'spring', visualDuration: 0.4 }\"\n      class=\"text-xl\"\n      aria-hidden=\"true\"\n    >\n      ✨\n    \u003C\u002Fmotion.div>\n    \u003Cmotion.div\n      :initial=\"{ opacity: 0, x: 10 }\"\n      :animate=\"{ opacity: 1, x: 0 }\"\n      :transition=\"{ delay: 0.2, duration: 0.3 }\"\n    >\n      \u003Cdiv class=\"text-sm font-medium text-highlighted\">\n        Thank you for your feedback!\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"text-xs text-muted mt-1\">\n        Your input helps us improve the documentation.\n      \u003C\u002Fdiv>\n    \u003C\u002Fmotion.div>\n  \u003C\u002Fmotion.div>\n  \u003C!-- ... -->\n\u003C\u002Ftemplate>\n",[2890,15214,15215,15223,15228,15235,15249,15263,15277,15291,15305,15319,15332,15346,15360,15365,15371,15385,15399,15413,15427,15440,15445,15450,15459,15465,15478,15491,15504,15508,15528,15533,15541,15560,15565,15573,15581,15589,15593],{"__ignoreMap":2924},[2928,15216,15217,15219,15221],{"class":2930,"line":2931},[2928,15218,3139],{"class":2953},[2928,15220,3521],{"class":2970},[2928,15222,3161],{"class":2953},[2928,15224,15225],{"class":2930,"line":2938},[2928,15226,15227],{"class":2934},"  \u003C!-- ... -->\n",[2928,15229,15230,15232],{"class":2930,"line":2967},[2928,15231,3528],{"class":2953},[2928,15233,15234],{"class":2970},"motion.div\n",[2928,15236,15237,15240,15242,15244,15247],{"class":2930,"line":2984},[2928,15238,15239],{"class":2945},"    v-if",[2928,15241,2954],{"class":2953},[2928,15243,3153],{"class":2953},[2928,15245,15246],{"class":3156},"isSubmitted",[2928,15248,11613],{"class":2953},[2928,15250,15251,15254,15256,15258,15261],{"class":2930,"line":2993},[2928,15252,15253],{"class":2945},"    key",[2928,15255,2954],{"class":2953},[2928,15257,3153],{"class":2953},[2928,15259,15260],{"class":3156},"success",[2928,15262,11613],{"class":2953},[2928,15264,15265,15268,15270,15272,15275],{"class":2930,"line":2999},[2928,15266,15267],{"class":2945},"    :initial",[2928,15269,2954],{"class":2953},[2928,15271,3153],{"class":2953},[2928,15273,15274],{"class":3156},"{ opacity: 0, scale: 0.95 }",[2928,15276,11613],{"class":2953},[2928,15278,15279,15282,15284,15286,15289],{"class":2930,"line":3005},[2928,15280,15281],{"class":2945},"    :animate",[2928,15283,2954],{"class":2953},[2928,15285,3153],{"class":2953},[2928,15287,15288],{"class":3156},"{ opacity: 1, scale: 1 }",[2928,15290,11613],{"class":2953},[2928,15292,15293,15296,15298,15300,15303],{"class":2930,"line":3036},[2928,15294,15295],{"class":2945},"    :transition",[2928,15297,2954],{"class":2953},[2928,15299,3153],{"class":2953},[2928,15301,15302],{"class":3156},"{ duration: 0.3 }",[2928,15304,11613],{"class":2953},[2928,15306,15307,15310,15312,15314,15317],{"class":2930,"line":3054},[2928,15308,15309],{"class":2945},"    class",[2928,15311,2954],{"class":2953},[2928,15313,3153],{"class":2953},[2928,15315,15316],{"class":3156},"flex items-center gap-3 py-2",[2928,15318,11613],{"class":2953},[2928,15320,15321,15324,15326,15328,15330],{"class":2930,"line":3059},[2928,15322,15323],{"class":2945},"    role",[2928,15325,2954],{"class":2953},[2928,15327,3153],{"class":2953},[2928,15329,5756],{"class":3156},[2928,15331,11613],{"class":2953},[2928,15333,15334,15337,15339,15341,15344],{"class":2930,"line":3067},[2928,15335,15336],{"class":2945},"    aria-live",[2928,15338,2954],{"class":2953},[2928,15340,3153],{"class":2953},[2928,15342,15343],{"class":3156},"polite",[2928,15345,11613],{"class":2953},[2928,15347,15348,15351,15353,15355,15358],{"class":2930,"line":3077},[2928,15349,15350],{"class":2945},"    aria-label",[2928,15352,2954],{"class":2953},[2928,15354,3153],{"class":2953},[2928,15356,15357],{"class":3156},"Feedback submitted successfully",[2928,15359,11613],{"class":2953},[2928,15361,15362],{"class":2930,"line":3110},[2928,15363,15364],{"class":2953},"  >\n",[2928,15366,15367,15369],{"class":2930,"line":3116},[2928,15368,3557],{"class":2953},[2928,15370,15234],{"class":2970},[2928,15372,15373,15376,15378,15380,15383],{"class":2930,"line":6687},[2928,15374,15375],{"class":2945},"      :initial",[2928,15377,2954],{"class":2953},[2928,15379,3153],{"class":2953},[2928,15381,15382],{"class":3156},"{ scale: 0 }",[2928,15384,11613],{"class":2953},[2928,15386,15387,15390,15392,15394,15397],{"class":2930,"line":6703},[2928,15388,15389],{"class":2945},"      :animate",[2928,15391,2954],{"class":2953},[2928,15393,3153],{"class":2953},[2928,15395,15396],{"class":3156},"{ scale: 1 }",[2928,15398,11613],{"class":2953},[2928,15400,15401,15404,15406,15408,15411],{"class":2930,"line":6708},[2928,15402,15403],{"class":2945},"      :transition",[2928,15405,2954],{"class":2953},[2928,15407,3153],{"class":2953},[2928,15409,15410],{"class":3156},"{ delay: 0.1, type: 'spring', visualDuration: 0.4 }",[2928,15412,11613],{"class":2953},[2928,15414,15415,15418,15420,15422,15425],{"class":2930,"line":6738},[2928,15416,15417],{"class":2945},"      class",[2928,15419,2954],{"class":2953},[2928,15421,3153],{"class":2953},[2928,15423,15424],{"class":3156},"text-xl",[2928,15426,11613],{"class":2953},[2928,15428,15429,15432,15434,15436,15438],{"class":2930,"line":6776},[2928,15430,15431],{"class":2945},"      aria-hidden",[2928,15433,2954],{"class":2953},[2928,15435,3153],{"class":2953},[2928,15437,4902],{"class":3156},[2928,15439,11613],{"class":2953},[2928,15441,15442],{"class":2930,"line":6785},[2928,15443,15444],{"class":2953},"    >\n",[2928,15446,15447],{"class":2930,"line":6790},[2928,15448,15449],{"class":2949},"      ✨\n",[2928,15451,15452,15454,15457],{"class":2930,"line":6819},[2928,15453,9484],{"class":2953},[2928,15455,15456],{"class":2970},"motion.div",[2928,15458,3161],{"class":2953},[2928,15460,15461,15463],{"class":2930,"line":6835},[2928,15462,3557],{"class":2953},[2928,15464,15234],{"class":2970},[2928,15466,15467,15469,15471,15473,15476],{"class":2930,"line":6851},[2928,15468,15375],{"class":2945},[2928,15470,2954],{"class":2953},[2928,15472,3153],{"class":2953},[2928,15474,15475],{"class":3156},"{ opacity: 0, x: 10 }",[2928,15477,11613],{"class":2953},[2928,15479,15480,15482,15484,15486,15489],{"class":2930,"line":6867},[2928,15481,15389],{"class":2945},[2928,15483,2954],{"class":2953},[2928,15485,3153],{"class":2953},[2928,15487,15488],{"class":3156},"{ opacity: 1, x: 0 }",[2928,15490,11613],{"class":2953},[2928,15492,15493,15495,15497,15499,15502],{"class":2930,"line":6892},[2928,15494,15403],{"class":2945},[2928,15496,2954],{"class":2953},[2928,15498,3153],{"class":2953},[2928,15500,15501],{"class":3156},"{ delay: 0.2, duration: 0.3 }",[2928,15503,11613],{"class":2953},[2928,15505,15506],{"class":2930,"line":6901},[2928,15507,15444],{"class":2953},[2928,15509,15510,15512,15514,15517,15519,15521,15524,15526],{"class":2930,"line":6906},[2928,15511,9422],{"class":2953},[2928,15513,11471],{"class":2970},[2928,15515,15516],{"class":2945}," class",[2928,15518,2954],{"class":2953},[2928,15520,3153],{"class":2953},[2928,15522,15523],{"class":3156},"text-sm font-medium text-highlighted",[2928,15525,3153],{"class":2953},[2928,15527,3161],{"class":2953},[2928,15529,15530],{"class":2930,"line":7445},[2928,15531,15532],{"class":2949},"        Thank you for your feedback!\n",[2928,15534,15535,15537,15539],{"class":2930,"line":7450},[2928,15536,11583],{"class":2953},[2928,15538,11471],{"class":2970},[2928,15540,3161],{"class":2953},[2928,15542,15543,15545,15547,15549,15551,15553,15556,15558],{"class":2930,"line":7999},[2928,15544,9422],{"class":2953},[2928,15546,11471],{"class":2970},[2928,15548,15516],{"class":2945},[2928,15550,2954],{"class":2953},[2928,15552,3153],{"class":2953},[2928,15554,15555],{"class":3156},"text-xs text-muted mt-1",[2928,15557,3153],{"class":2953},[2928,15559,3161],{"class":2953},[2928,15561,15562],{"class":2930,"line":8004},[2928,15563,15564],{"class":2949},"        Your input helps us improve the documentation.\n",[2928,15566,15567,15569,15571],{"class":2930,"line":8011},[2928,15568,11583],{"class":2953},[2928,15570,11471],{"class":2970},[2928,15572,3161],{"class":2953},[2928,15574,15575,15577,15579],{"class":2930,"line":8016},[2928,15576,9484],{"class":2953},[2928,15578,15456],{"class":2970},[2928,15580,3161],{"class":2953},[2928,15582,15583,15585,15587],{"class":2930,"line":8021},[2928,15584,3567],{"class":2953},[2928,15586,15456],{"class":2970},[2928,15588,3161],{"class":2953},[2928,15590,15591],{"class":2930,"line":11850},[2928,15592,15227],{"class":2934},[2928,15594,15595,15597,15599],{"class":2930,"line":11871},[2928,15596,3209],{"class":2953},[2928,15598,3521],{"class":2970},[2928,15600,3161],{"class":2953},[2896,15602,15603,15604,3088],{},"You can find the source code of the feedback widget ",[2910,15605,15608],{"href":15606,"rel":15607},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.com\u002Ftree\u002Fmain\u002Fapp\u002Fcomponents\u002FFeedback.vue",[2914],"here",[4543,15610,15612],{"id":15611},"_2-plausible-inspired-anonymization","2. Plausible-inspired anonymization",[2896,15614,15615,15616,15621,15622,3088],{},"The challenge was detecting duplicates (a user changing their mind) while preserving privacy. We took inspiration from ",[2910,15617,15620],{"href":15618,"rel":15619},"https:\u002F\u002Fplausible.io\u002F",[2914],"Plausible","'s approach to ",[2910,15623,15626],{"href":15624,"rel":15625},"https:\u002F\u002Fplausible.io\u002Fdata-policy",[2914],"counting unique visitors without cookies",[2918,15628,15632],{"className":15629,"code":15630,"language":15631,"meta":2924,"style":2924},"language-typescript shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","export async function generateHash(\n  today: string,\n  ip: string,\n  domain: string,\n  userAgent: string\n): Promise\u003Cstring> {\n  const data = `${today}+${domain}+${ip}+${userAgent}`\n\n  const buffer = await crypto.subtle.digest(\n    'SHA-1',\n    new TextEncoder().encode(data)\n  )\n\n  return [...new Uint8Array(buffer)]\n    .map(b => b.toString(16).padStart(2, '0'))\n    .join('')\n}\n","typescript",[2890,15633,15634,15647,15659,15670,15681,15690,15705,15748,15752,15777,15788,15810,15815,15819,15839,15889,15903],{"__ignoreMap":2924},[2928,15635,15636,15638,15640,15642,15645],{"class":2930,"line":2931},[2928,15637,2942],{"class":2941},[2928,15639,10800],{"class":2945},[2928,15641,3641],{"class":2945},[2928,15643,15644],{"class":2957}," generateHash",[2928,15646,12703],{"class":2953},[2928,15648,15649,15652,15654,15657],{"class":2930,"line":2938},[2928,15650,15651],{"class":3023},"  today",[2928,15653,2974],{"class":2953},[2928,15655,15656],{"class":3448}," string",[2928,15658,2981],{"class":2953},[2928,15660,15661,15664,15666,15668],{"class":2930,"line":2967},[2928,15662,15663],{"class":3023},"  ip",[2928,15665,2974],{"class":2953},[2928,15667,15656],{"class":3448},[2928,15669,2981],{"class":2953},[2928,15671,15672,15675,15677,15679],{"class":2930,"line":2984},[2928,15673,15674],{"class":3023},"  domain",[2928,15676,2974],{"class":2953},[2928,15678,15656],{"class":3448},[2928,15680,2981],{"class":2953},[2928,15682,15683,15686,15688],{"class":2930,"line":2993},[2928,15684,15685],{"class":3023},"  userAgent",[2928,15687,2974],{"class":2953},[2928,15689,3459],{"class":3448},[2928,15691,15692,15694,15697,15699,15701,15703],{"class":2930,"line":2999},[2928,15693,3839],{"class":2953},[2928,15695,15696],{"class":3448}," Promise",[2928,15698,3139],{"class":2953},[2928,15700,7560],{"class":3448},[2928,15702,9470],{"class":2953},[2928,15704,3033],{"class":2953},[2928,15706,15707,15709,15711,15713,15716,15719,15721,15723,15725,15728,15730,15732,15734,15737,15739,15741,15743,15746],{"class":2930,"line":3005},[2928,15708,3039],{"class":2945},[2928,15710,3177],{"class":2949},[2928,15712,3045],{"class":2953},[2928,15714,15715],{"class":2953}," `${",[2928,15717,15718],{"class":2949},"today",[2928,15720,2987],{"class":2953},[2928,15722,5791],{"class":3156},[2928,15724,6880],{"class":2953},[2928,15726,15727],{"class":2949},"domain",[2928,15729,2987],{"class":2953},[2928,15731,5791],{"class":3156},[2928,15733,6880],{"class":2953},[2928,15735,15736],{"class":2949},"ip",[2928,15738,2987],{"class":2953},[2928,15740,5791],{"class":3156},[2928,15742,6880],{"class":2953},[2928,15744,15745],{"class":2949},"userAgent",[2928,15747,6889],{"class":2953},[2928,15749,15750],{"class":2930,"line":3036},[2928,15751,2996],{"emptyLinePlaceholder":1196},[2928,15753,15754,15756,15759,15761,15763,15766,15768,15770,15772,15775],{"class":2930,"line":3054},[2928,15755,3039],{"class":2945},[2928,15757,15758],{"class":2949}," buffer",[2928,15760,3045],{"class":2953},[2928,15762,3189],{"class":2941},[2928,15764,15765],{"class":2949}," crypto",[2928,15767,3088],{"class":2953},[2928,15769,11814],{"class":2949},[2928,15771,3088],{"class":2953},[2928,15773,15774],{"class":2957},"digest",[2928,15776,12703],{"class":2970},[2928,15778,15779,15781,15784,15786],{"class":2930,"line":3059},[2928,15780,4662],{"class":2953},[2928,15782,15783],{"class":3156},"SHA-1",[2928,15785,3197],{"class":2953},[2928,15787,2981],{"class":2953},[2928,15789,15790,15793,15796,15798,15800,15803,15805,15808],{"class":2930,"line":3067},[2928,15791,15792],{"class":2953},"    new",[2928,15794,15795],{"class":2957}," TextEncoder",[2928,15797,3647],{"class":2970},[2928,15799,3088],{"class":2953},[2928,15801,15802],{"class":2957},"encode",[2928,15804,2961],{"class":2970},[2928,15806,15807],{"class":2949},"data",[2928,15809,2990],{"class":2970},[2928,15811,15812],{"class":2930,"line":3077},[2928,15813,15814],{"class":2970},"  )\n",[2928,15816,15817],{"class":2930,"line":3110},[2928,15818,2996],{"emptyLinePlaceholder":1196},[2928,15820,15821,15823,15825,15828,15831,15833,15836],{"class":2930,"line":3116},[2928,15822,3062],{"class":2941},[2928,15824,4961],{"class":2970},[2928,15826,15827],{"class":2953},"...new",[2928,15829,15830],{"class":2957}," Uint8Array",[2928,15832,2961],{"class":2970},[2928,15834,15835],{"class":2949},"buffer",[2928,15837,15838],{"class":2970},")]\n",[2928,15840,15841,15844,15846,15848,15851,15853,15856,15858,15861,15863,15866,15868,15870,15873,15875,15878,15880,15882,15885,15887],{"class":2930,"line":6687},[2928,15842,15843],{"class":2953},"    .",[2928,15845,6805],{"class":2957},[2928,15847,2961],{"class":2970},[2928,15849,15850],{"class":3023},"b",[2928,15852,3030],{"class":2945},[2928,15854,15855],{"class":2949}," b",[2928,15857,3088],{"class":2953},[2928,15859,15860],{"class":2957},"toString",[2928,15862,2961],{"class":2970},[2928,15864,15865],{"class":3988},"16",[2928,15867,3027],{"class":2970},[2928,15869,3088],{"class":2953},[2928,15871,15872],{"class":2957},"padStart",[2928,15874,2961],{"class":2970},[2928,15876,15877],{"class":3988},"2",[2928,15879,3617],{"class":2953},[2928,15881,3329],{"class":2953},[2928,15883,15884],{"class":3156},"0",[2928,15886,3197],{"class":2953},[2928,15888,7346],{"class":2970},[2928,15890,15891,15893,15896,15898,15901],{"class":2930,"line":6703},[2928,15892,15843],{"class":2953},[2928,15894,15895],{"class":2957},"join",[2928,15897,2961],{"class":2970},[2928,15899,15900],{"class":2953},"''",[2928,15902,2990],{"class":2970},[2928,15904,15905],{"class":2930,"line":6708},[2928,15906,3764],{"class":2953},[2896,15908,15909],{},"This method generates a unique daily identifier by combining:",[4346,15911,15912,15918,15924],{},[3844,15913,15914,15917],{},[2900,15915,15916],{},"IP + User-Agent",": Naturally sent with every HTTP request",[3844,15919,15920,15923],{},[2900,15921,15922],{},"Domain",": Enables environment isolation",[3844,15925,15926,15929],{},[2900,15927,15928],{},"Current date",": Forces daily rotation of identifiers",[2896,15931,15932],{},[2900,15933,15934],{},"Why is this secure?",[4346,15936,15937,15940,15943,15946],{},[3844,15938,15939],{},"IP and User-Agent are never stored in the database",[3844,15941,15942],{},"The hash changes daily, preventing long-term tracking",[3844,15944,15945],{},"Very difficult to reverse engineer original data from the hash",[3844,15947,15948],{},"GDPR compliant by design (no persistent personal data)",[4543,15950,15952],{"id":15951},"_3-database-persistence-with-conflict-handling","3. Database persistence with conflict handling",[2896,15954,15955,15956,2892,15958,15961],{},"First, we define the schema for the feedback table and add a unique constraint on the ",[2890,15957,6760],{},[2890,15959,15960],{},"fingerprint"," columns.",[2918,15963,15965],{"className":15629,"code":15964,"language":15631,"meta":2924,"style":2924},"export const feedback = sqliteTable('feedback', {\n  id: integer('id').primaryKey({ autoIncrement: true }),\n  rating: text('rating').notNull(),\n  feedback: text('feedback'),\n  path: text('path').notNull(),\n  title: text('title').notNull(),\n  stem: text('stem').notNull(),\n  country: text('country').notNull(),\n  fingerprint: text('fingerprint').notNull(),\n  createdAt: integer({ mode: 'timestamp' }).notNull(),\n  updatedAt: integer({ mode: 'timestamp' }).notNull()\n}, table => [uniqueIndex('path_fingerprint_idx').on(table.path, table.fingerprint)])\n",[2890,15966,15967,15994,16037,16067,16088,16115,16141,16169,16197,16224,16261,16294],{"__ignoreMap":2924},[2928,15968,15969,15971,15973,15976,15978,15981,15983,15985,15988,15990,15992],{"class":2930,"line":2931},[2928,15970,2942],{"class":2941},[2928,15972,2946],{"class":2945},[2928,15974,15975],{"class":2949}," feedback ",[2928,15977,2954],{"class":2953},[2928,15979,15980],{"class":2957}," sqliteTable",[2928,15982,2961],{"class":2949},[2928,15984,3197],{"class":2953},[2928,15986,15987],{"class":3156},"feedback",[2928,15989,3197],{"class":2953},[2928,15991,3617],{"class":2953},[2928,15993,3033],{"class":2953},[2928,15995,15996,15999,16001,16004,16006,16008,16011,16013,16015,16017,16020,16022,16024,16027,16029,16031,16033,16035],{"class":2930,"line":2938},[2928,15997,15998],{"class":2970},"  id",[2928,16000,2974],{"class":2953},[2928,16002,16003],{"class":2957}," integer",[2928,16005,2961],{"class":2949},[2928,16007,3197],{"class":2953},[2928,16009,16010],{"class":3156},"id",[2928,16012,3197],{"class":2953},[2928,16014,3027],{"class":2949},[2928,16016,3088],{"class":2953},[2928,16018,16019],{"class":2957},"primaryKey",[2928,16021,2961],{"class":2949},[2928,16023,9398],{"class":2953},[2928,16025,16026],{"class":2970}," autoIncrement",[2928,16028,2974],{"class":2953},[2928,16030,3355],{"class":2977},[2928,16032,3702],{"class":2953},[2928,16034,3027],{"class":2949},[2928,16036,2981],{"class":2953},[2928,16038,16039,16042,16044,16047,16049,16051,16054,16056,16058,16060,16063,16065],{"class":2930,"line":2967},[2928,16040,16041],{"class":2970},"  rating",[2928,16043,2974],{"class":2953},[2928,16045,16046],{"class":2957}," text",[2928,16048,2961],{"class":2949},[2928,16050,3197],{"class":2953},[2928,16052,16053],{"class":3156},"rating",[2928,16055,3197],{"class":2953},[2928,16057,3027],{"class":2949},[2928,16059,3088],{"class":2953},[2928,16061,16062],{"class":2957},"notNull",[2928,16064,3647],{"class":2949},[2928,16066,2981],{"class":2953},[2928,16068,16069,16072,16074,16076,16078,16080,16082,16084,16086],{"class":2930,"line":2984},[2928,16070,16071],{"class":2970},"  feedback",[2928,16073,2974],{"class":2953},[2928,16075,16046],{"class":2957},[2928,16077,2961],{"class":2949},[2928,16079,3197],{"class":2953},[2928,16081,15987],{"class":3156},[2928,16083,3197],{"class":2953},[2928,16085,3027],{"class":2949},[2928,16087,2981],{"class":2953},[2928,16089,16090,16093,16095,16097,16099,16101,16103,16105,16107,16109,16111,16113],{"class":2930,"line":2993},[2928,16091,16092],{"class":2970},"  path",[2928,16094,2974],{"class":2953},[2928,16096,16046],{"class":2957},[2928,16098,2961],{"class":2949},[2928,16100,3197],{"class":2953},[2928,16102,6760],{"class":3156},[2928,16104,3197],{"class":2953},[2928,16106,3027],{"class":2949},[2928,16108,3088],{"class":2953},[2928,16110,16062],{"class":2957},[2928,16112,3647],{"class":2949},[2928,16114,2981],{"class":2953},[2928,16116,16117,16119,16121,16123,16125,16127,16129,16131,16133,16135,16137,16139],{"class":2930,"line":2999},[2928,16118,3454],{"class":2970},[2928,16120,2974],{"class":2953},[2928,16122,16046],{"class":2957},[2928,16124,2961],{"class":2949},[2928,16126,3197],{"class":2953},[2928,16128,6751],{"class":3156},[2928,16130,3197],{"class":2953},[2928,16132,3027],{"class":2949},[2928,16134,3088],{"class":2953},[2928,16136,16062],{"class":2957},[2928,16138,3647],{"class":2949},[2928,16140,2981],{"class":2953},[2928,16142,16143,16146,16148,16150,16152,16154,16157,16159,16161,16163,16165,16167],{"class":2930,"line":3005},[2928,16144,16145],{"class":2970},"  stem",[2928,16147,2974],{"class":2953},[2928,16149,16046],{"class":2957},[2928,16151,2961],{"class":2949},[2928,16153,3197],{"class":2953},[2928,16155,16156],{"class":3156},"stem",[2928,16158,3197],{"class":2953},[2928,16160,3027],{"class":2949},[2928,16162,3088],{"class":2953},[2928,16164,16062],{"class":2957},[2928,16166,3647],{"class":2949},[2928,16168,2981],{"class":2953},[2928,16170,16171,16174,16176,16178,16180,16182,16185,16187,16189,16191,16193,16195],{"class":2930,"line":3036},[2928,16172,16173],{"class":2970},"  country",[2928,16175,2974],{"class":2953},[2928,16177,16046],{"class":2957},[2928,16179,2961],{"class":2949},[2928,16181,3197],{"class":2953},[2928,16183,16184],{"class":3156},"country",[2928,16186,3197],{"class":2953},[2928,16188,3027],{"class":2949},[2928,16190,3088],{"class":2953},[2928,16192,16062],{"class":2957},[2928,16194,3647],{"class":2949},[2928,16196,2981],{"class":2953},[2928,16198,16199,16202,16204,16206,16208,16210,16212,16214,16216,16218,16220,16222],{"class":2930,"line":3054},[2928,16200,16201],{"class":2970},"  fingerprint",[2928,16203,2974],{"class":2953},[2928,16205,16046],{"class":2957},[2928,16207,2961],{"class":2949},[2928,16209,3197],{"class":2953},[2928,16211,15960],{"class":3156},[2928,16213,3197],{"class":2953},[2928,16215,3027],{"class":2949},[2928,16217,3088],{"class":2953},[2928,16219,16062],{"class":2957},[2928,16221,3647],{"class":2949},[2928,16223,2981],{"class":2953},[2928,16225,16226,16229,16231,16233,16235,16237,16240,16242,16244,16247,16249,16251,16253,16255,16257,16259],{"class":2930,"line":3059},[2928,16227,16228],{"class":2970},"  createdAt",[2928,16230,2974],{"class":2953},[2928,16232,16003],{"class":2957},[2928,16234,2961],{"class":2949},[2928,16236,9398],{"class":2953},[2928,16238,16239],{"class":2970}," mode",[2928,16241,2974],{"class":2953},[2928,16243,3329],{"class":2953},[2928,16245,16246],{"class":3156},"timestamp",[2928,16248,3197],{"class":2953},[2928,16250,3702],{"class":2953},[2928,16252,3027],{"class":2949},[2928,16254,3088],{"class":2953},[2928,16256,16062],{"class":2957},[2928,16258,3647],{"class":2949},[2928,16260,2981],{"class":2953},[2928,16262,16263,16266,16268,16270,16272,16274,16276,16278,16280,16282,16284,16286,16288,16290,16292],{"class":2930,"line":3067},[2928,16264,16265],{"class":2970},"  updatedAt",[2928,16267,2974],{"class":2953},[2928,16269,16003],{"class":2957},[2928,16271,2961],{"class":2949},[2928,16273,9398],{"class":2953},[2928,16275,16239],{"class":2970},[2928,16277,2974],{"class":2953},[2928,16279,3329],{"class":2953},[2928,16281,16246],{"class":3156},[2928,16283,3197],{"class":2953},[2928,16285,3702],{"class":2953},[2928,16287,3027],{"class":2949},[2928,16289,3088],{"class":2953},[2928,16291,16062],{"class":2957},[2928,16293,3051],{"class":2949},[2928,16295,16296,16299,16302,16304,16306,16309,16311,16313,16316,16318,16320,16322,16325,16328,16330,16332,16334,16336,16338],{"class":2930,"line":3077},[2928,16297,16298],{"class":2953},"},",[2928,16300,16301],{"class":3023}," table",[2928,16303,3030],{"class":2945},[2928,16305,4961],{"class":2949},[2928,16307,16308],{"class":2957},"uniqueIndex",[2928,16310,2961],{"class":2949},[2928,16312,3197],{"class":2953},[2928,16314,16315],{"class":3156},"path_fingerprint_idx",[2928,16317,3197],{"class":2953},[2928,16319,3027],{"class":2949},[2928,16321,3088],{"class":2953},[2928,16323,16324],{"class":2957},"on",[2928,16326,16327],{"class":2949},"(table",[2928,16329,3088],{"class":2953},[2928,16331,6760],{"class":2949},[2928,16333,3617],{"class":2953},[2928,16335,16301],{"class":2949},[2928,16337,3088],{"class":2953},[2928,16339,16340],{"class":2949},"fingerprint)])\n",[2896,16342,16343,16344,16349,16350,16353],{},"Then, in the server, we use ",[2910,16345,16348],{"href":16346,"rel":16347},"https:\u002F\u002Form.drizzle.team\u002Fdocs\u002Fget-started",[2914],"Drizzle"," with an ",[2890,16351,16352],{},"UPSERT"," strategy:",[2918,16355,16357],{"className":15629,"code":16356,"language":15631,"meta":2924,"style":2924},"await drizzle.insert(tables.feedback).values({\n  rating: data.rating,\n  feedback: data.feedback || null,\n  path: data.path,\n  title: data.title,\n  stem: data.stem,\n  country: event.context.cf?.country || 'unknown',\n  fingerprint,\n  createdAt: new Date(),\n  updatedAt: new Date()\n}).onConflictDoUpdate({\n  target: [tables.feedback.path, tables.feedback.fingerprint],\n  set: {\n    rating: data.rating,\n    feedback: data.feedback || null,\n    country,\n    updatedAt: new Date()\n  }\n})\n",[2890,16358,16359,16389,16403,16421,16435,16449,16463,16497,16503,16518,16530,16545,16579,16588,16603,16620,16627,16640,16644],{"__ignoreMap":2924},[2928,16360,16361,16364,16367,16369,16372,16375,16377,16380,16382,16385,16387],{"class":2930,"line":2931},[2928,16362,16363],{"class":2941},"await",[2928,16365,16366],{"class":2949}," drizzle",[2928,16368,3088],{"class":2953},[2928,16370,16371],{"class":2957},"insert",[2928,16373,16374],{"class":2949},"(tables",[2928,16376,3088],{"class":2953},[2928,16378,16379],{"class":2949},"feedback)",[2928,16381,3088],{"class":2953},[2928,16383,16384],{"class":2957},"values",[2928,16386,2961],{"class":2949},[2928,16388,2964],{"class":2953},[2928,16390,16391,16393,16395,16397,16399,16401],{"class":2930,"line":2938},[2928,16392,16041],{"class":2970},[2928,16394,2974],{"class":2953},[2928,16396,3177],{"class":2949},[2928,16398,3088],{"class":2953},[2928,16400,16053],{"class":2949},[2928,16402,2981],{"class":2953},[2928,16404,16405,16407,16409,16411,16413,16416,16418],{"class":2930,"line":2967},[2928,16406,16071],{"class":2970},[2928,16408,2974],{"class":2953},[2928,16410,3177],{"class":2949},[2928,16412,3088],{"class":2953},[2928,16414,16415],{"class":2949},"feedback ",[2928,16417,7879],{"class":2953},[2928,16419,16420],{"class":2953}," null,\n",[2928,16422,16423,16425,16427,16429,16431,16433],{"class":2930,"line":2984},[2928,16424,16092],{"class":2970},[2928,16426,2974],{"class":2953},[2928,16428,3177],{"class":2949},[2928,16430,3088],{"class":2953},[2928,16432,6760],{"class":2949},[2928,16434,2981],{"class":2953},[2928,16436,16437,16439,16441,16443,16445,16447],{"class":2930,"line":2993},[2928,16438,3454],{"class":2970},[2928,16440,2974],{"class":2953},[2928,16442,3177],{"class":2949},[2928,16444,3088],{"class":2953},[2928,16446,6751],{"class":2949},[2928,16448,2981],{"class":2953},[2928,16450,16451,16453,16455,16457,16459,16461],{"class":2930,"line":2999},[2928,16452,16145],{"class":2970},[2928,16454,2974],{"class":2953},[2928,16456,3177],{"class":2949},[2928,16458,3088],{"class":2953},[2928,16460,16156],{"class":2949},[2928,16462,2981],{"class":2953},[2928,16464,16465,16467,16469,16471,16473,16476,16478,16481,16483,16486,16488,16490,16493,16495],{"class":2930,"line":3005},[2928,16466,16173],{"class":2970},[2928,16468,2974],{"class":2953},[2928,16470,6693],{"class":2949},[2928,16472,3088],{"class":2953},[2928,16474,16475],{"class":2949},"context",[2928,16477,3088],{"class":2953},[2928,16479,16480],{"class":2949},"cf",[2928,16482,5120],{"class":2953},[2928,16484,16485],{"class":2949},"country ",[2928,16487,7879],{"class":2953},[2928,16489,3329],{"class":2953},[2928,16491,16492],{"class":3156},"unknown",[2928,16494,3197],{"class":2953},[2928,16496,2981],{"class":2953},[2928,16498,16499,16501],{"class":2930,"line":3036},[2928,16500,16201],{"class":2949},[2928,16502,2981],{"class":2953},[2928,16504,16505,16507,16509,16511,16514,16516],{"class":2930,"line":3054},[2928,16506,16228],{"class":2970},[2928,16508,2974],{"class":2953},[2928,16510,10425],{"class":2953},[2928,16512,16513],{"class":2957}," Date",[2928,16515,3647],{"class":2949},[2928,16517,2981],{"class":2953},[2928,16519,16520,16522,16524,16526,16528],{"class":2930,"line":3059},[2928,16521,16265],{"class":2970},[2928,16523,2974],{"class":2953},[2928,16525,10425],{"class":2953},[2928,16527,16513],{"class":2957},[2928,16529,3051],{"class":2949},[2928,16531,16532,16534,16536,16538,16541,16543],{"class":2930,"line":3067},[2928,16533,2987],{"class":2953},[2928,16535,3027],{"class":2949},[2928,16537,3088],{"class":2953},[2928,16539,16540],{"class":2957},"onConflictDoUpdate",[2928,16542,2961],{"class":2949},[2928,16544,2964],{"class":2953},[2928,16546,16547,16550,16552,16555,16557,16559,16561,16563,16565,16568,16570,16572,16574,16577],{"class":2930,"line":3077},[2928,16548,16549],{"class":2970},"  target",[2928,16551,2974],{"class":2953},[2928,16553,16554],{"class":2949}," [tables",[2928,16556,3088],{"class":2953},[2928,16558,15987],{"class":2949},[2928,16560,3088],{"class":2953},[2928,16562,6760],{"class":2949},[2928,16564,3617],{"class":2953},[2928,16566,16567],{"class":2949}," tables",[2928,16569,3088],{"class":2953},[2928,16571,15987],{"class":2949},[2928,16573,3088],{"class":2953},[2928,16575,16576],{"class":2949},"fingerprint]",[2928,16578,2981],{"class":2953},[2928,16580,16581,16584,16586],{"class":2930,"line":3110},[2928,16582,16583],{"class":2970},"  set",[2928,16585,2974],{"class":2953},[2928,16587,3033],{"class":2953},[2928,16589,16590,16593,16595,16597,16599,16601],{"class":2930,"line":3116},[2928,16591,16592],{"class":2970},"    rating",[2928,16594,2974],{"class":2953},[2928,16596,3177],{"class":2949},[2928,16598,3088],{"class":2953},[2928,16600,16053],{"class":2949},[2928,16602,2981],{"class":2953},[2928,16604,16605,16608,16610,16612,16614,16616,16618],{"class":2930,"line":6687},[2928,16606,16607],{"class":2970},"    feedback",[2928,16609,2974],{"class":2953},[2928,16611,3177],{"class":2949},[2928,16613,3088],{"class":2953},[2928,16615,16415],{"class":2949},[2928,16617,7879],{"class":2953},[2928,16619,16420],{"class":2953},[2928,16621,16622,16625],{"class":2930,"line":6703},[2928,16623,16624],{"class":2949},"    country",[2928,16626,2981],{"class":2953},[2928,16628,16629,16632,16634,16636,16638],{"class":2930,"line":6708},[2928,16630,16631],{"class":2970},"    updatedAt",[2928,16633,2974],{"class":2953},[2928,16635,10425],{"class":2953},[2928,16637,16513],{"class":2957},[2928,16639,3051],{"class":2949},[2928,16641,16642],{"class":2930,"line":6738},[2928,16643,3113],{"class":2953},[2928,16645,16646,16648],{"class":2930,"line":6776},[2928,16647,2987],{"class":2953},[2928,16649,2990],{"class":2949},[2896,16651,16652],{},"This approach enables updates if the user changes their mind within the day, creation for new feedback, and automatic deduplication per page and user.",[2896,16654,16655,16656,3088],{},"You can find the source code of the server side ",[2910,16657,15608],{"href":16658,"rel":16659},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.com\u002Ftree\u002Fmain\u002Fserver",[2914],[2885,16661,16663],{"id":16662},"shared-types-for-consistency","Shared types for consistency",[2896,16665,16666],{},"We use Zod for runtime validation and type generation:",[2918,16668,16670],{"className":15629,"code":16669,"language":15631,"meta":2924,"style":2924},"export const FEEDBACK_RATINGS = [\n  'very-helpful',\n  'helpful', \n  'not-helpful',\n  'confusing'\n] as const\n\nexport const feedbackSchema = z.object({\n  rating: z.enum(FEEDBACK_RATINGS),\n  feedback: z.string().optional(),\n  path: z.string(),\n  title: z.string(),\n  stem: z.string()\n})\n\nexport type FeedbackInput = z.infer\u003Ctypeof feedbackSchema>\n",[2890,16671,16672,16686,16697,16710,16721,16730,16741,16745,16767,16784,16806,16822,16838,16852,16858,16862],{"__ignoreMap":2924},[2928,16673,16674,16676,16678,16681,16683],{"class":2930,"line":2931},[2928,16675,2942],{"class":2941},[2928,16677,2946],{"class":2945},[2928,16679,16680],{"class":2949}," FEEDBACK_RATINGS ",[2928,16682,2954],{"class":2953},[2928,16684,16685],{"class":2949}," [\n",[2928,16687,16688,16690,16693,16695],{"class":2930,"line":2938},[2928,16689,12708],{"class":2953},[2928,16691,16692],{"class":3156},"very-helpful",[2928,16694,3197],{"class":2953},[2928,16696,2981],{"class":2953},[2928,16698,16699,16701,16704,16706,16708],{"class":2930,"line":2967},[2928,16700,12708],{"class":2953},[2928,16702,16703],{"class":3156},"helpful",[2928,16705,3197],{"class":2953},[2928,16707,3617],{"class":2953},[2928,16709,4846],{"class":2949},[2928,16711,16712,16714,16717,16719],{"class":2930,"line":2984},[2928,16713,12708],{"class":2953},[2928,16715,16716],{"class":3156},"not-helpful",[2928,16718,3197],{"class":2953},[2928,16720,2981],{"class":2953},[2928,16722,16723,16725,16728],{"class":2930,"line":2993},[2928,16724,12708],{"class":2953},[2928,16726,16727],{"class":3156},"confusing",[2928,16729,5269],{"class":2953},[2928,16731,16732,16735,16738],{"class":2930,"line":2999},[2928,16733,16734],{"class":2949},"] ",[2928,16736,16737],{"class":2941},"as",[2928,16739,16740],{"class":2945}," const\n",[2928,16742,16743],{"class":2930,"line":3005},[2928,16744,2996],{"emptyLinePlaceholder":1196},[2928,16746,16747,16749,16751,16754,16756,16758,16760,16763,16765],{"class":2930,"line":3036},[2928,16748,2942],{"class":2941},[2928,16750,2946],{"class":2945},[2928,16752,16753],{"class":2949}," feedbackSchema ",[2928,16755,2954],{"class":2953},[2928,16757,6473],{"class":2949},[2928,16759,3088],{"class":2953},[2928,16761,16762],{"class":2957},"object",[2928,16764,2961],{"class":2949},[2928,16766,2964],{"class":2953},[2928,16768,16769,16771,16773,16775,16777,16779,16782],{"class":2930,"line":3054},[2928,16770,16041],{"class":2970},[2928,16772,2974],{"class":2953},[2928,16774,6473],{"class":2949},[2928,16776,3088],{"class":2953},[2928,16778,6580],{"class":2957},[2928,16780,16781],{"class":2949},"(FEEDBACK_RATINGS)",[2928,16783,2981],{"class":2953},[2928,16785,16786,16788,16790,16792,16794,16796,16798,16800,16802,16804],{"class":2930,"line":3059},[2928,16787,16071],{"class":2970},[2928,16789,2974],{"class":2953},[2928,16791,6473],{"class":2949},[2928,16793,3088],{"class":2953},[2928,16795,7560],{"class":2957},[2928,16797,3647],{"class":2949},[2928,16799,3088],{"class":2953},[2928,16801,6614],{"class":2957},[2928,16803,3647],{"class":2949},[2928,16805,2981],{"class":2953},[2928,16807,16808,16810,16812,16814,16816,16818,16820],{"class":2930,"line":3067},[2928,16809,16092],{"class":2970},[2928,16811,2974],{"class":2953},[2928,16813,6473],{"class":2949},[2928,16815,3088],{"class":2953},[2928,16817,7560],{"class":2957},[2928,16819,3647],{"class":2949},[2928,16821,2981],{"class":2953},[2928,16823,16824,16826,16828,16830,16832,16834,16836],{"class":2930,"line":3077},[2928,16825,3454],{"class":2970},[2928,16827,2974],{"class":2953},[2928,16829,6473],{"class":2949},[2928,16831,3088],{"class":2953},[2928,16833,7560],{"class":2957},[2928,16835,3647],{"class":2949},[2928,16837,2981],{"class":2953},[2928,16839,16840,16842,16844,16846,16848,16850],{"class":2930,"line":3110},[2928,16841,16145],{"class":2970},[2928,16843,2974],{"class":2953},[2928,16845,6473],{"class":2949},[2928,16847,3088],{"class":2953},[2928,16849,7560],{"class":2957},[2928,16851,3051],{"class":2949},[2928,16853,16854,16856],{"class":2930,"line":3116},[2928,16855,2987],{"class":2953},[2928,16857,2990],{"class":2949},[2928,16859,16860],{"class":2930,"line":6687},[2928,16861,2996],{"emptyLinePlaceholder":1196},[2928,16863,16864,16866,16868,16871,16873,16875,16877,16880,16883,16886],{"class":2930,"line":6703},[2928,16865,2942],{"class":2941},[2928,16867,12292],{"class":2945},[2928,16869,16870],{"class":3448}," FeedbackInput",[2928,16872,3045],{"class":2953},[2928,16874,6473],{"class":3448},[2928,16876,3088],{"class":2953},[2928,16878,16879],{"class":3448},"infer",[2928,16881,16882],{"class":2953},"\u003Ctypeof",[2928,16884,16885],{"class":2949}," feedbackSchema",[2928,16887,3161],{"class":2953},[2896,16889,16890],{},"This approach ensures consistency across frontend, API, and database.",[2885,16892,16894],{"id":16893},"whats-next","What's next",[2896,16896,16897],{},"The widget is now live across all documentation pages. Our next step is building an admin interface within nuxt.com to analyze feedback patterns and identify pages that need improvement. This will help us continuously enhance the documentation quality based on real user feedback.",[2896,16899,16900,16901,16904],{},"The complete source code is available on ",[2910,16902,8544],{"href":8542,"rel":16903},[2914]," for inspiration and contributions!",[4489,16906,16907],{},"html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .sYRBq, html code.shiki .sYRBq{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}html pre.shiki code .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}",{"title":2924,"searchDepth":2938,"depth":2938,"links":16909},[16910,16911,16916,16917],{"id":15143,"depth":2938,"text":15144},{"id":6340,"depth":2938,"text":6341,"children":16912},[16913,16914,16915],{"id":15192,"depth":2967,"text":15193},{"id":15611,"depth":2967,"text":15612},{"id":15951,"depth":2967,"text":15952},{"id":16662,"depth":2938,"text":16663},{"id":16893,"depth":2938,"text":16894},"2025-06-13","A lightweight, privacy-focused widget to gather your feedback on Nuxt documentation, built with Drizzle, NuxtHub database and Motion Vue.","\u002Fassets\u002Fblog\u002Fgathering-feedback.png",{},"\u002Fblog\u002Fbuilding-a-feedback-widget",{"title":15130,"description":16919},"blog\u002F35.building-a-feedback-widget","FlhRocMpOc4yps6d6SapXvNcTO_wQPLUBiaOjKVmo1I",{"id":16927,"title":16928,"authors":16929,"body":16932,"category":4517,"date":17258,"description":17259,"draft":108,"extension":4520,"image":17260,"meta":17261,"navigation":108,"path":17262,"seo":17263,"stem":17264,"tags":6,"__hash__":17265},"blog\u002Fblog\u002F34.roadmap-v4.md","Roadmap to v4",[16930],{"name":2877,"avatar":16931,"to":2880},{"src":2879},{"type":2882,"value":16933,"toc":17251},[16934,16937,16943,16947,16950,16953,16975,16978,16982,16987,17025,17031,17039,17043,17049,17052,17055,17059,17066,17069,17072,17075,17123,17126,17133,17159,17162,17232,17248],[2896,16935,16936],{},"We originally planned Nuxt 4 for June 2024, but things don't always go according to plan. I think it's appropriate to take a different approach:",[2896,16938,16939,16940],{},"👉 ",[2900,16941,16942],{},"Nuxt 4 entered Release Candidate (RC) stage on July 8, 2025, with a stable release coming soon. Nuxt 5 will come later once Nitro v3 is ready.",[2885,16944,16946],{"id":16945},"why-two-releases","Why Two Releases?",[2896,16948,16949],{},"Honestly, in hindsight I think we should have shipped Nuxt v4 last year. It would have aligned better with our once-a-year plan for careful major releases.",[2896,16951,16952],{},"On the other hand, it has allowed time for testing across countless projects, by opting in to Nuxt 4 breaking changes with a single flag. I think that we should go ahead and ship these changes as Nuxt v4 for two reasons:",[3841,16954,16955,16969],{},[3844,16956,16957,16960,16961,16964,16965,16968],{},[2900,16958,16959],{},"People are already using it",". I frequently hear of teams who are using ",[2890,16962,16963],{},"compatibilityVersion: 4"," in production. This option was ",[10484,16966,16967],{},"intended"," only for testing, but it has proven solid enough for production use. We want to make it official, and give these teams the protection of a stable release.",[3844,16970,16971,16974],{},[2900,16972,16973],{},"It will improve the migration",". Having a two-stage migration from v3 -> v4, and then v4 -> v5 will make for a smoother migration. We don't yet have a final list of breaking changes for Nitro v3, and this means we can spend enough time to ensure that the Nitro upgrade is smooth, while not delaying adoption of the Nuxt changes we've planned for the last year.",[2896,16976,16977],{},"What's more, going forward we're going to do our best to decouple Nuxt releases from our key dependencies, like Vite or Nitro.",[2885,16979,16981],{"id":16980},"whats-included","What's Included?",[2896,16983,16984,16985,2974],{},"Nuxt 4 includes all the features you've been testing with ",[2890,16986,16963],{},[4346,16988,16989,16998,17009,17019],{},[3844,16990,16991,16994,16995,16997],{},[2900,16992,16993],{},"🗂️ New Directory Structure"," - code goes in ",[2890,16996,1195],{}," for cleaner organization and better IDE performance",[3844,16999,17000,17003,17004,2892,17006,17008],{},[2900,17001,17002],{},"🔄 Improved Data Fetching"," - smarter ",[2890,17005,515],{},[2890,17007,527],{}," with better caching and cleanup",[3844,17010,17011,17014,17015,17018],{},[2900,17012,17013],{},"🏷️ Consistent Component Names"," - Vue DevTools and ",[2890,17016,17017],{},"\u003CKeepAlive>"," now see the same names as Nuxt's auto-imports",[3844,17020,17021,17024],{},[2900,17022,17023],{},"📄 Enhanced Head Management"," - dropping deprecated features from Unhead v2 with better performance and tag optimization",[2896,17026,17027,17028,17030],{},"... as well as many other improvements documented in the ",[2910,17029,4468],{"href":4467},". There are also a handful of further changes we will shipping, including:",[4346,17032,17033,17036],{},[3844,17034,17035],{},"preparations for adopting the Vite Environment API (with a single dev server)",[3844,17037,17038],{},"improvements to type 'environment' handling (for server, client, and shared code)",[2885,17040,17042],{"id":17041},"what-about-nitro","What About Nitro?",[2896,17044,17045,17048],{},[2900,17046,17047],{},"We're not delaying Nitro v3 adoption",". We aim for Nuxt 5 to arrive with Nitro v3 at the same time we originally planned, even if that's only a few months after the release of Nuxt v4.",[2896,17050,17051],{},"Despite the delays over the past year, we've seen phenomenal progress on Nitro. As a whole team, we're very excited to unveil what we have planned in Nitro v3 and h3 v2.",[2896,17053,17054],{},"While Nuxt 4 won't initially include these upgrades, releasing Nuxt v4 and Nitro v3 in parallel will mean we can test both Nuxt and Nitro more thoroughly across the ecosystem by the time Nuxt 5 arrives.",[2885,17056,17058],{"id":17057},"what-about-nuxt-3","What About Nuxt 3?",[2896,17060,17061,17062,17065],{},"We'll provide ongoing maintenance and support for Nuxt 3 after the first stable release of Nuxt 4 — and continue supporting both Nuxt 3 and Nuxt 4 after Nuxt 5 has been released. We've intentionally chosen a slightly shorter timetable of ",[10484,17063,17064],{},"six months"," support for each of these releases because we believe that it will be a straightforward upgrade.",[2896,17067,17068],{},"(My main aim for the Nuxt 4 upgrade is to ensure that it is as smooth as possible.)",[2896,17070,17071],{},"Nevertheless, I'll be closely monitoring to see how successfully and quickly the ecosystem migrates. If there are issues I will absolutely extend that six month ongoing maintenance window. We don't want to leave anyone behind.",[2896,17073,17074],{},"For a while, this will mean active backports of features and bugfixes across three versions. But I think it's worth it. And we have — after all — been doing this for the last year in preparation for Nuxt 4.",[17076,17077,17078,17089],"table",{},[17079,17080,17081],"thead",{},[17082,17083,17084,17087],"tr",{},[17085,17086],"th",{},[17085,17088],{},[17090,17091,17092,17103,17113],"tbody",{},[17082,17093,17094,17100],{},[17095,17096,17097],"td",{},[2900,17098,17099],{},"Nuxt 3",[17095,17101,17102],{},"Continues receiving updates until the end of 2025",[17082,17104,17105,17110],{},[17095,17106,17107],{},[2900,17108,17109],{},"Nuxt 4",[17095,17111,17112],{},"Supported until mid-2026 (estimated)",[17082,17114,17115,17120],{},[17095,17116,17117],{},[2900,17118,17119],{},"Nuxt 5",[17095,17121,17122],{},"Long-term support following our usual pattern",[2885,17124,17125],{"id":16893},"What's Next",[2896,17127,17128,17129,17132],{},"Nuxt v4 is now in ",[2900,17130,17131],{},"Release Candidate (RC)"," stage! We'd love early adopters to test it. Please do report issues to Nuxt or any modules that you may be using.",[3774,17134,17135,17142,17145],{},[2896,17136,17137,17138,17141],{},"We are currently in the ",[2900,17139,17140],{},"release candidate stage",": no more breaking changes are planned — only bug fixes before the stable release.",[2896,17143,17144],{},"Release stages for Nuxt 4:",[4346,17146,17147,17153],{},[3844,17148,17149,17152],{},[2900,17150,17151],{},"Alpha",": experimental features and breaking changes",[3844,17154,17155,17158],{},[2900,17156,17157],{},"RC (now)",": stable feature set, final testing before release",[2896,17160,17161],{},"Here's what you can expect over the next few weeks:",[4346,17163,17164,17176,17185,17192,17210,17217],{},[3844,17165,17166,17167,8545,17170,17175],{},"We plan to open ",[2900,17168,17169],{},"upstream PRs for community modules",[2910,17171,17174],{"href":17172,"rel":17173},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fmodules",[2914],"nuxt\u002Fmodules"," registry, and create a migration guide for module authors.",[3844,17177,17178,17179,17181,17182,17184],{},"We'll create a full ",[2900,17180,4468],{}," for Nuxt 3 users, including a list of breaking changes and how to migrate. (The current ",[2910,17183,4468],{"href":4467}," explains how to enable compatibility mode, but there are some differences with Nuxt 4.)",[3844,17186,17187,17188,17191],{},"We'll ",[2900,17189,17190],{},"only release bugfixes for v3"," this month, deferring backporting new features until after the release of v4.",[3844,17193,17187,17194,17200,17201,4309,17203,17205,17206,17209],{},[2900,17195,17196,17197],{},"update the docs on ",[2910,17198,17199],{"href":3288},"nuxt.com"," to allow switching between ",[2890,17202,4598],{},[2890,17204,4595],{}," and (soon) ",[2890,17207,17208],{},"5.x"," documentation.",[3844,17211,17212,17213,17216],{},"With the ",[2900,17214,17215],{},"release candidate now live",", we're focused exclusively on bug fixes. No new features or breaking changes are expected.",[3844,17218,17219,17220,17222,17223,17225,17226,2892,17228,17231],{},"Once v4 is released, we'll separate the ",[2890,17221,4577],{}," branch to ",[2890,17224,4595],{}," to adopt edge releases of ",[2890,17227,4543],{},[2890,17229,17230],{},"nitro"," and begin development of Nuxt 5.",[3774,17233,17234],{},[2896,17235,17236,17237,2892,17242,17247],{},"You can follow the progress of the remaining work by checking ",[2910,17238,17241],{"href":17239,"rel":17240},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fissues\u002F27027",[2914],"these remaining tasks",[2910,17243,17246],{"href":17244,"rel":17245},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fmilestone\u002F8",[2914],"the Nuxt 4 milestone"," on GitHub.",[2896,17249,17250],{},"I'm really excited with this timeline — and thank you for your patience and trust over the last year!",{"title":2924,"searchDepth":2938,"depth":2938,"links":17252},[17253,17254,17255,17256,17257],{"id":16945,"depth":2938,"text":16946},{"id":16980,"depth":2938,"text":16981},{"id":17041,"depth":2938,"text":17042},{"id":17057,"depth":2938,"text":17058},{"id":16893,"depth":2938,"text":17125},"2025-06-02","We have some exciting news about the roadmap to Nuxt 4, including a new timeline and what to expect in the next few weeks.","\u002Fassets\u002Fblog\u002Froadmap-v4.png",{},"\u002Fblog\u002Froadmap-v4",{"title":16928,"description":17259},"blog\u002F34.roadmap-v4","Ag6tulr1AdwILhV4oIgSlAT5Cn3OVhr2OKpLMmecUPs",{"id":17267,"title":17268,"authors":17269,"body":17272,"category":4517,"date":18226,"description":18227,"draft":108,"extension":4520,"image":18228,"meta":18229,"navigation":108,"path":18230,"seo":18231,"stem":18232,"tags":6,"__hash__":18233},"blog\u002Fblog\u002F33.v3-17.md","Nuxt 3.17",[17270],{"name":2877,"avatar":17271,"to":2880},{"src":2879},{"type":2882,"value":17273,"toc":18205},[17274,17278,17285,17299,17305,17309,17317,17453,17456,17460,17463,17594,17598,17601,17721,17725,17731,17742,17784,17787,17793,17811,17891,17895,17909,17952,17956,17964,17978,18032,18036,18048,18051,18054,18095,18099,18102,18127,18129,18132,18170,18172,18174,18188,18190,18192,18200,18202],[2885,17275,17277],{"id":17276},"data-fetching-improvements","📊 Data Fetching Improvements",[2896,17279,17280,17281,2892,17283,3088],{},"A major reorganization of Nuxt's data fetching layer brings significant improvements to ",[2890,17282,515],{},[2890,17284,527],{},[2896,17286,17287,17288,17291,17292,17295,17296,17298],{},"Although we have aimed to maintain backward compatibility and put breaking changes behind the ",[2890,17289,17290],{},"experimental.granularCachedData"," flag (disabled by default), we recommend testing your application thoroughly after upgrading. You can also disable ",[2890,17293,17294],{},"experimental.purgeCachedData"," to revert to the previous behavior if you are relying on cached data being available indefinitely after components using ",[2890,17297,515],{}," are unmounted.",[3233,17300,17302],{"target":4478,"to":17301},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31373",[2896,17303,17304],{},"Read the original PR for full details.",[4543,17306,17308],{"id":17307},"consistent-data-across-components","Consistent Data Across Components",[2896,17310,17311,17312,4913,17314,17316],{},"All calls to ",[2890,17313,515],{},[2890,17315,527],{}," with the same key now share the underlying refs, ensuring consistency across your application:",[2918,17318,17320],{"className":3129,"code":17319,"language":3132,"meta":2924,"style":2924},"\u003C!-- ComponentA.vue -->\n\u003Cscript setup>\nconst { data: users, pending } = useAsyncData('users', fetchUsers)\n\u003C\u002Fscript>\n\n\u003C!-- ComponentB.vue -->\n\u003Cscript setup>\n\u002F\u002F This will reference the same data state as ComponentA\nconst { data: users, status } = useAsyncData('users', fetchUsers)\n\u002F\u002F When either component refreshes the data, both will update consistently\n\u003C\u002Fscript>\n",[2890,17321,17322,17327,17337,17373,17381,17385,17390,17400,17405,17440,17445],{"__ignoreMap":2924},[2928,17323,17324],{"class":2930,"line":2931},[2928,17325,17326],{"class":2934},"\u003C!-- ComponentA.vue -->\n",[2928,17328,17329,17331,17333,17335],{"class":2930,"line":2938},[2928,17330,3139],{"class":2953},[2928,17332,3142],{"class":2970},[2928,17334,3145],{"class":2945},[2928,17336,3161],{"class":2953},[2928,17338,17339,17341,17343,17345,17347,17350,17352,17355,17357,17359,17361,17363,17365,17367,17369,17371],{"class":2930,"line":2967},[2928,17340,3171],{"class":2945},[2928,17342,3174],{"class":2953},[2928,17344,3177],{"class":2970},[2928,17346,2974],{"class":2953},[2928,17348,17349],{"class":2949}," users",[2928,17351,3617],{"class":2953},[2928,17353,17354],{"class":2949}," pending ",[2928,17356,2987],{"class":2953},[2928,17358,3045],{"class":2953},[2928,17360,10264],{"class":2957},[2928,17362,2961],{"class":2949},[2928,17364,3197],{"class":2953},[2928,17366,10271],{"class":3156},[2928,17368,3197],{"class":2953},[2928,17370,3617],{"class":2953},[2928,17372,14133],{"class":2949},[2928,17374,17375,17377,17379],{"class":2930,"line":2984},[2928,17376,3209],{"class":2953},[2928,17378,3142],{"class":2970},[2928,17380,3161],{"class":2953},[2928,17382,17383],{"class":2930,"line":2993},[2928,17384,2996],{"emptyLinePlaceholder":1196},[2928,17386,17387],{"class":2930,"line":2999},[2928,17388,17389],{"class":2934},"\u003C!-- ComponentB.vue -->\n",[2928,17391,17392,17394,17396,17398],{"class":2930,"line":3005},[2928,17393,3139],{"class":2953},[2928,17395,3142],{"class":2970},[2928,17397,3145],{"class":2945},[2928,17399,3161],{"class":2953},[2928,17401,17402],{"class":2930,"line":3036},[2928,17403,17404],{"class":2934},"\u002F\u002F This will reference the same data state as ComponentA\n",[2928,17406,17407,17409,17411,17413,17415,17417,17419,17422,17424,17426,17428,17430,17432,17434,17436,17438],{"class":2930,"line":3054},[2928,17408,3171],{"class":2945},[2928,17410,3174],{"class":2953},[2928,17412,3177],{"class":2970},[2928,17414,2974],{"class":2953},[2928,17416,17349],{"class":2949},[2928,17418,3617],{"class":2953},[2928,17420,17421],{"class":2949}," status ",[2928,17423,2987],{"class":2953},[2928,17425,3045],{"class":2953},[2928,17427,10264],{"class":2957},[2928,17429,2961],{"class":2949},[2928,17431,3197],{"class":2953},[2928,17433,10271],{"class":3156},[2928,17435,3197],{"class":2953},[2928,17437,3617],{"class":2953},[2928,17439,14133],{"class":2949},[2928,17441,17442],{"class":2930,"line":3059},[2928,17443,17444],{"class":2934},"\u002F\u002F When either component refreshes the data, both will update consistently\n",[2928,17446,17447,17449,17451],{"class":2930,"line":3067},[2928,17448,3209],{"class":2953},[2928,17450,3142],{"class":2970},[2928,17452,3161],{"class":2953},[2896,17454,17455],{},"This solves various issues where components could have inconsistent data states.",[4543,17457,17459],{"id":17458},"reactive-keys","Reactive Keys",[2896,17461,17462],{},"You can now use computed refs, plain refs, or getter functions as keys:",[2918,17464,17466],{"className":2920,"code":17465,"language":2923,"meta":2924,"style":2924},"const userId = ref('123')\nconst { data: user } = useAsyncData(\n  computed(() => `user-${userId.value}`),\n  () => fetchUser(userId.value)\n)\n\n\u002F\u002F Changing the userId will automatically trigger a new data fetch\n\u002F\u002F and clean up the old data if no other components are using it\nuserId.value = '456'\n",[2890,17467,17468,17490,17511,17542,17559,17563,17567,17572,17577],{"__ignoreMap":2924},[2928,17469,17470,17472,17475,17477,17479,17481,17483,17486,17488],{"class":2930,"line":2931},[2928,17471,3171],{"class":2945},[2928,17473,17474],{"class":2949}," userId ",[2928,17476,2954],{"class":2953},[2928,17478,9306],{"class":2957},[2928,17480,2961],{"class":2949},[2928,17482,3197],{"class":2953},[2928,17484,17485],{"class":3156},"123",[2928,17487,3197],{"class":2953},[2928,17489,2990],{"class":2949},[2928,17491,17492,17494,17496,17498,17500,17503,17505,17507,17509],{"class":2930,"line":2938},[2928,17493,3171],{"class":2945},[2928,17495,3174],{"class":2953},[2928,17497,3177],{"class":2970},[2928,17499,2974],{"class":2953},[2928,17501,17502],{"class":2949}," user ",[2928,17504,2987],{"class":2953},[2928,17506,3045],{"class":2953},[2928,17508,10264],{"class":2957},[2928,17510,12703],{"class":2949},[2928,17512,17513,17516,17518,17520,17522,17524,17527,17529,17532,17534,17536,17538,17540],{"class":2930,"line":2967},[2928,17514,17515],{"class":2957},"  computed",[2928,17517,2961],{"class":2949},[2928,17519,3647],{"class":2953},[2928,17521,3030],{"class":2945},[2928,17523,6531],{"class":2953},[2928,17525,17526],{"class":3156},"user-",[2928,17528,6880],{"class":2953},[2928,17530,17531],{"class":2949},"userId",[2928,17533,3088],{"class":2953},[2928,17535,9263],{"class":2949},[2928,17537,10845],{"class":2953},[2928,17539,3027],{"class":2949},[2928,17541,2981],{"class":2953},[2928,17543,17544,17546,17548,17551,17554,17556],{"class":2930,"line":2984},[2928,17545,12720],{"class":2953},[2928,17547,3030],{"class":2945},[2928,17549,17550],{"class":2957}," fetchUser",[2928,17552,17553],{"class":2949},"(userId",[2928,17555,3088],{"class":2953},[2928,17557,17558],{"class":2949},"value)\n",[2928,17560,17561],{"class":2930,"line":2993},[2928,17562,2990],{"class":2949},[2928,17564,17565],{"class":2930,"line":2999},[2928,17566,2996],{"emptyLinePlaceholder":1196},[2928,17568,17569],{"class":2930,"line":3005},[2928,17570,17571],{"class":2934},"\u002F\u002F Changing the userId will automatically trigger a new data fetch\n",[2928,17573,17574],{"class":2930,"line":3036},[2928,17575,17576],{"class":2934},"\u002F\u002F and clean up the old data if no other components are using it\n",[2928,17578,17579,17581,17583,17585,17587,17589,17592],{"class":2930,"line":3054},[2928,17580,17531],{"class":2949},[2928,17582,3088],{"class":2953},[2928,17584,4032],{"class":2949},[2928,17586,2954],{"class":2953},[2928,17588,3329],{"class":2953},[2928,17590,17591],{"class":3156},"456",[2928,17593,5269],{"class":2953},[4543,17595,17597],{"id":17596},"optimized-data-refetching","Optimized Data Refetching",[2896,17599,17600],{},"Multiple components watching the same data source will now trigger only a single data fetch when dependencies change:",[2918,17602,17604],{"className":2920,"code":17603,"language":2923,"meta":2924,"style":2924},"\u002F\u002F In multiple components:\nconst { data } = useAsyncData(\n  'users', \n  () => $fetch(`\u002Fapi\u002Fusers?page=${route.query.page}`),\n  { watch: [() => route.query.page] }\n)\n\n\u002F\u002F When route.query.page changes, only one fetch operation will occur\n\u002F\u002F All components using this key will update simultaneously\n",[2890,17605,17606,17611,17627,17639,17673,17703,17707,17711,17716],{"__ignoreMap":2924},[2928,17607,17608],{"class":2930,"line":2931},[2928,17609,17610],{"class":2934},"\u002F\u002F In multiple components:\n",[2928,17612,17613,17615,17617,17619,17621,17623,17625],{"class":2930,"line":2938},[2928,17614,3171],{"class":2945},[2928,17616,3174],{"class":2953},[2928,17618,14114],{"class":2949},[2928,17620,2987],{"class":2953},[2928,17622,3045],{"class":2953},[2928,17624,10264],{"class":2957},[2928,17626,12703],{"class":2949},[2928,17628,17629,17631,17633,17635,17637],{"class":2930,"line":2967},[2928,17630,12708],{"class":2953},[2928,17632,10271],{"class":3156},[2928,17634,3197],{"class":2953},[2928,17636,3617],{"class":2953},[2928,17638,4846],{"class":2949},[2928,17640,17641,17643,17645,17647,17649,17651,17654,17656,17658,17660,17662,17664,17667,17669,17671],{"class":2930,"line":2984},[2928,17642,12720],{"class":2953},[2928,17644,3030],{"class":2945},[2928,17646,3664],{"class":2957},[2928,17648,2961],{"class":2949},[2928,17650,6555],{"class":2953},[2928,17652,17653],{"class":3156},"\u002Fapi\u002Fusers?page=",[2928,17655,6880],{"class":2953},[2928,17657,10832],{"class":2949},[2928,17659,3088],{"class":2953},[2928,17661,8394],{"class":2949},[2928,17663,3088],{"class":2953},[2928,17665,17666],{"class":2949},"page",[2928,17668,10845],{"class":2953},[2928,17670,3027],{"class":2949},[2928,17672,2981],{"class":2953},[2928,17674,17675,17678,17681,17683,17685,17687,17689,17692,17694,17696,17698,17701],{"class":2930,"line":2993},[2928,17676,17677],{"class":2953},"  {",[2928,17679,17680],{"class":2970}," watch",[2928,17682,2974],{"class":2953},[2928,17684,4961],{"class":2949},[2928,17686,3647],{"class":2953},[2928,17688,3030],{"class":2945},[2928,17690,17691],{"class":2949}," route",[2928,17693,3088],{"class":2953},[2928,17695,8394],{"class":2949},[2928,17697,3088],{"class":2953},[2928,17699,17700],{"class":2949},"page] ",[2928,17702,3764],{"class":2953},[2928,17704,17705],{"class":2930,"line":2999},[2928,17706,2990],{"class":2949},[2928,17708,17709],{"class":2930,"line":3005},[2928,17710,2996],{"emptyLinePlaceholder":1196},[2928,17712,17713],{"class":2930,"line":3036},[2928,17714,17715],{"class":2934},"\u002F\u002F When route.query.page changes, only one fetch operation will occur\n",[2928,17717,17718],{"class":2930,"line":3054},[2928,17719,17720],{"class":2934},"\u002F\u002F All components using this key will update simultaneously\n",[2885,17722,17724],{"id":17723},"built-in-nuxt-components","🎭 Built-In Nuxt Components",[4543,17726,17728,17730],{"id":17727},"nuxttime-a-new-component-for-safe-time-display",[2890,17729,464],{}," - A new component for safe time display",[2896,17732,17733,17734,17736,17737,3839],{},"We've added a new ",[2890,17735,464],{}," component for SSR-safe time display, which resolves hydration mismatches when working with dates (",[2910,17738,17741],{"href":17739,"rel":17740},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31876",[2914],"#31876",[2918,17743,17745],{"className":3129,"code":17744,"language":3132,"meta":2924,"style":2924},"\u003Ctemplate>\n  \u003CNuxtTime :datetime=\"Date.now()\" \u002F>\n\u003C\u002Ftemplate>\n",[2890,17746,17747,17755,17776],{"__ignoreMap":2924},[2928,17748,17749,17751,17753],{"class":2930,"line":2931},[2928,17750,3139],{"class":2953},[2928,17752,3521],{"class":2970},[2928,17754,3161],{"class":2953},[2928,17756,17757,17759,17762,17765,17767,17769,17772,17774],{"class":2930,"line":2938},[2928,17758,3528],{"class":2953},[2928,17760,17761],{"class":2970},"NuxtTime",[2928,17763,17764],{"class":2945}," :datetime",[2928,17766,2954],{"class":2953},[2928,17768,3153],{"class":2953},[2928,17770,17771],{"class":3156},"Date.now()",[2928,17773,3153],{"class":2953},[2928,17775,3534],{"class":2953},[2928,17777,17778,17780,17782],{"class":2930,"line":2967},[2928,17779,3209],{"class":2953},[2928,17781,3521],{"class":2970},[2928,17783,3161],{"class":2953},[2896,17785,17786],{},"The component accepts multiple time formats and gracefully handles both client and server rendering.",[4543,17788,17790,17791],{"id":17789},"enhanced-nuxterrorboundary","Enhanced ",[2890,17792,484],{},[2896,17794,5192,17795,17797,17798,2892,17800,17802,17803,3248,17806,3839],{},[2890,17796,484],{}," component has been converted to a Single File Component and now exposes ",[2890,17799,3734],{},[2890,17801,646],{}," from the component - as well as in the error slot types, giving you greater ability to handle errors in your templates and via ",[2890,17804,17805],{},"useTemplateRef",[2910,17807,17810],{"href":17808,"rel":17809},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31847",[2914],"#31847",[2918,17812,17814],{"className":3129,"code":17813,"language":3132,"meta":2924,"style":2924},"\u003CNuxtErrorBoundary @error=\"handleError\">\n  \u003Ctemplate #error=\"{ error, clearError }\">\n    \u003Cdiv>\n      \u003Cp>{{ error.message }}\u003C\u002Fp>\n      \u003Cbutton @click=\"clearError\">Try again\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Ftemplate>\n  \n  \u003C!-- Content that might error -->\n  \u003CMyComponent \u002F>\n\u003C\u002FNuxtErrorBoundary>\n",[2890,17815,17816,17839,17844,17849,17854,17859,17864,17869,17873,17878,17883],{"__ignoreMap":2924},[2928,17817,17818,17820,17823,17826,17828,17830,17832,17835,17837],{"class":2930,"line":2931},[2928,17819,3139],{"class":2953},[2928,17821,17822],{"class":2970},"NuxtErrorBoundary",[2928,17824,17825],{"class":2953}," @",[2928,17827,3734],{"class":2945},[2928,17829,2954],{"class":2953},[2928,17831,3153],{"class":2953},[2928,17833,17834],{"class":2949},"handleError",[2928,17836,3153],{"class":2953},[2928,17838,3161],{"class":2953},[2928,17840,17841],{"class":2930,"line":2938},[2928,17842,17843],{"class":2949},"  \u003Ctemplate #error=\"{ error, clearError }\">\n",[2928,17845,17846],{"class":2930,"line":2967},[2928,17847,17848],{"class":2949},"    \u003Cdiv>\n",[2928,17850,17851],{"class":2930,"line":2984},[2928,17852,17853],{"class":2949},"      \u003Cp>{{ error.message }}\u003C\u002Fp>\n",[2928,17855,17856],{"class":2930,"line":2993},[2928,17857,17858],{"class":2949},"      \u003Cbutton @click=\"clearError\">Try again\u003C\u002Fbutton>\n",[2928,17860,17861],{"class":2930,"line":2999},[2928,17862,17863],{"class":2949},"    \u003C\u002Fdiv>\n",[2928,17865,17866],{"class":2930,"line":3005},[2928,17867,17868],{"class":2949},"  \u003C\u002Ftemplate>\n",[2928,17870,17871],{"class":2930,"line":3036},[2928,17872,9082],{"class":2949},[2928,17874,17875],{"class":2930,"line":3054},[2928,17876,17877],{"class":2949},"  \u003C!-- Content that might error -->\n",[2928,17879,17880],{"class":2930,"line":3059},[2928,17881,17882],{"class":2949},"  \u003CMyComponent \u002F>\n",[2928,17884,17885,17887,17889],{"class":2930,"line":3067},[2928,17886,3209],{"class":2953},[2928,17888,17822],{"class":2970},[2928,17890,3161],{"class":2953},[2885,17892,17894],{"id":17893},"router-improvements","🔗 Router Improvements",[2896,17896,17897,17899,17900,17903,17904,3839],{},[2890,17898,476],{}," now accepts a ",[2890,17901,17902],{},"trailingSlash"," prop, giving you more control over URL formatting (",[2910,17905,17908],{"href":17906,"rel":17907},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31820",[2914],"#31820",[2918,17910,17912],{"className":3129,"code":17911,"language":3132,"meta":2924,"style":2924},"\u003CNuxtLink to=\"\u002Fabout\" trailing-slash>About\u003C\u002FNuxtLink>\n\u003C!-- Will render \u003Ca href=\"\u002Fabout\u002F\"> -->\n",[2890,17913,17914,17947],{"__ignoreMap":2924},[2928,17915,17916,17918,17921,17924,17926,17928,17931,17933,17936,17938,17941,17943,17945],{"class":2930,"line":2931},[2928,17917,3139],{"class":2953},[2928,17919,17920],{"class":2970},"NuxtLink",[2928,17922,17923],{"class":2945}," to",[2928,17925,2954],{"class":2953},[2928,17927,3153],{"class":2953},[2928,17929,17930],{"class":3156},"\u002Fabout",[2928,17932,3153],{"class":2953},[2928,17934,17935],{"class":2945}," trailing-slash",[2928,17937,9470],{"class":2953},[2928,17939,17940],{"class":2949},"About",[2928,17942,3209],{"class":2953},[2928,17944,17920],{"class":2970},[2928,17946,3161],{"class":2953},[2928,17948,17949],{"class":2930,"line":2938},[2928,17950,17951],{"class":2934},"\u003C!-- Will render \u003Ca href=\"\u002Fabout\u002F\"> -->\n",[2885,17953,17955],{"id":17954},"loading-indicator-customization","🔄 Loading Indicator Customization",[2896,17957,17958,17959,3839],{},"You can now customize the loading indicator with new props directly on the component (",[2910,17960,17963],{"href":17961,"rel":17962},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31532",[2914],"#31532",[4346,17965,17966,17972],{},[3844,17967,17968,17971],{},[2890,17969,17970],{},"hideDelay",": Controls how long to wait before hiding the loading bar",[3844,17973,17974,17977],{},[2890,17975,17976],{},"resetDelay",": Controls how long to wait before resetting loading indicator state",[2918,17979,17981],{"className":3129,"code":17980,"language":3132,"meta":2924,"style":2924},"\u003Ctemplate>\n  \u003CNuxtLoadingIndicator :hide-delay=\"500\" :reset-delay=\"300\" \u002F>\n\u003C\u002Ftemplate>\n",[2890,17982,17983,17991,18024],{"__ignoreMap":2924},[2928,17984,17985,17987,17989],{"class":2930,"line":2931},[2928,17986,3139],{"class":2953},[2928,17988,3521],{"class":2970},[2928,17990,3161],{"class":2953},[2928,17992,17993,17995,17998,18001,18003,18005,18008,18010,18013,18015,18017,18020,18022],{"class":2930,"line":2938},[2928,17994,3528],{"class":2953},[2928,17996,17997],{"class":2970},"NuxtLoadingIndicator",[2928,17999,18000],{"class":2945}," :hide-delay",[2928,18002,2954],{"class":2953},[2928,18004,3153],{"class":2953},[2928,18006,18007],{"class":3156},"500",[2928,18009,3153],{"class":2953},[2928,18011,18012],{"class":2945}," :reset-delay",[2928,18014,2954],{"class":2953},[2928,18016,3153],{"class":2953},[2928,18018,18019],{"class":3156},"300",[2928,18021,3153],{"class":2953},[2928,18023,3534],{"class":2953},[2928,18025,18026,18028,18030],{"class":2930,"line":2967},[2928,18027,3209],{"class":2953},[2928,18029,3521],{"class":2970},[2928,18031,3161],{"class":2953},[2885,18033,18035],{"id":18034},"documentation-as-a-package","📚 Documentation as a Package",[2896,18037,18038,18039,18042,18043,2916],{},"The Nuxt documentation is now available as an npm package! You can install ",[2890,18040,18041],{},"@nuxt\u002Fdocs"," to access the raw markdown and YAML content used to build the documentation website (",[2910,18044,18047],{"href":18045,"rel":18046},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31353",[2914],"#31353",[2885,18049,18050],{"id":13524},"💻 Developer Experience Improvements",[2896,18052,18053],{},"We've added several warnings to help catch common mistakes:",[4346,18055,18056,18064,18076,18084],{},[3844,18057,18058,18059],{},"Warning when server components don't have a root element ",[2910,18060,18063],{"href":18061,"rel":18062},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31365",[2914],"#31365",[3844,18065,18066,18067,18070,18071],{},"Warning when using the reserved ",[2890,18068,18069],{},"runtimeConfig.app"," namespace ",[2910,18072,18075],{"href":18073,"rel":18074},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31774",[2914],"#31774",[3844,18077,18078,18079],{},"Warning when core auto-import presets are overridden ",[2910,18080,18083],{"href":18081,"rel":18082},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F29971",[2914],"#29971",[3844,18085,18086,18087,18089,18090],{},"Error when ",[2890,18088,678],{}," is used more than once in a file ",[2910,18091,18094],{"href":18092,"rel":18093},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31634",[2914],"#31634",[2885,18096,18098],{"id":18097},"enhanced-module-development","🔌 Enhanced Module Development",[2896,18100,18101],{},"Module authors will be happy to know:",[4346,18103,18104,18116],{},[3844,18105,3846,18106,18109,18110,18115],{},[2890,18107,18108],{},"experimental.enforceModuleCompatibility"," allows Nuxt to throw an error when a module is loaded that isn't compatible with it (",[2910,18111,18114],{"href":18112,"rel":18113},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31657",[2914],"#31657","). It will be enabled by default in Nuxt v4.",[3844,18117,18118,18119,10201,18122],{},"You can now automatically register every component exported via named exports from a file with ",[2890,18120,18121],{},"addComponentExports",[2910,18123,18126],{"href":18124,"rel":18125},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27155",[2914],"#27155",[2885,18128,4395],{"id":4394},[2896,18130,18131],{},"Several performance improvements have been made:",[4346,18133,18134,18146,18158],{},[3844,18135,18136,18137,18140,18141],{},"Switched to ",[2890,18138,18139],{},"tinyglobby"," for faster file globbing ",[2910,18142,18145],{"href":18143,"rel":18144},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31668",[2914],"#31668",[3844,18147,18148,18149,18152,18153],{},"Excluded ",[2890,18150,18151],{},".data"," directory from type-checking for faster builds ",[2910,18154,18157],{"href":18155,"rel":18156},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31738",[2914],"#31738",[3844,18159,18160,18161,18164,18165],{},"Improved tree-shaking by hoisting the ",[2890,18162,18163],{},"purgeCachedData"," check ",[2910,18166,18169],{"href":18167,"rel":18168},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31785",[2914],"#31785",[2885,18171,6103],{"id":6102},[2896,18173,4434],{},[2918,18175,18176],{"className":4437,"code":14481,"language":4439,"meta":2924,"style":2924},[2890,18177,18178],{"__ignoreMap":2924},[2928,18179,18180,18182,18184,18186],{"class":2930,"line":2931},[2928,18181,4446],{"class":3448},[2928,18183,14490],{"class":3156},[2928,18185,4452],{"class":3156},[2928,18187,4455],{"class":3156},[2896,18189,14497],{},[2885,18191,13763],{"id":4472},[3233,18193,18195],{"target":4478,"to":18194,"icon":4477},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv3.17.0",[2896,18196,4481,18197,3088],{},[2890,18198,18199],{},"v3.17.0",[2896,18201,15100],{},[4489,18203,18204],{},"html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}",{"title":2924,"searchDepth":2938,"depth":2938,"links":18206},[18207,18212,18218,18219,18220,18221,18222,18223,18224,18225],{"id":17276,"depth":2938,"text":17277,"children":18208},[18209,18210,18211],{"id":17307,"depth":2967,"text":17308},{"id":17458,"depth":2967,"text":17459},{"id":17596,"depth":2967,"text":17597},{"id":17723,"depth":2938,"text":17724,"children":18213},[18214,18216],{"id":17727,"depth":2967,"text":18215},"\u003CNuxtTime> - A new component for safe time display",{"id":17789,"depth":2967,"text":18217},"Enhanced \u003CNuxtErrorBoundary>",{"id":17893,"depth":2938,"text":17894},{"id":17954,"depth":2938,"text":17955},{"id":18034,"depth":2938,"text":18035},{"id":13524,"depth":2938,"text":18050},{"id":18097,"depth":2938,"text":18098},{"id":4394,"depth":2938,"text":4395},{"id":6102,"depth":2938,"text":6103},{"id":4472,"depth":2938,"text":13763},"2025-04-27","Nuxt 3.17 is out - bringing a major reworking of the async data layer, a new built-in component, better warnings, and performance improvements!","\u002Fassets\u002Fblog\u002Fv3.17.png",{},"\u002Fblog\u002Fv3-17",{"title":17268,"description":18227},"blog\u002F33.v3-17","Jk8-nZp6fmxFFEheS3JXOiBV_DKt9KeA5-vbfZsrXHo",{"id":18235,"title":18236,"authors":18237,"body":18244,"category":4517,"date":19173,"description":19174,"draft":108,"extension":4520,"image":19175,"meta":19176,"navigation":108,"path":19177,"seo":19178,"stem":19179,"tags":6,"__hash__":19180},"blog\u002Fblog\u002F32.nuxt-ui-v3.md","Nuxt UI v3",[18238,18240,18242],{"name":11325,"avatar":18239,"to":11328},{"src":11327},{"name":6222,"avatar":18241,"to":11332},{"src":11331},{"name":6217,"avatar":18243,"to":6220},{"src":6219},{"type":2882,"value":18245,"toc":19160},[18246,18249,18253,18256,18262,18265,18268,18271,18274,18277,18280,18286,18289,18296,18302,18305,18308,18312,18434,18576,18579,18705,18708,18712,18715,18718,18721,18724,18727,18837,18841,18844,18850,18856,18862,18868,18873,18876,18880,18883,18894,19018,19022,19031,19035,19038,19064,19117,19140,19148,19151,19154,19157],[2896,18247,18248],{},"We are thrilled to announce the release of Nuxt UI v3, a complete redesign of our UI library that brings significant improvements in accessibility, performance, and developer experience. This major update represents over 1500 commits of hard work, collaboration, and innovation from our team and the community.",[2885,18250,18252],{"id":18251},"reimagined-from-the-ground-up","🚀 Reimagined from the Ground Up",[2896,18254,18255],{},"Nuxt UI v3 represents a major leap forward in our journey to provide the most comprehensive UI solution for Vue and Nuxt developers. This version has been rebuilt from the ground up with modern technologies and best practices in mind.",[4543,18257,18259],{"id":18258},"from-headlessui-to-reka-ui",[2900,18260,18261],{},"From HeadlessUI to Reka UI",[2896,18263,18264],{},"With Reka UI at its core, Nuxt UI v3 delivers:",[2896,18266,18267],{},"• Proper keyboard navigation across all interactive components",[2896,18269,18270],{},"• ARIA attributes automatically handled for you",[2896,18272,18273],{},"• Focus management that just works",[2896,18275,18276],{},"• Screen reader friendly components out of the box",[2896,18278,18279],{},"This means you can build applications that work for everyone without becoming an accessibility expert.",[4543,18281,18283],{"id":18282},"tailwind-css-v4-integration",[2900,18284,18285],{},"Tailwind CSS v4 Integration",[2896,18287,18288],{},"The integration with Tailwind CSS v4 brings huge performance improvements:",[2896,18290,18291,18292,18295],{},"• ",[2900,18293,18294],{},"5x faster runtime"," with optimized component rendering",[2896,18297,18291,18298,18301],{},[2900,18299,18300],{},"100x faster build times"," thanks to the new CSS-first engine",[2896,18303,18304],{},"• Smaller bundle sizes with more efficient styling",[2896,18306,18307],{},"Your applications will feel snappier, build quicker, and load faster for your users.",[2885,18309,18311],{"id":18310},"a-brand-new-design-system","🎨 A Brand New Design System",[2918,18313,18315],{"className":12274,"code":18314,"language":12276,"meta":2924,"style":2924},"\u003C!-- Before: Inconsistent color usage with duplicate dark mode classes -->\n\u003Cdiv class=\"bg-gray-100 dark:bg-gray-800 p-4 rounded-lg\">\n  \u003Ch2 class=\"text-gray-900 dark:text-white text-xl mb-2\">User Profile\u003C\u002Fh2>\n  \u003Cp class=\"text-gray-600 dark:text-gray-300\">Account settings and preferences\u003C\u002Fp>\n  \u003Cbutton class=\"bg-blue-500 text-white px-3 py-1 rounded mt-2\">Edit Profile\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n",[2890,18316,18317,18322,18341,18369,18397,18426],{"__ignoreMap":2924},[2928,18318,18319],{"class":2930,"line":2931},[2928,18320,18321],{"class":2934},"\u003C!-- Before: Inconsistent color usage with duplicate dark mode classes -->\n",[2928,18323,18324,18326,18328,18330,18332,18334,18337,18339],{"class":2930,"line":2938},[2928,18325,3139],{"class":2953},[2928,18327,11471],{"class":2970},[2928,18329,15516],{"class":2945},[2928,18331,2954],{"class":2953},[2928,18333,3153],{"class":2953},[2928,18335,18336],{"class":3156},"bg-gray-100 dark:bg-gray-800 p-4 rounded-lg",[2928,18338,3153],{"class":2953},[2928,18340,3161],{"class":2953},[2928,18342,18343,18345,18347,18349,18351,18353,18356,18358,18360,18363,18365,18367],{"class":2930,"line":2967},[2928,18344,3528],{"class":2953},[2928,18346,2885],{"class":2970},[2928,18348,15516],{"class":2945},[2928,18350,2954],{"class":2953},[2928,18352,3153],{"class":2953},[2928,18354,18355],{"class":3156},"text-gray-900 dark:text-white text-xl mb-2",[2928,18357,3153],{"class":2953},[2928,18359,9470],{"class":2953},[2928,18361,18362],{"class":2949},"User Profile",[2928,18364,3209],{"class":2953},[2928,18366,2885],{"class":2970},[2928,18368,3161],{"class":2953},[2928,18370,18371,18373,18375,18377,18379,18381,18384,18386,18388,18391,18393,18395],{"class":2930,"line":2984},[2928,18372,3528],{"class":2953},[2928,18374,2896],{"class":2970},[2928,18376,15516],{"class":2945},[2928,18378,2954],{"class":2953},[2928,18380,3153],{"class":2953},[2928,18382,18383],{"class":3156},"text-gray-600 dark:text-gray-300",[2928,18385,3153],{"class":2953},[2928,18387,9470],{"class":2953},[2928,18389,18390],{"class":2949},"Account settings and preferences",[2928,18392,3209],{"class":2953},[2928,18394,2896],{"class":2970},[2928,18396,3161],{"class":2953},[2928,18398,18399,18401,18404,18406,18408,18410,18413,18415,18417,18420,18422,18424],{"class":2930,"line":2993},[2928,18400,3528],{"class":2953},[2928,18402,18403],{"class":2970},"button",[2928,18405,15516],{"class":2945},[2928,18407,2954],{"class":2953},[2928,18409,3153],{"class":2953},[2928,18411,18412],{"class":3156},"bg-blue-500 text-white px-3 py-1 rounded mt-2",[2928,18414,3153],{"class":2953},[2928,18416,9470],{"class":2953},[2928,18418,18419],{"class":2949},"Edit Profile",[2928,18421,3209],{"class":2953},[2928,18423,18403],{"class":2970},[2928,18425,3161],{"class":2953},[2928,18427,18428,18430,18432],{"class":2930,"line":2999},[2928,18429,3209],{"class":2953},[2928,18431,11471],{"class":2970},[2928,18433,3161],{"class":2953},[2918,18435,18437],{"className":12274,"code":18436,"language":12276,"meta":2924,"style":2924},"\u003C!-- After: Semantic design tokens with automatic dark mode support -->\n\u003Cdiv class=\"bg-muted p-4 rounded-lg\">\n  \u003Ch2 class=\"text-highlighted text-xl mb-2\">User Profile\u003C\u002Fh2>\n  \u003Cp class=\"text-muted\">Account settings and preferences\u003C\u002Fp>\n  \u003CUButton color=\"primary\" size=\"sm\" class=\"mt-2\">Edit Profile\u003C\u002FUButton>\n\u003C\u002Fdiv>\n",[2890,18438,18439,18444,18463,18490,18517,18568],{"__ignoreMap":2924},[2928,18440,18441],{"class":2930,"line":2931},[2928,18442,18443],{"class":2934},"\u003C!-- After: Semantic design tokens with automatic dark mode support -->\n",[2928,18445,18446,18448,18450,18452,18454,18456,18459,18461],{"class":2930,"line":2938},[2928,18447,3139],{"class":2953},[2928,18449,11471],{"class":2970},[2928,18451,15516],{"class":2945},[2928,18453,2954],{"class":2953},[2928,18455,3153],{"class":2953},[2928,18457,18458],{"class":3156},"bg-muted p-4 rounded-lg",[2928,18460,3153],{"class":2953},[2928,18462,3161],{"class":2953},[2928,18464,18465,18467,18469,18471,18473,18475,18478,18480,18482,18484,18486,18488],{"class":2930,"line":2967},[2928,18466,3528],{"class":2953},[2928,18468,2885],{"class":2970},[2928,18470,15516],{"class":2945},[2928,18472,2954],{"class":2953},[2928,18474,3153],{"class":2953},[2928,18476,18477],{"class":3156},"text-highlighted text-xl mb-2",[2928,18479,3153],{"class":2953},[2928,18481,9470],{"class":2953},[2928,18483,18362],{"class":2949},[2928,18485,3209],{"class":2953},[2928,18487,2885],{"class":2970},[2928,18489,3161],{"class":2953},[2928,18491,18492,18494,18496,18498,18500,18502,18505,18507,18509,18511,18513,18515],{"class":2930,"line":2984},[2928,18493,3528],{"class":2953},[2928,18495,2896],{"class":2970},[2928,18497,15516],{"class":2945},[2928,18499,2954],{"class":2953},[2928,18501,3153],{"class":2953},[2928,18503,18504],{"class":3156},"text-muted",[2928,18506,3153],{"class":2953},[2928,18508,9470],{"class":2953},[2928,18510,18390],{"class":2949},[2928,18512,3209],{"class":2953},[2928,18514,2896],{"class":2970},[2928,18516,3161],{"class":2953},[2928,18518,18519,18521,18523,18526,18528,18530,18533,18535,18538,18540,18542,18545,18547,18549,18551,18553,18556,18558,18560,18562,18564,18566],{"class":2930,"line":2993},[2928,18520,3528],{"class":2953},[2928,18522,11556],{"class":2970},[2928,18524,18525],{"class":2945}," color",[2928,18527,2954],{"class":2953},[2928,18529,3153],{"class":2953},[2928,18531,18532],{"class":3156},"primary",[2928,18534,3153],{"class":2953},[2928,18536,18537],{"class":2945}," size",[2928,18539,2954],{"class":2953},[2928,18541,3153],{"class":2953},[2928,18543,18544],{"class":3156},"sm",[2928,18546,3153],{"class":2953},[2928,18548,15516],{"class":2945},[2928,18550,2954],{"class":2953},[2928,18552,3153],{"class":2953},[2928,18554,18555],{"class":3156},"mt-2",[2928,18557,3153],{"class":2953},[2928,18559,9470],{"class":2953},[2928,18561,18419],{"class":2949},[2928,18563,3209],{"class":2953},[2928,18565,11556],{"class":2970},[2928,18567,3161],{"class":2953},[2928,18569,18570,18572,18574],{"class":2930,"line":2999},[2928,18571,3209],{"class":2953},[2928,18573,11471],{"class":2970},[2928,18575,3161],{"class":2953},[2896,18577,18578],{},"Our new color system includes 7 semantic color aliases:",[17076,18580,18581,18594],{},[17079,18582,18583],{},[17082,18584,18585,18588,18591],{},[17085,18586,18587],{},"Color",[17085,18589,18590],{},"Default",[17085,18592,18593],{},"Description",[17090,18595,18596,18612,18628,18644,18659,18675,18691],{},[17082,18597,18598,18604,18609],{},[17095,18599,18600],{},[2890,18601,18532],{"className":18602},[18603],"text-primary",[17095,18605,18606],{},[2890,18607,18608],{},"blue",[17095,18610,18611],{},"Primary color to represent the brand.",[17082,18613,18614,18621,18625],{},[17095,18615,18616],{},[2890,18617,18620],{"className":18618},[18619],"text-secondary","secondary",[17095,18622,18623],{},[2890,18624,18608],{},[17095,18626,18627],{},"Secondary color to complement the primary color.",[17082,18629,18630,18636,18641],{},[17095,18631,18632],{},[2890,18633,15260],{"className":18634},[18635],"text-success",[17095,18637,18638],{},[2890,18639,18640],{},"green",[17095,18642,18643],{},"Used for success states.",[17082,18645,18646,18652,18656],{},[17095,18647,18648],{},[2890,18649,10662],{"className":18650},[18651],"text-info",[17095,18653,18654],{},[2890,18655,18608],{},[17095,18657,18658],{},"Used for informational states.",[17082,18660,18661,18667,18672],{},[17095,18662,18663],{},[2890,18664,10634],{"className":18665},[18666],"text-warning",[17095,18668,18669],{},[2890,18670,18671],{},"yellow",[17095,18673,18674],{},"Used for warning states.",[17082,18676,18677,18683,18688],{},[17095,18678,18679],{},[2890,18680,3734],{"className":18681},[18682],"text-error",[17095,18684,18685],{},[2890,18686,18687],{},"red",[17095,18689,18690],{},"Used for form error validation states.",[17082,18692,18693,18697,18702],{},[17095,18694,18695],{},[2890,18696,8520],{},[17095,18698,18699],{},[2890,18700,18701],{},"slate",[17095,18703,18704],{},"Neutral color for backgrounds, text, etc.",[2896,18706,18707],{},"This approach makes your codebase more maintainable and your UI more consistent—especially when working in teams. With these semantic tokens, light and dark mode transitions become effortless, as the system automatically handles the appropriate color values for each theme without requiring duplicate class definitions.",[2885,18709,18711],{"id":18710},"complete-vue-compatibility","💚 Complete Vue Compatibility",[2896,18713,18714],{},"We're really happy to expand the scope of Nuxt UI beyond the Nuxt framework. With v3, both Nuxt UI and Nuxt UI Pro now work seamlessly in any Vue project, this means you can:",[2896,18716,18717],{},"• Use the same components across all your Vue projects",[2896,18719,18720],{},"• Benefit from Nuxt UI's theming system in any Vue application",[2896,18722,18723],{},"• Enjoy auto-imports and TypeScript support outside of Nuxt",[2896,18725,18726],{},"• Leverage both basic components and advanced Pro components in any Vue project",[2918,18728,18731],{"className":2920,"code":18729,"filename":18730,"language":2923,"meta":2924,"style":2924},"import { defineConfig } from 'vite'\nimport vue from '@vitejs\u002Fplugin-vue'\nimport ui from '@nuxt\u002Fui\u002Fvite'\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    ui()\n  ]\n})\n","vite.config.ts",[2890,18732,18733,18752,18769,18785,18789,18801,18810,18819,18826,18831],{"__ignoreMap":2924},[2928,18734,18735,18737,18739,18742,18744,18746,18748,18750],{"class":2930,"line":2931},[2928,18736,5398],{"class":2941},[2928,18738,3174],{"class":2953},[2928,18740,18741],{"class":2949}," defineConfig",[2928,18743,3702],{"class":2953},[2928,18745,5408],{"class":2941},[2928,18747,3329],{"class":2953},[2928,18749,12464],{"class":3156},[2928,18751,5269],{"class":2953},[2928,18753,18754,18756,18759,18762,18764,18767],{"class":2930,"line":2938},[2928,18755,5398],{"class":2941},[2928,18757,18758],{"class":2949}," vue ",[2928,18760,18761],{"class":2941},"from",[2928,18763,3329],{"class":2953},[2928,18765,18766],{"class":3156},"@vitejs\u002Fplugin-vue",[2928,18768,5269],{"class":2953},[2928,18770,18771,18773,18776,18778,18780,18783],{"class":2930,"line":2967},[2928,18772,5398],{"class":2941},[2928,18774,18775],{"class":2949}," ui ",[2928,18777,18761],{"class":2941},[2928,18779,3329],{"class":2953},[2928,18781,18782],{"class":3156},"@nuxt\u002Fui\u002Fvite",[2928,18784,5269],{"class":2953},[2928,18786,18787],{"class":2930,"line":2984},[2928,18788,2996],{"emptyLinePlaceholder":1196},[2928,18790,18791,18793,18795,18797,18799],{"class":2930,"line":2993},[2928,18792,2942],{"class":2941},[2928,18794,3871],{"class":2941},[2928,18796,18741],{"class":2957},[2928,18798,2961],{"class":2949},[2928,18800,2964],{"class":2953},[2928,18802,18803,18806,18808],{"class":2930,"line":2999},[2928,18804,18805],{"class":2970},"  plugins",[2928,18807,2974],{"class":2953},[2928,18809,16685],{"class":2949},[2928,18811,18812,18815,18817],{"class":2930,"line":3005},[2928,18813,18814],{"class":2957},"    vue",[2928,18816,3647],{"class":2949},[2928,18818,2981],{"class":2953},[2928,18820,18821,18824],{"class":2930,"line":3036},[2928,18822,18823],{"class":2957},"    ui",[2928,18825,3051],{"class":2949},[2928,18827,18828],{"class":2930,"line":3054},[2928,18829,18830],{"class":2949},"  ]\n",[2928,18832,18833,18835],{"class":2930,"line":3059},[2928,18834,2987],{"class":2953},[2928,18836,2990],{"class":2949},[2885,18838,18840],{"id":18839},"components-for-every-need","📦 Components for Every Need",[2896,18842,18843],{},"With 54 core components, 50 Pro components, and 42 Prose components, Nuxt UI v3 provides solutions for virtually any UI challenge:",[2896,18845,18291,18846,18849],{},[2900,18847,18848],{},"Data Display",": Tables, charts, and visualizations that adapt to your data",[2896,18851,18291,18852,18855],{},[2900,18853,18854],{},"Navigation",": Menus, tabs, and breadcrumbs that guide users intuitively",[2896,18857,18291,18858,18861],{},[2900,18859,18860],{},"Feedback",": Toasts, alerts, and modals that communicate clearly",[2896,18863,18291,18864,18867],{},[2900,18865,18866],{},"Forms",": Inputs, selectors, and validation that simplify data collection",[2896,18869,18291,18870,18872],{},[2900,18871,878],{},": Grids, containers, and responsive systems that organize content beautifully",[2896,18874,18875],{},"Each component is designed to be both beautiful out of the box and deeply customizable when needed.",[2885,18877,18879],{"id":18878},"improved-typescript-integration","🔷 Improved TypeScript Integration",[2896,18881,18882],{},"We've completely revamped our TypeScript integration, with features that make you more productive:",[4346,18884,18885,18888,18891],{},[3844,18886,18887],{},"Complete type safety with helpful autocompletion",[3844,18889,18890],{},"Generic-based components for flexible APIs",[3844,18892,18893],{},"Type-safe theming through a clear, consistent API",[2918,18895,18897],{"className":2920,"code":18896,"language":2923,"meta":2924,"style":2924},"export default defineAppConfig({\n  ui: {\n    button: {\n      \u002F\u002F Your IDE will show all available options\n      slots: {\n        base: 'font-bold rounded-lg'\n      },\n      defaultVariants: {\n        size: 'md',\n        color: 'error'\n      }\n    }\n  }\n})\n",[2890,18898,18899,18912,18921,18930,18935,18944,18958,18963,18972,18987,19000,19004,19008,19012],{"__ignoreMap":2924},[2928,18900,18901,18903,18905,18908,18910],{"class":2930,"line":2931},[2928,18902,2942],{"class":2941},[2928,18904,3871],{"class":2941},[2928,18906,18907],{"class":2957}," defineAppConfig",[2928,18909,2961],{"class":2949},[2928,18911,2964],{"class":2953},[2928,18913,18914,18917,18919],{"class":2930,"line":2938},[2928,18915,18916],{"class":2970},"  ui",[2928,18918,2974],{"class":2953},[2928,18920,3033],{"class":2953},[2928,18922,18923,18926,18928],{"class":2930,"line":2967},[2928,18924,18925],{"class":2970},"    button",[2928,18927,2974],{"class":2953},[2928,18929,3033],{"class":2953},[2928,18931,18932],{"class":2930,"line":2984},[2928,18933,18934],{"class":2934},"      \u002F\u002F Your IDE will show all available options\n",[2928,18936,18937,18940,18942],{"class":2930,"line":2993},[2928,18938,18939],{"class":2970},"      slots",[2928,18941,2974],{"class":2953},[2928,18943,3033],{"class":2953},[2928,18945,18946,18949,18951,18953,18956],{"class":2930,"line":2999},[2928,18947,18948],{"class":2970},"        base",[2928,18950,2974],{"class":2953},[2928,18952,3329],{"class":2953},[2928,18954,18955],{"class":3156},"font-bold rounded-lg",[2928,18957,5269],{"class":2953},[2928,18959,18960],{"class":2930,"line":3005},[2928,18961,18962],{"class":2953},"      },\n",[2928,18964,18965,18968,18970],{"class":2930,"line":3036},[2928,18966,18967],{"class":2970},"      defaultVariants",[2928,18969,2974],{"class":2953},[2928,18971,3033],{"class":2953},[2928,18973,18974,18977,18979,18981,18983,18985],{"class":2930,"line":3054},[2928,18975,18976],{"class":2970},"        size",[2928,18978,2974],{"class":2953},[2928,18980,3329],{"class":2953},[2928,18982,4520],{"class":3156},[2928,18984,3197],{"class":2953},[2928,18986,2981],{"class":2953},[2928,18988,18989,18992,18994,18996,18998],{"class":2930,"line":3059},[2928,18990,18991],{"class":2970},"        color",[2928,18993,2974],{"class":2953},[2928,18995,3329],{"class":2953},[2928,18997,3734],{"class":3156},[2928,18999,5269],{"class":2953},[2928,19001,19002],{"class":2930,"line":3067},[2928,19003,5989],{"class":2953},[2928,19005,19006],{"class":2930,"line":3077},[2928,19007,4866],{"class":2953},[2928,19009,19010],{"class":2930,"line":3110},[2928,19011,3113],{"class":2953},[2928,19013,19014,19016],{"class":2930,"line":3116},[2928,19015,2987],{"class":2953},[2928,19017,2990],{"class":2949},[2885,19019,19021],{"id":19020},"️-upgrading-to-v3","⬆️ Upgrading to v3",[2896,19023,19024,19025,19030],{},"We've prepared a comprehensive ",[2910,19026,19029],{"href":19027,"rel":19028},"https:\u002F\u002Fui.nuxt.com\u002Fgetting-started\u002Fmigration",[2914],"migration"," guide to help you upgrade from v2 to v3. While there are breaking changes due to our complete overhaul, we've worked hard to make the transition as smooth as possible.",[2885,19032,19034],{"id":19033},"getting-started","🎯 Getting Started",[2896,19036,19037],{},"Whether you're starting a new project or upgrading an existing one, getting started with Nuxt UI v3 is easy:",[2918,19039,19041],{"className":4317,"code":19040,"language":4319,"meta":2924,"style":2924},"# Create a new Nuxt project with Nuxt UI\nnpx nuxi@latest init my-app -t ui\n",[2890,19042,19043,19048],{"__ignoreMap":2924},[2928,19044,19045],{"class":2930,"line":2931},[2928,19046,19047],{"class":2934},"# Create a new Nuxt project with Nuxt UI\n",[2928,19049,19050,19052,19054,19057,19060,19062],{"class":2930,"line":2938},[2928,19051,4446],{"class":3448},[2928,19053,14490],{"class":3156},[2928,19055,19056],{"class":3156}," init",[2928,19058,19059],{"class":3156}," my-app",[2928,19061,12034],{"class":3156},[2928,19063,12037],{"class":3156},[3508,19065,19066,19079,19092,19104],{"sync":12431},[2918,19067,19069],{"className":4317,"code":19068,"filename":12488,"language":4319,"meta":2924,"style":2924},"pnpm add @nuxt\u002Fui@latest\n",[2890,19070,19071],{"__ignoreMap":2924},[2928,19072,19073,19075,19077],{"class":2930,"line":2931},[2928,19074,12488],{"class":3448},[2928,19076,8172],{"class":3156},[2928,19078,12195],{"class":3156},[2918,19080,19082],{"className":4317,"code":19081,"filename":12551,"language":4319,"meta":2924,"style":2924},"yarn add @nuxt\u002Fui@latest\n",[2890,19083,19084],{"__ignoreMap":2924},[2928,19085,19086,19088,19090],{"class":2930,"line":2931},[2928,19087,12551],{"class":3448},[2928,19089,8172],{"class":3156},[2928,19091,12195],{"class":3156},[2918,19093,19094],{"className":4317,"code":12184,"filename":9772,"language":4319,"meta":2924,"style":2924},[2890,19095,19096],{"__ignoreMap":2924},[2928,19097,19098,19100,19102],{"class":2930,"line":2931},[2928,19099,9772],{"class":3448},[2928,19101,9976],{"class":3156},[2928,19103,12195],{"class":3156},[2918,19105,19107],{"className":4317,"code":19106,"filename":12597,"language":4319,"meta":2924,"style":2924},"bun add @nuxt\u002Fui@latest\n",[2890,19108,19109],{"__ignoreMap":2924},[2928,19110,19111,19113,19115],{"class":2930,"line":2931},[2928,19112,12597],{"class":3448},[2928,19114,8172],{"class":3156},[2928,19116,12195],{"class":3156},[10634,19118,19119],{},[2896,19120,19121,19122,19124,19125,14018,19132,19135,19136,19139],{},"If you're using ",[2900,19123,12488],{},", ensure that you either set ",[2910,19126,19129],{"href":19127,"rel":19128},"https:\u002F\u002Fpnpm.io\u002Fnpmrc#shamefully-hoist",[2914],[2890,19130,19131],{},"shamefully-hoist=true",[2890,19133,19134],{},".npmrc"," file or install ",[2890,19137,19138],{},"tailwindcss"," in your project's root directory.",[2896,19141,19142,19143,19147],{},"Visit our ",[2910,19144,6009],{"href":19145,"rel":19146},"https:\u002F\u002Fui.nuxt.com\u002Fgetting-started",[2914]," to explore all the components and features available in Nuxt UI v3.",[2885,19149,19150],{"id":10078},"🙏 Thank You",[2896,19152,19153],{},"This release represents thousands of hours of work from our team and the community. We'd like to thank everyone who contributed to making Nuxt UI v3 a reality.",[2896,19155,19156],{},"We're excited to see what you'll build with Nuxt UI v3!",[4489,19158,19159],{},"html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}",{"title":2924,"searchDepth":2938,"depth":2938,"links":19161},[19162,19166,19167,19168,19169,19170,19171,19172],{"id":18251,"depth":2938,"text":18252,"children":19163},[19164,19165],{"id":18258,"depth":2967,"text":18261},{"id":18282,"depth":2967,"text":18285},{"id":18310,"depth":2938,"text":18311},{"id":18710,"depth":2938,"text":18711},{"id":18839,"depth":2938,"text":18840},{"id":18878,"depth":2938,"text":18879},{"id":19020,"depth":2938,"text":19021},{"id":19033,"depth":2938,"text":19034},{"id":10078,"depth":2938,"text":19150},"2025-03-12","Nuxt UI v3 is out! After 1500+ commits, this major redesign brings improved accessibility, Tailwind CSS v4 support, and full Vue compatibility","\u002Fassets\u002Fblog\u002Fnuxt-ui-v3.png",{},"\u002Fblog\u002Fnuxt-ui-v3",{"title":18236,"description":19174},"blog\u002F32.nuxt-ui-v3","ILPba_M4bbzRWRWqbn0iCPxXkxnlpBduNlJ3voPoAgc",{"id":19182,"title":19183,"authors":19184,"body":19187,"category":4517,"date":20570,"description":20571,"draft":108,"extension":4520,"image":20572,"meta":20573,"navigation":108,"path":20574,"seo":20575,"stem":20576,"tags":6,"__hash__":20577},"blog\u002Fblog\u002F31.v3-16.md","Nuxt 3.16",[19185],{"name":2877,"avatar":19186,"to":2880},{"src":2879},{"type":2882,"value":19188,"toc":20552},[19189,19192,19196,19209,19216,19219,19233,19242,19257,19270,19274,19284,19292,19386,19389,19407,19410,19421,19425,19434,19437,19440,19448,19450,19453,19515,19518,19533,19546,19550,19564,19713,19720,19750,19757,19761,19770,19829,19833,19845,19987,19994,19998,20007,20051,20185,20189,20209,20212,20263,20270,20274,20282,20298,20307,20310,20313,20324,20458,20462,20465,20473,20479,20482,20514,20516,20518,20532,20534,20536,20544,20546,20549],[2896,19190,19191],{},"There's a lot in this one!",[2885,19193,19195],{"id":19194},"️-a-new-new-nuxt","⚡️ A New New Nuxt",[2896,19197,19198,19199,19202,19203,19208],{},"Say hello to ",[2890,19200,19201],{},"create-nuxt",", a new tool for starting Nuxt projects (big thanks to ",[2910,19204,19207],{"href":19205,"rel":19206},"https:\u002F\u002Fgithub.com\u002Fdevgar",[2914],"@devgar"," for donating the package name)!",[2896,19210,19211,19212,19215],{},"It's a streamlined version of ",[2890,19213,19214],{},"nuxi init"," - just a sixth of the size and bundled as a single file with all dependencies inlined, to get you going as fast as possible.",[2896,19217,19218],{},"Starting a new project is as simple as:",[2918,19220,19222],{"className":4317,"code":19221,"language":4319,"meta":2924,"style":2924},"npm create nuxt\n",[2890,19223,19224],{"__ignoreMap":2924},[2928,19225,19226,19228,19230],{"class":2930,"line":2931},[2928,19227,9772],{"class":3448},[2928,19229,12026],{"class":3156},[2928,19231,19232],{"class":3156}," nuxt\n",[2896,19234,19235],{},[4183,19236],{"alt":19237,"className":19238,"src":19241},"screenshot of create nuxt app",[19239,19240,5483,15174],"border","border-gray-200","\u002Fassets\u002Fblog\u002Fcreate-nuxt-ascii.jpeg",[2896,19243,19244,19245,19250,19251,19256],{},"Special thanks to ",[2910,19246,19249],{"href":19247,"rel":19248},"https:\u002F\u002Fgithub.com\u002Fcmang",[2914],"@cmang"," for the ",[2910,19252,19255],{"href":19253,"rel":19254},"https:\u002F\u002Fbsky.app\u002Fprofile\u002Fdurdraw.org\u002Fpost\u002F3liadod3gv22a",[2914],"beautiful ASCII-art",". ❤️",[2896,19258,19259,19260,19264,19265,3088],{},"Want to learn more about where we're headed with the Nuxt CLI? Check out our roadmap ",[2910,19261,15608],{"href":19262,"rel":19263},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fcli\u002Fissues\u002F648",[2914],", including our plans for an ",[2910,19266,19269],{"href":19267,"rel":19268},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fcli\u002Fissues\u002F754",[2914],"interactive modules selector",[2885,19271,19273],{"id":19272},"unhead-v2","🚀 Unhead v2",[2896,19275,3242,19276,19279,19280,19283],{},[2890,19277,19278],{},"unhead"," v2, the engine behind Nuxt's ",[2890,19281,19282],{},"\u003Chead>"," management. This major version removes deprecations and improves how context works:",[4346,19285,19286,19289],{},[3844,19287,19288],{},"For Nuxt 3 users, we're shipping a legacy compatibility build so nothing breaks",[3844,19290,19291],{},"The context implementation is now more direct via Nuxt itself",[2918,19293,19295],{"className":2920,"code":19294,"language":2923,"meta":2924,"style":2924},"\u002F\u002F Nuxt now re-exports composables while properly resolving the context\nexport function useHead(input, options = {}) {\n  const unhead = injectHead(options.nuxt)\n  return head(input, { head: unhead, ...options })\n}\n",[2890,19296,19297,19302,19328,19350,19382],{"__ignoreMap":2924},[2928,19298,19299],{"class":2930,"line":2931},[2928,19300,19301],{"class":2934},"\u002F\u002F Nuxt now re-exports composables while properly resolving the context\n",[2928,19303,19304,19306,19308,19311,19313,19316,19318,19321,19323,19326],{"class":2930,"line":2938},[2928,19305,2942],{"class":2941},[2928,19307,3641],{"class":2945},[2928,19309,19310],{"class":2957}," useHead",[2928,19312,2961],{"class":2953},[2928,19314,19315],{"class":3023},"input",[2928,19317,3617],{"class":2953},[2928,19319,19320],{"class":3023}," options",[2928,19322,3045],{"class":2953},[2928,19324,19325],{"class":2953}," {})",[2928,19327,3033],{"class":2953},[2928,19329,19330,19332,19335,19337,19340,19342,19344,19346,19348],{"class":2930,"line":2967},[2928,19331,3039],{"class":2945},[2928,19333,19334],{"class":2949}," unhead",[2928,19336,3045],{"class":2953},[2928,19338,19339],{"class":2957}," injectHead",[2928,19341,2961],{"class":2970},[2928,19343,13102],{"class":2949},[2928,19345,3088],{"class":2953},[2928,19347,4326],{"class":2949},[2928,19349,2990],{"class":2970},[2928,19351,19352,19354,19357,19359,19361,19363,19365,19367,19369,19371,19373,19376,19378,19380],{"class":2930,"line":2984},[2928,19353,3062],{"class":2941},[2928,19355,19356],{"class":2957}," head",[2928,19358,2961],{"class":2970},[2928,19360,19315],{"class":2949},[2928,19362,3617],{"class":2953},[2928,19364,3174],{"class":2953},[2928,19366,19356],{"class":2970},[2928,19368,2974],{"class":2953},[2928,19370,19334],{"class":2949},[2928,19372,3617],{"class":2953},[2928,19374,19375],{"class":2953}," ...",[2928,19377,13102],{"class":2949},[2928,19379,3702],{"class":2953},[2928,19381,2990],{"class":2970},[2928,19383,19384],{"class":2930,"line":2993},[2928,19385,3764],{"class":2953},[2896,19387,19388],{},"If you're using Unhead directly in your app, keep in mind:",[3841,19390,19391,19401],{},[3844,19392,19393,19394,19397,19398],{},"Import from Nuxt's auto-imports or ",[2890,19395,19396],{},"#app\u002Fcomposables\u002Fhead"," instead of ",[2890,19399,19400],{},"@unhead\u002Fvue",[3844,19402,19403,19404,19406],{},"Importing directly from ",[2890,19405,19400],{}," might lose async context",[2896,19408,19409],{},"Don't worry though - we've maintained backward compatibility in Nuxt 3, so most users won't need to change anything!",[2896,19411,19412,19413,19415,19416,19420],{},"If you've opted into ",[2890,19414,16963],{},", check out ",[2910,19417,19419],{"href":19418},"\u002Fdocs\u002Fgetting-started\u002Fupgrade#unhead-v2","our upgrade guide"," for additional changes.",[2885,19422,19424],{"id":19423},"devtools-v2-upgrade","🔧 Devtools v2 Upgrade",[2896,19426,19427,19428,19433],{},"Nuxt Devtools has leveled up to v2 (",[2910,19429,19432],{"href":19430,"rel":19431},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F30889",[2914],"#30889",")!",[2896,19435,19436],{},"You'll love the new features like custom editor selection, Discovery.js for inspecting resolved configs (perfect for debugging), the return of the schema generator, and slimmer dependencies.",[2896,19438,19439],{},"One of our favorite improvements is the ability to track how modules modify your Nuxt configuration - giving you X-ray vision into what's happening under the hood.",[2896,19441,19442,19443,3088],{},"👉 Discover all the details in the ",[2910,19444,19447],{"href":19445,"rel":19446},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fdevtools\u002Freleases",[2914],"Nuxt DevTools release notes",[2885,19449,14387],{"id":14386},[2896,19451,19452],{},"We're continuing to make Nuxt faster, and there are a number of improvements in v3.16:",[3841,19454,19455,19472,19481,19490,19503],{},[3844,19456,19457,19458,19465,19466,19471],{},"Using ",[2910,19459,19462],{"href":19460,"rel":19461},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fexsolve",[2914],[2890,19463,19464],{},"exsolve"," for module resolution (",[2910,19467,19470],{"href":19468,"rel":19469},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31124",[2914],"#31124",") along with the rest of the unjs ecosystem (nitro, c12, pkg-types, and more) - which dramatically speeds up module resolution",[3844,19473,19474,19475,19480],{},"Smarter module resolution paths (",[2910,19476,19479],{"href":19477,"rel":19478},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31037",[2914],"#31037",") - prioritizes direct imports for better efficiency",[3844,19482,19483,19484,19489],{},"Eliminated duplicated Nitro alias resolution (",[2910,19485,19488],{"href":19486,"rel":19487},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31088",[2914],"#31088",") - leaner file handling",[3844,19491,19492,19493,19496,19497,19502],{},"Streamlined ",[2890,19494,19495],{},"loadNuxt"," by skipping unnecessary resolution steps (",[2910,19498,19501],{"href":19499,"rel":19500},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31176",[2914],"#31176",") - faster startups",[3844,19504,19505,19506,19509,19510,3027],{},"Adopt ",[2890,19507,19508],{},"oxc-parser"," for parsing in Nuxt plugins (",[2910,19511,19514],{"href":19512,"rel":19513},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F30066",[2914],"#30066",[2896,19516,19517],{},"All these speed boosts happen automatically - no configuration needed!",[2896,19519,19520,19521,19526,19527,19532],{},"Shout out to ",[2910,19522,19525],{"href":19523,"rel":19524},"https:\u002F\u002Fcodspeed.io\u002F",[2914],"CodSpeed"," with ",[2910,19528,19531],{"href":19529,"rel":19530},"https:\u002F\u002Fvitest.dev\u002Fguide\u002Ffeatures.html#benchmarking",[2914],"Vitest benchmarking"," to measure these improvements in CI - it has been really helpful.",[2896,19534,19535,19536,19541,19542,19545],{},"To add some anecdotal evidence, my personal site at ",[2910,19537,19540],{"href":19538,"rel":19539},"https:\u002F\u002Fgithub.com\u002Fdanielroe\u002Froe.dev",[2914],"roe.dev"," loads 32% faster with v3.16, and ",[2910,19543,17199],{"href":8542,"rel":19544},[2914]," is 28% faster. I hope you see similar results! ⚡️",[2885,19547,19549],{"id":19548},"️-delayed-hydration-support","🕰️ Delayed Hydration Support",[2896,19551,19552,19553,19558,19559,3088],{},"We're very pleased to bring you native delayed\u002Flazy hydration support (",[2910,19554,19557],{"href":19555,"rel":19556},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F26468",[2914],"#26468",")! This lets you control exactly when components hydrate, which can improve initial load performance and time-to-interactive. We're leveraging Vue's built-in hydration strategies - ",[2910,19560,19563],{"href":19561,"rel":19562},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fcomponents\u002Fasync.html#lazy-hydration",[2914],"check them out in the Vue docs",[2918,19565,19567],{"className":3129,"code":19566,"language":3132,"meta":2924,"style":2924},"\u003Ctemplate>\n  \u003C!-- Hydrate when component becomes visible in viewport -->\n  \u003CLazyExpensiveComponent hydrate-on-visible \u002F>\n  \n  \u003C!-- Hydrate when browser is idle -->\n  \u003CLazyHeavyComponent hydrate-on-idle \u002F>\n  \n  \u003C!-- Hydrate on interaction (mouseover in this case) -->\n  \u003CLazyDropdown hydrate-on-interaction=\"mouseover\" \u002F>\n  \n  \u003C!-- Hydrate when media query matches -->\n  \u003CLazyMobileMenu hydrate-on-media-query=\"(max-width: 768px)\" \u002F>\n  \n  \u003C!-- Hydrate after a specific delay in milliseconds -->\n  \u003CLazyFooter :hydrate-after=\"2000\" \u002F>\n\u003C\u002Ftemplate>\n",[2890,19568,19569,19577,19582,19594,19598,19603,19615,19619,19624,19645,19649,19654,19675,19679,19684,19705],{"__ignoreMap":2924},[2928,19570,19571,19573,19575],{"class":2930,"line":2931},[2928,19572,3139],{"class":2953},[2928,19574,3521],{"class":2970},[2928,19576,3161],{"class":2953},[2928,19578,19579],{"class":2930,"line":2938},[2928,19580,19581],{"class":2934},"  \u003C!-- Hydrate when component becomes visible in viewport -->\n",[2928,19583,19584,19586,19589,19592],{"class":2930,"line":2967},[2928,19585,3528],{"class":2953},[2928,19587,19588],{"class":2970},"LazyExpensiveComponent",[2928,19590,19591],{"class":2945}," hydrate-on-visible",[2928,19593,3534],{"class":2953},[2928,19595,19596],{"class":2930,"line":2984},[2928,19597,9082],{"class":2949},[2928,19599,19600],{"class":2930,"line":2993},[2928,19601,19602],{"class":2934},"  \u003C!-- Hydrate when browser is idle -->\n",[2928,19604,19605,19607,19610,19613],{"class":2930,"line":2999},[2928,19606,3528],{"class":2953},[2928,19608,19609],{"class":2970},"LazyHeavyComponent",[2928,19611,19612],{"class":2945}," hydrate-on-idle",[2928,19614,3534],{"class":2953},[2928,19616,19617],{"class":2930,"line":3005},[2928,19618,9082],{"class":2949},[2928,19620,19621],{"class":2930,"line":3036},[2928,19622,19623],{"class":2934},"  \u003C!-- Hydrate on interaction (mouseover in this case) -->\n",[2928,19625,19626,19628,19631,19634,19636,19638,19641,19643],{"class":2930,"line":3054},[2928,19627,3528],{"class":2953},[2928,19629,19630],{"class":2970},"LazyDropdown",[2928,19632,19633],{"class":2945}," hydrate-on-interaction",[2928,19635,2954],{"class":2953},[2928,19637,3153],{"class":2953},[2928,19639,19640],{"class":3156},"mouseover",[2928,19642,3153],{"class":2953},[2928,19644,3534],{"class":2953},[2928,19646,19647],{"class":2930,"line":3059},[2928,19648,9082],{"class":2949},[2928,19650,19651],{"class":2930,"line":3067},[2928,19652,19653],{"class":2934},"  \u003C!-- Hydrate when media query matches -->\n",[2928,19655,19656,19658,19661,19664,19666,19668,19671,19673],{"class":2930,"line":3077},[2928,19657,3528],{"class":2953},[2928,19659,19660],{"class":2970},"LazyMobileMenu",[2928,19662,19663],{"class":2945}," hydrate-on-media-query",[2928,19665,2954],{"class":2953},[2928,19667,3153],{"class":2953},[2928,19669,19670],{"class":3156},"(max-width: 768px)",[2928,19672,3153],{"class":2953},[2928,19674,3534],{"class":2953},[2928,19676,19677],{"class":2930,"line":3110},[2928,19678,9082],{"class":2949},[2928,19680,19681],{"class":2930,"line":3116},[2928,19682,19683],{"class":2934},"  \u003C!-- Hydrate after a specific delay in milliseconds -->\n",[2928,19685,19686,19688,19691,19694,19696,19698,19701,19703],{"class":2930,"line":6687},[2928,19687,3528],{"class":2953},[2928,19689,19690],{"class":2970},"LazyFooter",[2928,19692,19693],{"class":2945}," :hydrate-after",[2928,19695,2954],{"class":2953},[2928,19697,3153],{"class":2953},[2928,19699,19700],{"class":3156},"2000",[2928,19702,3153],{"class":2953},[2928,19704,3534],{"class":2953},[2928,19706,19707,19709,19711],{"class":2930,"line":6703},[2928,19708,3209],{"class":2953},[2928,19710,3521],{"class":2970},[2928,19712,3161],{"class":2953},[2896,19714,19715,19716,19719],{},"You can also listen for when hydration happens with the ",[2890,19717,19718],{},"@hydrated"," event:",[2918,19721,19723],{"className":3129,"code":19722,"language":3132,"meta":2924,"style":2924},"\u003CLazyComponent hydrate-on-visible @hydrated=\"onComponentHydrated\" \u002F>\n",[2890,19724,19725],{"__ignoreMap":2924},[2928,19726,19727,19729,19732,19734,19736,19739,19741,19743,19746,19748],{"class":2930,"line":2931},[2928,19728,3139],{"class":2953},[2928,19730,19731],{"class":2970},"LazyComponent",[2928,19733,19591],{"class":2945},[2928,19735,17825],{"class":2953},[2928,19737,19738],{"class":2945},"hydrated",[2928,19740,2954],{"class":2953},[2928,19742,3153],{"class":2953},[2928,19744,19745],{"class":2949},"onComponentHydrated",[2928,19747,3153],{"class":2953},[2928,19749,3534],{"class":2953},[2896,19751,19752,19753,3088],{},"Learn more about lazy hydration in ",[2910,19754,19756],{"href":19755},"\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Fcomponents#delayed-or-lazy-hydration","our components documentation",[2885,19758,19760],{"id":19759},"advanced-pages-configuration","🧩 Advanced Pages Configuration",[2896,19762,19763,19764,19769],{},"You can now fine-tune which files Nuxt scans for pages (",[2910,19765,19768],{"href":19766,"rel":19767},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31090",[2914],"#31090","), giving you more control over your project structure:",[2918,19771,19773],{"className":2920,"code":19772,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  pages: {\n    \u002F\u002F Filter specific files or directories\n    pattern: ['**\u002F*.vue'],\n  }\n})\n",[2890,19774,19775,19787,19795,19800,19819,19823],{"__ignoreMap":2924},[2928,19776,19777,19779,19781,19783,19785],{"class":2930,"line":2931},[2928,19778,2942],{"class":2941},[2928,19780,3871],{"class":2941},[2928,19782,3874],{"class":2957},[2928,19784,2961],{"class":2949},[2928,19786,2964],{"class":2953},[2928,19788,19789,19791,19793],{"class":2930,"line":2938},[2928,19790,12818],{"class":2970},[2928,19792,2974],{"class":2953},[2928,19794,3033],{"class":2953},[2928,19796,19797],{"class":2930,"line":2967},[2928,19798,19799],{"class":2934},"    \u002F\u002F Filter specific files or directories\n",[2928,19801,19802,19805,19807,19809,19811,19813,19815,19817],{"class":2930,"line":2984},[2928,19803,19804],{"class":2970},"    pattern",[2928,19806,2974],{"class":2953},[2928,19808,4961],{"class":2949},[2928,19810,3197],{"class":2953},[2928,19812,13396],{"class":3156},[2928,19814,3197],{"class":2953},[2928,19816,4971],{"class":2949},[2928,19818,2981],{"class":2953},[2928,19820,19821],{"class":2930,"line":2993},[2928,19822,3113],{"class":2953},[2928,19824,19825,19827],{"class":2930,"line":2999},[2928,19826,2987],{"class":2953},[2928,19828,2990],{"class":2949},[2885,19830,19832],{"id":19831},"enhanced-debugging","🔍 Enhanced Debugging",[2896,19834,19835,19836,19839,19840,3839],{},"We've made debugging with the ",[2890,19837,19838],{},"debug"," option more flexible! Now you can enable just the debug logs you need (",[2910,19841,19844],{"href":19842,"rel":19843},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F30578",[2914],"#30578",[2918,19846,19848],{"className":2920,"code":19847,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  debug: {\n    \u002F\u002F Enable specific debugging features\n    templates: true,\n    modules: true,\n    watchers: true,\n    hooks: {\n      client: true,\n      server: true,\n    },\n    nitro: true,\n    router: true,\n    hydration: true,\n  }\n})\n",[2890,19849,19850,19862,19871,19876,19887,19898,19909,19918,19929,19940,19944,19955,19966,19977,19981],{"__ignoreMap":2924},[2928,19851,19852,19854,19856,19858,19860],{"class":2930,"line":2931},[2928,19853,2942],{"class":2941},[2928,19855,3871],{"class":2941},[2928,19857,3874],{"class":2957},[2928,19859,2961],{"class":2949},[2928,19861,2964],{"class":2953},[2928,19863,19864,19867,19869],{"class":2930,"line":2938},[2928,19865,19866],{"class":2970},"  debug",[2928,19868,2974],{"class":2953},[2928,19870,3033],{"class":2953},[2928,19872,19873],{"class":2930,"line":2967},[2928,19874,19875],{"class":2934},"    \u002F\u002F Enable specific debugging features\n",[2928,19877,19878,19881,19883,19885],{"class":2930,"line":2984},[2928,19879,19880],{"class":2970},"    templates",[2928,19882,2974],{"class":2953},[2928,19884,3355],{"class":2977},[2928,19886,2981],{"class":2953},[2928,19888,19889,19892,19894,19896],{"class":2930,"line":2993},[2928,19890,19891],{"class":2970},"    modules",[2928,19893,2974],{"class":2953},[2928,19895,3355],{"class":2977},[2928,19897,2981],{"class":2953},[2928,19899,19900,19903,19905,19907],{"class":2930,"line":2999},[2928,19901,19902],{"class":2970},"    watchers",[2928,19904,2974],{"class":2953},[2928,19906,3355],{"class":2977},[2928,19908,2981],{"class":2953},[2928,19910,19911,19914,19916],{"class":2930,"line":3005},[2928,19912,19913],{"class":2970},"    hooks",[2928,19915,2974],{"class":2953},[2928,19917,3033],{"class":2953},[2928,19919,19920,19923,19925,19927],{"class":2930,"line":3036},[2928,19921,19922],{"class":2970},"      client",[2928,19924,2974],{"class":2953},[2928,19926,3355],{"class":2977},[2928,19928,2981],{"class":2953},[2928,19930,19931,19934,19936,19938],{"class":2930,"line":3054},[2928,19932,19933],{"class":2970},"      server",[2928,19935,2974],{"class":2953},[2928,19937,3355],{"class":2977},[2928,19939,2981],{"class":2953},[2928,19941,19942],{"class":2930,"line":3059},[2928,19943,3378],{"class":2953},[2928,19945,19946,19949,19951,19953],{"class":2930,"line":3067},[2928,19947,19948],{"class":2970},"    nitro",[2928,19950,2974],{"class":2953},[2928,19952,3355],{"class":2977},[2928,19954,2981],{"class":2953},[2928,19956,19957,19960,19962,19964],{"class":2930,"line":3077},[2928,19958,19959],{"class":2970},"    router",[2928,19961,2974],{"class":2953},[2928,19963,3355],{"class":2977},[2928,19965,2981],{"class":2953},[2928,19967,19968,19971,19973,19975],{"class":2930,"line":3110},[2928,19969,19970],{"class":2970},"    hydration",[2928,19972,2974],{"class":2953},[2928,19974,3355],{"class":2977},[2928,19976,2981],{"class":2953},[2928,19978,19979],{"class":2930,"line":3116},[2928,19980,3113],{"class":2953},[2928,19982,19983,19985],{"class":2930,"line":6687},[2928,19984,2987],{"class":2953},[2928,19986,2990],{"class":2949},[2896,19988,19989,19990,19993],{},"Or keep it simple with ",[2890,19991,19992],{},"debug: true"," to enable all these debugging features.",[2885,19995,19997],{"id":19996},"decorators-support","🎨 Decorators Support",[2896,19999,20000,20001,20006],{},"For the decorator fans out there (whoever you are!), we've added experimental support (",[2910,20002,20005],{"href":20003,"rel":20004},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27672",[2914],"#27672","). As with all experimental features, feedback is much appreciated.",[2918,20008,20010],{"className":2920,"code":20009,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  experimental: {\n    decorators: true\n  }\n})\n",[2890,20011,20012,20024,20032,20041,20045],{"__ignoreMap":2924},[2928,20013,20014,20016,20018,20020,20022],{"class":2930,"line":2931},[2928,20015,2942],{"class":2941},[2928,20017,3871],{"class":2941},[2928,20019,3874],{"class":2957},[2928,20021,2961],{"class":2949},[2928,20023,2964],{"class":2953},[2928,20025,20026,20028,20030],{"class":2930,"line":2938},[2928,20027,3883],{"class":2970},[2928,20029,2974],{"class":2953},[2928,20031,3033],{"class":2953},[2928,20033,20034,20037,20039],{"class":2930,"line":2967},[2928,20035,20036],{"class":2970},"    decorators",[2928,20038,2974],{"class":2953},[2928,20040,8120],{"class":2977},[2928,20042,20043],{"class":2930,"line":2984},[2928,20044,3113],{"class":2953},[2928,20046,20047,20049],{"class":2930,"line":2993},[2928,20048,2987],{"class":2953},[2928,20050,2990],{"class":2949},[2918,20052,20054],{"className":2920,"code":20053,"language":2923,"meta":2924,"style":2924},"function something (_method: () => unknown) {\n  return () => 'decorated'\n}\n\nclass SomeClass {\n  @something\n  public someMethod () {\n    return 'initial'\n  }\n}\n\nconst value = new SomeClass().someMethod()\n\u002F\u002F returns 'decorated'\n",[2890,20055,20056,20082,20097,20101,20105,20115,20123,20135,20146,20150,20154,20158,20180],{"__ignoreMap":2924},[2928,20057,20058,20061,20064,20066,20069,20071,20073,20075,20078,20080],{"class":2930,"line":2931},[2928,20059,20060],{"class":2945},"function",[2928,20062,20063],{"class":2957}," something",[2928,20065,3248],{"class":2953},[2928,20067,20068],{"class":2957},"_method",[2928,20070,2974],{"class":2953},[2928,20072,4102],{"class":2953},[2928,20074,3030],{"class":2945},[2928,20076,20077],{"class":3448}," unknown",[2928,20079,3027],{"class":2953},[2928,20081,3033],{"class":2953},[2928,20083,20084,20086,20088,20090,20092,20095],{"class":2930,"line":2938},[2928,20085,3062],{"class":2941},[2928,20087,4102],{"class":2953},[2928,20089,3030],{"class":2945},[2928,20091,3329],{"class":2953},[2928,20093,20094],{"class":3156},"decorated",[2928,20096,5269],{"class":2953},[2928,20098,20099],{"class":2930,"line":2967},[2928,20100,3764],{"class":2953},[2928,20102,20103],{"class":2930,"line":2984},[2928,20104,2996],{"emptyLinePlaceholder":1196},[2928,20106,20107,20110,20113],{"class":2930,"line":2993},[2928,20108,20109],{"class":2945},"class",[2928,20111,20112],{"class":3448}," SomeClass",[2928,20114,3033],{"class":2953},[2928,20116,20117,20120],{"class":2930,"line":2999},[2928,20118,20119],{"class":2953},"  @",[2928,20121,20122],{"class":2949},"something\n",[2928,20124,20125,20128,20131,20133],{"class":2930,"line":3005},[2928,20126,20127],{"class":2945},"  public",[2928,20129,20130],{"class":2970}," someMethod",[2928,20132,4102],{"class":2953},[2928,20134,3033],{"class":2953},[2928,20136,20137,20139,20141,20144],{"class":2930,"line":3036},[2928,20138,5153],{"class":2941},[2928,20140,3329],{"class":2953},[2928,20142,20143],{"class":3156},"initial",[2928,20145,5269],{"class":2953},[2928,20147,20148],{"class":2930,"line":3054},[2928,20149,3113],{"class":2953},[2928,20151,20152],{"class":2930,"line":3059},[2928,20153,3764],{"class":2953},[2928,20155,20156],{"class":2930,"line":3067},[2928,20157,2996],{"emptyLinePlaceholder":1196},[2928,20159,20160,20162,20165,20167,20169,20171,20173,20175,20178],{"class":2930,"line":3077},[2928,20161,3171],{"class":2945},[2928,20163,20164],{"class":2949}," value ",[2928,20166,2954],{"class":2953},[2928,20168,10425],{"class":2953},[2928,20170,20112],{"class":2957},[2928,20172,3647],{"class":2949},[2928,20174,3088],{"class":2953},[2928,20176,20177],{"class":2957},"someMethod",[2928,20179,3051],{"class":2949},[2928,20181,20182],{"class":2930,"line":3110},[2928,20183,20184],{"class":2934},"\u002F\u002F returns 'decorated'\n",[2885,20186,20188],{"id":20187},"named-layer-aliases","📛 Named Layer Aliases",[2896,20190,20191,20192,20195,20196,20199,20200,3248,20203,20208],{},"It's been much requested, and it's here! Auto-scanned local layers (from your ",[2890,20193,20194],{},"~~\u002Flayers"," directory) now automatically create aliases. You can access your ",[2890,20197,20198],{},"~~\u002Flayers\u002Ftest"," layer via ",[2890,20201,20202],{},"#layers\u002Ftest",[2910,20204,20207],{"href":20205,"rel":20206},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F30948",[2914],"#30948",") - no configuration needed.",[2896,20210,20211],{},"If you want named aliases for other layers, you can add a name to your layer configuration:",[2918,20213,20215],{"className":2920,"code":20214,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  $meta: {\n    name: 'example-layer',\n  },\n})\n",[2890,20216,20217,20229,20238,20253,20257],{"__ignoreMap":2924},[2928,20218,20219,20221,20223,20225,20227],{"class":2930,"line":2931},[2928,20220,2942],{"class":2941},[2928,20222,3871],{"class":2941},[2928,20224,3874],{"class":2957},[2928,20226,2961],{"class":2949},[2928,20228,2964],{"class":2953},[2928,20230,20231,20234,20236],{"class":2930,"line":2938},[2928,20232,20233],{"class":2970},"  $meta",[2928,20235,2974],{"class":2953},[2928,20237,3033],{"class":2953},[2928,20239,20240,20242,20244,20246,20249,20251],{"class":2930,"line":2967},[2928,20241,3324],{"class":2970},[2928,20243,2974],{"class":2953},[2928,20245,3329],{"class":2953},[2928,20247,20248],{"class":3156},"example-layer",[2928,20250,3197],{"class":2953},[2928,20252,2981],{"class":2953},[2928,20254,20255],{"class":2930,"line":2984},[2928,20256,3383],{"class":2953},[2928,20258,20259,20261],{"class":2930,"line":2993},[2928,20260,2987],{"class":2953},[2928,20262,2990],{"class":2949},[2896,20264,20265,20266,20269],{},"This creates the alias ",[2890,20267,20268],{},"#layers\u002Fexample-layer"," pointing to your layer - making imports cleaner and more intuitive.",[2885,20271,20273],{"id":20272},"error-handling-improvements","🧪 Error Handling Improvements",[2896,20275,20276,20277,3839],{},"We've greatly improved error messages and source tracking (",[2910,20278,20281],{"href":20279,"rel":20280},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31144",[2914],"#31144",[3841,20283,20284,20290],{},[3844,20285,20286,20287,20289],{},"Better warnings for undefined ",[2890,20288,515],{}," calls with precise file location information",[3844,20291,20292,20293,3027],{},"Error pages now appear correctly on island page errors (",[2910,20294,20297],{"href":20295,"rel":20296},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31081",[2914],"#31081",[2896,20299,20300,20301,20306],{},"Plus, we're now using Nitro's beautiful error handling (powered by ",[2910,20302,20305],{"href":20303,"rel":20304},"https:\u002F\u002Fgithub.com\u002Fpoppinss\u002Fyouch",[2914],"youch",") to provide more helpful error messages in the terminal, complete with stacktrace support.",[2896,20308,20309],{},"Nitro now also automatically applies source maps without requiring extra Node options, and we set appropriate security headers when rendering error pages.",[2885,20311,20312],{"id":14258},"📦 Module Development Improvements",[2896,20314,20315,20316,3248,20319,3839],{},"For module authors, we've added the ability to augment Nitro types with ",[2890,20317,20318],{},"addTypeTemplate",[2910,20320,20323],{"href":20321,"rel":20322},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F31079",[2914],"#31079",[2918,20325,20327],{"className":2920,"code":20326,"language":2923,"meta":2924,"style":2924},"\u002F\u002F Inside your Nuxt module\nexport default defineNuxtModule({\n  setup(options, nuxt) {\n    addTypeTemplate({\n      filename: 'types\u002Fmy-module.d.ts',\n      getContents: () => `\n        declare module 'nitropack' {\n          interface NitroRouteConfig {\n            myCustomOption?: boolean\n          }\n        }\n      `\n    }, { nitro: true })\n  }\n})\n",[2890,20328,20329,20334,20346,20362,20371,20387,20401,20406,20411,20416,20421,20425,20430,20448,20452],{"__ignoreMap":2924},[2928,20330,20331],{"class":2930,"line":2931},[2928,20332,20333],{"class":2934},"\u002F\u002F Inside your Nuxt module\n",[2928,20335,20336,20338,20340,20342,20344],{"class":2930,"line":2938},[2928,20337,2942],{"class":2941},[2928,20339,3871],{"class":2941},[2928,20341,5524],{"class":2957},[2928,20343,2961],{"class":2949},[2928,20345,2964],{"class":2953},[2928,20347,20348,20350,20352,20354,20356,20358,20360],{"class":2930,"line":2967},[2928,20349,13097],{"class":2970},[2928,20351,2961],{"class":2953},[2928,20353,13102],{"class":3023},[2928,20355,3617],{"class":2953},[2928,20357,4449],{"class":3023},[2928,20359,3027],{"class":2953},[2928,20361,3033],{"class":2953},[2928,20363,20364,20367,20369],{"class":2930,"line":2984},[2928,20365,20366],{"class":2957},"    addTypeTemplate",[2928,20368,2961],{"class":2970},[2928,20370,2964],{"class":2953},[2928,20372,20373,20376,20378,20380,20383,20385],{"class":2930,"line":2993},[2928,20374,20375],{"class":2970},"      filename",[2928,20377,2974],{"class":2953},[2928,20379,3329],{"class":2953},[2928,20381,20382],{"class":3156},"types\u002Fmy-module.d.ts",[2928,20384,3197],{"class":2953},[2928,20386,2981],{"class":2953},[2928,20388,20389,20392,20394,20396,20398],{"class":2930,"line":2999},[2928,20390,20391],{"class":2957},"      getContents",[2928,20393,2974],{"class":2953},[2928,20395,4102],{"class":2953},[2928,20397,3030],{"class":2945},[2928,20399,20400],{"class":2953}," `\n",[2928,20402,20403],{"class":2930,"line":3005},[2928,20404,20405],{"class":3156},"        declare module 'nitropack' {\n",[2928,20407,20408],{"class":2930,"line":3036},[2928,20409,20410],{"class":3156},"          interface NitroRouteConfig {\n",[2928,20412,20413],{"class":2930,"line":3054},[2928,20414,20415],{"class":3156},"            myCustomOption?: boolean\n",[2928,20417,20418],{"class":2930,"line":3059},[2928,20419,20420],{"class":3156},"          }\n",[2928,20422,20423],{"class":2930,"line":3067},[2928,20424,5984],{"class":3156},[2928,20426,20427],{"class":2930,"line":3077},[2928,20428,20429],{"class":2953},"      `\n",[2928,20431,20432,20435,20437,20440,20442,20444,20446],{"class":2930,"line":3110},[2928,20433,20434],{"class":2953},"    },",[2928,20436,3174],{"class":2953},[2928,20438,20439],{"class":2970}," nitro",[2928,20441,2974],{"class":2953},[2928,20443,3355],{"class":2977},[2928,20445,3702],{"class":2953},[2928,20447,2990],{"class":2970},[2928,20449,20450],{"class":2930,"line":3116},[2928,20451,3113],{"class":2953},[2928,20453,20454,20456],{"class":2930,"line":6687},[2928,20455,2987],{"class":2953},[2928,20457,2990],{"class":2949},[2885,20459,20461],{"id":20460},"️-nitro-v211-upgrade","⚙️ Nitro v2.11 Upgrade",[2896,20463,20464],{},"We've upgraded to Nitro v2.11. There are so many improvements - more than I can cover in these brief release notes.",[2896,20466,20467,20468,3088],{},"👉 Check out all the details in the ",[2910,20469,20472],{"href":20470,"rel":20471},"https:\u002F\u002Fgithub.com\u002Fnitrojs\u002Fnitro\u002Freleases\u002Ftag\u002Fv2.11.0",[2914],"Nitro v2.11.0 release notes",[2885,20474,10641,20476,20478],{"id":20475},"new-unjs-major-versions",[2890,20477,9723],{}," Major Versions",[2896,20480,20481],{},"This release includes several major version upgrades from the unjs ecosystem, focused on performance and smaller bundle sizes through ESM-only distributions:",[4346,20483,20484,20487,20490,20493,20496,20499,20502,20505,20508,20511],{},[3844,20485,20486],{},"unenv upgraded to v2 (full rewrite)",[3844,20488,20489],{},"db0 upgraded to v0.3 (ESM-only, native node:sql, improvements)",[3844,20491,20492],{},"ohash upgraded to v2 (ESM-only, native node:crypto support, much faster)",[3844,20494,20495],{},"untyped upgraded to v2 (ESM-only, smaller install size)",[3844,20497,20498],{},"unimport upgraded to v4 (improvements)",[3844,20500,20501],{},"c12 upgraded to v3 (ESM-only)",[3844,20503,20504],{},"pathe upgraded to v2 (ESM-only)",[3844,20506,20507],{},"cookie-es upgraded to v2 (ESM-only)",[3844,20509,20510],{},"esbuild upgraded to v0.25",[3844,20512,20513],{},"chokidar upgraded to v4",[2885,20515,6103],{"id":6102},[2896,20517,13730],{},[2918,20519,20520],{"className":4437,"code":14481,"language":4439,"meta":2924,"style":2924},[2890,20521,20522],{"__ignoreMap":2924},[2928,20523,20524,20526,20528,20530],{"class":2930,"line":2931},[2928,20525,4446],{"class":3448},[2928,20527,14490],{"class":3156},[2928,20529,4452],{"class":3156},[2928,20531,4455],{"class":3156},[2896,20533,14497],{},[2885,20535,13763],{"id":4472},[3233,20537,20539],{"icon":4477,"target":4478,"to":20538},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv3.16.0",[2896,20540,4481,20541,3088],{},[2890,20542,20543],{},"v3.16.0",[2896,20545,15100],{},[2896,20547,20548],{},"I'm aware there have been lots of very significant changes in this release - please don't hesitate to let us know if you have any feedback or issues! 🙏",[4489,20550,20551],{},"html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}",{"title":2924,"searchDepth":2938,"depth":2938,"links":20553},[20554,20555,20556,20557,20558,20559,20560,20561,20562,20563,20564,20565,20566,20568,20569],{"id":19194,"depth":2938,"text":19195},{"id":19272,"depth":2938,"text":19273},{"id":19423,"depth":2938,"text":19424},{"id":14386,"depth":2938,"text":14387},{"id":19548,"depth":2938,"text":19549},{"id":19759,"depth":2938,"text":19760},{"id":19831,"depth":2938,"text":19832},{"id":19996,"depth":2938,"text":19997},{"id":20187,"depth":2938,"text":20188},{"id":20272,"depth":2938,"text":20273},{"id":14258,"depth":2938,"text":20312},{"id":20460,"depth":2938,"text":20461},{"id":20475,"depth":2938,"text":20567},"📦 New unjs Major Versions",{"id":6102,"depth":2938,"text":6103},{"id":4472,"depth":2938,"text":13763},"2025-03-07","Nuxt 3.16 is out - packed with features and performance improvements","\u002Fassets\u002Fblog\u002Fv3.16.png",{},"\u002Fblog\u002Fv3-16",{"title":19183,"description":20571},"blog\u002F31.v3-16","7RbyQ8--xu4bNs3z3AmTRNdEzpseWOTJEmLjYoq-6oo",{"id":20579,"title":20580,"authors":20581,"body":20584,"category":4517,"date":20961,"description":20962,"draft":108,"extension":4520,"image":20963,"meta":20964,"navigation":108,"path":20965,"seo":20966,"stem":20967,"tags":6,"__hash__":20968},"blog\u002Fblog\u002F30.v3-15.md","Nuxt 3.15",[20582],{"name":2877,"avatar":20583,"to":2880},{"src":2879},{"type":2882,"value":20585,"toc":20948},[20586,20589,20593,20601,20605,20619,20622,20630,20634,20637,20646,20652,20658,20681,20725,20729,20740,20743,20747,20763,20774,20873,20876,20884,20895,20899,20907,20909,20911,20927,20930,20932,20940,20942,20945],[2896,20587,20588],{},"We're continuing to work on the release of Nitro v3, Nuxt v4 and more. But we're delighted to ship Nuxt v3.15 (just) in time for Christmas.",[2885,20590,20592],{"id":20591},"️-snowfall","❄️ Snowfall!",[2896,20594,20595,20596,2916],{},"Happy holidays! You'll notice when you start Nuxt that (if you're in the Northern Hemisphere) there's some snow on the loading screen (",[2910,20597,20600],{"href":20598,"rel":20599},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F29871",[2914],"#29871",[2885,20602,20604],{"id":20603},"️-vite-6-included","⚡️ Vite 6 included",[2896,20606,20607,20608,20613,20614,20618],{},"Nuxt v3.15 includes ",[2910,20609,20612],{"href":20610,"rel":20611},"https:\u002F\u002Fvite.dev\u002Fblog\u002Fannouncing-vite6",[2914],"Vite 6"," for the first time. Although this is a major version, we expect that this won't be a breaking change for Nuxt users (see full ",[2910,20615,9923],{"href":20616,"rel":20617},"https:\u002F\u002Fvite.dev\u002Fguide\u002Fmigration.html",[2914],"). However, please take care if you have dependencies that rely on a particular Vite version.",[2896,20620,20621],{},"One of the most significant changes with Vite 6 is the new Environment API, which we hope to use in conjunction with Nitro to improve the server dev environment. Watch this space!",[2896,20623,20624,20625,3088],{},"You can read the full list of changes in the ",[2910,20626,20629],{"href":20627,"rel":20628},"https:\u002F\u002Fgithub.com\u002Fvitejs\u002Fvite\u002Fblob\u002Fmain\u002Fpackages\u002Fvite\u002FCHANGELOG.md#600-2024-11-26",[2914],"Vite 6 changelog",[2885,20631,20633],{"id":20632},"chromium-devtools-improvements","🪵 Chromium devtools improvements",[2896,20635,20636],{},"We talk a lot about the Nuxt DevTools, but v3.15 ships with better integration in dev mode for Chromium-based browser devtools.",[2896,20638,20639,20640,20645],{},"We now use the ",[2910,20641,20644],{"href":20642,"rel":20643},"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fdevtools\u002Fperformance\u002Fextension",[2914],"Chrome DevTools extensibility API"," to add support for printing nuxt hook timings in the browser devtools performance panel.",[2896,20647,20648],{},[4183,20649],{"alt":20650,"src":20651},"CleanShot 2024-11-14 at 15 05 22@2x","https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F57525027-750a-462f-b713-398302aec0cd",[2885,20653,20655,20656],{"id":20654},"️-navigation-mode-for-callonce","🗺️ Navigation mode for ",[2890,20657,642],{},[2896,20659,20660,20662,20663,20666,20667,20670,20671,20674,20675,20680],{},[2890,20661,642],{}," is a built-in Nuxt composable for running code only once. For example, if the code runs on the server it won't run again on the client. But sometimes you do want code to run on ",[10484,20664,20665],{},"every navigation"," - just avoid the initial server\u002Fclient double load. For this, there's a new ",[2890,20668,20669],{},"mode: 'navigation'"," option that will run the code only once ",[10484,20672,20673],{},"per navigation",". (See ",[2910,20676,20679],{"href":20677,"rel":20678},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F30260",[2914],"#30260"," for more info.)",[2918,20682,20684],{"className":2920,"code":20683,"language":2923,"meta":2924,"style":2924},"await callOnce(() => counter.value++, { mode: 'navigation' })\n",[2890,20685,20686],{"__ignoreMap":2924},[2928,20687,20688,20690,20693,20695,20697,20699,20702,20704,20706,20709,20711,20713,20715,20717,20719,20721,20723],{"class":2930,"line":2931},[2928,20689,16363],{"class":2941},[2928,20691,20692],{"class":2957}," callOnce",[2928,20694,2961],{"class":2949},[2928,20696,3647],{"class":2953},[2928,20698,3030],{"class":2945},[2928,20700,20701],{"class":2949}," counter",[2928,20703,3088],{"class":2953},[2928,20705,9263],{"class":2949},[2928,20707,20708],{"class":2953},"++,",[2928,20710,3174],{"class":2953},[2928,20712,16239],{"class":2970},[2928,20714,2974],{"class":2953},[2928,20716,3329],{"class":2953},[2928,20718,11522],{"class":3156},[2928,20720,3197],{"class":2953},[2928,20722,3702],{"class":2953},[2928,20724,2990],{"class":2949},[2885,20726,20728],{"id":20727},"hmr-for-templates-pages-page-metadata","🥵 HMR for templates, pages + page metadata",[2896,20730,20731,20732,20734,20735,2916],{},"We now implement hot module reloading for Nuxt's virtual files (like routes, plugins, generated files) as well as for the content of page metadata (within a ",[2890,20733,678],{}," macro) (",[2910,20736,20739],{"href":20737,"rel":20738},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F30113",[2914],"#30113",[2896,20741,20742],{},"This should mean you have a faster experience in development, as well as not needing to reload the page when making changes to your routes.",[2885,20744,20746],{"id":20745},"page-meta-enhancements","📋 Page meta enhancements",[2896,20748,20749,20750,3248,20753,20758,20759,20762],{},"We now support extracting extra page meta keys (likely used by module authors) via ",[2890,20751,20752],{},"experimental.extraPageMetaExtractionKeys",[2910,20754,20757],{"href":20755,"rel":20756},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F30015",[2914],"#30015","). This enables module authors to use this information at build time, in the ",[2890,20760,20761],{},"pages:resolved"," hook.",[2896,20764,20765,20766,3248,20768,20773],{},"We also now support local functions in ",[2890,20767,678],{},[2910,20769,20772],{"href":20770,"rel":20771},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F30241",[2914],"#30241","). This means you can do something like this:",[2918,20775,20777],{"className":2920,"code":20776,"language":2923,"meta":2924,"style":2924},"function validateIdParam(route) {\n  return !!(route.params.id && !isNaN(Number(route.params.id)))\n}\n\ndefinePageMeta({\n  validate: validateIdParam,\n})\n",[2890,20778,20779,20794,20840,20844,20848,20856,20867],{"__ignoreMap":2924},[2928,20780,20781,20783,20786,20788,20790,20792],{"class":2930,"line":2931},[2928,20782,20060],{"class":2945},[2928,20784,20785],{"class":2957}," validateIdParam",[2928,20787,2961],{"class":2953},[2928,20789,10832],{"class":3023},[2928,20791,3027],{"class":2953},[2928,20793,3033],{"class":2953},[2928,20795,20796,20798,20801,20803,20805,20807,20809,20811,20813,20816,20818,20821,20823,20826,20828,20830,20832,20834,20836,20838],{"class":2930,"line":2938},[2928,20797,3062],{"class":2941},[2928,20799,20800],{"class":2953}," !!",[2928,20802,2961],{"class":2970},[2928,20804,10832],{"class":2949},[2928,20806,3088],{"class":2953},[2928,20808,10837],{"class":2949},[2928,20810,3088],{"class":2953},[2928,20812,16010],{"class":2949},[2928,20814,20815],{"class":2953}," &&",[2928,20817,5140],{"class":2953},[2928,20819,20820],{"class":2957},"isNaN",[2928,20822,2961],{"class":2970},[2928,20824,20825],{"class":2957},"Number",[2928,20827,2961],{"class":2970},[2928,20829,10832],{"class":2949},[2928,20831,3088],{"class":2953},[2928,20833,10837],{"class":2949},[2928,20835,3088],{"class":2953},[2928,20837,16010],{"class":2949},[2928,20839,6898],{"class":2970},[2928,20841,20842],{"class":2930,"line":2967},[2928,20843,3764],{"class":2953},[2928,20845,20846],{"class":2930,"line":2984},[2928,20847,2996],{"emptyLinePlaceholder":1196},[2928,20849,20850,20852,20854],{"class":2930,"line":2993},[2928,20851,678],{"class":2957},[2928,20853,2961],{"class":2949},[2928,20855,2964],{"class":2953},[2928,20857,20858,20861,20863,20865],{"class":2930,"line":2999},[2928,20859,20860],{"class":2970},"  validate",[2928,20862,2974],{"class":2953},[2928,20864,20785],{"class":2949},[2928,20866,2981],{"class":2953},[2928,20868,20869,20871],{"class":2930,"line":3005},[2928,20870,2987],{"class":2953},[2928,20872,2990],{"class":2949},[2885,20874,20875],{"id":4394},"🔥 Performance improvements",[2896,20877,20878,20879,2916],{},"We now preload the app manifest in the browser if it will be used when hydrating the app (",[2910,20880,20883],{"href":20881,"rel":20882},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F30017",[2914],"#30017",[2896,20885,20886,20887,3248,20890,2916],{},"We'll also tree shake vue-router's hash mode history out of your bundle if we can - specifically, if you haven't customised your ",[2890,20888,20889],{},"app\u002Frouter.options.ts",[2910,20891,20894],{"href":20892,"rel":20893},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F30297",[2914],"#30297",[2885,20896,20898],{"id":20897},"v4-updates","🐣 v4 updates",[2896,20900,20901,20902,2916],{},"If A few more changes shipped for the new defaults for v4, including only inlining styles by default for Vue components (",[2910,20903,20906],{"href":20904,"rel":20905},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F30305",[2914],"#30305",[2885,20908,6103],{"id":6102},[2896,20910,13730],{},[2918,20912,20914],{"className":4437,"code":20913,"language":4439,"meta":2924,"style":2924},"npx nuxi@latest upgrade --force\n",[2890,20915,20916],{"__ignoreMap":2924},[2928,20917,20918,20920,20922,20924],{"class":2930,"line":2931},[2928,20919,4446],{"class":3448},[2928,20921,14490],{"class":3156},[2928,20923,4452],{"class":3156},[2928,20925,20926],{"class":3156}," --force\n",[2896,20928,20929],{},"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.",[2885,20931,13763],{"id":4472},[3233,20933,20935],{"color":8520,"icon":4477,"target":4478,"to":20934},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv3.15.0",[2896,20936,4481,20937,3088],{},[2890,20938,20939],{},"v3.15.0",[2896,20941,15100],{},[2896,20943,20944],{},"Don't hesitate to let us know if you have any feedback or issues! 🙏",[4489,20946,20947],{},"html pre.shiki code .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}",{"title":2924,"searchDepth":2938,"depth":2938,"links":20949},[20950,20951,20952,20953,20955,20956,20957,20958,20959,20960],{"id":20591,"depth":2938,"text":20592},{"id":20603,"depth":2938,"text":20604},{"id":20632,"depth":2938,"text":20633},{"id":20654,"depth":2938,"text":20954},"🗺️ Navigation mode for callOnce",{"id":20727,"depth":2938,"text":20728},{"id":20745,"depth":2938,"text":20746},{"id":4394,"depth":2938,"text":20875},{"id":20897,"depth":2938,"text":20898},{"id":6102,"depth":2938,"text":6103},{"id":4472,"depth":2938,"text":13763},"2024-12-24","Nuxt 3.15 is out - with Vite 6, better HMR and faster performance","\u002Fassets\u002Fblog\u002Fv3.15.png",{},"\u002Fblog\u002Fv3-15",{"title":20580,"description":20962},"blog\u002F30.v3-15","0bI3JqobXv1BAZthn_5OMKy4pM1792AiYUw3MBXfLr0",{"id":20970,"title":2817,"authors":20971,"body":20978,"category":4517,"date":21552,"description":21553,"draft":108,"extension":4520,"image":21554,"meta":21555,"navigation":1196,"path":2818,"seo":21556,"stem":2819,"tags":6,"__hash__":21557},"blog\u002Fblog\u002F29.nuxt-icon-v1-0.md",[20972],{"name":20973,"avatar":20974,"to":20976,"twitter":20977},"Anthony Fu",{"src":20975},"https:\u002F\u002Fgithub.com\u002Fantfu.png","https:\u002F\u002Fgithub.com\u002Fantfu","antfu7",{"type":2882,"value":20979,"toc":21533},[20980,20983,20990,20993,20995,20999,21002,21009,21012,21050,21057,21060,21062,21066,21069,21076,21082,21088,21095,21098,21100,21104,21107,21110,21113,21120,21123,21125,21129,21132,21135,21138,21145,21148,21151,21153,21157,21165,21168,21175,21178,21180,21184,21195,21206,21213,21216,21218,21222,21236,21239,21246,21253,21256,21258,21262,21273,21304,21311,21314,21317,21320,21323,21325,21329,21332,21336,21343,21346,21353,21355,21359,21362,21369,21376,21379,21386,21388,21392,21395,21423,21430,21433,21435,21439,21442,21445,21463,21477,21518,21526,21530],[2896,20981,20982],{},"Icons are essential to modern web interfaces. They simplify navigation, clarify functionality, and enhance visual appeal. However, implementing icons efficiently involves challenges like scalability, dynamic loading, and server-side rendering (SSR) compatibility.",[2896,20984,20985,20986,20989],{},"To address these challenges, we developed ",[2900,20987,20988],{},"Nuxt Icon v1"," — a versatile, modern solution tailored for Nuxt projects. By building on established icon rendering techniques and introducing novel approaches, Nuxt Icon bridges the gap between performance, usability, and flexibility.",[2896,20991,20992],{},"In this post, we’ll explore the challenges of icon rendering, the evolution of icon solutions, and how Nuxt Icon combines the best aspects of these methods to offer a seamless experience for developers.",[12207,20994],{},[2885,20996,20998],{"id":20997},"why-are-icons-challenging","Why Are Icons Challenging?",[2896,21000,21001],{},"At first glance, icons seem simple - they are essentially just tiny image elements that enhance a user interface, providing visual cues and enhancing usability.",[2896,21003,21004],{},[4183,21005],{"alt":21006,"className":21007,"src":21008},"Icons Showcases",[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fnuxt-icon\u002Ficons-showcase.png",[2896,21010,21011],{},"However, from an engineering perspective, they pose several challenges. Ideal icons should be:",[4346,21013,21014,21020,21026,21032,21038,21044],{},[3844,21015,21016,21019],{},[2900,21017,21018],{},"Colorable",": Adaptable to themes and color schemes.",[3844,21021,21022,21025],{},[2900,21023,21024],{},"Scalable",": Render crisply at various sizes and resolutions.",[3844,21027,21028,21031],{},[2900,21029,21030],{},"Manageable",": Icon sets can contain hundreds or thousands of icons.",[3844,21033,21034,21037],{},[2900,21035,21036],{},"Efficiently Bundled",": Minimize network requests.",[3844,21039,21040,21043],{},[2900,21041,21042],{},"Optimally Loaded",": Affect application performance and user experience.",[3844,21045,21046,21049],{},[2900,21047,21048],{},"Dynamic",": Support dynamic loading for user-generated or runtime-defined icons.",[2896,21051,21052],{},[4183,21053],{"alt":21054,"className":21055,"src":21056},"Engineering Challenges with Icons",[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fnuxt-icon\u002Fchallenges.png",[2896,21058,21059],{},"Meeting all these needs requires a carefully engineered solution that balances trade-offs. Let’s explore the evolution of icon solutions and how they address these challenges.",[12207,21061],{},[2885,21063,21065],{"id":21064},"a-journey-through-icon-solutions","A Journey Through Icon Solutions",[2896,21067,21068],{},"Over the years, developers have experimented with various techniques to render icons efficiently. Let’s explore the evolution of these solutions and the challenges they faced.",[4543,21070,21072,21073,21075],{"id":21071},"_1-img-tags-the-early-days","1. ",[2890,21074,9185],{}," Tags: The Early Days",[2896,21077,21078,21079,21081],{},"The most straightforward solution: using the ",[2890,21080,9185],{}," tag. This was the go-to method in the early days of the web.",[2896,21083,21084,21085,21087],{},"You'd host your image assets and use an ",[2890,21086,9185],{}," tag to link to that image, specifying its width and height. It's simple, requires no setup or runtime dependencies, and works natively in browsers.",[2896,21089,21090],{},[4183,21091],{"alt":21092,"className":21093,"src":21094},"Solution 1",[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fnuxt-icon\u002Fsolution-1.png",[2896,21096,21097],{},"However, there are drawbacks. Images can become pixelated, lack color control, and don't scale well. Each icon being a separate image file results in many network requests, which could be slow, especially back in the days of HTTP 1.1. Before the image is downloaded, you might see a flash of invisible icons, which can hurt the user experience. Lastly, it's quite verbose to write, as you need to specify the full path of the image and manage the relative paths. It explains why this approach is rarely used on modern websites today.",[12207,21099],{},[4543,21101,21103],{"id":21102},"_2-web-fonts-icon-fonts","2. Web Fonts: Icon Fonts",[2896,21105,21106],{},"As the next step in icon evolution, web fonts emerged as a popular solution. Fonts are inherently vectorized and colorable, making them a natural fit for icons.",[2896,21108,21109],{},"Iconset providers typically compile their icons into a special font file, assigning a unique Unicode character to each icon. This is accompanied by a CSS file that maps these Unicode values to specific icon classes.",[2896,21111,21112],{},"The advantages of this approach are clear: it's easy to use, colorable, scalable, and requires only a single request to load all icons.",[2896,21114,21115],{},[4183,21116],{"alt":21117,"className":21118,"src":21119},"Solution 2",[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fnuxt-icon\u002Fsolution-2.png",[2896,21121,21122],{},"However, there are some downsides. Loading a large font file upfront can be slow, and customizing the icon set is challenging. Additionally, you might experience a flash of invisible icons before the font loads, as there are no fallback fonts available.",[12207,21124],{},[4543,21126,21128],{"id":21127},"_3-inline-svgs-component-based-icons","3. Inline SVGs: Component-Based Icons",[2896,21130,21131],{},"With the advent of modern frontend frameworks, reusing HTML elements has become significantly easier. This led to the idea of directly inlining SVG tags as components.",[2896,21133,21134],{},"To support this approach, many icon sets provide packages with wrappers tailored for each framework. For instance, MDI icons use a shared component and pass icon data as props, while Tabler icons offer a dedicated component for each icon.",[2896,21136,21137],{},"Since these are SVGs, they are inherently colorable, scalable, and retain all the features of SVGs. Typically, icons are bundled into the app, eliminating additional network requests and ensuring they are SSR-friendly and visible on the first render.",[2896,21139,21140],{},[4183,21141],{"alt":21142,"className":21143,"src":21144},"Solution 3",[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fnuxt-icon\u002Fsolution-3.png",[2896,21146,21147],{},"However, this method has its downsides. It generates numerous SVG DOM elements, which can impact performance when many icons are used. It also increases the bundle size and requires specific integration support for each icon set and framework combination, leading to a degree of vendor lock-in. This makes it challenging to switch to a different icon set or framework.",[2896,21149,21150],{},"Despite these trade-offs, this approach is widely adopted today, as switching icon sets or frameworks is not a frequent necessity for most projects.",[12207,21152],{},[4543,21154,21156],{"id":21155},"_4-iconify-runtime-dynamic-api-access","4. Iconify Runtime: Dynamic API Access",[2896,21158,21159,21164],{},[2910,21160,21163],{"href":21161,"rel":21162},"https:\u002F\u002Ficonify.design\u002F",[2914],"Iconify"," revolutionized icon usage by aggregating over 200,000 icons across 100+ collections. Its runtime solution dynamically fetched icons via an API, enabling dynamic access to any icon without pre-bundling.",[2896,21166,21167],{},"This is a great fit for rendering icons from user-provided content or other dynamic content that you don't know at build time. And it's super easy to set up, as you can even use it as a CDN without any build tools.",[2896,21169,21170],{},[4183,21171],{"alt":21172,"className":21173,"src":21174},"Solution 4",[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fnuxt-icon\u002Fsolution-4.png",[2896,21176,21177],{},"While this method offers great flexibility, it does come with some trade-offs. It introduces runtime dependencies, meaning icons will only render after JavaScript is loaded and the icon data is fetched. This approach also poses challenges for server-side rendering (SSR) and caching layers, such as those used in Progressive Web Apps (PWAs).",[12207,21179],{},[4543,21181,21183],{"id":21182},"_5-on-demand-component-icons","5. On-Demand Component Icons",[2896,21185,21186,21187,21194],{},"With the unified interface from Iconify and Vite's on-demand approach, we developed ",[2910,21188,21191],{"href":21189,"rel":21190},"https:\u002F\u002Fgithub.com\u002Funplugin\u002Funplugin-icons",[2914],[2890,21192,21193],{},"unplugin-icons",". This tool allows you to import any icons as components on-demand.",[2896,21196,21197,21198,21205],{},"As an ",[2910,21199,21202],{"href":21200,"rel":21201},"https:\u002F\u002Fgithub.com\u002Funjs\u002Funplugin",[2914],[2890,21203,21204],{},"unplugin",", it supports all popular build tools, including Vite, webpack, and rspack. We provide compilers for popular frameworks like Vue, React, Svelte, and Solid. With Iconify, you can use any icon across any framework, minimizing vendor lock-in.",[2896,21207,21208],{},[4183,21209],{"alt":21210,"className":21211,"src":21212},"Solution 5",[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fnuxt-icon\u002Fsolution-5.png",[2896,21214,21215],{},"While this technique shares the same pros and cons as previous component icon solutions, the integration with build tools allows us to serve the full Iconify collection while only shipping the icons you actually use. However, runtime concerns like DOM element management still persist.",[12207,21217],{},[4543,21219,21221],{"id":21220},"_6-pure-css-icons","6. Pure CSS Icons",[2896,21223,21224,21225,21230,21231,3088],{},"As a side-effect of working on ",[2910,21226,21229],{"href":21227,"rel":21228},"https:\u002F\u002Funocss.dev\u002F",[2914],"UnoCSS",", we discovered the potential of embedding icons entirely in CSS, leading to the innovative solution of ",[2910,21232,21235],{"href":21233,"rel":21234},"https:\u002F\u002Fantfu.me\u002Fposts\u002Ficons-in-pure-css",[2914],"Pure CSS Icons",[2896,21237,21238],{},"This method involves inlining SVG icons as data URLs and providing a single class to display the icons. With some tweaks, these icons become colorable, scalable, and even capable of displaying SVG animations.",[2896,21240,21241,21242,21245],{},"Browsers can cache the CSS rules, and each icon requires only ",[2900,21243,21244],{},"one DOM element"," to render. This approach ships the icons in a single CSS file with no additional requests. Since it's pure CSS, the icons display along with the rest of your UI, require zero runtime, and work naturally with SSR—your server doesn't need any extra work on the server side.",[2896,21247,21248],{},[4183,21249],{"alt":21250,"className":21251,"src":21252},"Solution 6",[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fnuxt-icon\u002Fsolution-6.png",[2896,21254,21255],{},"The only downsides are the lack of full customization for elements inside the SVG and the need to bundle icons at build-time, which isn't dynamic.",[12207,21257],{},[2885,21259,21261],{"id":21260},"the-challenges-to-integrate-in-nuxt","The Challenges to Integrate in Nuxt",[2896,21263,21264,21265,2892,21268,21272],{},"While I would say that the ",[2910,21266,21235],{"href":21267},"#_6-pure-css-icons",[2910,21269,21271],{"href":21270},"#_5-on-demand-component-icons","On-demand Component Icons"," would be pretty sufficient for most of the static usages, Nuxt as a full featured framework, has a bit more requirements to integrate icons efficiently:",[4346,21274,21275,21281,21292,21298],{},[3844,21276,21277,21280],{},[2900,21278,21279],{},"SSR\u002FCSR",": Nuxt works in both server-side rendering (SSR) and client-side rendering (CSR) modes. We care a lot about the end user experience, and we want to ensure that icons are rendered instantly without flickers.",[3844,21282,21283,21286,21287,21291],{},[2900,21284,21285],{},"Dynamic Icons",": In integrations like ",[2910,21288,8142],{"href":21289,"rel":21290},"https:\u002F\u002Fcontent.nuxt.com\u002F",[2914],", the content can be provided at runtime or from external sources, which we are not aware at build time. We want to ensure we have the capability to integrate with those cases well.",[3844,21293,21294,21297],{},[2900,21295,21296],{},"Performance",": We want to ensure that the icons are bundled efficiently, and the loading of icons is optimized for the best performance.",[3844,21299,21300,21303],{},[2900,21301,21302],{},"Custom Icons",": While Iconify provides a wide range of icons for selection, we also aware it's pretty common for projects to have their own icon sets, or wanted to use paid icons that are not available in Iconify. Supporting custom icons is crucial for our users.",[2896,21305,21306],{},[4183,21307],{"alt":21308,"className":21309,"src":21310},"Nuxt Integration Challenges and Solutions",[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fnuxt-icon\u002Fnuxt-icon-challenges.png",[2896,21312,21313],{},"With these requirements in mind, let's revisit the solutions we discussed earlier and see how they stack up.",[2896,21315,21316],{},"For dynamic icons, the Iconify Runtime stands out as a viable option. It allows for dynamic fetching of icons, making it suitable for content that isn't known at build time. However, it has its drawbacks. The reliance on runtime dependencies means it doesn't integrate seamlessly with SSR, and it doesn't support custom icons since the requests are directed to Iconify's servers, which don't have access to our local icon setup.",[2896,21318,21319],{},"Conversely, Pure CSS Icons offer excellent performance and SSR compatibility. They ensure icons are rendered instantly without flickers and are bundled efficiently. However, they fall short when it comes to dynamic icons, as they need to be bundled at build time and lack the flexibility to adapt to runtime content changes.",[2896,21321,21322],{},"Balancing these trade-offs is indeed challenging. So, why not leverage the strengths of both approaches? By understanding these trade-offs, we can better appreciate the balanced solution that Nuxt Icon v1 offers.",[12207,21324],{},[2885,21326,21328],{"id":21327},"introducing-nuxt-icon-v1-the-balance-of-both-worlds","Introducing Nuxt Icon v1: The Balance of Both Worlds",[2896,21330,21331],{},"With the flexibility of the Nuxt Module system, Nuxt Icon combines the best of both worlds: the instant rendering of CSS icons and the dynamic fetching of Iconify icons. This dual approach provides a versatile, modern, and customizable icon solution that seamlessly adapts to your project's needs.",[4543,21333,21335],{"id":21334},"dual-rendering-modes","Dual Rendering Modes",[2896,21337,21338,21339,21342],{},"To address the trade-offs in rendering approaches, Nuxt Icon introduces a versatile ",[2890,21340,21341],{},"\u003CIcon>"," component that supports both CSS and SVG modes, both of which are SSR-friendly. Depending on your customization needs, you can switch between these modes for each icon.",[2896,21344,21345],{},"In CSS mode, icons are included in the CSS during SSR, ensuring they render instantly without any runtime cost. In SVG mode, icons are inlined as HTML during SSR, providing the same immediate rendering benefits. Both approaches ensure that icons appear on the initial screen without any delay, offering a seamless user experience.",[2896,21347,21348],{},[4183,21349],{"alt":21350,"className":21351,"src":21352},"Dual rendering mode",[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fnuxt-icon\u002Fdual-rendering-modes.png",[12207,21354],{},[4543,21356,21358],{"id":21357},"icon-bundles","Icon Bundles",[2896,21360,21361],{},"Dynamic icons present unique challenges, especially when it comes to loading them efficiently. To address this, we leverage Iconify's API, which allows us to serve any icon on demand via network requests. However, relying solely on this API can introduce delays, especially if the servers are geographically distant from your users.",[2896,21363,21364,21365,21368],{},"To mitigate this, we introduced the concept of Icon Bundles. We can bundle frequently used icons directly into the ",[2890,21366,21367],{},"Client Bundle",". This ensures that these icons render instantly without additional network requests. However, bundling all possible icons isn't feasible due to the potential increase in bundle size.",[2896,21370,21371,21372,21375],{},"Given that Nuxt is a full-stack framework, we can strike a balance by introducing a ",[2890,21373,21374],{},"Server Bundle",". On the server side, bundle size is less of an issue, allowing us to include a more extensive set of icons. During SSR, these icons can be fetched quickly and sent to the client as needed. This setup ensures high performance for commonly used icons while still providing the flexibility to serve any icon from Iconify as a fallback.",[2896,21377,21378],{},"By combining client-side bundling for static icons and server-side bundling for dynamic icons, we achieve an optimal balance between performance and flexibility.",[2896,21380,21381],{},[4183,21382],{"alt":21383,"className":21384,"src":21385},"Icon Bundles in Nuxt Icons",[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fnuxt-icon\u002Fbundles.png",[12207,21387],{},[4543,21389,21391],{"id":21390},"data-flow","Data Flow",[2896,21393,21394],{},"Here is a data flow diagram illustrating how Nuxt Icon requests icon data:",[3841,21396,21397,21405,21411,21417,21420],{},[3844,21398,21399,21400,21402,21403,3088],{},"You use the ",[2890,21401,21341],{}," component and provide the icon ",[2890,21404,13327],{},[3844,21406,21407,21408,21410],{},"Nuxt Icon will first check if the icon is available in the ",[2890,21409,21367],{},", or the SSR payload (icons that are known at SSR will be presented in the payload). If so, the icon will be rendered instantly.",[3844,21412,21413,21414,21416],{},"If the icon is not available on the client side, Nuxt Icon will fetch the icon data from the server API shipped along with your Nuxt app. Inside the server endpoint, it will query from the ",[2890,21415,21374],{}," to see if the icon is available.",[3844,21418,21419],{},"Between that, there are multiple cache systems involved. Server endpoint cache, HTTP cache, and client-side cache to ensure the icon is fetched efficiently and quickly. Since icon data does not change frequently, we use hard cache strategies to ensure the best performance.",[3844,21421,21422],{},"When the icon is unknown to both the client and server (dynamic icons), the server endpoint will fallback to the Iconify API to fetch the icon data. Since the server endpoint is cached, the Iconify API will be called only once for each unique icon regardless of how many clients are requesting it, to save resources on both sides.",[2896,21424,21425],{},[4183,21426],{"alt":21427,"className":21428,"src":21429},"Nuxt Icon Requesting Data flow",[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fnuxt-icon\u002Fdataflow.png",[2896,21431,21432],{},"This layered approach ensures efficient icon delivery, balancing speed and flexibility, while being as dynamic as possible. And balance out the trade-offs between each solution.",[12207,21434],{},[2885,21436,21438],{"id":21437},"try-nuxt-icon-today","Try Nuxt Icon Today",[2896,21440,21441],{},"Nuxt Icon v1 represents the culmination of years of innovation in icon rendering. Whether you’re building a dynamic app, a static website, or anything in between, Nuxt Icon adapts to your needs.",[2896,21443,21444],{},"It’s easy to add Nuxt Icon to your project by running the following command:",[2918,21446,21448],{"className":4317,"code":21447,"language":4319,"meta":2924,"style":2924},"npx nuxi module add icon\n",[2890,21449,21450],{"__ignoreMap":2924},[2928,21451,21452,21454,21456,21458,21460],{"class":2930,"line":2931},[2928,21453,4446],{"class":3448},[2928,21455,8166],{"class":3156},[2928,21457,8169],{"class":3156},[2928,21459,8172],{"class":3156},[2928,21461,21462],{"class":3156}," icon\n",[2896,21464,21465,21466,21468,21469,21471,21472,2974],{},"Then, import the ",[2890,21467,21341],{}," component in your Vue components, providing icon ",[2890,21470,13327],{}," following ",[2910,21473,21476],{"href":21474,"rel":21475},"https:\u002F\u002Ficonify.design\u002Fdocs\u002Ficons\u002Ficon-basics.html",[2914],"Iconify's conventions",[2918,21478,21480],{"className":3129,"code":21479,"language":3132,"meta":2924,"style":2924},"\u003Ctemplate>\n  \u003CIcon name=\"i-lucide-activity\" \u002F>\n\u003C\u002Ftemplate>\n",[2890,21481,21482,21490,21510],{"__ignoreMap":2924},[2928,21483,21484,21486,21488],{"class":2930,"line":2931},[2928,21485,3139],{"class":2953},[2928,21487,3521],{"class":2970},[2928,21489,3161],{"class":2953},[2928,21491,21492,21494,21497,21499,21501,21503,21506,21508],{"class":2930,"line":2938},[2928,21493,3528],{"class":2953},[2928,21495,21496],{"class":2970},"Icon",[2928,21498,13579],{"class":2945},[2928,21500,2954],{"class":2953},[2928,21502,3153],{"class":2953},[2928,21504,21505],{"class":3156},"i-lucide-activity",[2928,21507,3153],{"class":2953},[2928,21509,3534],{"class":2953},[2928,21511,21512,21514,21516],{"class":2930,"line":2967},[2928,21513,3209],{"class":2953},[2928,21515,3521],{"class":2970},[2928,21517,3161],{"class":2953},[2896,21519,21520,21521,21525],{},"Explore more with the ",[2910,21522,6009],{"href":21523,"rel":21524},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Ficon",[2914],", experiment with its features, and let us know your thoughts. We’re excited to see how Nuxt Icon transforms your projects!",[2896,21527,21528],{},[2900,21529,11293],{},[4489,21531,21532],{},"html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}",{"title":2924,"searchDepth":2938,"depth":2938,"links":21534},[21535,21536,21545,21546,21551],{"id":20997,"depth":2938,"text":20998},{"id":21064,"depth":2938,"text":21065,"children":21537},[21538,21540,21541,21542,21543,21544],{"id":21071,"depth":2967,"text":21539},"1. \u003Cimg> Tags: The Early Days",{"id":21102,"depth":2967,"text":21103},{"id":21127,"depth":2967,"text":21128},{"id":21155,"depth":2967,"text":21156},{"id":21182,"depth":2967,"text":21183},{"id":21220,"depth":2967,"text":21221},{"id":21260,"depth":2938,"text":21261},{"id":21327,"depth":2938,"text":21328,"children":21547},[21548,21549,21550],{"id":21334,"depth":2967,"text":21335},{"id":21357,"depth":2967,"text":21358},{"id":21390,"depth":2967,"text":21391},{"id":21437,"depth":2938,"text":21438},"2024-11-25","Discover Nuxt Icon v1 - a modern, versatile, and customizable icon solution for your Nuxt projects.","\u002Fassets\u002Fblog\u002Fnuxt-icon\u002Fcover.png",{},{"title":2817,"description":21553},"Y1gjY4z2H4EZfY6ci2rH-NmFTEcXB1u-mPKyc_4SrmI",{"id":21559,"title":21560,"authors":21561,"body":21564,"category":4517,"date":21858,"description":21859,"draft":108,"extension":4520,"image":21860,"meta":21861,"navigation":108,"path":21862,"seo":21863,"stem":21864,"tags":6,"__hash__":21865},"blog\u002Fblog\u002F27.v3-14.md","Nuxt 3.14",[21562],{"name":2877,"avatar":21563,"to":2880},{"src":2879},{"type":2882,"value":21565,"toc":21845},[21566,21572,21579,21591,21595,21602,21621,21627,21640,21648,21657,21660,21677,21681,21699,21703,21715,21719,21729,21776,21780,21783,21807,21809,21811,21825,21827,21830,21838,21841,21843],[2896,21567,21568,21569,21571],{},"Behind the scenes, a lot has been going on in preparation for the release of Nuxt v4 (particularly on the ",[2890,21570,9723],{}," side with preparations for Nitro v3!)",[4543,21573,21575,21576],{"id":21574},"️-faster-starts-powered-by-jiti","⚡️ Faster starts powered by ",[2890,21577,21578],{},"jiti",[2896,21580,21581,21582,21584,21585,21590],{},"Loading the nuxt config file, as well as modules and other build-time code, is now powered by ",[2890,21583,21578],{}," v2. You can see more about the release in the ",[2910,21586,21589],{"href":21587,"rel":21588},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fjiti\u002Freleases\u002Ftag\u002Fv2.0.0",[2914],"jiti v2 release notes",", but one of the most important pieces is native node esm import (where possible), which should mean a faster start. ✨",[4543,21592,21594],{"id":21593},"shared-folder-for-code-and-types-shared-with-clientserver","📂 Shared folder for code and types shared with client\u002Fserver",[2896,21596,21597,21598,21601],{},"You should never import Vue app code in your nitro code (or the other way around). But this has meant a friction point when it comes to sharing types or utilities that ",[10484,21599,21600],{},"don't"," rely on the nitro\u002Fvue contexts.",[2896,21603,21604,21605,21607,21608,21613,21614,21617,21618,21620],{},"For this, we have a new ",[2890,21606,14593],{}," folder (",[2910,21609,21612],{"href":21610,"rel":21611},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F28682",[2914],"#28682","). You can't import Vue or nitro code ",[10484,21615,21616],{},"into"," files in this folder, but it produces auto-imports (if you're using ",[2890,21619,16963],{},") which you can consume throughout the rest of your app.",[2896,21622,21623,21624,21626],{},"If needed you can use the new ",[2890,21625,5381],{}," alias which points to this folder.",[2896,21628,21629,21630,21633,21634,21636,21637,21639],{},"The shared folder is alongside your ",[2890,21631,21632],{},"server\u002F"," folder. (If you're using ",[2890,21635,16963],{},", this means it's not inside your ",[2890,21638,1195],{}," folder.)",[4543,21641,21643,21644,21647],{"id":21642},"rspack-builder","🦀 ",[2890,21645,21646],{},"rspack"," builder",[2896,21649,21650,21651,21653,21654,21656],{},"We're excited to announce a new first-class Nuxt builder for ",[2890,21652,21646],{},". It's still experimental but we've refactored the internal Nuxt virtual file system to use ",[2890,21655,21204],{}," to make this possible.",[2896,21658,21659],{},"Let us know if you like it - and feel free to raise any issues you experience with it.",[2896,21661,21662,21663,21668,21669,21672,21673,21676],{},"👉 To try it out, you can use ",[2910,21664,21667],{"href":21665,"rel":21666},"https:\u002F\u002Fgithub.com\u002Fdanielroe\u002Fnuxt-rspack-starter",[2914],"this starter"," - or just install ",[2890,21670,21671],{},"@nuxt\u002Frspack-builder"," and set ",[2890,21674,21675],{},"builder: 'rspack'"," in your nuxt config file.",[4543,21678,21680],{"id":21679},"new-composables","✨ New composables",[2896,21682,21683,21684,2892,21686,21688,21689,2892,21694,2916],{},"We have new ",[2890,21685,587],{},[2890,21687,607],{}," composables (",[2910,21690,21693],{"href":21691,"rel":21692},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27131",[2914],"#27131",[2910,21695,21698],{"href":21696,"rel":21697},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F29741",[2914],"#29741",[4543,21700,21702],{"id":21701},"new-module-utilities","🔧 New module utilities",[2896,21704,21705,21706,13445,21709,21714],{},"We now have a new ",[2890,21707,21708],{},"addServerTemplate",[2910,21710,21713],{"href":21711,"rel":21712},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F29320",[2914],"#29320",") for adding virtual files for access inside nitro runtime routes.",[4543,21716,21718],{"id":21717},"v4-changes","🚧 v4 changes",[2896,21720,21721,21722,21724,21725,3088],{},"We've merged some changes which only take effect with ",[2890,21723,16963],{},", but which ",[2910,21726,21728],{"href":21727},"\u002Fdocs\u002Fgetting-started\u002Fupgrade#testing-nuxt-4","you can opt-into earlier",[3841,21730,21731,21754],{},[3844,21732,21733,21734,21737,21738,21741,21742,21745,21746,21748,21749,2916],{},"previously, if you had a component like ",[2890,21735,21736],{},"~\u002Fcomponents\u002FApp\u002FHeader.vue"," this would be visible in your devtools as ",[2890,21739,21740],{},"\u003CHeader>",". From v4 we ensure this is ",[2890,21743,21744],{},"\u003CAppHeader>",", but it's opt-in to avoid breaking any manual ",[2890,21747,17017],{}," you might have implemented. (",[2910,21750,21753],{"href":21751,"rel":21752},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F28745",[2914],"#28745",[3844,21755,21756,21757,21759,21760,21762,21763,21765,21766,21768,21769,10579,21772,21775],{},"Nuxt scans page metadata from your files, before calling ",[2890,21758,12802],{},". But this has led to some confusing behaviour, as pages added at this point do not end up having their page metadata respected. So we now do not scan metadata before calling ",[2890,21761,12802],{},". Instead, we have a new ",[2890,21764,20761],{}," hook, which is called after ",[2890,21767,12802],{},", after all pages have been augmented with their metadata. I'd recommend opting into this by setting ",[2890,21770,21771],{},"experimental.scanPageMeta",[2890,21773,21774],{},"after-resolve",", as it solves a number of bugs.",[2885,21777,21779],{"id":21778},"️-roadmap-to-v315","🗺️ Roadmap to v3.15",[2896,21781,21782],{},"They didn't quite make it in time for v3.14 but for the next minor release you can expect (among other things):",[4346,21784,21785,21793,21801],{},[3844,21786,21787,21788,3027],{},"auto-imported directives from modules (",[2910,21789,21792],{"href":21790,"rel":21791},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F29203",[2914],"#29203",[3844,21794,21795,21796,3027],{},"'isolated' page renders (",[2910,21797,21800],{"href":21798,"rel":21799},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F29366",[2914],"#29366",[3844,21802,21803,21804,3027],{},"delayed hydration (",[2910,21805,19557],{"href":19555,"rel":21806},[2914],[2885,21808,6103],{"id":6102},[2896,21810,13730],{},[2918,21812,21813],{"className":4437,"code":20913,"language":4439,"meta":2924,"style":2924},[2890,21814,21815],{"__ignoreMap":2924},[2928,21816,21817,21819,21821,21823],{"class":2930,"line":2931},[2928,21818,4446],{"class":3448},[2928,21820,14490],{"class":3156},[2928,21822,4452],{"class":3156},[2928,21824,20926],{"class":3156},[2896,21826,20929],{},[2885,21828,21829],{"id":4472},"Full Release Notes",[3233,21831,21833],{"icon":4477,"target":4478,"to":21832},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv3.14.0",[2896,21834,4481,21835,3088],{},[2890,21836,21837],{},"v3.14.0",[2896,21839,21840],{},"A huge thank you to everyone who's been a part of this release. We have exciting things in store with our next releases! ❤️",[2896,21842,20944],{},[4489,21844,15103],{},{"title":2924,"searchDepth":2938,"depth":2938,"links":21846},[21847,21849,21850,21852,21853,21854,21855,21856,21857],{"id":21574,"depth":2967,"text":21848},"⚡️ Faster starts powered by jiti",{"id":21593,"depth":2967,"text":21594},{"id":21642,"depth":2967,"text":21851},"🦀 rspack builder",{"id":21679,"depth":2967,"text":21680},{"id":21701,"depth":2967,"text":21702},{"id":21717,"depth":2967,"text":21718},{"id":21778,"depth":2938,"text":21779},{"id":6102,"depth":2938,"text":6103},{"id":4472,"depth":2938,"text":21829},"2024-11-04","Nuxt 3.14 is out - with a new rspack builder, shared folder, and performance enhancements!","\u002Fassets\u002Fblog\u002Fv3.14.png",{},"\u002Fblog\u002Fv3-14",{"title":21560,"description":21859},"blog\u002F27.v3-14","lVhqhChST7hpMhzpFNFX12cO8k3fKpoSB3-d5pj-EHo",{"id":21867,"title":21868,"authors":21869,"body":21872,"category":4517,"date":22554,"description":22555,"draft":108,"extension":4520,"image":22556,"meta":22557,"navigation":108,"path":22558,"seo":22559,"stem":22560,"tags":6,"__hash__":22561},"blog\u002Fblog\u002F27.v3-13.md","Nuxt 3.13",[21870],{"name":2877,"avatar":21871,"to":2880},{"src":2879},{"type":2882,"value":21873,"toc":22543},[21874,21878,21881,21884,21944,21958,21965,21969,21972,21979,21983,21993,21995,22104,22107,22109,22208,22212,22222,22230,22235,22293,22297,22319,22323,22337,22341,22369,22378,22385,22402,22505,22507,22509,22523,22525,22527,22535,22538,22540],[2885,21875,21877],{"id":21876},"️-route-groups","🏘️ Route Groups",[2896,21879,21880],{},"We now support naming directories with parentheses\u002Fbrackets to organise your routes without affecting the path.",[2896,21882,21883],{},"For example:",[2918,21885,21888],{"className":4317,"code":21886,"filename":21887,"language":4319,"meta":2924,"style":2924},"-| pages\u002F\n---| index.vue\n---| (marketing)\u002F\n-----| about.vue\n-----| contact.vue\n","Directory structure",[2890,21889,21890,21899,21909,21925,21935],{"__ignoreMap":2924},[2928,21891,21892,21894,21897],{"class":2930,"line":2931},[2928,21893,5783],{"class":3448},[2928,21895,21896],{"class":2953},"|",[2928,21898,14699],{"class":3448},[2928,21900,21901,21904,21906],{"class":2930,"line":2938},[2928,21902,21903],{"class":3448},"---",[2928,21905,21896],{"class":2953},[2928,21907,21908],{"class":3448}," index.vue\n",[2928,21910,21911,21913,21915,21917,21920,21922],{"class":2930,"line":2967},[2928,21912,21903],{"class":3448},[2928,21914,21896],{"class":2953},[2928,21916,3248],{"class":2953},[2928,21918,21919],{"class":3448},"marketing",[2928,21921,3027],{"class":2953},[2928,21923,21924],{"class":3448},"\u002F\n",[2928,21926,21927,21930,21932],{"class":2930,"line":2984},[2928,21928,21929],{"class":3448},"-----",[2928,21931,21896],{"class":2953},[2928,21933,21934],{"class":3448}," about.vue\n",[2928,21936,21937,21939,21941],{"class":2930,"line":2993},[2928,21938,21929],{"class":3448},[2928,21940,21896],{"class":2953},[2928,21942,21943],{"class":3448}," contact.vue\n",[2896,21945,21946,21947,4309,21949,2892,21951,21954,21955,21957],{},"This will produce ",[2890,21948,3288],{},[2890,21950,17930],{},[2890,21952,21953],{},"\u002Fcontact"," pages in your app. The ",[2890,21956,21919],{}," group is ignored for purposes of your URL structure.",[2896,21959,11073,21960,3088],{},[2910,21961,21964],{"href":21962,"rel":21963},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F28276",[2914],"the original PR",[2885,21966,21968],{"id":21967},"️-islands-and-head-metadata","🏝️ Islands and Head Metadata",[2896,21970,21971],{},"It's now possible for server component islands to manipulate the head, such as by adding SEO metadata when rendering.",[2896,21973,11073,21974,3088],{},[2910,21975,21978],{"href":21976,"rel":21977},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27987",[2914],"#27987",[2885,21980,21982],{"id":21981},"custom-prefetch-triggers","🪝 Custom Prefetch Triggers",[2896,21984,21985,21986,3248,21988,2916],{},"We now support custom prefetch triggers for ",[2890,21987,17920],{},[2910,21989,21992],{"href":21990,"rel":21991},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27846",[2914],"#27846",[2896,21994,21883],{},[2918,21996,21999],{"className":3129,"code":21997,"filename":21998,"language":3132,"meta":2924,"style":2924},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CNuxtLink prefetch-on=\"interaction\">\n      This will prefetch when hovered or when it gains focus\n    \u003C\u002FNuxtLink>\n    \u003C!-- note that you probably don't want both enabled! -->\n    \u003CNuxtLink :prefetch-on=\"{ visibility: true, interaction: true }\">\n      This will prefetch when hovered\u002Ffocus - or when it becomes visible\n    \u003C\u002FNuxtLink>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","pages\u002Findex.vue",[2890,22000,22001,22009,22017,22037,22042,22050,22055,22075,22080,22088,22096],{"__ignoreMap":2924},[2928,22002,22003,22005,22007],{"class":2930,"line":2931},[2928,22004,3139],{"class":2953},[2928,22006,3521],{"class":2970},[2928,22008,3161],{"class":2953},[2928,22010,22011,22013,22015],{"class":2930,"line":2938},[2928,22012,3528],{"class":2953},[2928,22014,11471],{"class":2970},[2928,22016,3161],{"class":2953},[2928,22018,22019,22021,22023,22026,22028,22030,22033,22035],{"class":2930,"line":2967},[2928,22020,3557],{"class":2953},[2928,22022,17920],{"class":2970},[2928,22024,22025],{"class":2945}," prefetch-on",[2928,22027,2954],{"class":2953},[2928,22029,3153],{"class":2953},[2928,22031,22032],{"class":3156},"interaction",[2928,22034,3153],{"class":2953},[2928,22036,3161],{"class":2953},[2928,22038,22039],{"class":2930,"line":2984},[2928,22040,22041],{"class":2949},"      This will prefetch when hovered or when it gains focus\n",[2928,22043,22044,22046,22048],{"class":2930,"line":2993},[2928,22045,9484],{"class":2953},[2928,22047,17920],{"class":2970},[2928,22049,3161],{"class":2953},[2928,22051,22052],{"class":2930,"line":2999},[2928,22053,22054],{"class":2934},"    \u003C!-- note that you probably don't want both enabled! -->\n",[2928,22056,22057,22059,22061,22064,22066,22068,22071,22073],{"class":2930,"line":3005},[2928,22058,3557],{"class":2953},[2928,22060,17920],{"class":2970},[2928,22062,22063],{"class":2945}," :prefetch-on",[2928,22065,2954],{"class":2953},[2928,22067,3153],{"class":2953},[2928,22069,22070],{"class":3156},"{ visibility: true, interaction: true }",[2928,22072,3153],{"class":2953},[2928,22074,3161],{"class":2953},[2928,22076,22077],{"class":2930,"line":3036},[2928,22078,22079],{"class":2949},"      This will prefetch when hovered\u002Ffocus - or when it becomes visible\n",[2928,22081,22082,22084,22086],{"class":2930,"line":3054},[2928,22083,9484],{"class":2953},[2928,22085,17920],{"class":2970},[2928,22087,3161],{"class":2953},[2928,22089,22090,22092,22094],{"class":2930,"line":3059},[2928,22091,3567],{"class":2953},[2928,22093,11471],{"class":2970},[2928,22095,3161],{"class":2953},[2928,22097,22098,22100,22102],{"class":2930,"line":3067},[2928,22099,3209],{"class":2953},[2928,22101,3521],{"class":2970},[2928,22103,3161],{"class":2953},[2896,22105,22106],{},"It's also possible to enable\u002Fdisable these globally for your app and override them per link.",[2896,22108,21883],{},[2918,22110,22112],{"className":2920,"code":22111,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  experimental: {\n    defaults: {\n      nuxtLink: {\n        prefetch: true,\n        prefetchOn: { visibility: false, interaction: true }\n      }\n    }\n  }\n})\n",[2890,22113,22114,22126,22134,22143,22152,22163,22190,22194,22198,22202],{"__ignoreMap":2924},[2928,22115,22116,22118,22120,22122,22124],{"class":2930,"line":2931},[2928,22117,2942],{"class":2941},[2928,22119,3871],{"class":2941},[2928,22121,3874],{"class":2957},[2928,22123,2961],{"class":2949},[2928,22125,2964],{"class":2953},[2928,22127,22128,22130,22132],{"class":2930,"line":2938},[2928,22129,3883],{"class":2970},[2928,22131,2974],{"class":2953},[2928,22133,3033],{"class":2953},[2928,22135,22136,22139,22141],{"class":2930,"line":2967},[2928,22137,22138],{"class":2970},"    defaults",[2928,22140,2974],{"class":2953},[2928,22142,3033],{"class":2953},[2928,22144,22145,22148,22150],{"class":2930,"line":2984},[2928,22146,22147],{"class":2970},"      nuxtLink",[2928,22149,2974],{"class":2953},[2928,22151,3033],{"class":2953},[2928,22153,22154,22157,22159,22161],{"class":2930,"line":2993},[2928,22155,22156],{"class":2970},"        prefetch",[2928,22158,2974],{"class":2953},[2928,22160,3355],{"class":2977},[2928,22162,2981],{"class":2953},[2928,22164,22165,22168,22170,22172,22175,22177,22179,22181,22184,22186,22188],{"class":2930,"line":2999},[2928,22166,22167],{"class":2970},"        prefetchOn",[2928,22169,2974],{"class":2953},[2928,22171,3174],{"class":2953},[2928,22173,22174],{"class":2970}," visibility",[2928,22176,2974],{"class":2953},[2928,22178,2978],{"class":2977},[2928,22180,3617],{"class":2953},[2928,22182,22183],{"class":2970}," interaction",[2928,22185,2974],{"class":2953},[2928,22187,3355],{"class":2977},[2928,22189,4739],{"class":2953},[2928,22191,22192],{"class":2930,"line":3005},[2928,22193,5989],{"class":2953},[2928,22195,22196],{"class":2930,"line":3036},[2928,22197,4866],{"class":2953},[2928,22199,22200],{"class":2930,"line":3054},[2928,22201,3113],{"class":2953},[2928,22203,22204,22206],{"class":2930,"line":3059},[2928,22205,2987],{"class":2953},[2928,22207,2990],{"class":2949},[2885,22209,22211],{"id":22210},"️-better-server-source-maps","🗺️  Better Server Source Maps",[2896,22213,22214,22215,22218,22219,2916],{},"When running with ",[2890,22216,22217],{},"node --enable-source-maps",", you may have noticed that the source maps for the Vue files in your server build pointed to the Vite build output (something like ",[2890,22220,22221],{},".nuxt\u002Fdist\u002Fserver\u002F_nuxt\u002Findex-O15BBwZ3.js",[2896,22223,22224,22225,2916],{},"Now, even after your Nitro build, your server source maps will reference your original source files (",[2910,22226,22229],{"href":22227,"rel":22228},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F28521",[2914],"#28521",[2896,22231,22232,22233,2974],{},"Note that one of the easiest ways of improving your build performance is to turn off source maps if you aren't using them, which you can do easily in your ",[2890,22234,233],{},[2918,22236,22238],{"className":2920,"code":22237,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  sourcemap: {\n    server: false,\n    client: true,\n  },\n})\n",[2890,22239,22240,22252,22261,22272,22283,22287],{"__ignoreMap":2924},[2928,22241,22242,22244,22246,22248,22250],{"class":2930,"line":2931},[2928,22243,2942],{"class":2941},[2928,22245,3871],{"class":2941},[2928,22247,3874],{"class":2957},[2928,22249,2961],{"class":2949},[2928,22251,2964],{"class":2953},[2928,22253,22254,22257,22259],{"class":2930,"line":2938},[2928,22255,22256],{"class":2970},"  sourcemap",[2928,22258,2974],{"class":2953},[2928,22260,3033],{"class":2953},[2928,22262,22263,22266,22268,22270],{"class":2930,"line":2967},[2928,22264,22265],{"class":2970},"    server",[2928,22267,2974],{"class":2953},[2928,22269,2978],{"class":2977},[2928,22271,2981],{"class":2953},[2928,22273,22274,22277,22279,22281],{"class":2930,"line":2984},[2928,22275,22276],{"class":2970},"    client",[2928,22278,2974],{"class":2953},[2928,22280,3355],{"class":2977},[2928,22282,2981],{"class":2953},[2928,22284,22285],{"class":2930,"line":2993},[2928,22286,3383],{"class":2953},[2928,22288,22289,22291],{"class":2930,"line":2999},[2928,22290,2987],{"class":2953},[2928,22292,2990],{"class":2949},[2885,22294,22296],{"id":22295},"new-features-for-module-authors","🎁 New Features for Module Authors",[2896,22298,22299,22300,22303,22304,22309,22310,22313,22314,2916],{},"In the run-up to Nuxt v4, we're working on adding some key functionality for module authors, including a new ",[2890,22301,22302],{},"isNuxtMajorVersion"," utility where required (",[2910,22305,22308],{"href":22306,"rel":22307},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27579",[2914],"#27579",") and better inferred typing for merged module options using the new ",[2890,22311,22312],{},"defineNuxtModule().with()"," method (",[2910,22315,22318],{"href":22316,"rel":22317},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27520",[2914],"#27520",[2885,22320,22322],{"id":22321},"improved-dev-warnings","✨ Improved Dev Warnings",[2896,22324,22325,22326,22331,22332,2916],{},"We no longer warn when using data fetching composables in middleware (",[2910,22327,22330],{"href":22328,"rel":22329},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F28604",[2914],"#28604",") and we warn when user components' names begin with Lazy (",[2910,22333,22336],{"href":22334,"rel":22335},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27838",[2914],"#27838",[2885,22338,22340],{"id":22339},"vue-typescript-changes","🚨 Vue TypeScript Changes",[2896,22342,22343,22344,22347,22348,22350,22351,22353,22354,4309,22359,2892,22364,2916],{},"For a while, in the Vue ecosystem, we've been augmenting ",[2890,22345,22346],{},"@vue\u002Fruntime-core"," to add custom properties and more to ",[2890,22349,3132],{},". However, this inadvertently breaks the types for projects that augment ",[2890,22352,3132],{}," - which is now the officially recommended and documented way to augment these interfaces (for example, ",[2910,22355,22358],{"href":22356,"rel":22357},"https:\u002F\u002Fvuejs.org\u002Fapi\u002Futility-types.html#componentcustomproperties",[2914],"ComponentCustomProperties",[2910,22360,22363],{"href":22361,"rel":22362},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fextras\u002Fweb-components.html#web-components-and-typescript",[2914],"GlobalComponents",[2910,22365,22368],{"href":22366,"rel":22367},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Ftypescript\u002Foptions-api.html#augmenting-global-properties",[2914],"so on",[2896,22370,22371,22372,22374,22375,22377],{},"This means ",[10484,22373,6604],{}," libraries must update their code (or it will break the types of libraries that augment ",[2890,22376,3132],{}," instead).",[2896,22379,22380,22381,22384],{},"We've updated our types in Nuxt along these lines but you may experience issues with the latest ",[2890,22382,22383],{},"vue-router"," when used with libraries which haven't yet done so.",[2896,22386,22387,22388,22391,22392,10579,22397,3839],{},"Please create an issue with a reproduction - I'll happily help create a PR to resolve in the upstream library in question. Or you may be able to work around the issue by creating a ",[2890,22389,22390],{},"declarations.d.ts"," in the root of your project with the following code (",[2910,22393,22396],{"href":22394,"rel":22395},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F28542#issuecomment-2293282891",[2914],"credit",[2910,22398,22401],{"href":22399,"rel":22400},"https:\u002F\u002Fgithub.com\u002FBobbieGoede",[2914],"@BobbieGoede",[2918,22403,22405],{"className":2920,"code":22404,"filename":22390,"language":2923,"meta":2924,"style":2924},"import type {\n  ComponentCustomOptions as _ComponentCustomOptions,\n  ComponentCustomProperties as _ComponentCustomProperties,\n} from 'vue';\n\ndeclare module '@vue\u002Fruntime-core' {\n  interface ComponentCustomProperties extends _ComponentCustomProperties {}\n  interface ComponentCustomOptions extends _ComponentCustomOptions {}\n}\n",[2890,22406,22407,22415,22427,22439,22454,22458,22473,22488,22501],{"__ignoreMap":2924},[2928,22408,22409,22411,22413],{"class":2930,"line":2931},[2928,22410,5398],{"class":2941},[2928,22412,12292],{"class":2941},[2928,22414,3033],{"class":2953},[2928,22416,22417,22420,22422,22425],{"class":2930,"line":2938},[2928,22418,22419],{"class":2949},"  ComponentCustomOptions",[2928,22421,7920],{"class":2941},[2928,22423,22424],{"class":2949}," _ComponentCustomOptions",[2928,22426,2981],{"class":2953},[2928,22428,22429,22432,22434,22437],{"class":2930,"line":2967},[2928,22430,22431],{"class":2949},"  ComponentCustomProperties",[2928,22433,7920],{"class":2941},[2928,22435,22436],{"class":2949}," _ComponentCustomProperties",[2928,22438,2981],{"class":2953},[2928,22440,22441,22443,22445,22447,22449,22451],{"class":2930,"line":2984},[2928,22442,2987],{"class":2953},[2928,22444,5408],{"class":2941},[2928,22446,3329],{"class":2953},[2928,22448,3132],{"class":3156},[2928,22450,3197],{"class":2953},[2928,22452,22453],{"class":2953},";\n",[2928,22455,22456],{"class":2930,"line":2993},[2928,22457,2996],{"emptyLinePlaceholder":1196},[2928,22459,22460,22463,22465,22467,22469,22471],{"class":2930,"line":2999},[2928,22461,22462],{"class":2945},"declare",[2928,22464,8169],{"class":2945},[2928,22466,3329],{"class":2953},[2928,22468,22346],{"class":3156},[2928,22470,3197],{"class":2953},[2928,22472,3033],{"class":2953},[2928,22474,22475,22478,22481,22484,22486],{"class":2930,"line":3005},[2928,22476,22477],{"class":2945},"  interface",[2928,22479,22480],{"class":3448}," ComponentCustomProperties",[2928,22482,22483],{"class":2945}," extends",[2928,22485,22436],{"class":3448},[2928,22487,13084],{"class":2953},[2928,22489,22490,22492,22495,22497,22499],{"class":2930,"line":3036},[2928,22491,22477],{"class":2945},[2928,22493,22494],{"class":3448}," ComponentCustomOptions",[2928,22496,22483],{"class":2945},[2928,22498,22424],{"class":3448},[2928,22500,13084],{"class":2953},[2928,22502,22503],{"class":2930,"line":3054},[2928,22504,3764],{"class":2953},[2885,22506,6103],{"id":6102},[2896,22508,13730],{},[2918,22510,22511],{"className":4437,"code":20913,"language":4439,"meta":2924,"style":2924},[2890,22512,22513],{"__ignoreMap":2924},[2928,22514,22515,22517,22519,22521],{"class":2930,"line":2931},[2928,22516,4446],{"class":3448},[2928,22518,14490],{"class":3156},[2928,22520,4452],{"class":3156},[2928,22522,20926],{"class":3156},[2896,22524,20929],{},[2885,22526,21829],{"id":4472},[3233,22528,22530],{"icon":4477,"target":4478,"to":22529},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv3.13.0",[2896,22531,4481,22532,3088],{},[2890,22533,22534],{},"v3.13.0",[2896,22536,22537],{},"A huge thank you to everyone who's been a part of this release - you are the ones who make Nuxt possible. ❤️",[2896,22539,20944],{},[4489,22541,22542],{},"html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}",{"title":2924,"searchDepth":2938,"depth":2938,"links":22544},[22545,22546,22547,22548,22549,22550,22551,22552,22553],{"id":21876,"depth":2938,"text":21877},{"id":21967,"depth":2938,"text":21968},{"id":21981,"depth":2938,"text":21982},{"id":22210,"depth":2938,"text":22211},{"id":22295,"depth":2938,"text":22296},{"id":22321,"depth":2938,"text":22322},{"id":22339,"depth":2938,"text":22340},{"id":6102,"depth":2938,"text":6103},{"id":4472,"depth":2938,"text":21829},"2024-08-22","Nuxt 3.13 is out - porting back some of the new features we're building for Nuxt 4!","\u002Fassets\u002Fblog\u002Fv3.13.png",{},"\u002Fblog\u002Fv3-13",{"title":21868,"description":22555},"blog\u002F27.v3-13","gkDfncptKhFX1rF6kksZ7If1v_P8CwnhM6vLT8zPf0Q",{"id":22563,"title":2813,"authors":22564,"body":22571,"category":4517,"date":24550,"description":24551,"draft":108,"extension":4520,"image":22596,"meta":24552,"navigation":1196,"path":2814,"seo":24553,"stem":2815,"tags":6,"__hash__":24554},"blog\u002Fblog\u002F26.nuxt-scripts.md",[22565],{"name":22566,"avatar":22567,"to":22569,"twitter":22570},"Harlan Wilton",{"src":22568},"https:\u002F\u002Fgithub.com\u002Fharlan-zw.png","https:\u002F\u002Fgithub.com\u002Fharlan-zw","harlan_zw",{"type":2882,"value":22572,"toc":24531},[22573,22587,22590,22597,22601,22610,22619,22633,22636,22640,22653,22662,22665,22668,22672,22683,22688,22738,22741,22744,22755,23229,23233,23236,23250,23269,23281,23289,23298,23301,23304,23311,23315,23319,23329,23335,23362,23365,23373,23632,23636,23644,23651,23658,23667,23729,23733,23757,23766,23769,24185,24189,24202,24205,24223,24352,24356,24359,24373,24376,24415,24422,24426,24429,24436,24439,24469,24472,24475,24484,24488,24518,24521,24528],[2896,22574,22575,22576,22581,22582,3088],{},"The Nuxt team, in collaboration with the ",[2910,22577,22580],{"href":22578,"rel":22579},"https:\u002F\u002Fdeveloper.chrome.com\u002Faurora",[2914],"Chrome Aurora"," team at Google, is excited to announce the public beta release of ",[2910,22583,22586],{"href":22584,"rel":22585},"https:\u002F\u002Fscripts.nuxt.com",[2914],"Nuxt Scripts",[2896,22588,22589],{},"Nuxt Scripts is a better way to work with third-party scripts, providing improved performance, privacy, security, and developer experience.",[2896,22591,22592],{},[4183,22593],{"alt":22594,"className":22595,"src":22596},"Nuxt Scripts Banner",[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fnuxt-scripts\u002Fbanner.png",[2885,22598,22600],{"id":22599},"getting-to-nuxt-scripts","Getting to Nuxt Scripts",[2896,22602,22603,22604,22609],{},"Over a year ago, Daniel published the initial ",[2910,22605,22608],{"href":22606,"rel":22607},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fdiscussions\u002F22016",[2914],"Nuxt Scripts RFC",". The RFC proposed a module that would \"allow third-party scripts to be managed and optimized, following best practices for performant and compliant websites\".",[2896,22611,22612,22613,22618],{},"Having ",[2910,22614,22617],{"href":22615,"rel":22616},"https:\u002F\u002Fgithub.com\u002Fharlan-zw\u002Fnuxt-delay-hydration",[2914],"personal experience"," with solving performance issues related to third-party scripts, I knew how difficult these performance optimizations could be. Nonetheless, I was keen to tackle the problem and took over the project.",[2896,22620,22621,22622,22627,22628,3088],{},"With the RFC as the seed of the idea, I started prototyping what it could ",[2910,22623,22626],{"href":22624,"rel":22625},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fdiscussions\u002F22016#discussioncomment-6527001",[2914],"look like"," using ",[2910,22629,22632],{"href":22630,"rel":22631},"https:\u002F\u002Funhead.unjs.io\u002F",[2914],"Unhead",[2896,22634,22635],{},"Thinking about what I wanted to build exactly, I found that the real issue wasn't just how to load \"optimized\" third-party scripts but how to make working with third-party scripts a better experience overall.",[2885,22637,22639],{"id":22638},"why-build-a-third-party-script-module","Why Build a Third-Party Script Module?",[2896,22641,22642,22647,22648,3088],{},[2910,22643,22646],{"href":22644,"rel":22645},"https:\u002F\u002Falmanac.httparchive.org\u002Fen\u002F2022\u002Fthird-parties#prevalence",[2914],"94% of sites use at least one third-party provider",", with the average site having ",[2910,22649,22652],{"href":22650,"rel":22651},"https:\u002F\u002Fdocs.google.com\u002Fspreadsheets\u002Fd\u002F1YqoRRsyiNsrEabVLu2nRU98JIG_0zLLuoQhC2nX8xbM\u002Fedit?gid=1428106498#gid=1428106498",[2914],"five third-party providers",[2896,22654,22655,22656,22661],{},"We know that third-party scripts aren't perfect; they ",[2910,22657,22660],{"href":22658,"rel":22659},"https:\u002F\u002Fweb.dev\u002Farticles\u002Foptimizing-content-efficiency-loading-third-party-javascript#",[2914],"slow down the web",", cause privacy and security issues, and are a pain to work with.",[2896,22663,22664],{},"However, they are fundamentally useful and aren't going anywhere soon.",[2896,22666,22667],{},"By exploring the issues with third-party scripts, we can see where improvements can be made.",[4543,22669,22671],{"id":22670},"developer-experience-a-full-stack-headache","😒 Developer Experience: A Full-Stack Headache",[2896,22673,22674,22675,22678,22679,22682],{},"Let's walk through adding a third-party script to your Nuxt app using a fictional ",[2890,22676,22677],{},"tracker.js"," script that adds a ",[2890,22680,22681],{},"track"," function to the window.",[2896,22684,22685,22686,3088],{},"We start by loading the script using ",[2890,22687,531],{},[2918,22689,22691],{"className":2920,"code":22690,"language":2923,"meta":2924,"style":2924},"useHead({ script: [{ src: '\u002Ftracker.js', defer: true }] })\n",[2890,22692,22693],{"__ignoreMap":2924},[2928,22694,22695,22697,22699,22701,22704,22706,22708,22710,22712,22714,22716,22719,22721,22723,22726,22728,22730,22732,22734,22736],{"class":2930,"line":2931},[2928,22696,531],{"class":2957},[2928,22698,2961],{"class":2949},[2928,22700,9398],{"class":2953},[2928,22702,22703],{"class":2970}," script",[2928,22705,2974],{"class":2953},[2928,22707,4961],{"class":2949},[2928,22709,9398],{"class":2953},[2928,22711,9317],{"class":2970},[2928,22713,2974],{"class":2953},[2928,22715,3329],{"class":2953},[2928,22717,22718],{"class":3156},"\u002Ftracker.js",[2928,22720,3197],{"class":2953},[2928,22722,3617],{"class":2953},[2928,22724,22725],{"class":2970}," defer",[2928,22727,2974],{"class":2953},[2928,22729,3355],{"class":2977},[2928,22731,3702],{"class":2953},[2928,22733,16734],{"class":2949},[2928,22735,2987],{"class":2953},[2928,22737,2990],{"class":2949},[2896,22739,22740],{},"However, let's now try to get the script functionality working in our app.",[2896,22742,22743],{},"The following steps are common when working with third-party scripts in Nuxt:",[4346,22745,22746,22749,22752],{},[3844,22747,22748],{},"Everything has to be wrapped for SSR safety.",[3844,22750,22751],{},"Flaky checks for if the script has loaded.",[3844,22753,22754],{},"Augmenting the window object for types.",[3508,22756,22757,22826,22918,23047],{},[2918,22758,22761],{"className":3129,"code":22759,"filename":22760,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup>\n\u002F\u002F ❌ Oops, window is not defined! \n\u002F\u002F 💡 The window can't be directly accessed if we use SSR in Nuxt.\n\u002F\u002F 👉 We need to make this SSR safe\nwindow.track('page_view', useRoute().path)\n\u003C\u002Fscript>\n","1: SSR Safety",[2890,22762,22763,22773,22778,22783,22788,22818],{"__ignoreMap":2924},[2928,22764,22765,22767,22769,22771],{"class":2930,"line":2931},[2928,22766,3139],{"class":2953},[2928,22768,3142],{"class":2970},[2928,22770,3145],{"class":2945},[2928,22772,3161],{"class":2953},[2928,22774,22775],{"class":2930,"line":2938},[2928,22776,22777],{"class":2934},"\u002F\u002F ❌ Oops, window is not defined! \n",[2928,22779,22780],{"class":2930,"line":2967},[2928,22781,22782],{"class":2934},"\u002F\u002F 💡 The window can't be directly accessed if we use SSR in Nuxt.\n",[2928,22784,22785],{"class":2930,"line":2984},[2928,22786,22787],{"class":2934},"\u002F\u002F 👉 We need to make this SSR safe\n",[2928,22789,22790,22793,22795,22797,22799,22801,22804,22806,22808,22811,22813,22815],{"class":2930,"line":2993},[2928,22791,22792],{"class":2949},"window",[2928,22794,3088],{"class":2953},[2928,22796,22681],{"class":2957},[2928,22798,2961],{"class":2949},[2928,22800,3197],{"class":2953},[2928,22802,22803],{"class":3156},"page_view",[2928,22805,3197],{"class":2953},[2928,22807,3617],{"class":2953},[2928,22809,22810],{"class":2957}," useRoute",[2928,22812,3647],{"class":2949},[2928,22814,3088],{"class":2953},[2928,22816,22817],{"class":2949},"path)\n",[2928,22819,22820,22822,22824],{"class":2930,"line":2999},[2928,22821,3209],{"class":2953},[2928,22823,3142],{"class":2970},[2928,22825,3161],{"class":2953},[2918,22827,22830],{"className":3129,"code":22828,"filename":22829,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup>\nif (import.meta.client) {\n  \u002F\u002F ❌ Oops, the script hasn't finished loading yet!\n  \u002F\u002F 💡 A `defer` script may not be available while our Nuxt app hydrates.\n  \u002F\u002F 👉 We need to wait for the script to be loaded\n  window.track('page_view', useRoute().path)\n}\n\u003C\u002Fscript>\n","2: Script Timing",[2890,22831,22832,22842,22862,22867,22872,22877,22906,22910],{"__ignoreMap":2924},[2928,22833,22834,22836,22838,22840],{"class":2930,"line":2931},[2928,22835,3139],{"class":2953},[2928,22837,3142],{"class":2970},[2928,22839,3145],{"class":2945},[2928,22841,3161],{"class":2953},[2928,22843,22844,22847,22849,22851,22853,22855,22857,22860],{"class":2930,"line":2938},[2928,22845,22846],{"class":2941},"if",[2928,22848,3248],{"class":2949},[2928,22850,5398],{"class":2941},[2928,22852,3088],{"class":2953},[2928,22854,5058],{"class":2949},[2928,22856,3088],{"class":2953},[2928,22858,22859],{"class":2949},"client) ",[2928,22861,2964],{"class":2953},[2928,22863,22864],{"class":2930,"line":2967},[2928,22865,22866],{"class":2934},"  \u002F\u002F ❌ Oops, the script hasn't finished loading yet!\n",[2928,22868,22869],{"class":2930,"line":2984},[2928,22870,22871],{"class":2934},"  \u002F\u002F 💡 A `defer` script may not be available while our Nuxt app hydrates.\n",[2928,22873,22874],{"class":2930,"line":2993},[2928,22875,22876],{"class":2934},"  \u002F\u002F 👉 We need to wait for the script to be loaded\n",[2928,22878,22879,22882,22884,22886,22888,22890,22892,22894,22896,22898,22900,22902,22904],{"class":2930,"line":2999},[2928,22880,22881],{"class":2949},"  window",[2928,22883,3088],{"class":2953},[2928,22885,22681],{"class":2957},[2928,22887,2961],{"class":2970},[2928,22889,3197],{"class":2953},[2928,22891,22803],{"class":3156},[2928,22893,3197],{"class":2953},[2928,22895,3617],{"class":2953},[2928,22897,22810],{"class":2957},[2928,22899,3647],{"class":2970},[2928,22901,3088],{"class":2953},[2928,22903,6760],{"class":2949},[2928,22905,2990],{"class":2970},[2928,22907,22908],{"class":2930,"line":3005},[2928,22909,3764],{"class":2953},[2928,22911,22912,22914,22916],{"class":2930,"line":3036},[2928,22913,3209],{"class":2953},[2928,22915,3142],{"class":2970},[2928,22917,3161],{"class":2953},[2918,22919,22922],{"className":3129,"code":22920,"filename":22921,"language":3132,"meta":2924,"style":2924},"\u003Cscript lang=\"ts\" setup>\nif (import.meta.client) {\n  useTimeoutFn(() => {\n    \u002F\u002F ✅ It's working!\n    \u002F\u002F ❌ Oops, types are broken.\n    \u002F\u002F 💡 The `window` has strict types and nothing is defined yet.\n    \u002F\u002F 👉 We need to manually augment the window\n    window.track('page_view', useRoute().path)\n  }, 1000 \u002F* should be loaded in 1 second!? *\u002F)\n}\n\u003C\u002Fscript>\n","3: Broken types",[2890,22923,22924,22944,22962,22975,22980,22985,22990,22995,23024,23035,23039],{"__ignoreMap":2924},[2928,22925,22926,22928,22930,22932,22934,22936,22938,22940,22942],{"class":2930,"line":2931},[2928,22927,3139],{"class":2953},[2928,22929,3142],{"class":2970},[2928,22931,3148],{"class":2945},[2928,22933,2954],{"class":2953},[2928,22935,3153],{"class":2953},[2928,22937,2923],{"class":3156},[2928,22939,3153],{"class":2953},[2928,22941,3145],{"class":2945},[2928,22943,3161],{"class":2953},[2928,22945,22946,22948,22950,22952,22954,22956,22958,22960],{"class":2930,"line":2938},[2928,22947,22846],{"class":2941},[2928,22949,3248],{"class":2949},[2928,22951,5398],{"class":2941},[2928,22953,3088],{"class":2953},[2928,22955,5058],{"class":2949},[2928,22957,3088],{"class":2953},[2928,22959,22859],{"class":2949},[2928,22961,2964],{"class":2953},[2928,22963,22964,22967,22969,22971,22973],{"class":2930,"line":2967},[2928,22965,22966],{"class":2957},"  useTimeoutFn",[2928,22968,2961],{"class":2970},[2928,22970,3647],{"class":2953},[2928,22972,3030],{"class":2945},[2928,22974,3033],{"class":2953},[2928,22976,22977],{"class":2930,"line":2984},[2928,22978,22979],{"class":2934},"    \u002F\u002F ✅ It's working!\n",[2928,22981,22982],{"class":2930,"line":2993},[2928,22983,22984],{"class":2934},"    \u002F\u002F ❌ Oops, types are broken.\n",[2928,22986,22987],{"class":2930,"line":2999},[2928,22988,22989],{"class":2934},"    \u002F\u002F 💡 The `window` has strict types and nothing is defined yet.\n",[2928,22991,22992],{"class":2930,"line":3005},[2928,22993,22994],{"class":2934},"    \u002F\u002F 👉 We need to manually augment the window\n",[2928,22996,22997,23000,23002,23004,23006,23008,23010,23012,23014,23016,23018,23020,23022],{"class":2930,"line":3036},[2928,22998,22999],{"class":2949},"    window",[2928,23001,3088],{"class":2953},[2928,23003,22681],{"class":2957},[2928,23005,2961],{"class":2970},[2928,23007,3197],{"class":2953},[2928,23009,22803],{"class":3156},[2928,23011,3197],{"class":2953},[2928,23013,3617],{"class":2953},[2928,23015,22810],{"class":2957},[2928,23017,3647],{"class":2970},[2928,23019,3088],{"class":2953},[2928,23021,6760],{"class":2949},[2928,23023,2990],{"class":2970},[2928,23025,23026,23028,23030,23033],{"class":2930,"line":3054},[2928,23027,14188],{"class":2953},[2928,23029,14191],{"class":3988},[2928,23031,23032],{"class":2934}," \u002F* should be loaded in 1 second!? *\u002F",[2928,23034,2990],{"class":2970},[2928,23036,23037],{"class":2930,"line":3059},[2928,23038,3764],{"class":2953},[2928,23040,23041,23043,23045],{"class":2930,"line":3067},[2928,23042,3209],{"class":2953},[2928,23044,3142],{"class":2970},[2928,23046,3161],{"class":2953},[2918,23048,23051],{"className":3129,"code":23049,"filename":23050,"language":3132,"meta":2924,"style":2924},"\u003Cscript lang=\"ts\" setup>\ndeclare global {\n  interface Window {\n    track: (e: string, p: string) => void\n  }\n}\nif (import.meta.client) {\n  useTimeoutFn(() => {\n    \u002F\u002F ✅ It's working and types are valid! \n    \u002F\u002F ❌ Oops, ad-blockers, GDPR and duplicate scripts\n    \u002F\u002F 💡 There's a lot of hidden complexity in third-party scripts\n    \u002F\u002F 👉 We need a better API\n    window.track('page_view', useRoute().path)\n  }, 1000)\n}\n\u003C\u002Fscript>\n","4: It works?",[2890,23052,23053,23073,23082,23091,23123,23127,23131,23149,23161,23166,23171,23176,23181,23209,23217,23221],{"__ignoreMap":2924},[2928,23054,23055,23057,23059,23061,23063,23065,23067,23069,23071],{"class":2930,"line":2931},[2928,23056,3139],{"class":2953},[2928,23058,3142],{"class":2970},[2928,23060,3148],{"class":2945},[2928,23062,2954],{"class":2953},[2928,23064,3153],{"class":2953},[2928,23066,2923],{"class":3156},[2928,23068,3153],{"class":2953},[2928,23070,3145],{"class":2945},[2928,23072,3161],{"class":2953},[2928,23074,23075,23077,23080],{"class":2930,"line":2938},[2928,23076,22462],{"class":2945},[2928,23078,23079],{"class":2949}," global ",[2928,23081,2964],{"class":2953},[2928,23083,23084,23086,23089],{"class":2930,"line":2967},[2928,23085,22477],{"class":2945},[2928,23087,23088],{"class":3448}," Window",[2928,23090,3033],{"class":2953},[2928,23092,23093,23096,23098,23100,23103,23105,23107,23109,23112,23114,23116,23118,23120],{"class":2930,"line":2984},[2928,23094,23095],{"class":2970},"    track",[2928,23097,2974],{"class":2953},[2928,23099,3248],{"class":2953},[2928,23101,23102],{"class":3023},"e",[2928,23104,2974],{"class":2953},[2928,23106,15656],{"class":3448},[2928,23108,3617],{"class":2953},[2928,23110,23111],{"class":3023}," p",[2928,23113,2974],{"class":2953},[2928,23115,15656],{"class":3448},[2928,23117,3027],{"class":2953},[2928,23119,3030],{"class":2945},[2928,23121,23122],{"class":3448}," void\n",[2928,23124,23125],{"class":2930,"line":2993},[2928,23126,3113],{"class":2953},[2928,23128,23129],{"class":2930,"line":2999},[2928,23130,3764],{"class":2953},[2928,23132,23133,23135,23137,23139,23141,23143,23145,23147],{"class":2930,"line":3005},[2928,23134,22846],{"class":2941},[2928,23136,3248],{"class":2949},[2928,23138,5398],{"class":2941},[2928,23140,3088],{"class":2953},[2928,23142,5058],{"class":2949},[2928,23144,3088],{"class":2953},[2928,23146,22859],{"class":2949},[2928,23148,2964],{"class":2953},[2928,23150,23151,23153,23155,23157,23159],{"class":2930,"line":3036},[2928,23152,22966],{"class":2957},[2928,23154,2961],{"class":2970},[2928,23156,3647],{"class":2953},[2928,23158,3030],{"class":2945},[2928,23160,3033],{"class":2953},[2928,23162,23163],{"class":2930,"line":3054},[2928,23164,23165],{"class":2934},"    \u002F\u002F ✅ It's working and types are valid! \n",[2928,23167,23168],{"class":2930,"line":3059},[2928,23169,23170],{"class":2934},"    \u002F\u002F ❌ Oops, ad-blockers, GDPR and duplicate scripts\n",[2928,23172,23173],{"class":2930,"line":3067},[2928,23174,23175],{"class":2934},"    \u002F\u002F 💡 There's a lot of hidden complexity in third-party scripts\n",[2928,23177,23178],{"class":2930,"line":3077},[2928,23179,23180],{"class":2934},"    \u002F\u002F 👉 We need a better API\n",[2928,23182,23183,23185,23187,23189,23191,23193,23195,23197,23199,23201,23203,23205,23207],{"class":2930,"line":3110},[2928,23184,22999],{"class":2949},[2928,23186,3088],{"class":2953},[2928,23188,22681],{"class":2957},[2928,23190,2961],{"class":2970},[2928,23192,3197],{"class":2953},[2928,23194,22803],{"class":3156},[2928,23196,3197],{"class":2953},[2928,23198,3617],{"class":2953},[2928,23200,22810],{"class":2957},[2928,23202,3647],{"class":2970},[2928,23204,3088],{"class":2953},[2928,23206,6760],{"class":2949},[2928,23208,2990],{"class":2970},[2928,23210,23211,23213,23215],{"class":2930,"line":3116},[2928,23212,14188],{"class":2953},[2928,23214,14191],{"class":3988},[2928,23216,2990],{"class":2970},[2928,23218,23219],{"class":2930,"line":6687},[2928,23220,3764],{"class":2953},[2928,23222,23223,23225,23227],{"class":2930,"line":6703},[2928,23224,3209],{"class":2953},[2928,23226,3142],{"class":2970},[2928,23228,3161],{"class":2953},[4543,23230,23232],{"id":23231},"performance-why-cant-i-get-100-on-lighthouse","🐌 Performance: \"Why can't I get 100 on Lighthouse?\"",[2896,23234,23235],{},"For a visitor to start interacting with your Nuxt site, the app bundle needs to be downloaded and Vue needs to hydrate the app instance.",[2896,23237,23238,23239,4913,23241,23244,23245,3088],{},"Loading third-party scripts can interfere with this hydration process, even when using ",[2890,23240,3638],{},[2890,23242,23243],{},"defer",". This slows down the network and blocks the main thread, leading to a degraded user experience and poor ",[2910,23246,23249],{"href":23247,"rel":23248},"https:\u002F\u002Fweb.dev\u002Fvitals\u002F",[2914],"Core Web Vitals",[2896,23251,5192,23252,23257,23258,2892,23263,23268],{},[2910,23253,23256],{"href":23254,"rel":23255},"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fcrux",[2914],"Chrome User Experience Report"," shows Nuxt sites with numerous third-party resources typically have poorer ",[2910,23259,23262],{"href":23260,"rel":23261},"https:\u002F\u002Fweb.dev\u002Farticles\u002Finp",[2914],"Interaction to Next Paint (INP)",[2910,23264,23267],{"href":23265,"rel":23266},"https:\u002F\u002Fweb.dev\u002Farticles\u002Flcp",[2914],"Largest Contentful Paint (LCP)"," scores.",[2896,23270,23271,23272,23277,23278,3088],{},"To see how third-party scripts degrade performance, we can look at the ",[2910,23273,23276],{"href":23274,"rel":23275},"https:\u002F\u002Falmanac.httparchive.org\u002Fen\u002F2022\u002Fthird-parties#impact-on-performance",[2914],"Web Almanac 2022",". The report shows that the top 10 third-party scripts ",[2900,23279,23280],{},"average median blocking time is 1.4 seconds",[4543,23282,23284,23285,23288],{"id":23283},"️-privacy-security-do-no-evil","🛡️ Privacy & Security: Do ",[10484,23286,23287],{},"no"," evil?",[2896,23290,23291,23292,23297],{},"Of the top 10,000 sites, 58% of them have third-party scripts that ",[2910,23293,23296],{"href":23294,"rel":23295},"https:\u002F\u002Fwww3.cs.stonybrook.edu\u002F~mikepo\u002Fpapers\u002Ffirstparty.www21.pdf",[2914],"exchange tracking IDs stored in external cookies",", meaning they can track users across sites even with third-party cookies disabled.",[2896,23299,23300],{},"While in many cases our hands are tied with the providers we use, we should try to minimize the amount of our end-users' data that we're leaking where possible.",[2896,23302,23303],{},"When we do take on the privacy implications, it can then be difficult to accurately convey these in our privacy policies and build the consent management required to comply with regulations such as GDPR.",[2896,23305,23306,23307,23310],{},"Security when using third-party scripts is also a concern. Third-party scripts are common attack vectors for malicious actors, most do not provide ",[2890,23308,23309],{},"integrity"," hashes for their scripts, meaning they can be compromised and inject malicious code into your app at any time.",[2885,23312,23314],{"id":23313},"what-does-nuxt-scripts-do-about-these-issues","What does Nuxt Scripts do about these issues?",[4543,23316,23318],{"id":23317},"composable-usescript","Composable: useScript",[2896,23320,23321,23322,23325,23326,3088],{},"This composable sits between the ",[2890,23323,23324],{},"\u003Cscript>"," tag and the functionality added to ",[2890,23327,23328],{},"window.{thirdPartyKey}",[2896,23330,23331,23332,23334],{},"For the ",[2890,23333,23324],{}," tag, the composable:",[4346,23336,23337,23340,23343,23353],{},[3844,23338,23339],{},"Gives full visibility into the script's loading and error states",[3844,23341,23342],{},"Loads scripts as Nuxt is hydrating the app by default, for slightly better performance.",[3844,23344,23345,23346,2892,23349,23352],{},"Restricts ",[2890,23347,23348],{},"crossorigin",[2890,23350,23351],{},"referrerpolicy"," to improve privacy and security.",[3844,23354,23355,23356,23361],{},"Provides a way to ",[2910,23357,23360],{"href":23358,"rel":23359},"https:\u002F\u002Fscripts.nuxt.com\u002Fdocs\u002Fguides\u002Fscript-triggers",[2914],"delay loading the script"," until you need it.",[2896,23363,23364],{},"For the scripts API, it:",[4346,23366,23367,23370],{},[3844,23368,23369],{},"Provides full type-safety around the script's functions",[3844,23371,23372],{},"Adds a proxy layer allowing your app to run when the script functions in unsafe contexts (SSR, before the script is loaded, the script is blocked)",[3508,23374,23375,23577],{},[2918,23376,23379],{"className":2920,"code":23377,"filename":23378,"language":2923,"meta":2924,"style":2924},"const { proxy, onLoaded } = useScript('\u002Fhello.js', {\n  trigger: 'onNuxtReady',\n  use() {\n    return window.helloWorld\n  }\n})\n\nonLoaded(({ greeting }) => {\n  \u002F\u002F ✅ script is loaded! Hooks into Vue lifecycle\n})\n\n\u002F\u002F ✅ OR use the proxy API - SSR friendly, called when script is loaded\nproxy.greeting() \u002F\u002F Hello, World!\n\ndeclare global {\n  interface Window {\n    helloWorld: {\n      greeting: () => 'Hello World!'\n    }\n  }\n}\n","hello.ts",[2890,23380,23381,23415,23430,23439,23451,23455,23461,23465,23483,23488,23494,23498,23503,23518,23522,23530,23538,23547,23565,23569,23573],{"__ignoreMap":2924},[2928,23382,23383,23385,23387,23390,23392,23395,23397,23399,23402,23404,23406,23409,23411,23413],{"class":2930,"line":2931},[2928,23384,3171],{"class":2945},[2928,23386,3174],{"class":2953},[2928,23388,23389],{"class":2949}," proxy",[2928,23391,3617],{"class":2953},[2928,23393,23394],{"class":2949}," onLoaded ",[2928,23396,2987],{"class":2953},[2928,23398,3045],{"class":2953},[2928,23400,23401],{"class":2957}," useScript",[2928,23403,2961],{"class":2949},[2928,23405,3197],{"class":2953},[2928,23407,23408],{"class":3156},"\u002Fhello.js",[2928,23410,3197],{"class":2953},[2928,23412,3617],{"class":2953},[2928,23414,3033],{"class":2953},[2928,23416,23417,23420,23422,23424,23426,23428],{"class":2930,"line":2938},[2928,23418,23419],{"class":2970},"  trigger",[2928,23421,2974],{"class":2953},[2928,23423,3329],{"class":2953},[2928,23425,698],{"class":3156},[2928,23427,3197],{"class":2953},[2928,23429,2981],{"class":2953},[2928,23431,23432,23435,23437],{"class":2930,"line":2967},[2928,23433,23434],{"class":2970},"  use",[2928,23436,3647],{"class":2953},[2928,23438,3033],{"class":2953},[2928,23440,23441,23443,23446,23448],{"class":2930,"line":2984},[2928,23442,5153],{"class":2941},[2928,23444,23445],{"class":2949}," window",[2928,23447,3088],{"class":2953},[2928,23449,23450],{"class":2949},"helloWorld\n",[2928,23452,23453],{"class":2930,"line":2993},[2928,23454,3113],{"class":2953},[2928,23456,23457,23459],{"class":2930,"line":2999},[2928,23458,2987],{"class":2953},[2928,23460,2990],{"class":2949},[2928,23462,23463],{"class":2930,"line":3005},[2928,23464,2996],{"emptyLinePlaceholder":1196},[2928,23466,23467,23470,23472,23474,23477,23479,23481],{"class":2930,"line":3036},[2928,23468,23469],{"class":2957},"onLoaded",[2928,23471,2961],{"class":2949},[2928,23473,6676],{"class":2953},[2928,23475,23476],{"class":3023}," greeting",[2928,23478,6682],{"class":2953},[2928,23480,3030],{"class":2945},[2928,23482,3033],{"class":2953},[2928,23484,23485],{"class":2930,"line":3054},[2928,23486,23487],{"class":2934},"  \u002F\u002F ✅ script is loaded! Hooks into Vue lifecycle\n",[2928,23489,23490,23492],{"class":2930,"line":3059},[2928,23491,2987],{"class":2953},[2928,23493,2990],{"class":2949},[2928,23495,23496],{"class":2930,"line":3067},[2928,23497,2996],{"emptyLinePlaceholder":1196},[2928,23499,23500],{"class":2930,"line":3077},[2928,23501,23502],{"class":2934},"\u002F\u002F ✅ OR use the proxy API - SSR friendly, called when script is loaded\n",[2928,23504,23505,23508,23510,23513,23515],{"class":2930,"line":3110},[2928,23506,23507],{"class":2949},"proxy",[2928,23509,3088],{"class":2953},[2928,23511,23512],{"class":2957},"greeting",[2928,23514,10328],{"class":2949},[2928,23516,23517],{"class":2934},"\u002F\u002F Hello, World!\n",[2928,23519,23520],{"class":2930,"line":3116},[2928,23521,2996],{"emptyLinePlaceholder":1196},[2928,23523,23524,23526,23528],{"class":2930,"line":6687},[2928,23525,22462],{"class":2945},[2928,23527,23079],{"class":2949},[2928,23529,2964],{"class":2953},[2928,23531,23532,23534,23536],{"class":2930,"line":6703},[2928,23533,22477],{"class":2945},[2928,23535,23088],{"class":3448},[2928,23537,3033],{"class":2953},[2928,23539,23540,23543,23545],{"class":2930,"line":6708},[2928,23541,23542],{"class":2970},"    helloWorld",[2928,23544,2974],{"class":2953},[2928,23546,3033],{"class":2953},[2928,23548,23549,23552,23554,23556,23558,23560,23563],{"class":2930,"line":6738},[2928,23550,23551],{"class":2970},"      greeting",[2928,23553,2974],{"class":2953},[2928,23555,4102],{"class":2953},[2928,23557,3030],{"class":2945},[2928,23559,3329],{"class":2953},[2928,23561,23562],{"class":3156},"Hello World!",[2928,23564,5269],{"class":2953},[2928,23566,23567],{"class":2930,"line":6776},[2928,23568,4866],{"class":2953},[2928,23570,23571],{"class":2930,"line":6785},[2928,23572,3113],{"class":2953},[2928,23574,23575],{"class":2930,"line":6790},[2928,23576,3764],{"class":2953},[2918,23578,23581],{"className":2920,"code":23579,"filename":23580,"language":2923,"meta":2924,"style":2924},"window.helloWorld = {\n  greeting() {\n    console.log('Hello, World!')\n  }\n}\n","hello.js",[2890,23582,23583,23596,23605,23624,23628],{"__ignoreMap":2924},[2928,23584,23585,23587,23589,23592,23594],{"class":2930,"line":2931},[2928,23586,22792],{"class":2949},[2928,23588,3088],{"class":2953},[2928,23590,23591],{"class":2949},"helloWorld ",[2928,23593,2954],{"class":2953},[2928,23595,3033],{"class":2953},[2928,23597,23598,23601,23603],{"class":2930,"line":2938},[2928,23599,23600],{"class":2970},"  greeting",[2928,23602,3647],{"class":2953},[2928,23604,3033],{"class":2953},[2928,23606,23607,23609,23611,23613,23615,23617,23620,23622],{"class":2930,"line":2967},[2928,23608,13236],{"class":2949},[2928,23610,3088],{"class":2953},[2928,23612,9254],{"class":2957},[2928,23614,2961],{"class":2970},[2928,23616,3197],{"class":2953},[2928,23618,23619],{"class":3156},"Hello, World!",[2928,23621,3197],{"class":2953},[2928,23623,2990],{"class":2970},[2928,23625,23626],{"class":2930,"line":2984},[2928,23627,3113],{"class":2953},[2928,23629,23630],{"class":2930,"line":2993},[2928,23631,3764],{"class":2953},[4543,23633,23635],{"id":23634},"script-registry","Script Registry",[2896,23637,5192,23638,23643],{},[2910,23639,23642],{"href":23640,"rel":23641},"https:\u002F\u002Fscripts.nuxt.com\u002Fscripts",[2914],"script registry"," is a collection of first-party integrations for common third-party scripts. As of release, we support 21 scripts, with more to come.",[2896,23645,23646],{},[4183,23647],{"alt":23648,"className":23649,"src":23650},"Nuxt Scripts Registry",[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fnuxt-scripts\u002Fregistry.png",[2896,23652,23653,23654,23657],{},"These registry scripts are fine-tuned wrappers around ",[2890,23655,23656],{},"useScript"," with full type-safety, runtime validation of the script options (dev only) and environment variable support",[2896,23659,23660,23661,23666],{},"For example, we can look at the ",[2910,23662,23665],{"href":23663,"rel":23664},"https:\u002F\u002Fscripts.nuxt.com\u002Fscripts\u002Fanalytics\u002Ffathom-analytics",[2914],"Fathom Analytics"," script.",[2918,23668,23670],{"className":2920,"code":23669,"language":2923,"meta":2924,"style":2924},"const { proxy } = useScriptFathomAnalytics({\n  \u002F\u002F ✅ options are validated at runtime\n  site: undefined\n})\n\u002F\u002F ✅ typed\nproxy.trackPageview()\n",[2890,23671,23672,23692,23697,23707,23713,23718],{"__ignoreMap":2924},[2928,23673,23674,23676,23678,23681,23683,23685,23688,23690],{"class":2930,"line":2931},[2928,23675,3171],{"class":2945},[2928,23677,3174],{"class":2953},[2928,23679,23680],{"class":2949}," proxy ",[2928,23682,2987],{"class":2953},[2928,23684,3045],{"class":2953},[2928,23686,23687],{"class":2957}," useScriptFathomAnalytics",[2928,23689,2961],{"class":2949},[2928,23691,2964],{"class":2953},[2928,23693,23694],{"class":2930,"line":2938},[2928,23695,23696],{"class":2934},"  \u002F\u002F ✅ options are validated at runtime\n",[2928,23698,23699,23702,23704],{"class":2930,"line":2967},[2928,23700,23701],{"class":2970},"  site",[2928,23703,2974],{"class":2953},[2928,23705,23706],{"class":2953}," undefined\n",[2928,23708,23709,23711],{"class":2930,"line":2984},[2928,23710,2987],{"class":2953},[2928,23712,2990],{"class":2949},[2928,23714,23715],{"class":2930,"line":2993},[2928,23716,23717],{"class":2934},"\u002F\u002F ✅ typed\n",[2928,23719,23720,23722,23724,23727],{"class":2930,"line":2999},[2928,23721,23507],{"class":2949},[2928,23723,3088],{"class":2953},[2928,23725,23726],{"class":2957},"trackPageview",[2928,23728,3051],{"class":2949},[4543,23730,23732],{"id":23731},"facade-components","Facade Components",[2896,23734,23735,23736,23741,23742,4309,23747,2892,23752,3088],{},"The registry includes several ",[2910,23737,23740],{"href":23738,"rel":23739},"https:\u002F\u002Fscripts.nuxt.com\u002Fdocs\u002Fguides\u002Ffacade-components",[2914],"facade components",", such as\n",[2910,23743,23746],{"href":23744,"rel":23745},"https:\u002F\u002Fscripts.nuxt.com\u002Fscripts\u002Fcontent\u002Fgoogle-maps",[2914],"Google Maps",[2910,23748,23751],{"href":23749,"rel":23750},"https:\u002F\u002Fscripts.nuxt.com\u002Fscripts\u002Fcontent\u002Fyoutube-player",[2914],"YouTube",[2910,23753,23756],{"href":23754,"rel":23755},"https:\u002F\u002Fscripts.nuxt.com\u002Fscripts\u002Fsupport\u002Fintercom",[2914],"Intercom",[2896,23758,23759,23760,23765],{},"Facade components are \"fake\" components that get hydrated when the third-party script loads. Facade components\nhave trade-offs but can drastically improve your performance. See the ",[2910,23761,23764],{"href":23762,"rel":23763},"https:\u002F\u002Fscripts.nuxt.com\u002Fdocs\u002Fguides\u002Ffacade-components#what-are-facade-components",[2914],"What are Facade Components?","\nguide for more information.",[2896,23767,23768],{},"Nuxt Scripts provides facade components as accessible but headless, meaning they are not styled by default but add the necessary\na16y data.",[11466,23770,23771,23778],{},[23772,23773,23775],"tabs-item",{"label":23774},"Output",[23776,23777],"youtube-demo",{},[23772,23779,23781],{"label":23780},"Input",[2918,23782,23784],{"className":3129,"code":23783,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup lang=\"ts\">\nconst isLoaded = ref(false)\nconst isPlaying = ref(false)\nconst video = ref()\nfunction play() {\n  video.value?.player.playVideo()\n}\nfunction stateChange(state) {\n  isPlaying.value = state.data === 1\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CScriptYouTubePlayer ref=\"video\" video-id=\"d_IFKP1Ofq0\" @ready=\"isLoaded = true\" @state-change=\"stateChange\">\n    \u003Ctemplate #awaitingLoad>\n      \u003Cdiv class=\"absolute left-1\u002F2 top-1\u002F2 transform -translate-x-1\u002F2 -translate-y-1\u002F2 h-[48px] w-[68px]\">\n        \u003Csvg height=\"100%\" version=\"1.1\" viewBox=\"0 0 68 48\" width=\"100%\">\u003Cpath d=\"M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z\" fill=\"#f00\" \u002F>\u003Cpath d=\"M 45,24 27,14 27,34\" fill=\"#fff\" \u002F>\u003C\u002Fsvg>\n      \u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n  \u003C\u002FScriptYouTubePlayer>\n\u003C\u002Ftemplate>\n",[2890,23785,23786,23806,23823,23840,23853,23864,23885,23889,23905,23928,23932,23940,23944,23952,24007,24020,24039,24153,24161,24169,24177],{"__ignoreMap":2924},[2928,23787,23788,23790,23792,23794,23796,23798,23800,23802,23804],{"class":2930,"line":2931},[2928,23789,3139],{"class":2953},[2928,23791,3142],{"class":2970},[2928,23793,3145],{"class":2945},[2928,23795,3148],{"class":2945},[2928,23797,2954],{"class":2953},[2928,23799,3153],{"class":2953},[2928,23801,2923],{"class":3156},[2928,23803,3153],{"class":2953},[2928,23805,3161],{"class":2953},[2928,23807,23808,23810,23813,23815,23817,23819,23821],{"class":2930,"line":2938},[2928,23809,3171],{"class":2945},[2928,23811,23812],{"class":2949}," isLoaded ",[2928,23814,2954],{"class":2953},[2928,23816,9306],{"class":2957},[2928,23818,2961],{"class":2949},[2928,23820,4933],{"class":2977},[2928,23822,2990],{"class":2949},[2928,23824,23825,23827,23830,23832,23834,23836,23838],{"class":2930,"line":2967},[2928,23826,3171],{"class":2945},[2928,23828,23829],{"class":2949}," isPlaying ",[2928,23831,2954],{"class":2953},[2928,23833,9306],{"class":2957},[2928,23835,2961],{"class":2949},[2928,23837,4933],{"class":2977},[2928,23839,2990],{"class":2949},[2928,23841,23842,23844,23847,23849,23851],{"class":2930,"line":2984},[2928,23843,3171],{"class":2945},[2928,23845,23846],{"class":2949}," video ",[2928,23848,2954],{"class":2953},[2928,23850,9306],{"class":2957},[2928,23852,3051],{"class":2949},[2928,23854,23855,23857,23860,23862],{"class":2930,"line":2993},[2928,23856,20060],{"class":2945},[2928,23858,23859],{"class":2957}," play",[2928,23861,3647],{"class":2953},[2928,23863,3033],{"class":2953},[2928,23865,23866,23869,23871,23873,23875,23878,23880,23883],{"class":2930,"line":2999},[2928,23867,23868],{"class":2949},"  video",[2928,23870,3088],{"class":2953},[2928,23872,9263],{"class":2949},[2928,23874,5120],{"class":2953},[2928,23876,23877],{"class":2949},"player",[2928,23879,3088],{"class":2953},[2928,23881,23882],{"class":2957},"playVideo",[2928,23884,3051],{"class":2970},[2928,23886,23887],{"class":2930,"line":3005},[2928,23888,3764],{"class":2953},[2928,23890,23891,23893,23896,23898,23901,23903],{"class":2930,"line":3036},[2928,23892,20060],{"class":2945},[2928,23894,23895],{"class":2957}," stateChange",[2928,23897,2961],{"class":2953},[2928,23899,23900],{"class":3023},"state",[2928,23902,3027],{"class":2953},[2928,23904,3033],{"class":2953},[2928,23906,23907,23910,23912,23914,23916,23919,23921,23923,23925],{"class":2930,"line":3054},[2928,23908,23909],{"class":2949},"  isPlaying",[2928,23911,3088],{"class":2953},[2928,23913,9263],{"class":2949},[2928,23915,3045],{"class":2953},[2928,23917,23918],{"class":2949}," state",[2928,23920,3088],{"class":2953},[2928,23922,15807],{"class":2949},[2928,23924,7687],{"class":2953},[2928,23926,23927],{"class":3988}," 1\n",[2928,23929,23930],{"class":2930,"line":3059},[2928,23931,3764],{"class":2953},[2928,23933,23934,23936,23938],{"class":2930,"line":3067},[2928,23935,3209],{"class":2953},[2928,23937,3142],{"class":2970},[2928,23939,3161],{"class":2953},[2928,23941,23942],{"class":2930,"line":3077},[2928,23943,2996],{"emptyLinePlaceholder":1196},[2928,23945,23946,23948,23950],{"class":2930,"line":3110},[2928,23947,3139],{"class":2953},[2928,23949,3521],{"class":2970},[2928,23951,3161],{"class":2953},[2928,23953,23954,23956,23959,23961,23963,23965,23967,23969,23972,23974,23976,23979,23981,23984,23986,23988,23991,23993,23996,23998,24000,24003,24005],{"class":2930,"line":3116},[2928,23955,3528],{"class":2953},[2928,23957,23958],{"class":2970},"ScriptYouTubePlayer",[2928,23960,9306],{"class":2945},[2928,23962,2954],{"class":2953},[2928,23964,3153],{"class":2953},[2928,23966,5478],{"class":3156},[2928,23968,3153],{"class":2953},[2928,23970,23971],{"class":2945}," video-id",[2928,23973,2954],{"class":2953},[2928,23975,3153],{"class":2953},[2928,23977,23978],{"class":3156},"d_IFKP1Ofq0",[2928,23980,3153],{"class":2953},[2928,23982,23983],{"class":2945}," @ready",[2928,23985,2954],{"class":2953},[2928,23987,3153],{"class":2953},[2928,23989,23990],{"class":3156},"isLoaded = true",[2928,23992,3153],{"class":2953},[2928,23994,23995],{"class":2945}," @state-change",[2928,23997,2954],{"class":2953},[2928,23999,3153],{"class":2953},[2928,24001,24002],{"class":3156},"stateChange",[2928,24004,3153],{"class":2953},[2928,24006,3161],{"class":2953},[2928,24008,24009,24011,24013,24015,24018],{"class":2930,"line":6687},[2928,24010,3557],{"class":2953},[2928,24012,3521],{"class":2970},[2928,24014,9389],{"class":2953},[2928,24016,24017],{"class":2945},"awaitingLoad",[2928,24019,3161],{"class":2953},[2928,24021,24022,24024,24026,24028,24030,24032,24035,24037],{"class":2930,"line":6703},[2928,24023,9422],{"class":2953},[2928,24025,11471],{"class":2970},[2928,24027,15516],{"class":2945},[2928,24029,2954],{"class":2953},[2928,24031,3153],{"class":2953},[2928,24033,24034],{"class":3156},"absolute left-1\u002F2 top-1\u002F2 transform -translate-x-1\u002F2 -translate-y-1\u002F2 h-[48px] w-[68px]",[2928,24036,3153],{"class":2953},[2928,24038,3161],{"class":2953},[2928,24040,24041,24043,24046,24048,24050,24052,24055,24057,24059,24061,24063,24066,24068,24071,24073,24075,24078,24080,24082,24084,24086,24088,24090,24093,24095,24098,24100,24102,24105,24107,24110,24112,24114,24117,24119,24122,24124,24126,24128,24130,24133,24135,24137,24139,24141,24144,24146,24149,24151],{"class":2930,"line":6708},[2928,24042,11509],{"class":2953},[2928,24044,24045],{"class":2970},"svg",[2928,24047,9667],{"class":2945},[2928,24049,2954],{"class":2953},[2928,24051,3153],{"class":2953},[2928,24053,24054],{"class":3156},"100%",[2928,24056,3153],{"class":2953},[2928,24058,6679],{"class":2945},[2928,24060,2954],{"class":2953},[2928,24062,3153],{"class":2953},[2928,24064,24065],{"class":3156},"1.1",[2928,24067,3153],{"class":2953},[2928,24069,24070],{"class":2945}," viewBox",[2928,24072,2954],{"class":2953},[2928,24074,3153],{"class":2953},[2928,24076,24077],{"class":3156},"0 0 68 48",[2928,24079,3153],{"class":2953},[2928,24081,9679],{"class":2945},[2928,24083,2954],{"class":2953},[2928,24085,3153],{"class":2953},[2928,24087,24054],{"class":3156},[2928,24089,3153],{"class":2953},[2928,24091,24092],{"class":2953},">\u003C",[2928,24094,6760],{"class":2970},[2928,24096,24097],{"class":2945}," d",[2928,24099,2954],{"class":2953},[2928,24101,3153],{"class":2953},[2928,24103,24104],{"class":3156},"M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z",[2928,24106,3153],{"class":2953},[2928,24108,24109],{"class":2945}," fill",[2928,24111,2954],{"class":2953},[2928,24113,3153],{"class":2953},[2928,24115,24116],{"class":3156},"#f00",[2928,24118,3153],{"class":2953},[2928,24120,24121],{"class":2953}," \u002F>\u003C",[2928,24123,6760],{"class":2970},[2928,24125,24097],{"class":2945},[2928,24127,2954],{"class":2953},[2928,24129,3153],{"class":2953},[2928,24131,24132],{"class":3156},"M 45,24 27,14 27,34",[2928,24134,3153],{"class":2953},[2928,24136,24109],{"class":2945},[2928,24138,2954],{"class":2953},[2928,24140,3153],{"class":2953},[2928,24142,24143],{"class":3156},"#fff",[2928,24145,3153],{"class":2953},[2928,24147,24148],{"class":2953}," \u002F>\u003C\u002F",[2928,24150,24045],{"class":2970},[2928,24152,3161],{"class":2953},[2928,24154,24155,24157,24159],{"class":2930,"line":6738},[2928,24156,11583],{"class":2953},[2928,24158,11471],{"class":2970},[2928,24160,3161],{"class":2953},[2928,24162,24163,24165,24167],{"class":2930,"line":6776},[2928,24164,9484],{"class":2953},[2928,24166,3521],{"class":2970},[2928,24168,3161],{"class":2953},[2928,24170,24171,24173,24175],{"class":2930,"line":6785},[2928,24172,3567],{"class":2953},[2928,24174,23958],{"class":2970},[2928,24176,3161],{"class":2953},[2928,24178,24179,24181,24183],{"class":2930,"line":6790},[2928,24180,3209],{"class":2953},[2928,24182,3521],{"class":2970},[2928,24184,3161],{"class":2953},[4543,24186,24188],{"id":24187},"consent-management-element-event-triggers","Consent Management & Element Event Triggers",[2896,24190,5192,24191,24193,24194,24197,24198,24201],{},[2890,24192,23656],{}," composable gives you full control over how and when your scripts are loaded, by either providing a custom ",[2890,24195,24196],{},"trigger"," or manually calling the ",[2890,24199,24200],{},"load()"," function.",[2896,24203,24204],{},"Building on top of this, Nuxt Scripts provides advanced triggers to make it even easier.",[4346,24206,24207,24215],{},[3844,24208,24209,24214],{},[2910,24210,24213],{"href":24211,"rel":24212},"https:\u002F\u002Fscripts.nuxt.com\u002Fdocs\u002Fguides\u002Fconsent",[2914],"Consent Management"," - Load scripts only after the user has given consent such as with a cookie banner.",[3844,24216,24217,24222],{},[2910,24218,24221],{"href":24219,"rel":24220},"https:\u002F\u002Fscripts.nuxt.com\u002Fdocs\u002Fguides\u002Fscript-triggers#element-event-triggers",[2914],"Element Event Triggers"," - Load scripts based on user interactions such as scrolling, clicking, or form submissions.",[2918,24224,24226],{"className":2920,"code":24225,"language":2923,"meta":2924,"style":2924},"const cookieConsentTrigger = useScriptTriggerConsent()\nconst { proxy } = useScript\u003C{ greeting: () => void }>('\u002Fhello.js', {\n  \u002F\u002F script will only be loaded once the consent has been accepted\n  trigger: cookieConsentTrigger\n})\n\u002F\u002F ...\nfunction acceptCookies() {\n  cookieConsentTrigger.accept()\n}\n\u002F\u002F greeting() is queued until the user accepts cookies\nproxy.greeting()\n",[2890,24227,24228,24242,24285,24290,24299,24305,24310,24321,24333,24337,24342],{"__ignoreMap":2924},[2928,24229,24230,24232,24235,24237,24240],{"class":2930,"line":2931},[2928,24231,3171],{"class":2945},[2928,24233,24234],{"class":2949}," cookieConsentTrigger ",[2928,24236,2954],{"class":2953},[2928,24238,24239],{"class":2957}," useScriptTriggerConsent",[2928,24241,3051],{"class":2949},[2928,24243,24244,24246,24248,24250,24252,24254,24256,24259,24261,24263,24265,24267,24270,24273,24275,24277,24279,24281,24283],{"class":2930,"line":2938},[2928,24245,3171],{"class":2945},[2928,24247,3174],{"class":2953},[2928,24249,23680],{"class":2949},[2928,24251,2987],{"class":2953},[2928,24253,3045],{"class":2953},[2928,24255,23401],{"class":2957},[2928,24257,24258],{"class":2953},"\u003C{",[2928,24260,23476],{"class":2970},[2928,24262,2974],{"class":2953},[2928,24264,4102],{"class":2953},[2928,24266,3030],{"class":2945},[2928,24268,24269],{"class":3448}," void",[2928,24271,24272],{"class":2953}," }>",[2928,24274,2961],{"class":2949},[2928,24276,3197],{"class":2953},[2928,24278,23408],{"class":3156},[2928,24280,3197],{"class":2953},[2928,24282,3617],{"class":2953},[2928,24284,3033],{"class":2953},[2928,24286,24287],{"class":2930,"line":2967},[2928,24288,24289],{"class":2934},"  \u002F\u002F script will only be loaded once the consent has been accepted\n",[2928,24291,24292,24294,24296],{"class":2930,"line":2984},[2928,24293,23419],{"class":2970},[2928,24295,2974],{"class":2953},[2928,24297,24298],{"class":2949}," cookieConsentTrigger\n",[2928,24300,24301,24303],{"class":2930,"line":2993},[2928,24302,2987],{"class":2953},[2928,24304,2990],{"class":2949},[2928,24306,24307],{"class":2930,"line":2999},[2928,24308,24309],{"class":2934},"\u002F\u002F ...\n",[2928,24311,24312,24314,24317,24319],{"class":2930,"line":3005},[2928,24313,20060],{"class":2945},[2928,24315,24316],{"class":2957}," acceptCookies",[2928,24318,3647],{"class":2953},[2928,24320,3033],{"class":2953},[2928,24322,24323,24326,24328,24331],{"class":2930,"line":3036},[2928,24324,24325],{"class":2949},"  cookieConsentTrigger",[2928,24327,3088],{"class":2953},[2928,24329,24330],{"class":2957},"accept",[2928,24332,3051],{"class":2970},[2928,24334,24335],{"class":2930,"line":3054},[2928,24336,3764],{"class":2953},[2928,24338,24339],{"class":2930,"line":3059},[2928,24340,24341],{"class":2934},"\u002F\u002F greeting() is queued until the user accepts cookies\n",[2928,24343,24344,24346,24348,24350],{"class":2930,"line":3067},[2928,24345,23507],{"class":2949},[2928,24347,3088],{"class":2953},[2928,24349,23512],{"class":2957},[2928,24351,3051],{"class":2949},[4543,24353,24355],{"id":24354},"bundling-scripts","Bundling Scripts",[2896,24357,24358],{},"In many cases, we're loading third-party scripts from a domain that we don't control. This can lead to a number of issues:",[4346,24360,24361,24364,24367,24370],{},[3844,24362,24363],{},"Privacy: The third-party script can track users across sites.",[3844,24365,24366],{},"Security: The third-party script can be compromised and inject malicious code.",[3844,24368,24369],{},"Performance: Extra DNS lookups will slow down the page load.",[3844,24371,24372],{},"Developer Experience: Consented scripts may be blocked by ad blockers.",[2896,24374,24375],{},"To mitigate this, Nuxt Scripts provides a way to bundle third-party scripts into your public directory without any extra work.",[2918,24377,24379],{"className":2920,"code":24378,"language":2923,"meta":2924,"style":2924},"useScript('https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fjs-confetti@latest\u002Fdist\u002Fjs-confetti.browser.js', {\n  bundle: true,\n})\n",[2890,24380,24381,24398,24409],{"__ignoreMap":2924},[2928,24382,24383,24385,24387,24389,24392,24394,24396],{"class":2930,"line":2931},[2928,24384,23656],{"class":2957},[2928,24386,2961],{"class":2949},[2928,24388,3197],{"class":2953},[2928,24390,24391],{"class":3156},"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fjs-confetti@latest\u002Fdist\u002Fjs-confetti.browser.js",[2928,24393,3197],{"class":2953},[2928,24395,3617],{"class":2953},[2928,24397,3033],{"class":2953},[2928,24399,24400,24403,24405,24407],{"class":2930,"line":2938},[2928,24401,24402],{"class":2970},"  bundle",[2928,24404,2974],{"class":2953},[2928,24406,3355],{"class":2977},[2928,24408,2981],{"class":2953},[2928,24410,24411,24413],{"class":2930,"line":2967},[2928,24412,2987],{"class":2953},[2928,24414,2990],{"class":2949},[2896,24416,24417,24418,24421],{},"The script will now be served from ",[2890,24419,24420],{},"\u002F_scripts\u002F{hash}"," on your own domain.",[2885,24423,24425],{"id":24424},"to-be-continued","To be continued",[2896,24427,24428],{},"As we saw, there are many opportunities to improve third-party scripts for developers and end-users.",[2896,24430,24431,24432,24435],{},"The initial release of Nuxt Scripts has solved ",[10484,24433,24434],{},"some"," of these issues, but there's still a lot of work ahead of us.",[2896,24437,24438],{},"The next items on the roadmap are:",[4346,24440,24441,24448,24455,24462],{},[3844,24442,24443],{},[2910,24444,24447],{"href":24445,"rel":24446},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fscripts\u002Fissues\u002F182",[2914],"Add web worker support (Partytown)",[3844,24449,24450],{},[2910,24451,24454],{"href":24452,"rel":24453},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fscripts\u002Fissues\u002F44",[2914],"More Live Chat Facade Components",[3844,24456,24457],{},[2910,24458,24461],{"href":24459,"rel":24460},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fscripts\u002Fissues\u002F87",[2914],"Offload Scripts To Nuxt Server Proxy",[3844,24463,24464],{},[2910,24465,24468],{"href":24466,"rel":24467},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fscripts\u002Fissues\u002F131",[2914],"Iframe Script Sandboxing",[2896,24470,24471],{},"We'd love to have your contribution and support.",[2885,24473,24474],{"id":19033},"Getting started",[2896,24476,24477,24478,24483],{},"To get started with Nuxt Scripts, we've created a ",[2910,24479,24482],{"href":24480,"rel":24481},"https:\u002F\u002Fscripts.nuxt.com\u002Fdocs\u002Fgetting-started\u002Fconfetti-tutorial",[2914],"tutorial"," to help you get up and running.",[2885,24485,24487],{"id":24486},"credits","Credits",[4346,24489,24490,24497,24505,24512],{},[3844,24491,24492,24496],{},[2910,24493,24495],{"href":22569,"rel":24494},[2914],"Harlan Wilton - Nuxt"," (author)",[3844,24498,24499,24504],{},[2910,24500,24503],{"href":24501,"rel":24502},"https:\u002F\u002Fgithub.com\u002Fhuang-julien",[2914],"Julien Huang - Nuxt"," (contributor)",[3844,24506,24507,24504],{},[2910,24508,24511],{"href":24509,"rel":24510},"https:\u002F\u002Fgithub.com\u002Fdanielroe",[2914],"Daniel Roe - Nuxt",[3844,24513,24514,24504],{},[2910,24515,24517],{"href":22578,"rel":24516},[2914],"Chrome Aurora - Google",[2896,24519,24520],{},"And a big thank you to the early contributors.",[2896,24522,24523],{},[4183,24524],{"alt":24525,"className":24526,"src":24527},"Nuxt Scripts Contributors",[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fnuxt-scripts\u002Fcontributors.png",[4489,24529,24530],{},"html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sYRBq, html code.shiki .sYRBq{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":2924,"searchDepth":2938,"depth":2938,"links":24532},[24533,24534,24540,24547,24548,24549],{"id":22599,"depth":2938,"text":22600},{"id":22638,"depth":2938,"text":22639,"children":24535},[24536,24537,24538],{"id":22670,"depth":2967,"text":22671},{"id":23231,"depth":2967,"text":23232},{"id":23283,"depth":2967,"text":24539},"🛡️ Privacy & Security: Do no evil?",{"id":23313,"depth":2938,"text":23314,"children":24541},[24542,24543,24544,24545,24546],{"id":23317,"depth":2967,"text":23318},{"id":23634,"depth":2967,"text":23635},{"id":23731,"depth":2967,"text":23732},{"id":24187,"depth":2967,"text":24188},{"id":24354,"depth":2967,"text":24355},{"id":24424,"depth":2938,"text":24425},{"id":19033,"depth":2938,"text":24474},{"id":24486,"depth":2938,"text":24487},"2024-08-20","Nuxt Scripts provides better performance, privacy, security, and developer experience for third-party scripts.",{},{"title":2813,"description":24551},"wCmUP1yxCY4CxVQEBAL-xhFi5d6XTRLSNS886EoGeqA",{"id":24556,"title":2829,"authors":24557,"body":24563,"category":24716,"date":24717,"description":24718,"draft":108,"extension":4520,"image":24719,"meta":24720,"navigation":1196,"path":2830,"seo":24721,"stem":2831,"tags":6,"__hash__":24722},"blog\u002Fblog\u002F4.nuxt2-eol.md",[24558,24561],{"name":6222,"avatar":24559,"to":11332,"twitter":24560},{"src":6224},"atinux",{"name":2877,"avatar":24562,"to":2880},{"src":2879},{"type":2882,"value":24564,"toc":24706},[24565,24568,24571,24577,24581,24584,24589,24592,24595,24598,24621,24624,24630,24636,24640,24643,24647,24650,24655,24659,24666,24669,24674,24678,24681,24684,24699,24703],[2896,24566,24567],{},"Released in 2018, Nuxt 2.0 marked a major milestone, establishing it as a mainstream framework. Over the past six years, many developers adopted Nuxt 2, leading to the creation of numerous impressive projects across the web.",[2896,24569,24570],{},"However, looking forward, maintaining Nuxt 2 is no longer sustainable. With the recent end-of-life of Vue 2 and the maturity of Nuxt 3 and its ecosystem, it's time for our team to concentrate our efforts on the latest major version and upcoming versions.",[4460,24572,24574],{"target":4478,"to":24573},"https:\u002F\u002Fwww.herodevs.com\u002Fsupport\u002Fnuxt-nes?utm_source=nuxt&utm_medium=nuxt-eol-article",[2896,24575,24576],{},"Jump over HeroDevs' Nuxt Never-Ending Support (NES)",[2885,24578,24580],{"id":24579},"what-happens-on-june-30th-2024","What happens on June 30th, 2024?",[2896,24582,24583],{},"After this date, Nuxt 2 will continue to be available on the NPM package manager, but will no longer receive updates, such as security and browser compatibility fixes. In other words, your applications will continue to work, but you may get deprecation warnings from your package manager reminding you that Nuxt 2 is no longer a supported version.",[3774,24585,24586],{},[2896,24587,24588],{},"Vue 2 reached its end-of-life date on December 31st, 2023.",[2885,24590,24591],{"id":16893},"What’s Next?",[2896,24593,24594],{},"Nuxt 3 has been the default version of Nuxt since November 16th, 2022.",[2896,24596,24597],{},"On top of using Vue 3 and the composition API, it is shipped with features and innovations:",[4346,24599,24600,24603,24606,24609,24612,24615,24618],{},[3844,24601,24602],{},"Universal & Hybrid Rendering: Benefits of both SPA and SSR, with fine-grained control over route rendering",[3844,24604,24605],{},"Support for serverless environments (AWS Lambda, Deno, Cloudflare Workers) with minimal cold-start.",[3844,24607,24608],{},"First-Class TypeScript Support: Full typing across all components and configurations.",[3844,24610,24611],{},"Vite integration for a faster developer experience",[3844,24613,24614],{},"Server & API routes with end-to-end typing powered by Nitro",[3844,24616,24617],{},"Auto import of composables & utils",[3844,24619,24620],{},"Layers feature for domain driven development",[2896,24622,24623],{},"When and if you can, consider migrating to Nuxt 3 to take advantage of these powerful features.",[3233,24625,24627],{"to":24626},"\u002Fdocs\u002Fgetting-started\u002Fupgrade#nuxt-2-vs-nuxt-3",[2896,24628,24629],{},"See a full comparison table between Nuxt 2 and Nuxt 3, as well as detailed upgrade guides to Nuxt 3 and Nuxt Bridge (as a part of upgrading to Nuxt 3).",[3233,24631,24633],{"to":24632,"icon":1010},"\u002Fenterprise\u002Fsupport",[2896,24634,24635],{},"If you need support, including upgrading to Nuxt 3, NuxtLabs provides professional support and consultancy in a wide range of areas.",[2885,24637,24639],{"id":24638},"still-on-nuxt-2-here-are-your-options","Still on Nuxt 2? Here Are Your Options.",[2896,24641,24642],{},"Recognizing the various situations that arise during transitions, we are fully aware that users may need other options until they can migrate, or maybe migration simply isn't a feasible path. Here are some other options to consider:",[4543,24644,24646],{"id":24645},"update-to-the-nuxt-2-latest-release","Update to the Nuxt 2 latest release",[2896,24648,24649],{},"We expect to release 2.18.0 at the end of June 2024, which will include a few final fixes.",[3774,24651,24652],{},[2896,24653,24654],{},"We strongly encourage you to update to 2.18.0 once it's out. This will be the starting point for extended support mentioned below.",[4543,24656,24658],{"id":24657},"purchase-extended-support-for-nuxt-2","Purchase Extended Support for Nuxt 2",[2896,24660,24661,24662,24665],{},"If you have to stay on Nuxt 2 post-EOL, we have partnered with HeroDevs to offer Nuxt 2 Never-Ending Support (NES). Nuxt 2 NES provides ongoing security and compatibility patches for Nuxt 2 and all official Nuxt Modules (modules released by the Nuxt team, labeled ",[2890,24663,24664],{},"@nuxt\u002F..."," in the marketplace) even after EOL so that applications with strict compliance requirements remain secure and compliant. It also guarantees that Nuxt 2 applications will continue to operate effectively in modern browsers and maintain compatibility with essential libraries like Vue 2. Moreover, Nuxt 2 NES has continuous security monitoring and an enterprise level SLA with respect to support and fixes.",[2896,24667,24668],{},"Nuxt 2 NES is the continuation of the flavor of security support you’ve enjoyed during the Nuxt 2 LTS period — but indefinitely.",[4460,24670,24671],{"target":4478,"to":24573},[2896,24672,24673],{},"Read more about HeroDevs' Nuxt Never-Ending Support (NES)",[4543,24675,24677],{"id":24676},"notify-your-users-of-your-nuxt-2-post-eol-plan","Notify Your Users of Your Nuxt 2 Post-EOL Plan",[2896,24679,24680],{},"If migrating to Nuxt 3 or using Nuxt 2 NES isn't feasible right now, but you're still on Nuxt 2, it's essential to plan how you'll communicate your security strategy to your customers.",[2896,24682,24683],{},"This doesn't affect all Nuxt users, but many teams face restrictions against deploying unsupported software due to SLAs, contracts, or other obligations to clients and partners. These requirements might come from customers, regulatory bodies, or internal company policies. Increasingly, regulatory bodies are setting higher standards for software accountability.",[2896,24685,24686,24687,24692,24693,24698],{},"For those with such responsibilities, informing your customers, managers, CISO, or other stakeholders about your plans to handle support and manage potential CVEs is crucial. While Nuxt 2 has only had few vulnerabilities, CVEs can emerge even in well-maintained EOL projects through direct vulnerabilities or compromised dependencies. Staying updated with CVE notifications from organizations like ",[2910,24688,24691],{"href":24689,"rel":24690},"https:\u002F\u002Fwww.opencve.io",[2914],"OpenCVE",", and ",[2910,24694,24697],{"href":24695,"rel":24696},"https:\u002F\u002Fsnyk.io",[2914],"Snyk"," can help you identify issues as they arise. Additionally, browsers occasionally update in ways that can affect legacy libraries—though rare, it’s a possibility to be aware of.",[2885,24700,24702],{"id":24701},"looking-forward","Looking Forward",[2896,24704,24705],{},"It is with a heavy heart that I am saying goodbye to Nuxt 2. After many years of working on it and seeing so many websites made with it, this famous loading bar at the top of each Nuxt 2 website will be something I’ll miss a lot! It is with excitement and energy that I will keep working with the core team on the future of Nuxt to keep innovating like we've been doing over these past 8 years.",{"title":2924,"searchDepth":2938,"depth":2938,"links":24707},[24708,24709,24710,24715],{"id":24579,"depth":2938,"text":24580},{"id":16893,"depth":2938,"text":24591},{"id":24638,"depth":2938,"text":24639,"children":24711},[24712,24713,24714],{"id":24645,"depth":2967,"text":24646},{"id":24657,"depth":2967,"text":24658},{"id":24676,"depth":2967,"text":24677},{"id":24701,"depth":2938,"text":24702},"Announcement","2024-06-14","Nuxt 2 will reach End of Life (EOL) on June 30th, 2024. We've partnered with HeroDevs on offering Never-Ending Support (NES).","\u002Fassets\u002Fblog\u002Fnuxt2-eol.png",{},{"title":2829,"description":24718},"pjHNcDwLbvDSOHQGOQH54IKH3RE58cySagQe-gIRJFk",{"id":24724,"title":24725,"authors":24726,"body":24729,"category":4517,"date":25241,"description":25242,"draft":108,"extension":4520,"image":25243,"meta":25244,"navigation":108,"path":25245,"seo":25246,"stem":25247,"tags":6,"__hash__":25248},"blog\u002Fblog\u002F25.v3-12.md","Nuxt 3.12",[24727],{"name":2877,"avatar":24728,"to":2880},{"src":2879},{"type":2882,"value":24730,"toc":25226},[24731,24734,24738,24750,24796,24799,24805,24808,24812,24823,24826,24830,24846,24854,24858,24873,24883,24890,24892,24898,24907,24915,24927,24941,24945,24963,24971,24975,24989,24997,25001,25004,25039,25059,25062,25066,25078,25104,25108,25111,25160,25164,25183,25185,25187,25201,25203,25205,25213,25216,25219,25223],[2896,24732,24733],{},"We're on the road to the release of Nuxt 4, but we've not held back in Nuxt v3.12.",[2885,24735,24737],{"id":24736},"testing-nuxt-4-changes","🚀 Testing Nuxt 4 changes",[2896,24739,24740,24741,24746,24747,24749],{},"Nuxt 4 is on the horizon, and it's now possible to test out the behaviour changes that will be coming in the next major release (",[2910,24742,24745],{"href":24743,"rel":24744},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F26925",[2914],"#26925",") by setting an option in your ",[2890,24748,233],{}," file:",[2918,24751,24753],{"className":2920,"code":24752,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  future: {\n    compatibilityVersion: 4,\n  },\n})\n",[2890,24754,24755,24767,24775,24786,24790],{"__ignoreMap":2924},[2928,24756,24757,24759,24761,24763,24765],{"class":2930,"line":2931},[2928,24758,2942],{"class":2941},[2928,24760,3871],{"class":2941},[2928,24762,3874],{"class":2957},[2928,24764,2961],{"class":2949},[2928,24766,2964],{"class":2953},[2928,24768,24769,24771,24773],{"class":2930,"line":2938},[2928,24770,10604],{"class":2970},[2928,24772,2974],{"class":2953},[2928,24774,3033],{"class":2953},[2928,24776,24777,24779,24781,24784],{"class":2930,"line":2967},[2928,24778,10613],{"class":2970},[2928,24780,2974],{"class":2953},[2928,24782,24783],{"class":3988}," 4",[2928,24785,2981],{"class":2953},[2928,24787,24788],{"class":2930,"line":2984},[2928,24789,3383],{"class":2953},[2928,24791,24792,24794],{"class":2930,"line":2993},[2928,24793,2987],{"class":2953},[2928,24795,2990],{"class":2949},[2896,24797,24798],{},"As we've been merging PRs for Nuxt 4, we've been enabling them behind this flag. As much as possible we're aiming for backwards compatibility - our test matrix is running the same fixtures in both v3 and v4 compatibility mode.",[2896,24800,24801,24802,3088],{},"There is a lot to say here, with 10+ different PRs and behaviour changes documented and testable, but for full details, including migration steps, see ",[2910,24803,24804],{"href":21727},"the v4 upgrade documentation",[2896,24806,24807],{},"We'd be very grateful for early testing of what's coming in Nuxt 4! 🙏",[2885,24809,24811],{"id":24810},"nuxt-scripts-auto-install","📜 Nuxt Scripts auto-install",[2896,24813,24814,24815,24819,24820,11015],{},"We've been gradually working to release ",[2910,24816,22586],{"href":24817,"rel":24818},"https:\u002F\u002Fscripts.nuxt.com\u002F",[2914],". It's currently in public preview, but we're near a public release, so we've added some stubs for composables that (when used) will prompt installing the ",[2890,24821,24822],{},"@nuxt\u002Fscripts",[2896,24824,24825],{},"👉 Watch out for the launch - and an article explaining more!",[2885,24827,24829],{"id":24828},"layer-auto-registration-and-bugfixes","🌈 Layer auto-registration and bugfixes",[2896,24831,24832,24833,24836,24837,24840,24841,2916],{},"Just like ",[2890,24834,24835],{},"~\u002Fmodules",", any layers within your project in the ",[2890,24838,24839],{},"~\u002Flayers"," directory will now be automatically registered as layers in your project (",[2910,24842,24845],{"href":24843,"rel":24844},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27221",[2914],"#27221",[2896,24847,24848,24849,2916],{},"We also now correctly load layer dependencies, which should resolve a range of issues with monorepos and git installations (",[2910,24850,24853],{"href":24851,"rel":24852},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27338",[2914],"#27338",[2885,24855,24857],{"id":24856},"built-in-accessibility-improvements","🌐 Built-in accessibility improvements",[2896,24859,24860,24861,24866,24867,24872],{},"We now have a built-in ",[2910,24862,24864],{"href":24863},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-route-announcer",[2890,24865,460],{}," component and corresponding ",[2910,24868,24870],{"href":24869},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-route-announcer",[2890,24871,595],{}," composable, which will be added by default to new Nuxt templates going forward.",[2896,24874,24875,24876,2892,24881,3088],{},"For full details, see ",[2910,24877,24880],{"href":24878,"rel":24879},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F25741",[2914],"the original PR (#25741)",[2910,24882,6009],{"href":24863},[2896,24884,24885,24886,24889],{},"We're continuing to work on ",[2890,24887,24888],{},"nuxt\u002Fa11y"," - expect to hear more on that in future!",[2885,24891,20875],{"id":4394},[2896,24893,24894,24895,24897],{},"We've landed some performance improvements as well, many of which are behind the ",[2890,24896,16963],{}," flag, such as a move away from deeply reactive asyncData payloads.",[2896,24899,24900,24901,24906],{},"Significant improvements include deduplicating modules (",[2910,24902,24905],{"href":24903,"rel":24904},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27475",[2914],"#27475",") - which will apply mostly to layer users who specify modules in their layers. In one project, we saw 30s+ improvement in starting Nuxt.",[2896,24908,24909,24910,2916],{},"We've also improved Vite dev server start up time by excluding common ESM dependencies from pre-bundling, and would suggest module authors consider doing the same (",[2910,24911,24914],{"href":24912,"rel":24913},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27372",[2914],"#27372",[2896,24916,24917,24918,24921,24922,2916],{},"We improved chunk determinism, so sequential builds should be less likely to have ",[10484,24919,24920],{},"completely"," different chunk hashes (",[2910,24923,24926],{"href":24924,"rel":24925},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27258",[2914],"#27258",[2896,24928,24929,24930,24935,24936,2916],{},"And we tree shake more client-only composables from your server builds (",[2910,24931,24934],{"href":24932,"rel":24933},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27044",[2914],"#27044","), and have reduced the size of server component payloads (",[2910,24937,24940],{"href":24938,"rel":24939},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F26863",[2914],"#26863",[2885,24942,24944],{"id":24943},"multi-app-support","👨‍👩‍👧‍👦 Multi-app support",[2896,24946,24947,24948,24951,24952,24957,24958,2916],{},"We've landed a couple of changes that take us toward a place of supporting multi-app natively in Nuxt, including a ",[2890,24949,24950],{},"multiApp"," experimental flag (",[2910,24953,24956],{"href":24954,"rel":24955},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27291",[2914],"#27291",") and the ability to have multiple Nuxt app instances running in parallel at runtime (",[2910,24959,24962],{"href":24960,"rel":24961},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27068",[2914],"#27068",[2896,24964,24965,24966,24970],{},"While it's not yet ready, please do follow along on ",[2910,24967,24969],{"href":15073,"rel":24968},[2914],"the tracker issue",", and feel free to pitch in if this is interesting to you.",[2885,24972,24974],{"id":24973},"️-dx-wins","⛑️ DX wins",[2896,24976,24977,24978,14418,24983,24988],{},"We now serialise more things in your dev server logs, including VNodes (",[2910,24979,24982],{"href":24980,"rel":24981},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27309",[2914],"#27309",[2910,24984,24987],{"href":24985,"rel":24986},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fcommit\u002Fa549b46e9",[2914],"URLs",". We also addressed a bug that could lead to a frozen dev server.",[2896,24990,24991,24992,2916],{},"When accessing private runtime config in the browser, we now let you know with a more informative error message (",[2910,24993,24996],{"href":24994,"rel":24995},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F26441",[2914],"#26441",[2885,24998,25000],{"id":24999},"stabilising-features","🪨 Stabilising features",[2896,25002,25003],{},"We've removed some experimental options that have been stabilised and which we feel no longer need to be configurable:",[4346,25005,25006,25012,25018,25029],{},[3844,25007,25008,25011],{},[2890,25009,25010],{},"experimental.treeshakeClientOnly"," (enabled by default since v3.0.0)",[3844,25013,25014,25017],{},[2890,25015,25016],{},"experimental.configSchema"," (enabled by default since v3.3.0)",[3844,25019,25020,25023,25024],{},[2890,25021,25022],{},"experimental.polyfillVueUseHead"," (disabled since v3.4.0) - implementable in user-land with ",[2910,25025,25028],{"href":25026,"rel":25027},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fblob\u002Ff209158352b09d1986aa320e29ff36353b91c358\u002Fpackages\u002Fnuxt\u002Fsrc\u002Fhead\u002Fruntime\u002Fplugins\u002Fvueuse-head-polyfill.ts#L10-L11",[2914],"plugin",[3844,25030,25031,25023,25034],{},[2890,25032,25033],{},"experimental.respectNoSSRHeader",[2910,25035,25038],{"href":25036,"rel":25037},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fblob\u002Fc660b39447f0d5b8790c0826092638d321cd6821\u002Fpackages\u002Fnuxt\u002Fsrc\u002Fcore\u002Fruntime\u002Fnitro\u002Fno-ssr.ts#L8-L9",[2914],"server middleware",[2896,25040,25041,25042,25045,25046,25051,25052,25054,25055,25058],{},"We've also enabled ",[2890,25043,25044],{},"scanPageMeta"," by default (",[2910,25047,25050],{"href":25048,"rel":25049},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27134",[2914],"#27134","). This pulls out any page metadata in your ",[2890,25053,678],{}," macro, and makes it available to modules (like ",[2890,25056,25057],{},"@nuxtjs\u002Fi18n",") so they can augment it.",[2896,25060,25061],{},"This unlocks much better module\u002Ftyped routing integration, but has a potential performance cost - so please file an issue if you experience any problems.",[2885,25063,25065],{"id":25064},"type-improvements","💪 Type improvements",[2896,25067,25068,25069,25072,25073,2916],{},"We now have support for typed ",[2890,25070,25071],{},"#fallback"," slots in server components (",[2910,25074,25077],{"href":25075,"rel":25076},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27097",[2914],"#27097",[2896,25079,25080,25081,25083,25084,25087,25088,25093,25094,4309,25099,3088],{},"We've also improved some defaults in your generated ",[2890,25082,242],{},", including setting ",[2890,25085,25086],{},"module: 'preserve'"," if you have a locally installed TypeScript v5.4 version (",[2910,25089,25092],{"href":25090,"rel":25091},"https:\u002F\u002Fwww.typescriptlang.org\u002Ftsconfig\u002F#preserve",[2914],"see docs",") - see ",[2910,25095,25098],{"href":25096,"rel":25097},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F26667",[2914],"#26667",[2910,25100,25103],{"href":25101,"rel":25102},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27485",[2914],"#27485",[2885,25105,25107],{"id":25106},"module-authorpower-user-improvements","📦 Module author\u002Fpower user improvements",[2896,25109,25110],{},"We have shipped a range of type improvements for module authors, including:",[4346,25112,25113,25123,25131,25142],{},[3844,25114,25115,25116,3248,25118,3027],{},"support for typed module options in ",[2890,25117,13131],{},[2910,25119,25122],{"href":25120,"rel":25121},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F26744",[2914],"#26744",[3844,25124,25125,25126,3027],{},"the option to specify compatibility with certain builders (vite\u002Fwebpack) in module options (",[2910,25127,25130],{"href":25128,"rel":25129},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27022",[2914],"#27022",[3844,25132,25133,25134,25136,25137,3027],{},"a new ",[2890,25135,507],{}," hook for hooking into the browser hydration cycle (",[2910,25138,25141],{"href":25139,"rel":25140},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27037",[2914],"#27037",[3844,25143,25144,25145,25148,25149,2892,25151,25154,25155,3027],{},"the ability to access and update ",[10484,25146,25147],{},"resolved"," runtime configuration within modules, with new build-time ",[2890,25150,603],{},[2890,25152,25153],{},"updateRuntimeConfig"," utils (",[2910,25156,25159],{"href":25157,"rel":25158},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F27117",[2914],"#27117",[2885,25161,25163],{"id":25162},"inlined-ui-templates","🎨 Inlined UI templates",[2896,25165,25166,25167,25170,25171,25176,25177,25182],{},"If you previously used ",[2890,25168,25169],{},"@nuxt\u002Fui-templates"," then it may be worth knowing that we have moved them from ",[2910,25172,25175],{"href":25173,"rel":25174},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fui-templates",[2914],"a separate repository"," into the ",[2910,25178,25181],{"href":25179,"rel":25180},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt",[2914],"nuxt\u002Fnuxt"," monorepo. (This is purely a refactor rather than a change, although you can expect some new designs for Nuxt v4.)",[2885,25184,6103],{"id":6102},[2896,25186,13730],{},[2918,25188,25189],{"className":4437,"code":20913,"language":4439,"meta":2924,"style":2924},[2890,25190,25191],{"__ignoreMap":2924},[2928,25192,25193,25195,25197,25199],{"class":2930,"line":2931},[2928,25194,4446],{"class":3448},[2928,25196,14490],{"class":3156},[2928,25198,4452],{"class":3156},[2928,25200,20926],{"class":3156},[2896,25202,20929],{},[2885,25204,21829],{"id":4472},[3233,25206,25208],{"icon":4477,"target":4478,"to":25207},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv3.12.0",[2896,25209,4481,25210,3088],{},[2890,25211,25212],{},"v3.12.0",[2896,25214,25215],{},"A huge thank you to the 75+ Nuxt contributors and community members who have been part of this release. ❤️",[2896,25217,25218],{},"Finally, thank you for reading this far! We hope you enjoy v3.12, and please do let us know if you have any feedback or issues. 🙏",[2896,25220,25221],{},[2900,25222,11293],{},[4489,25224,25225],{},"html pre.shiki code .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sYRBq, html code.shiki .sYRBq{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}",{"title":2924,"searchDepth":2938,"depth":2938,"links":25227},[25228,25229,25230,25231,25232,25233,25234,25235,25236,25237,25238,25239,25240],{"id":24736,"depth":2938,"text":24737},{"id":24810,"depth":2938,"text":24811},{"id":24828,"depth":2938,"text":24829},{"id":24856,"depth":2938,"text":24857},{"id":4394,"depth":2938,"text":20875},{"id":24943,"depth":2938,"text":24944},{"id":24973,"depth":2938,"text":24974},{"id":24999,"depth":2938,"text":25000},{"id":25064,"depth":2938,"text":25065},{"id":25106,"depth":2938,"text":25107},{"id":25162,"depth":2938,"text":25163},{"id":6102,"depth":2938,"text":6103},{"id":4472,"depth":2938,"text":21829},"2024-06-10","Nuxt 3.12 is out - full of improvements and preparing the way for Nuxt 4!","\u002Fassets\u002Fblog\u002Fv3.12.png",{},"\u002Fblog\u002Fv3-12",{"title":24725,"description":25242},"blog\u002F25.v3-12","wHW-7bPX1aLbwVwAczLpnu-yXtTC1l53vu4K2pf5jDQ",{"id":25250,"title":2809,"authors":25251,"body":25254,"category":8580,"date":26651,"description":26652,"draft":108,"extension":4520,"image":26653,"meta":26654,"navigation":1196,"path":2810,"seo":26655,"stem":2811,"tags":6,"__hash__":26656},"blog\u002Fblog\u002F24.eslint-module.md",[25252],{"name":20973,"avatar":25253,"to":20976,"twitter":20977},{"src":20975},{"type":2882,"value":25255,"toc":26633},[25256,25260,25263,25274,25292,25298,25302,25310,25319,25334,25338,25354,25363,25366,25397,25401,25408,25418,25421,25449,25453,25469,25527,25530,25534,25545,25584,25595,25607,25674,25682,25797,25810,25876,25879,25882,25907,26077,26080,26084,26093,26097,26134,26137,26299,26315,26331,26349,26352,26368,26372,26384,26390,26393,26408,26412,26415,26430,26436,26442,26446,26460,26465,26475,26546,26553,26557,26567,26578,26581,26585,26588,26615,26618,26622,26627,26630],[2885,25257,25259],{"id":25258},"tldr","TL;DR",[2896,25261,25262],{},"We revamped our ESLint integrations to support ESLint v9 with the new flat config. Along the way, we have explored many new possibilities to make it more personalized, powerful, and with better developer experience.",[2896,25264,25265,25266,25273],{},"You can run the following command to install the new ",[2910,25267,25270],{"href":25268,"rel":25269},"https:\u002F\u002Feslint.nuxt.com\u002Fpackages\u002Fmodule",[2914],[2890,25271,25272],{},"@nuxt\u002Feslint"," module:",[2918,25275,25277],{"className":4317,"code":25276,"filename":8157,"language":4319,"meta":2924,"style":2924},"npx nuxi module add eslint\n",[2890,25278,25279],{"__ignoreMap":2924},[2928,25280,25281,25283,25285,25287,25289],{"class":2930,"line":2931},[2928,25282,4446],{"class":3448},[2928,25284,8166],{"class":3156},[2928,25286,8169],{"class":3156},[2928,25288,8172],{"class":3156},[2928,25290,25291],{"class":3156}," eslint\n",[2896,25293,25294,25295,3088],{},"Continue reading the story or learn more with ",[2910,25296,11078],{"href":25268,"rel":25297},[2914],[2885,25299,25301],{"id":25300},"background","Background",[2896,25303,25304,25309],{},[2910,25305,25308],{"href":25306,"rel":25307},"https:\u002F\u002Feslint.org\u002F",[2914],"ESLint"," has become an essential tool for today's web development. It helps you to catch errors and enforce a consistent coding style in your project. At Nuxt, we do our best to provide an out-of-the-box experience for ESLint, making it easy to use, configure and follow the best practices we recommend.",[2896,25311,25312,25313,25318],{},"Since, both Nuxt and ESLint have evolved a lot. Historically, we ended up with ",[2910,25314,25317],{"href":25315,"rel":25316},"https:\u002F\u002Feslint.nuxt.com\u002Fguide\u002Ffaq#package-disambiguation",[2914],"a few different packages and integrations for ESLint in Nuxt",", and it wasn't always obvious which one to use for what purpose. We have received a lot of feedback from our community.",[2896,25320,25321,25322,25327,25328,25333],{},"To improve the situation and also make it future-proof, we recently refreshed our ESLint integrations to support ",[2910,25323,25326],{"href":25324,"rel":25325},"https:\u002F\u002Feslint.org\u002Fblog\u002F2024\u002F04\u002Feslint-v9.0.0-released\u002F",[2914],"ESLint v9"," with the ",[2910,25329,25332],{"href":25330,"rel":25331},"https:\u002F\u002Feslint.org\u002Fdocs\u002Flatest\u002Fuse\u002Fconfigure\u002Fconfiguration-files",[2914],"flat config",". It opens up many more capabilities for customizing your ESLint setup, providing a more straightforward and unified experience.",[2885,25335,25337],{"id":25336},"nuxt-eslint-monorepo","Nuxt ESLint Monorepo",[2896,25339,25340,25341,25348,25349,3088],{},"We moved ESLint-related packages scattered across different repositories into a single monorepo: ",[2910,25342,25345],{"href":25343,"rel":25344},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Feslint",[2914],[2890,25346,25347],{},"nuxt\u002Feslint",", with a dedicated new documentation site: ",[2910,25350,25353],{"href":25351,"rel":25352},"https:\u002F\u002Feslint.nuxt.com\u002F",[2914],"eslint.nuxt.com",[2896,25355,25356,25357,25362],{},"To help understand the differences between each package and what to use, we also have a ",[2910,25358,25361],{"href":25359,"rel":25360},"https:\u002F\u002Feslint.nuxt.com\u002Fguide\u002Ffaq",[2914],"FAQ"," page comparing them and explaining their scopes.",[2896,25364,25365],{},"This monorepo now includes:",[4346,25367,25368,25373,25388,25394],{},[3844,25369,25370,25372],{},[2890,25371,25272],{}," - The new, all-in-one ESLint module for Nuxt 3, supporting project-aware ESLint flat config and more.",[3844,25374,25375,25378,25379,2892,25383,3088],{},[2890,25376,25377],{},"@nuxt\u002Feslint-config"," - The unopinionated but customizable shared ESLint config for Nuxt 3. Supports both ",[2910,25380,25382],{"href":25330,"rel":25381},[2914],"the flat config format",[2910,25384,25387],{"href":25385,"rel":25386},"https:\u002F\u002Feslint.org\u002Fdocs\u002Flatest\u002Fuse\u002Fconfigure\u002Fconfiguration-files-deprecated",[2914],"the legacy format",[3844,25389,25390,25393],{},[2890,25391,25392],{},"@nuxt\u002Feslint-plugin"," - The ESLint plugin for Nuxt 3 provides Nuxt-specific rules and configurations.",[3844,25395,25396],{},"Two packages for Nuxt 2 in maintenance mode.",[2885,25398,25400],{"id":25399},"eslint-flat-config","ESLint Flat Config",[2896,25402,25403,25404,3088],{},"Before diving into new Nuxt integrations, let me introduce you to the concept of ",[2910,25405,25407],{"href":25330,"rel":25406},[2914],"ESLint flat config",[2896,25409,25410,25411,25414,25415,3088],{},"Flat config is a configuration format introduced in ESLint ",[2890,25412,25413],{},"v8.21.0"," as experimental, and became the default format in ",[2910,25416,25326],{"href":25324,"rel":25417},[2914],[2896,25419,25420],{},"A quick reference to differentiate:",[4346,25422,25423,25435],{},[3844,25424,25425,14454,25428,10201,25431,25434],{},[2900,25426,25427],{},"Flat config",[2890,25429,25430],{},"eslint.config.js",[2890,25432,25433],{},"eslint.config.mjs"," etc.",[3844,25436,25437,14454,25440,10201,25443,10201,25446,25434],{},[2900,25438,25439],{},"Legacy config",[2890,25441,25442],{},".eslintrc",[2890,25444,25445],{},".eslintrc.json",[2890,25447,25448],{},".eslintrc.js",[4543,25450,25452],{"id":25451},"why-flat-config","Why Flat Config?",[2896,25454,25455,25460,25461,25464,25465,25468],{},[2910,25456,25459],{"href":25457,"rel":25458},"https:\u002F\u002Feslint.org\u002Fblog\u002F2022\u002F08\u002Fnew-config-system-part-1\u002F",[2914],"This blog post from ESLint"," explains the motivation behind the flat config system in detail. In short, the legacy ",[2890,25462,25463],{},"eslintrc"," format was designed in the early time of JavaScript, when ES modules and modern JavaScript features were not yet standardized. Many implicit conventions involved, and the ",[2890,25466,25467],{},"extends"," feature makes the final config result hard to understand and predict. Which also makes shared configs hard to maintain and debug.",[2918,25470,25474],{"className":25471,"code":25472,"filename":25442,"language":25473,"meta":2924,"style":2924},"language-jsonc shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","{\n  \"extends\": [\n    \u002F\u002F Solve from `import(\"@nuxtjs\u002Feslint-config\").then(mod => mod.default)`\n    \"@nuxtjs\",\n    \u002F\u002F Solve from `import(\"eslint-config-vue\").then(mod => mod.default.configs[\"vue3-recommended\"])`\n    \"plugin:vue\u002Fvue3-recommended\",\n  ],\n  \"rules\": {\n    \u002F\u002F ...\n  }\n}\n","jsonc",[2890,25475,25476,25480,25485,25490,25495,25500,25505,25510,25515,25519,25523],{"__ignoreMap":2924},[2928,25477,25478],{"class":2930,"line":2931},[2928,25479,2964],{},[2928,25481,25482],{"class":2930,"line":2938},[2928,25483,25484],{},"  \"extends\": [\n",[2928,25486,25487],{"class":2930,"line":2967},[2928,25488,25489],{},"    \u002F\u002F Solve from `import(\"@nuxtjs\u002Feslint-config\").then(mod => mod.default)`\n",[2928,25491,25492],{"class":2930,"line":2984},[2928,25493,25494],{},"    \"@nuxtjs\",\n",[2928,25496,25497],{"class":2930,"line":2993},[2928,25498,25499],{},"    \u002F\u002F Solve from `import(\"eslint-config-vue\").then(mod => mod.default.configs[\"vue3-recommended\"])`\n",[2928,25501,25502],{"class":2930,"line":2999},[2928,25503,25504],{},"    \"plugin:vue\u002Fvue3-recommended\",\n",[2928,25506,25507],{"class":2930,"line":3005},[2928,25508,25509],{},"  ],\n",[2928,25511,25512],{"class":2930,"line":3036},[2928,25513,25514],{},"  \"rules\": {\n",[2928,25516,25517],{"class":2930,"line":3054},[2928,25518,8986],{},[2928,25520,25521],{"class":2930,"line":3059},[2928,25522,3113],{},[2928,25524,25525],{"class":2930,"line":3067},[2928,25526,3764],{},[2896,25528,25529],{},"The new flat config moves the plugins and configs resolution from ESLint's internal convention to the native ES module resolution. This in turn makes it more explicit and transparent, allowing you to even import it from other modules. Since the flat config is just a JavaScript module, it also opens the door for much more customization.",[2885,25531,25533],{"id":25532},"nuxt-presets-for-flat-config","Nuxt Presets for Flat Config",[2896,25535,25536,25537,25544],{},"In the latest ",[2910,25538,25541,25543],{"href":25539,"rel":25540},"https:\u002F\u002Feslint.nuxt.com\u002Fpackages\u002Fconfig#flat-config-format",[2914],[2890,25542,25377],{}," package",", we leverage the flexibility we have to provide a factory function that allows you to customize the config presets easily in a more high-level way. Here is an example of how you can use it:",[2918,25546,25548],{"className":2920,"code":25547,"filename":25430,"language":2923,"meta":2924,"style":2924},"import { createConfigForNuxt } from '@nuxt\u002Feslint-config\u002Fflat'\n\nexport default createConfigForNuxt()\n",[2890,25549,25550,25570,25574],{"__ignoreMap":2924},[2928,25551,25552,25554,25556,25559,25561,25563,25565,25568],{"class":2930,"line":2931},[2928,25553,5398],{"class":2941},[2928,25555,3174],{"class":2953},[2928,25557,25558],{"class":2949}," createConfigForNuxt",[2928,25560,3702],{"class":2953},[2928,25562,5408],{"class":2941},[2928,25564,3329],{"class":2953},[2928,25566,25567],{"class":3156},"@nuxt\u002Feslint-config\u002Fflat",[2928,25569,5269],{"class":2953},[2928,25571,25572],{"class":2930,"line":2938},[2928,25573,2996],{"emptyLinePlaceholder":1196},[2928,25575,25576,25578,25580,25582],{"class":2930,"line":2967},[2928,25577,2942],{"class":2941},[2928,25579,3871],{"class":2941},[2928,25581,25558],{"class":2957},[2928,25583,3051],{"class":2949},[2896,25585,25586,25588,25589,25594],{},[2890,25587,25377],{}," starts with an unopinionated base config, which means we only include rules for best practices of TypeScript, Vue and Nuxt, and leave the rest like code style, formatting, etc for you to decide. You can also run ",[2910,25590,25593],{"href":25591,"rel":25592},"https:\u002F\u002Fprettier.io\u002F",[2914],"Prettier"," alongside for formatting with the defaults.",[2896,25596,25597,25598,25601,25602,3839],{},"The config also allows you to opt-in to more opinionated features as needed. For example, if you want ESLint to take care of the formatting as well, you can turn it on by passing ",[2890,25599,25600],{},"features.stylistic"," to the factory function (powered by ",[2910,25603,25606],{"href":25604,"rel":25605},"https:\u002F\u002Feslint.style\u002F",[2914],"ESLint Stylistic",[2918,25608,25610],{"className":2920,"code":25609,"filename":25430,"language":2923,"meta":2924,"style":2924},"import { createConfigForNuxt } from '@nuxt\u002Feslint-config\u002Fflat'\n\nexport default createConfigForNuxt({\n  features: {\n    stylistic: true\n  }\n})\n",[2890,25611,25612,25630,25634,25646,25655,25664,25668],{"__ignoreMap":2924},[2928,25613,25614,25616,25618,25620,25622,25624,25626,25628],{"class":2930,"line":2931},[2928,25615,5398],{"class":2941},[2928,25617,3174],{"class":2953},[2928,25619,25558],{"class":2949},[2928,25621,3702],{"class":2953},[2928,25623,5408],{"class":2941},[2928,25625,3329],{"class":2953},[2928,25627,25567],{"class":3156},[2928,25629,5269],{"class":2953},[2928,25631,25632],{"class":2930,"line":2938},[2928,25633,2996],{"emptyLinePlaceholder":1196},[2928,25635,25636,25638,25640,25642,25644],{"class":2930,"line":2967},[2928,25637,2942],{"class":2941},[2928,25639,3871],{"class":2941},[2928,25641,25558],{"class":2957},[2928,25643,2961],{"class":2949},[2928,25645,2964],{"class":2953},[2928,25647,25648,25651,25653],{"class":2930,"line":2984},[2928,25649,25650],{"class":2970},"  features",[2928,25652,2974],{"class":2953},[2928,25654,3033],{"class":2953},[2928,25656,25657,25660,25662],{"class":2930,"line":2993},[2928,25658,25659],{"class":2970},"    stylistic",[2928,25661,2974],{"class":2953},[2928,25663,8120],{"class":2977},[2928,25665,25666],{"class":2930,"line":2999},[2928,25667,3113],{"class":2953},[2928,25669,25670,25672],{"class":2930,"line":3005},[2928,25671,2987],{"class":2953},[2928,25673,2990],{"class":2949},[2896,25675,25676,25677,3839],{},"Or tweak your preferences with an options object (",[2910,25678,25681],{"href":25679,"rel":25680},"https:\u002F\u002Feslint.style\u002Fguide\u002Fconfig-presets#configuration-factory",[2914],"learn more with the options here",[2918,25683,25685],{"className":2920,"code":25684,"filename":25430,"language":2923,"meta":2924,"style":2924},"import { createConfigForNuxt } from '@nuxt\u002Feslint-config\u002Fflat'\n\nexport default createConfigForNuxt({\n  features: {\n    stylistic: {\n      semi: false,\n      indent: 2, \u002F\u002F 4 or 'tab'\n      quotes: 'single',\n      \u002F\u002F ... and more\n    }\n  }\n})\n",[2890,25686,25687,25705,25709,25721,25729,25737,25748,25762,25778,25783,25787,25791],{"__ignoreMap":2924},[2928,25688,25689,25691,25693,25695,25697,25699,25701,25703],{"class":2930,"line":2931},[2928,25690,5398],{"class":2941},[2928,25692,3174],{"class":2953},[2928,25694,25558],{"class":2949},[2928,25696,3702],{"class":2953},[2928,25698,5408],{"class":2941},[2928,25700,3329],{"class":2953},[2928,25702,25567],{"class":3156},[2928,25704,5269],{"class":2953},[2928,25706,25707],{"class":2930,"line":2938},[2928,25708,2996],{"emptyLinePlaceholder":1196},[2928,25710,25711,25713,25715,25717,25719],{"class":2930,"line":2967},[2928,25712,2942],{"class":2941},[2928,25714,3871],{"class":2941},[2928,25716,25558],{"class":2957},[2928,25718,2961],{"class":2949},[2928,25720,2964],{"class":2953},[2928,25722,25723,25725,25727],{"class":2930,"line":2984},[2928,25724,25650],{"class":2970},[2928,25726,2974],{"class":2953},[2928,25728,3033],{"class":2953},[2928,25730,25731,25733,25735],{"class":2930,"line":2993},[2928,25732,25659],{"class":2970},[2928,25734,2974],{"class":2953},[2928,25736,3033],{"class":2953},[2928,25738,25739,25742,25744,25746],{"class":2930,"line":2999},[2928,25740,25741],{"class":2970},"      semi",[2928,25743,2974],{"class":2953},[2928,25745,2978],{"class":2977},[2928,25747,2981],{"class":2953},[2928,25749,25750,25753,25755,25757,25759],{"class":2930,"line":3005},[2928,25751,25752],{"class":2970},"      indent",[2928,25754,2974],{"class":2953},[2928,25756,7428],{"class":3988},[2928,25758,3617],{"class":2953},[2928,25760,25761],{"class":2934}," \u002F\u002F 4 or 'tab'\n",[2928,25763,25764,25767,25769,25771,25774,25776],{"class":2930,"line":3036},[2928,25765,25766],{"class":2970},"      quotes",[2928,25768,2974],{"class":2953},[2928,25770,3329],{"class":2953},[2928,25772,25773],{"class":3156},"single",[2928,25775,3197],{"class":2953},[2928,25777,2981],{"class":2953},[2928,25779,25780],{"class":2930,"line":3054},[2928,25781,25782],{"class":2934},"      \u002F\u002F ... and more\n",[2928,25784,25785],{"class":2930,"line":3059},[2928,25786,4866],{"class":2953},[2928,25788,25789],{"class":2930,"line":3067},[2928,25790,3113],{"class":2953},[2928,25792,25793,25795],{"class":2930,"line":3077},[2928,25794,2987],{"class":2953},[2928,25796,2990],{"class":2949},[2896,25798,25799,25800,25805,25806,25809],{},"And if you are ",[2910,25801,25804],{"href":25802,"rel":25803},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fmodules",[2914],"authoring a Nuxt Module",", you can turn on ",[2890,25807,25808],{},"features.tooling"," to enable the rules for the Nuxt module development:",[2918,25811,25813],{"className":2920,"code":25812,"filename":25430,"language":2923,"meta":2924,"style":2924},"import { createConfigForNuxt } from '@nuxt\u002Feslint-config\u002Fflat'\n\nexport default createConfigForNuxt({\n  features: {\n    tooling: true\n  }\n})\n",[2890,25814,25815,25833,25837,25849,25857,25866,25870],{"__ignoreMap":2924},[2928,25816,25817,25819,25821,25823,25825,25827,25829,25831],{"class":2930,"line":2931},[2928,25818,5398],{"class":2941},[2928,25820,3174],{"class":2953},[2928,25822,25558],{"class":2949},[2928,25824,3702],{"class":2953},[2928,25826,5408],{"class":2941},[2928,25828,3329],{"class":2953},[2928,25830,25567],{"class":3156},[2928,25832,5269],{"class":2953},[2928,25834,25835],{"class":2930,"line":2938},[2928,25836,2996],{"emptyLinePlaceholder":1196},[2928,25838,25839,25841,25843,25845,25847],{"class":2930,"line":2967},[2928,25840,2942],{"class":2941},[2928,25842,3871],{"class":2941},[2928,25844,25558],{"class":2957},[2928,25846,2961],{"class":2949},[2928,25848,2964],{"class":2953},[2928,25850,25851,25853,25855],{"class":2930,"line":2984},[2928,25852,25650],{"class":2970},[2928,25854,2974],{"class":2953},[2928,25856,3033],{"class":2953},[2928,25858,25859,25862,25864],{"class":2930,"line":2993},[2928,25860,25861],{"class":2970},"    tooling",[2928,25863,2974],{"class":2953},[2928,25865,8120],{"class":2977},[2928,25867,25868],{"class":2930,"line":2999},[2928,25869,3113],{"class":2953},[2928,25871,25872,25874],{"class":2930,"line":3005},[2928,25873,2987],{"class":2953},[2928,25875,2990],{"class":2949},[2896,25877,25878],{},"...and so on. The factory function in flat config allows the presets to cover the complexity of the underlying ESLint configuration, and provide high-level and user-friendly abstractions for end users to customize. All this without requiring users to worry about the internal details.",[2896,25880,25881],{},"While this approach offers you a Prettier-like experience with minimal configurations (because it's powered by ESLint), you still get the full flexibility to customize and override fine-grained rules and plugins as needed.",[2896,25883,25884,25885,25892,25893,25900,25901,25903,25904,25906],{},"We also made a ",[2910,25886,25889],{"href":25887,"rel":25888},"https:\u002F\u002Fgithub.com\u002Fantfu\u002Feslint-flat-config-utils#composer",[2914],[2890,25890,25891],{},"FlatConfigComposer"," utility from ",[2910,25894,25897],{"href":25895,"rel":25896},"https:\u002F\u002Fgithub.com\u002Fantfu\u002Feslint-flat-config-utils",[2914],[2890,25898,25899],{},"eslint-flat-config-utils"," to make it even easier to override and extend the flat config. The factory function in ",[2890,25902,25567],{}," returns a ",[2890,25905,25891],{}," instance:",[2918,25908,25910],{"className":2920,"code":25909,"filename":25430,"language":2923,"meta":2924,"style":2924},"import { createConfigForNuxt } from '@nuxt\u002Feslint-config\u002Fflat'\n\nexport default createConfigForNuxt({\n  \u002F\u002F ...options for Nuxt integration\n})\n  .append(\n    \u002F\u002F ...append other flat config items\n  )\n  .prepend(\n    \u002F\u002F ...prepend other flat config items before the base config\n  )\n  \u002F\u002F override a specific config item based on their name\n  .override(\n    'nuxt\u002Ftypescript', \u002F\u002F specify the name of the target config, or index\n    {\n      rules: {\n        \u002F\u002F ...override the rules\n        '@typescript-eslint\u002Fno-unsafe-assignment': 'off'\n      }\n    }\n  )\n  \u002F\u002F an so on, operations are chainable\n",[2890,25911,25912,25930,25934,25946,25951,25957,25967,25972,25976,25985,25990,25994,25999,26008,26022,26027,26036,26041,26060,26064,26068,26072],{"__ignoreMap":2924},[2928,25913,25914,25916,25918,25920,25922,25924,25926,25928],{"class":2930,"line":2931},[2928,25915,5398],{"class":2941},[2928,25917,3174],{"class":2953},[2928,25919,25558],{"class":2949},[2928,25921,3702],{"class":2953},[2928,25923,5408],{"class":2941},[2928,25925,3329],{"class":2953},[2928,25927,25567],{"class":3156},[2928,25929,5269],{"class":2953},[2928,25931,25932],{"class":2930,"line":2938},[2928,25933,2996],{"emptyLinePlaceholder":1196},[2928,25935,25936,25938,25940,25942,25944],{"class":2930,"line":2967},[2928,25937,2942],{"class":2941},[2928,25939,3871],{"class":2941},[2928,25941,25558],{"class":2957},[2928,25943,2961],{"class":2949},[2928,25945,2964],{"class":2953},[2928,25947,25948],{"class":2930,"line":2984},[2928,25949,25950],{"class":2934},"  \u002F\u002F ...options for Nuxt integration\n",[2928,25952,25953,25955],{"class":2930,"line":2993},[2928,25954,2987],{"class":2953},[2928,25956,2990],{"class":2949},[2928,25958,25959,25962,25965],{"class":2930,"line":2999},[2928,25960,25961],{"class":2953},"  .",[2928,25963,25964],{"class":2957},"append",[2928,25966,12703],{"class":2949},[2928,25968,25969],{"class":2930,"line":3005},[2928,25970,25971],{"class":2934},"    \u002F\u002F ...append other flat config items\n",[2928,25973,25974],{"class":2930,"line":3036},[2928,25975,15814],{"class":2949},[2928,25977,25978,25980,25983],{"class":2930,"line":3054},[2928,25979,25961],{"class":2953},[2928,25981,25982],{"class":2957},"prepend",[2928,25984,12703],{"class":2949},[2928,25986,25987],{"class":2930,"line":3059},[2928,25988,25989],{"class":2934},"    \u002F\u002F ...prepend other flat config items before the base config\n",[2928,25991,25992],{"class":2930,"line":3067},[2928,25993,15814],{"class":2949},[2928,25995,25996],{"class":2930,"line":3077},[2928,25997,25998],{"class":2934},"  \u002F\u002F override a specific config item based on their name\n",[2928,26000,26001,26003,26006],{"class":2930,"line":3110},[2928,26002,25961],{"class":2953},[2928,26004,26005],{"class":2957},"override",[2928,26007,12703],{"class":2949},[2928,26009,26010,26012,26015,26017,26019],{"class":2930,"line":3116},[2928,26011,4662],{"class":2953},[2928,26013,26014],{"class":3156},"nuxt\u002Ftypescript",[2928,26016,3197],{"class":2953},[2928,26018,3617],{"class":2953},[2928,26020,26021],{"class":2934}," \u002F\u002F specify the name of the target config, or index\n",[2928,26023,26024],{"class":2930,"line":6687},[2928,26025,26026],{"class":2953},"    {\n",[2928,26028,26029,26032,26034],{"class":2930,"line":6703},[2928,26030,26031],{"class":2970},"      rules",[2928,26033,2974],{"class":2953},[2928,26035,3033],{"class":2953},[2928,26037,26038],{"class":2930,"line":6708},[2928,26039,26040],{"class":2934},"        \u002F\u002F ...override the rules\n",[2928,26042,26043,26046,26049,26051,26053,26055,26058],{"class":2930,"line":6738},[2928,26044,26045],{"class":2953},"        '",[2928,26047,26048],{"class":2970},"@typescript-eslint\u002Fno-unsafe-assignment",[2928,26050,3197],{"class":2953},[2928,26052,2974],{"class":2953},[2928,26054,3329],{"class":2953},[2928,26056,26057],{"class":3156},"off",[2928,26059,5269],{"class":2953},[2928,26061,26062],{"class":2930,"line":6776},[2928,26063,5989],{"class":2953},[2928,26065,26066],{"class":2930,"line":6785},[2928,26067,4866],{"class":2953},[2928,26069,26070],{"class":2930,"line":6790},[2928,26071,15814],{"class":2949},[2928,26073,26074],{"class":2930,"line":6819},[2928,26075,26076],{"class":2934},"  \u002F\u002F an so on, operations are chainable\n",[2896,26078,26079],{},"With this approach, we get the best of both worlds: the simplicity and high-level abstraction for easy to use, and the power for customization and fine-tuning.",[2885,26081,26083],{"id":26082},"nuxt-eslint-module","Nuxt ESLint Module",[2896,26085,26086,26087,26092],{},"Taking this even further, we made the new, all-in-one ",[2910,26088,26090,8169],{"href":25268,"rel":26089},[2914],[2890,26091,25272],{}," for Nuxt 3. It leverages Nuxt's context to generate project-aware and type-safe ESLint configurations for your project.",[4543,26094,26096],{"id":26095},"project-aware-rules","Project-aware Rules",[2896,26098,26099,26100,26105,26106,26113,26114,26121,26122,26125,26126,4309,26128,4309,26130,26133],{},"We know that Vue's Style Guide suggests the use of ",[2910,26101,26104],{"href":26102,"rel":26103},"https:\u002F\u002Fvuejs.org\u002Fstyle-guide\u002Frules-essential.html#use-multi-word-component-names",[2914],"multi-word names for components"," to avoid conflicts with existing and future HTML elements. Thus, in ",[2910,26107,26110],{"href":26108,"rel":26109},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Feslint-plugin-vue",[2914],[2890,26111,26112],{},"eslint-plugin-vue",", we have the rule ",[2910,26115,26118],{"href":26116,"rel":26117},"https:\u002F\u002Feslint.vuejs.org\u002Frules\u002Fmulti-word-component-names.html",[2914],[2890,26119,26120],{},"vue\u002Fmulti-word-component-names"," enabled by default. It's a good practice to follow, but we know that in a Nuxt project, not all ",[2890,26123,26124],{},".vue"," files are registered as components. Files like ",[2890,26127,219],{},[2890,26129,21998],{},[2890,26131,26132],{},"layouts\u002Fdefault.vue",", etc. are not available as components in other Vue files, and the rule will be irrelevant to them.",[2896,26135,26136],{},"Usually, we could turn off the rule for those files like:",[2918,26138,26142],{"className":26139,"code":26140,"filename":25430,"language":26141,"meta":2924,"style":2924},"language-js shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","export default [\n  {\n    files: ['*.vue'],\n    rules: {\n      'vue\u002Fmulti-word-component-names': 'error'\n    }\n  },\n  {\n    files: ['app.vue', 'error.vue', 'pages\u002F**\u002F*.vue', 'layouts\u002F**\u002F*.vue'],\n    rules: {\n      \u002F\u002F disable the rule for these files\n      'vue\u002Fmulti-word-component-names': 'off'\n    }\n  }\n]\n","js",[2890,26143,26144,26152,26157,26177,26185,26202,26206,26210,26214,26258,26266,26271,26287,26291,26295],{"__ignoreMap":2924},[2928,26145,26146,26148,26150],{"class":2930,"line":2931},[2928,26147,2942],{"class":2941},[2928,26149,3871],{"class":2941},[2928,26151,16685],{"class":2949},[2928,26153,26154],{"class":2930,"line":2938},[2928,26155,26156],{"class":2953},"  {\n",[2928,26158,26159,26162,26164,26166,26168,26171,26173,26175],{"class":2930,"line":2967},[2928,26160,26161],{"class":2970},"    files",[2928,26163,2974],{"class":2953},[2928,26165,4961],{"class":2949},[2928,26167,3197],{"class":2953},[2928,26169,26170],{"class":3156},"*.vue",[2928,26172,3197],{"class":2953},[2928,26174,4971],{"class":2949},[2928,26176,2981],{"class":2953},[2928,26178,26179,26181,26183],{"class":2930,"line":2984},[2928,26180,12848],{"class":2970},[2928,26182,2974],{"class":2953},[2928,26184,3033],{"class":2953},[2928,26186,26187,26190,26192,26194,26196,26198,26200],{"class":2930,"line":2993},[2928,26188,26189],{"class":2953},"      '",[2928,26191,26120],{"class":2970},[2928,26193,3197],{"class":2953},[2928,26195,2974],{"class":2953},[2928,26197,3329],{"class":2953},[2928,26199,3734],{"class":3156},[2928,26201,5269],{"class":2953},[2928,26203,26204],{"class":2930,"line":2999},[2928,26205,4866],{"class":2953},[2928,26207,26208],{"class":2930,"line":3005},[2928,26209,3383],{"class":2953},[2928,26211,26212],{"class":2930,"line":3036},[2928,26213,26156],{"class":2953},[2928,26215,26216,26218,26220,26222,26224,26226,26228,26230,26232,26234,26236,26238,26240,26243,26245,26247,26249,26252,26254,26256],{"class":2930,"line":3054},[2928,26217,26161],{"class":2970},[2928,26219,2974],{"class":2953},[2928,26221,4961],{"class":2949},[2928,26223,3197],{"class":2953},[2928,26225,219],{"class":3156},[2928,26227,3197],{"class":2953},[2928,26229,3617],{"class":2953},[2928,26231,3329],{"class":2953},[2928,26233,229],{"class":3156},[2928,26235,3197],{"class":2953},[2928,26237,3617],{"class":2953},[2928,26239,3329],{"class":2953},[2928,26241,26242],{"class":3156},"pages\u002F**\u002F*.vue",[2928,26244,3197],{"class":2953},[2928,26246,3617],{"class":2953},[2928,26248,3329],{"class":2953},[2928,26250,26251],{"class":3156},"layouts\u002F**\u002F*.vue",[2928,26253,3197],{"class":2953},[2928,26255,4971],{"class":2949},[2928,26257,2981],{"class":2953},[2928,26259,26260,26262,26264],{"class":2930,"line":3059},[2928,26261,12848],{"class":2970},[2928,26263,2974],{"class":2953},[2928,26265,3033],{"class":2953},[2928,26267,26268],{"class":2930,"line":3067},[2928,26269,26270],{"class":2934},"      \u002F\u002F disable the rule for these files\n",[2928,26272,26273,26275,26277,26279,26281,26283,26285],{"class":2930,"line":3077},[2928,26274,26189],{"class":2953},[2928,26276,26120],{"class":2970},[2928,26278,3197],{"class":2953},[2928,26280,2974],{"class":2953},[2928,26282,3329],{"class":2953},[2928,26284,26057],{"class":3156},[2928,26286,5269],{"class":2953},[2928,26288,26289],{"class":2930,"line":3110},[2928,26290,4866],{"class":2953},[2928,26292,26293],{"class":2930,"line":3116},[2928,26294,3113],{"class":2953},[2928,26296,26297],{"class":2930,"line":6687},[2928,26298,7438],{"class":2949},[2896,26300,26301,26302,24692,26307,26311,26312,3088],{},"It should work for the majority of the cases. However, we know that in Nuxt you can ",[2910,26303,26306],{"href":26304,"rel":26305},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fapi\u002Fnuxt-config#dir",[2914],"customize the path for each directory",[2910,26308,147],{"href":26309,"rel":26310},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fgetting-started\u002Flayers",[2914]," allow you to have multiple sources for each directory. This means the linter rules will be less accurate and potentially cause users extra effort to keep them aligned ",[2900,26313,26314],{},"manually",[2896,26316,26317,26318,26325,26326,2892,26328,26330],{},"Similarly, we want to have ",[2910,26319,26322],{"href":26320,"rel":26321},"https:\u002F\u002Feslint.vuejs.org\u002Frules\u002Fno-multiple-template-root.html",[2914],[2890,26323,26324],{},"vue\u002Fno-multiple-template-root"," enabled only for ",[2890,26327,171],{},[2890,26329,152],{},", etc. As the cases grow, it becomes unrealistic to ask users to maintain the rules manually.",[2896,26332,26333,26334,26336,26337,26344,26345,26348],{},"That's where the magic of ",[2890,26335,25272],{}," comes in! It leverages Nuxt's context to generate the configurations and rules specific to your project structure. Very similar to the ",[2910,26338,26341],{"href":26339,"rel":26340},"http:\u002F\u002Fnuxt.com\u002Fdocs\u002Fguide\u002Fconcepts\u002Ftypescript#auto-generated-types",[2914],[2890,26342,26343],{},".nuxt\u002Ftsconfig.json"," Nuxt provides, you now also have the project-aware ",[2890,26346,26347],{},".nuxt\u002Feslint.config.mjs"," to extend from.",[2896,26350,26351],{},"To use it, you can add the module to your Nuxt project:",[2918,26353,26354],{"className":4317,"code":25276,"filename":8157,"language":4319,"meta":2924,"style":2924},[2890,26355,26356],{"__ignoreMap":2924},[2928,26357,26358,26360,26362,26364,26366],{"class":2930,"line":2931},[2928,26359,4446],{"class":3448},[2928,26361,8166],{"class":3156},[2928,26363,8169],{"class":3156},[2928,26365,8172],{"class":3156},[2928,26367,25291],{"class":3156},[4543,26369,26371],{"id":26370},"config-inspector-devtools-integrations","Config Inspector DevTools Integrations",[2896,26373,26374,26375,26380,26381,26383],{},"During the migrations and research for the new flat config, I came up with the idea to make an interactive UI inspector for the flat config and make the configurations more transparent and easier to understand. We have integrated it into ",[2910,26376,26379],{"href":26377,"rel":26378},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fdevtools",[2914],"Nuxt DevTools"," when you have the ",[2890,26382,25272],{}," module installed so you easily access it whenever you need it.",[2896,26385,26386],{},[4183,26387],{"alt":26388,"src":26389},"Screenshot of ESLint Config Inspector running as a tab in Nuxt DevTools","\u002Fassets\u002Fblog\u002Fnuxt-eslint-inspector.png",[2896,26391,26392],{},"The inspector allows you to see the final resolved configurations, rules and plugins that have been enabled, and do quick matches to see how rules and configurations have applied to specific files. It's great for debugging and learning how ESLint works in your project.",[2896,26394,26395,26396,26401,26402,26407],{},"We are delighted that the ESLint team also finds it useful and is interested in having it for the broader ESLint community. We later joined the effort and made it ",[2910,26397,26400],{"href":26398,"rel":26399},"https:\u002F\u002Fgithub.com\u002Feslint\u002Fconfig-inspector",[2914],"the official ESLint Config Inspector"," (it's built with Nuxt, by the way). You can read ",[2910,26403,26406],{"href":26404,"rel":26405},"https:\u002F\u002Feslint.org\u002Fblog\u002F2024\u002F04\u002Feslint-config-inspector\u002F",[2914],"this announcement post"," for more details.",[4543,26409,26411],{"id":26410},"type-generation-for-rules","Type Generation for Rules",[2896,26413,26414],{},"One of the main pain points of configuring ESLint was the leak of type information for the rules and configurations. It's hard to know what options are available for a specific rule, and it would require you to jump around the documentation for every rule to figure that out.",[2896,26416,26417,26418,26425,26426,26429],{},"Thanks again for the new flat config being dynamic with so many possibilities. We figured out a new tool, ",[2910,26419,26422],{"href":26420,"rel":26421},"https:\u002F\u002Fgithub.com\u002Fantfu\u002Feslint-typegen",[2914],[2890,26423,26424],{},"eslint-typegen",", that we could generate the corresponding types from rules configuration schema for each rule ",[2900,26427,26428],{},"based on the actual plugins you are using",". This means it's a universal solution that works for any ESLint plugins, and the types are always accurate and up-to-date.",[2896,26431,26432,26433,26435],{},"In the ",[2890,26434,25272],{}," module, this feature is integrated out-of-box, so that you will get this awesome experience right away:",[2896,26437,26438],{},[4183,26439],{"alt":26440,"src":26441},"Screenshot of VS Code that showcases the type check and autocomplete with ESLint rules config","\u002Fassets\u002Fblog\u002Fnuxt-eslint-typegen.png",[4543,26443,26445],{"id":26444},"dev-server-checker","Dev Server Checker",[2896,26447,26448,26449,26456,26457,26459],{},"With the new module, we took the chance to merge the ",[2910,26450,26453],{"href":26451,"rel":26452},"https:\u002F\u002Fgithub.com\u002Fnuxt-modules\u002Feslint",[2914],[2890,26454,26455],{},"@nuxtjs\u002Feslint-module"," and the dev server checker for ESLint into the new ",[2890,26458,25272],{}," module as an opt-in feature.",[3774,26461,26462],{},[2896,26463,26464],{},"You might not need this feature most of the time, as your editor integration should already provide ESLint diagnostics right in your editor. However, for some teams that work with different editors and want to ensure ESLint is always running, being able to run ESLint within the dev server might be helpful in some cases.",[2896,26466,26467,26468,26471,26472,26474],{},"To enable it, you can set the ",[2890,26469,26470],{},"checker"," option to ",[2890,26473,4902],{}," in the module options:",[2918,26476,26478],{"className":2920,"code":26477,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  modules: [\n    '@nuxt\u002Feslint'\n  ],\n  eslint: {\n    checker: true \u002F\u002F \u003C---\n  }\n})\n",[2890,26479,26480,26492,26500,26508,26515,26524,26536,26540],{"__ignoreMap":2924},[2928,26481,26482,26484,26486,26488,26490],{"class":2930,"line":2931},[2928,26483,2942],{"class":2941},[2928,26485,3871],{"class":2941},[2928,26487,3874],{"class":2957},[2928,26489,2961],{"class":2949},[2928,26491,2964],{"class":2953},[2928,26493,26494,26496,26498],{"class":2930,"line":2938},[2928,26495,6392],{"class":2970},[2928,26497,2974],{"class":2953},[2928,26499,16685],{"class":2949},[2928,26501,26502,26504,26506],{"class":2930,"line":2967},[2928,26503,4662],{"class":2953},[2928,26505,25272],{"class":3156},[2928,26507,5269],{"class":2953},[2928,26509,26510,26513],{"class":2930,"line":2984},[2928,26511,26512],{"class":2949},"  ]",[2928,26514,2981],{"class":2953},[2928,26516,26517,26520,26522],{"class":2930,"line":2993},[2928,26518,26519],{"class":2970},"  eslint",[2928,26521,2974],{"class":2953},[2928,26523,3033],{"class":2953},[2928,26525,26526,26529,26531,26533],{"class":2930,"line":2999},[2928,26527,26528],{"class":2970},"    checker",[2928,26530,2974],{"class":2953},[2928,26532,3355],{"class":2977},[2928,26534,26535],{"class":2934}," \u002F\u002F \u003C---\n",[2928,26537,26538],{"class":2930,"line":3005},[2928,26539,3113],{"class":2953},[2928,26541,26542,26544],{"class":2930,"line":3036},[2928,26543,2987],{"class":2953},[2928,26545,2990],{"class":2949},[2896,26547,26548,26549,3088],{},"Whenever you get some ESLint errors, you will see a warning in the console and the browser. To learn more about this feature, you can check the ",[2910,26550,6009],{"href":26551,"rel":26552},"https:\u002F\u002Feslint.nuxt.com\u002Fpackages\u002Fmodule#dev-server-checker",[2914],[4543,26554,26556],{"id":26555},"module-hooks","Module Hooks",[2896,26558,26559,26560,26562,26563,26566],{},"Since we are now in the Nuxt module with the codegen capabilities and the project-aware configurations, we can actually do a lot more interesting things with this. One is that we can allow modules to contribute to the ESLint configurations as well. Imagine that in the future, when you install a Nuxt module like ",[2890,26561,25057],{}," it can automatically enable specific ESLint rules for i18n-related files, or when you install something like ",[2890,26564,26565],{},"@pinia\u002Fnuxt"," it can install the Pinia ESLint plugin to enforce the best practices for Pinia, etc.",[2896,26568,26569,26570,26577],{},"As an experiment, we made a module ",[2910,26571,26574],{"href":26572,"rel":26573},"https:\u002F\u002Fgithub.com\u002Fantfu\u002Fnuxt-eslint-auto-explicit-import",[2914],[2890,26575,26576],{},"nuxt-eslint-auto-explicit-import"," that can do auto inserts for the auto-imports registered in your Nuxt project with a preconfigured ESLint preset. So that you can get the same nice developer experience with auto-imports on using APIs, but still have the auto-inserted explicit imports in your codebase.",[2896,26579,26580],{},"This is still in the early stages, and we are still exploring the possibilities and best practices. But we are very excited about the potential and the opportunities it opens up. We will collaborate with the community to see how we can make the most out of it. If you have any ideas or feedback, please do not hesitate to share them with us!",[2885,26582,26584],{"id":26583},"ecosystem","Ecosystem",[2896,26586,26587],{},"At Nuxt, we care a lot about the ecosystem and the community as always. During our explorations to adopt the new flat config and improve the developer experience, we made quite a few tools to reach that goal. All of them are general-purposed and can be used outside of Nuxt:",[4346,26589,26590,26599,26607],{},[3844,26591,26592,26598],{},[2910,26593,26595],{"href":26398,"rel":26594},[2914],[2890,26596,26597],{},"@eslint\u002Fconfig-inspector"," - The official ESLint Config Inspector, provides interactive UI for your configs.",[3844,26600,26601,26606],{},[2910,26602,26604],{"href":26420,"rel":26603},[2914],[2890,26605,26424],{}," - Generate TypeScript types for ESLint rules based on the actual plugins you are using.",[3844,26608,26609,26614],{},[2910,26610,26612],{"href":25895,"rel":26611},[2914],[2890,26613,25899],{}," - Utilities for managing and composing ESLint flat configs.",[2896,26616,26617],{},"We are committed to supporting the broader community and collaborating with developers to improve these tools and expand their possibilities. We are excited to see how these tools can benefit the ESLint ecosystem and contribute to the overall developer experience.",[2885,26619,26621],{"id":26620},"the-future","The Future",[4460,26623,26624],{},[2896,26625,26626],{},"The flat config format is still fairly new, and ESLint v9 was just released a couple of weeks ago. Plugins and the community are gradually catching up to the new format. It's still in the phase of exploration and experimentation.",[2896,26628,26629],{},"Looking ahead, we are eager to see how the ESLint ecosystem will continue to evolve and how we can leverage new capabilities and possibilities to further enhance Nuxt's developer experience. We are dedicated to providing a seamless and powerful development environment for Nuxt users, and we will continue to explore new ideas and collaborate with the community to achieve this goal.",[4489,26631,26632],{},"html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}html pre.shiki code .sYRBq, html code.shiki .sYRBq{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":2924,"searchDepth":2938,"depth":2938,"links":26634},[26635,26636,26637,26638,26641,26642,26649,26650],{"id":25258,"depth":2938,"text":25259},{"id":25300,"depth":2938,"text":25301},{"id":25336,"depth":2938,"text":25337},{"id":25399,"depth":2938,"text":25400,"children":26639},[26640],{"id":25451,"depth":2967,"text":25452},{"id":25532,"depth":2938,"text":25533},{"id":26082,"depth":2938,"text":26083,"children":26643},[26644,26645,26646,26647,26648],{"id":26095,"depth":2967,"text":26096},{"id":26370,"depth":2967,"text":26371},{"id":26410,"depth":2967,"text":26411},{"id":26444,"depth":2967,"text":26445},{"id":26555,"depth":2967,"text":26556},{"id":26583,"depth":2938,"text":26584},{"id":26620,"depth":2938,"text":26621},"2024-04-10","We revamped our ESLint integrations to support ESLint v9 with the flat config, as well as a new module with many more capabilities.","\u002Fassets\u002Fblog\u002Fnuxt-eslint-refreshed.png",{},{"title":2809,"description":26652},"rMnFfJtMrg1zjtlOPzgvJvqy0EBOyIWZ1Wc4q0NxU_g",{"id":26658,"title":26659,"authors":26660,"body":26665,"category":4517,"date":27222,"description":27223,"draft":108,"extension":4520,"image":27224,"meta":27225,"navigation":108,"path":27226,"seo":27227,"stem":27228,"tags":6,"__hash__":27229},"blog\u002Fblog\u002F23.looking-forward-2024.md","Nuxt: Looking forward",[26661,26663],{"name":2877,"avatar":26662,"to":2880},{"src":2879},{"name":6222,"avatar":26664,"to":11332},{"src":11331},{"type":2882,"value":26666,"toc":27212},[26667,26671,26679,26686,26689,26768,26777,26796,26828,26840,26859,26863,26866,26869,26873,26876,26890,26893,26928,26931,26934,26981,26985,26988,26996,27037,27040,27043,27047,27054,27067,27073,27083,27086,27090,27093,27110,27114,27117,27120,27140,27143,27150,27153,27168,27172,27175,27184,27191,27195,27201,27204,27206,27209],[2885,26668,26670],{"id":26669},"a-review-of-2023-sébastien","A Review of 2023 - Sébastien",[2896,26672,26673,26674,26678],{},"In January 2023, Daniel set out ",[2910,26675,26676],{"href":2802},[2900,26677,2801],{},". We achieved most of the goals we set out to accomplish. Some of them are missing and we will tackle them this year!",[2896,26680,26681,26682,26685],{},"It was a productive year and the team shipped ",[2900,26683,26684],{},"9 minor releases",": from v3.1 to v3.9.",[2896,26687,26688],{},"In the first 365 days, Nuxt 3 reached new milestones:",[4346,26690,26691,26705,26715,26728,26740,26747,26754],{},[3844,26692,26693,10201,26696,26699,26700,26704],{},[26694,26695],"icon",{"name":382},[2900,26697,26698],{},"49,5K stars"," on GitHub (",[2910,26701,26703],{"href":25179,"rel":26702},[2914],"add yours"," 😊)",[3844,26706,26707,26710,26711,26714],{},[26694,26708],{"name":26709},"i-lucide-download","  ",[2900,26712,26713],{},"27M downloads"," on npm",[3844,26716,26717,10201,26720,26723,26724],{},[26694,26718],{"name":26719},"i-lucide-user-plus",[2900,26721,26722],{},"612 contributors"," on the ",[2910,26725,26727],{"href":25179,"rel":26726},[2914],"nuxt repository",[3844,26729,26730,10201,26733,26736,26737],{},[26694,26731],{"name":26732},"i-lucide-puzzle",[2900,26734,26735],{},"184 modules"," created by ",[2900,26738,26739],{},"142 maintainers",[3844,26741,26742,10201,26744],{},[26694,26743],{"name":102},[2900,26745,26746],{},"2,423 closed issues",[3844,26748,26749,10201,26751],{},[26694,26750],{"name":1020},[2900,26752,26753],{},"1,728 merged pull request",[3844,26755,26756,10201,26759,26762,26763],{},[26694,26757],{"name":26758},"i-simple-icons-discord",[2900,26760,26761],{},"26,300 members"," on ",[2910,26764,26767],{"href":26765,"rel":26766},"https:\u002F\u002Fchat.nuxt.dev",[2914],"Discord",[2896,26769,26770,26771,26776],{},"End of October, Nuxt 3 downloads ",[2910,26772,26775],{"href":26773,"rel":26774},"https:\u002F\u002Fx.com\u002FAtinux\u002Fstatus\u002F1731980841142669379",[2914],"surpassed Nuxt 2 downloads"," 🚀.",[2896,26778,26779,26780,26784,26785,4913,26790,26795],{},"The same month, we released ",[2910,26781,26783],{"href":10093,"rel":26782},[2914],"Nuxt Image 1.0"," with Nuxt 3 support and new features to make sure your website stays performant when using Images. Nuxt now auto-installs it as soon as you start using the ",[2910,26786,26788],{"href":26787},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-img",[2890,26789,496],{},[2910,26791,26793],{"href":26792},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-picture",[2890,26794,452],{}," component.",[2896,26797,26798,26799,26801,26802,4309,26807,4309,26812,4309,26817,4309,26822,26827],{},"We shipped ",[2910,26800,26379],{"href":2798},", leveling up the Developer Experience we can expect from a Web framework. I am happy to see that we inspired other frameworks to adopt a similar approach: ",[2910,26803,26806],{"href":26804,"rel":26805},"https:\u002F\u002Fx.com\u002Fvuejs\u002Fstatus\u002F1741032977919053865",[2914],"Vue DevTools",[2910,26808,26811],{"href":26809,"rel":26810},"https:\u002F\u002Fx.com\u002Fxinyao27\u002Fstatus\u002F1741447261132145133",[2914],"Next DevTools",[2910,26813,26816],{"href":26814,"rel":26815},"https:\u002F\u002Fx.com\u002FAlemTuzlak59192\u002Fstatus\u002F1741903214860009539",[2914],"Remix DevTools",[2910,26818,26821],{"href":26819,"rel":26820},"https:\u002F\u002Fgithub.com\u002Fpheno-agency\u002Fvite-plugin-devtools",[2914],"Vite Plugin DevTools",[2910,26823,26826],{"href":26824,"rel":26825},"https:\u002F\u002Fx.com\u002Fn_moore\u002Fstatus\u002F1732164645778071888",[2914],"Astro Dev Toolbar"," and more.",[2896,26829,26830,26831,26835,26836,26839],{},"After many months of building our UI library internally, ",[2910,26832,11325],{"href":26833,"rel":26834},"https:\u002F\u002Fgithub.com\u002Fbenjamincanac",[2914]," open sourced ",[2910,26837,6336],{"href":11342,"rel":26838},[2914]," to let you create websites at a faster pace with highly customizable components built with TailwindCSS.",[2896,26841,26842,26846,26847,26852,26853,26858],{},[2910,26843,8142],{"href":26844,"rel":26845},"http:\u002F\u002Fcontent.nuxt.com",[2914]," has had 10 minor releases with various improvements: from performance to the MDC syntax. We have some ongoing work to better support ",[2910,26848,26851],{"href":26849,"rel":26850},"https:\u002F\u002Fnuxt.com\u002Fblog\u002Fnuxt-on-the-edge",[2914],"edge rendering"," in the future. At the same time, the NuxtLabs team is working on ",[2910,26854,26857],{"href":26855,"rel":26856},"https:\u002F\u002Fnuxt.studio",[2914],"Nuxt Studio"," to let users edit Markdown files with a Notion-like editor while keeping your content inside your git repository.",[2885,26860,26862],{"id":26861},"looking-forward-into-2024-daniel","Looking forward into 2024 - Daniel",[2896,26864,26865],{},"We are well into 2024, and this update is definitely overdue!",[2896,26867,26868],{},"Here are a few thoughts on the direction that I'll be seeking to lead Nuxt in over the next year.",[4543,26870,26872],{"id":26871},"continued-development-and-reimagination","Continued development and reimagination",[2896,26874,26875],{},"I would love to see us continuing to adapt our best practices to the changing needs of the ecosystem, expand the boundaries of what good DX could be, and improve Nuxt.",[2896,26877,26878,26879,26884,26885,2916],{},"I am really pleased at what we currently offer in Nuxt. But I would never want to rest on our laurels. We need to keep pursuing new possibilities that appear as the web platform develops. We've committed to ",[2910,26880,26883],{"href":26881,"rel":26882},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FBaseline\u002FCompatibility",[2914],"Baseline Compatibility"," going forward (and are included in conversations about it with the ",[2910,26886,26889],{"href":26887,"rel":26888},"https:\u002F\u002Fgithub.com\u002Fweb-platform-dx\u002Fweb-features",[2914],"W3C WebDX Community Group",[2896,26891,26892],{},"We have some strategies to enable us to do this while also prioritising stability for our existing users, and recognising the scope of the Nuxt ecosystem.",[3841,26894,26895,26902,26914,26921],{},[3844,26896,26897,26898,26901],{},"In general we follow a pattern of ",[2900,26899,26900],{},"introducing a module or experimental feature"," that can be disabled in testing while we gather feedback and confirm the direction and API of new features.",[3844,26903,26904,26905,26908,26909,3088],{},"We have adopted the ",[2900,26906,26907],{},"ecosystem-ci pattern"," of validating that our code changes in Nuxt don't break downstream projects unintentionally. If you maintain a well-tested module or library that depends on Nuxt, I'd welcome a PR adding your project to ",[2910,26910,26913],{"href":26911,"rel":26912},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fecosystem-ci",[2914],"nuxt\u002Fecosystem-ci",[3844,26915,26916,26917,26920],{},"We plan to release a ",[2900,26918,26919],{},"pull-based test"," that will allow you to configure your CI to test itself against the latest nightly version of Nuxt to provide early feedback on new Nuxt releases, rather than facing an issue when upgrading.",[3844,26922,26923,26924,26927],{},"Finally, we have adopted a ",[2900,26925,26926],{},"push-based approach to updating existing projects",". When we identify breaking changes or improvements that can be rolled out to the ecosystem, we will proactively raise PRs to Nuxt modules (and, to a lesser extent, other open-source projects using Nuxt).",[2896,26929,26930],{},"I hope this will allow us to continue to innovate and experiment with new features without sacrificing the stability and maintainability.",[2896,26932,26933],{},"In particular, look for active development on the following:",[4346,26935,26936,26945,26950,26959,26967,26974],{},[3844,26937,26938,26939,26944],{},"✅ ",[2910,26940,26943],{"href":26941,"rel":26942},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Ffonts",[2914],"nuxt\u002Ffonts"," - working up to v1.0.0",[3844,26946,26938,26947,26944],{},[2910,26948,25347],{"href":25343,"rel":26949},[2914],[3844,26951,26952,26953,26958],{},"🔥 ",[2910,26954,26957],{"href":26955,"rel":26956},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fscripts",[2914],"nuxt\u002Fscripts"," - soon to be released",[3844,26960,26961,26962,26966],{},"🚧 ",[2910,26963,24888],{"href":26964,"rel":26965},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fa11y",[2914]," - coming soon!",[3844,26968,26961,26969,26966],{},[2910,26970,26973],{"href":26971,"rel":26972},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fauth",[2914],"nuxt\u002Fauth",[3844,26975,26961,26976,26966],{},[2910,26977,26980],{"href":26978,"rel":26979},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fhints",[2914],"nuxt\u002Fhints",[4543,26982,26984],{"id":26983},"sustainable-open-source","Sustainable open source",[2896,26986,26987],{},"I want Nuxt to continue to be an independent, community-driven framework for the long term.",[2896,26989,26990,26991,26995],{},"I'm really delighted to see successful businesses founded on Nuxt, and initiatives springing up around Nuxt that become ",[2910,26992,26994],{"href":26993},"\u002Fenterprise\u002Fsponsors","sponsors"," or otherwise giving back to the core framework, enabling ongoing Nuxt development.",[2896,26997,26998,26999,27003,27004,4309,27009,27012,27013,4309,27018,4309,27021,2892,27025,27030,27031,27036],{},"Obviously, ",[2910,27000,27002],{"href":11352,"rel":27001},[2914],"NuxtLabs"," is the preeminent example of that. ",[2910,27005,27008],{"href":27006,"rel":27007},"https:\u002F\u002Fgithub.com\u002Fpi0",[2914],"Pooya Parsa",[2910,27010,20973],{"href":20976,"rel":27011},[2914]," and I are all able to work full-time on open source thanks to their paid services around Nuxt: ",[2910,27014,27017],{"href":27015,"rel":27016},"https:\u002F\u002Fui.nuxt.com\u002Fpro\u002Fgetting-started",[2914],"Nuxt UI Pro",[2910,27019,27020],{"href":24632},"Nuxt Experts",[2910,27022,26857],{"href":27023,"rel":27024},"https:\u002F\u002Fnuxt.studio\u002F",[2914],[2910,27026,27029],{"href":27027,"rel":27028},"https:\u002F\u002Fhub.nuxt.com\u002F",[2914],"NuxtHub"," (soon). They also ",[2910,27032,27035],{"href":27033,"rel":27034},"https:\u002F\u002Fgithub.com\u002Forgs\u002Fnuxtlabs\u002Fsponsoring",[2914],"sponsor community members"," from Vue, Vite, UnJS, and Nuxt.",[2896,27038,27039],{},"For me, keeping Nuxt independent and sustainable for the future requires an active and growing team and community. In the weeks ahead, I'll be announcing a broader 'Nuxt team' alongside the core team. This is about recognising the tireless work of the many people whose contributions are already making Nuxt what it is.",[2896,27041,27042],{},"I would also love to see more of those team members or the wider community sponsored to work in the Nuxt ecosystem in the years ahead. If your company has benefited from Nuxt, please do consider sponsoring some of the developers working on Nuxt, whether they are team or wider community members.",[4543,27044,27046],{"id":27045},"friendly-collaboration","Friendly collaboration",[2896,27048,27049,27050,27053],{},"From the beginning of our work on Nuxt 3, we have sought to extract out utilities, libraries and even frameworks that we benefit from so they can ",[10484,27051,27052],{},"also"," benefit a much broader audience.",[2896,27055,27056,27057,27062,27063,27066],{},"That's the origin of ",[2910,27058,27061],{"href":27059,"rel":27060},"https:\u002F\u002Funjs.io\u002F",[2914],"UnJS",", of course, and it continues to thrive under the leadership of ",[2910,27064,27008],{"href":27006,"rel":27065},[2914]," (who is also a key member of the Nuxt core team).",[2896,27068,27069,27070,3088],{},"We'd like to continue that attitude of friendly collaboration. Although building things ourselves or keeping them to ourselves might to be 'success', I don't have any time for zero-sum games. We will go further, both as a framework and as a web community, if we build ",[10484,27071,27072],{},"together",[2896,27074,27075,27076,27079,27080,27082],{},"Equally, one of our core values is platform-independence (alongside deep platform ",[10484,27077,27078],{},"integration","). We support 90+ providers across deployment, testing, stories, KV and cache, databases, image CDNs and font hosts. That breadth of ecosystem is one that bears rich rewards and frees people up to make choices about which providers they use based on the value they bring. But it ",[10484,27081,27052],{}," means we are dependent on our community who use these different providers to help us keep these integrations up-to-date.",[2896,27084,27085],{},"Nuxt isn't going anywhere, but we hope that the work we do collaboratively will last long beyond us.",[4543,27087,27089],{"id":27088},"a-welcoming-community","A welcoming community",[2896,27091,27092],{},"Although it is easy to focus on technical excellence or the quality of developer experience, I am more encouraged to see the continued growth of the Nuxt ecosystem as a welcoming and friendly community.",[2896,27094,27095,27096,27100,27101,27106,27107,3088],{},"I am incredibly grateful for the kind tone that prevails across ",[2910,27097,27099],{"href":26765,"rel":27098},[2914],"our community Discord",", on ",[2910,27102,27105],{"href":27103,"rel":27104},"https:\u002F\u002Fx.com\u002Fnuxt_js",[2914],"Twitter",", and on ",[2910,27108,8544],{"href":25179,"rel":27109},[2914],[4543,27111,27113],{"id":27112},"what-about-nuxt-4","What about Nuxt 4?",[2896,27115,27116],{},"The JavaScript space is known for producing a new framework every week, which means there is a natural hype cycle.",[2896,27118,27119],{},"But we are not aiming for hype with the continued development of Nuxt, which is part of why we have committed to regular release cycles:",[4346,27121,27122,27128,27134],{},[3844,27123,27124,27127],{},[2900,27125,27126],{},"major"," framework releases every year",[3844,27129,27130,27133],{},[2900,27131,27132],{},"minor"," releases every month or so",[3844,27135,27136,27139],{},[2900,27137,27138],{},"patch"," releases every week or so",[2896,27141,27142],{},"You can expect to see breaking changes shipped in major releases, with features shipped in our minor releases. That means we aren't holding features back for Nuxt 4; we'll ship those as regularly as we can in our 6-weekly minor release cycle.",[2896,27144,27145,27146,27149],{},"Our aim is that Nuxt 4 is an opportunity for ",[10484,27147,27148],{},"thoughtful"," breaking changes with either a straightforward migration path (ideally with automated processes) or the ability to opt-in to previous behaviour.",[2896,27151,27152],{},"There are definitely lessons we as a team have learned form the transition from Nuxt 2 to 3, and I see Nuxt 4 as an opportunity for us to prove that major releases can be a good experience for users.",[2896,27154,27155,27156,27161,27162,27167],{},"You can preview the changes we have in mind by browsing ",[2910,27157,27160],{"href":27158,"rel":27159},"https:\u002F\u002Fgithub.com\u002Forgs\u002Fnuxt\u002Fprojects\u002F8\u002Fviews\u002F4",[2914],"our roadmap"," or checking through ",[2910,27163,27166],{"href":27164,"rel":27165},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fissues?q=is:issue+label:4.x",[2914],"the issues we've tagged for v4",". Feedback and wishes are very welcome as always!",[14801,27169,27171],{"id":27170},"timetable","Timetable",[2896,27173,27174],{},"Our roadmap for Nuxt 4 is a little complex as we are also planning on major releases across the UnJS ecosystem.",[2896,27176,27177,27178,27183],{},"Roughly speaking, we are aiming to have one more minor release for Nuxt v3 and Nitro v2, before beginning a ",[2910,27179,27182],{"href":27180,"rel":27181},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fcommunity\u002Fdiscussions\u002F4",[2914],"raft of major releases across the UnJS ecosystem of packages"," - culminating in Nuxt v4.",[2896,27185,27186,27187,27190],{},"We are aiming to release ",[2900,27188,27189],{},"Nuxt v4 on or before June 14"," (though obviously this is dependent on having enough time after Nitro's major release to be properly tested in the community, so be aware that this is not an exact date).",[14801,27192,27194],{"id":27193},"ongoing-support","Ongoing Support",[2896,27196,27197,27198,27200],{},"After the release of Nuxt v4, we will be providing ",[2900,27199,17064],{}," of ongoing support and bug-fixes for Nuxt v3, which we expect will be more than ample to upgrade to v4 given our aim of a gentle upgrade path.",[2896,27202,27203],{},"We hope you are as excited as we are about the pending release of Nuxt v4! 🎉",[12207,27205],{},[2896,27207,27208],{},"Finally, thank you so much for all your trust and support as we've been building Nuxt. I know I speak for the whole team when I say that it's such a privilege to be doing this alongside everyone in the Nuxt community! ❤️",[2896,27210,27211],{},"Daniel (on behalf of the whole Nuxt team)",{"title":2924,"searchDepth":2938,"depth":2938,"links":27213},[27214,27215],{"id":26669,"depth":2938,"text":26670},{"id":26861,"depth":2938,"text":26862,"children":27216},[27217,27218,27219,27220,27221],{"id":26871,"depth":2967,"text":26872},{"id":26983,"depth":2967,"text":26984},{"id":27045,"depth":2967,"text":27046},{"id":27088,"depth":2967,"text":27089},{"id":27112,"depth":2967,"text":27113},"2024-03-28","A lot of things have happened for Nuxt over the last year. Sébastien and Daniel share their thoughts on what we've achieved, and where we're going next.","\u002Fassets\u002Fblog\u002Fvision-for-2024.png",{},"\u002Fblog\u002Flooking-forward-2024",{"title":26659,"description":27223},"blog\u002F23.looking-forward-2024","cB05UyW7m1qynLonwFOkR0LULj7TZ3uWVssqBfW675o",{"id":27231,"title":27232,"authors":27233,"body":27236,"category":4517,"date":28406,"description":28407,"draft":108,"extension":4520,"image":28408,"meta":28409,"navigation":108,"path":28410,"seo":28411,"stem":28412,"tags":6,"__hash__":28413},"blog\u002Fblog\u002F22.v3-11.md","Nuxt 3.11",[27234],{"name":2877,"avatar":27235,"to":2880},{"src":2879},{"type":2882,"value":27237,"toc":28386},[27238,27241,27245,27252,27266,27269,27382,27385,27424,27427,27434,27437,27486,27490,27495,27524,27532,27535,27539,27547,27553,27561,27678,27681,27688,27724,27862,27865,27873,27884,27952,27956,27968,27981,27985,27995,28016,28028,28032,28044,28106,28118,28126,28131,28133,28148,28152,28169,28173,28189,28192,28308,28312,28319,28327,28346,28348,28351,28365,28367,28369,28377,28379,28383],[2896,27239,27240],{},"This is possibly the last minor release before Nuxt v4, and so we've packed it full of features and improvements we hope will delight you! ✨",[2885,27242,27244],{"id":27243},"better-logging","🪵 Better logging",[2896,27246,27247,27248,27251],{},"When developing a Nuxt application and using ",[2890,27249,27250],{},"console.log"," in your application, you may have noticed that these logs are not displayed in your browser console when refreshing the page (during server-side rendering). This can be frustrating, as it makes it difficult to debug your application. This is now a thing of the past!",[2896,27253,27254,27255,27260,27261,2916],{},"Now, when you have server logs associated with a request, they will be bundled up and passed to the client and displayed in your browser console. ",[2910,27256,27259],{"href":27257,"rel":27258},"https:\u002F\u002Fnodejs.org\u002Fdocs\u002Flatest-v20.x\u002Fapi\u002Fasync_context.html",[2914],"Asynchronous context"," is used to track and associate these logs with the request that triggered them. (",[2910,27262,27265],{"href":27263,"rel":27264},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F25936",[2914],"#25936",[2896,27267,27268],{},"For example, this code:",[2918,27270,27272],{"className":3129,"code":27271,"filename":21998,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup>\nconsole.log('Log from index page')\n\nconst { data } = await useAsyncData(() => {\n  console.log('Log inside useAsyncData')\n  return $fetch('\u002Fapi\u002Ftest')\n})\n\u003C\u002Fscript>\n",[2890,27273,27274,27284,27304,27308,27332,27351,27368,27374],{"__ignoreMap":2924},[2928,27275,27276,27278,27280,27282],{"class":2930,"line":2931},[2928,27277,3139],{"class":2953},[2928,27279,3142],{"class":2970},[2928,27281,3145],{"class":2945},[2928,27283,3161],{"class":2953},[2928,27285,27286,27289,27291,27293,27295,27297,27300,27302],{"class":2930,"line":2938},[2928,27287,27288],{"class":2949},"console",[2928,27290,3088],{"class":2953},[2928,27292,9254],{"class":2957},[2928,27294,2961],{"class":2949},[2928,27296,3197],{"class":2953},[2928,27298,27299],{"class":3156},"Log from index page",[2928,27301,3197],{"class":2953},[2928,27303,2990],{"class":2949},[2928,27305,27306],{"class":2930,"line":2967},[2928,27307,2996],{"emptyLinePlaceholder":1196},[2928,27309,27310,27312,27314,27316,27318,27320,27322,27324,27326,27328,27330],{"class":2930,"line":2984},[2928,27311,3171],{"class":2945},[2928,27313,3174],{"class":2953},[2928,27315,14114],{"class":2949},[2928,27317,2987],{"class":2953},[2928,27319,3045],{"class":2953},[2928,27321,3189],{"class":2941},[2928,27323,10264],{"class":2957},[2928,27325,2961],{"class":2949},[2928,27327,3647],{"class":2953},[2928,27329,3030],{"class":2945},[2928,27331,3033],{"class":2953},[2928,27333,27334,27336,27338,27340,27342,27344,27347,27349],{"class":2930,"line":2993},[2928,27335,9249],{"class":2949},[2928,27337,3088],{"class":2953},[2928,27339,9254],{"class":2957},[2928,27341,2961],{"class":2970},[2928,27343,3197],{"class":2953},[2928,27345,27346],{"class":3156},"Log inside useAsyncData",[2928,27348,3197],{"class":2953},[2928,27350,2990],{"class":2970},[2928,27352,27353,27355,27357,27359,27361,27364,27366],{"class":2930,"line":2999},[2928,27354,3062],{"class":2941},[2928,27356,3664],{"class":2957},[2928,27358,2961],{"class":2970},[2928,27360,3197],{"class":2953},[2928,27362,27363],{"class":3156},"\u002Fapi\u002Ftest",[2928,27365,3197],{"class":2953},[2928,27367,2990],{"class":2970},[2928,27369,27370,27372],{"class":2930,"line":3005},[2928,27371,2987],{"class":2953},[2928,27373,2990],{"class":2949},[2928,27375,27376,27378,27380],{"class":2930,"line":3036},[2928,27377,3209],{"class":2953},[2928,27379,3142],{"class":2970},[2928,27381,3161],{"class":2953},[2896,27383,27384],{},"will now log to your browser console when you refresh the page:",[2918,27386,27388],{"className":4317,"code":27387,"language":4319,"meta":2924,"style":2924},"Log from index page\n[ssr] Log inside useAsyncData \n    at pages\u002Findex.vue\n",[2890,27389,27390,27403,27416],{"__ignoreMap":2924},[2928,27391,27392,27395,27397,27400],{"class":2930,"line":2931},[2928,27393,27394],{"class":3448},"Log",[2928,27396,5408],{"class":3156},[2928,27398,27399],{"class":3156}," index",[2928,27401,27402],{"class":3156}," page\n",[2928,27404,27405,27408,27411,27413],{"class":2930,"line":2938},[2928,27406,27407],{"class":2953},"[",[2928,27409,27410],{"class":2949},"ssr",[2928,27412,4971],{"class":2953},[2928,27414,27415],{"class":2949}," Log inside useAsyncData \n",[2928,27417,27418,27421],{"class":2930,"line":2967},[2928,27419,27420],{"class":3448},"    at",[2928,27422,27423],{"class":3156}," pages\u002Findex.vue\n",[2896,27425,27426],{},"👉 We also plan to support streaming of subsequent logs to the Nuxt DevTools in future.",[2896,27428,27429,27430,27433],{},"We've also added a ",[2890,27431,27432],{},"dev:ssr-logs"," hook (both in Nuxt and Nitro) which is called on server and client, allowing you to handle them yourself if you want to.",[2896,27435,27436],{},"If you encounter any issues with this, it is possible to disable them - or prevent them from logging to your browser console.",[2918,27438,27440],{"className":2920,"code":27439,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  features: {\n    devLogs: false\n    \u002F\u002F or 'silent' to allow you to handle yourself with `dev:ssr-logs` hook\n  },\n})\n",[2890,27441,27442,27454,27462,27471,27476,27480],{"__ignoreMap":2924},[2928,27443,27444,27446,27448,27450,27452],{"class":2930,"line":2931},[2928,27445,2942],{"class":2941},[2928,27447,3871],{"class":2941},[2928,27449,3874],{"class":2957},[2928,27451,2961],{"class":2949},[2928,27453,2964],{"class":2953},[2928,27455,27456,27458,27460],{"class":2930,"line":2938},[2928,27457,25650],{"class":2970},[2928,27459,2974],{"class":2953},[2928,27461,3033],{"class":2953},[2928,27463,27464,27467,27469],{"class":2930,"line":2967},[2928,27465,27466],{"class":2970},"    devLogs",[2928,27468,2974],{"class":2953},[2928,27470,5979],{"class":2977},[2928,27472,27473],{"class":2930,"line":2984},[2928,27474,27475],{"class":2934},"    \u002F\u002F or 'silent' to allow you to handle yourself with `dev:ssr-logs` hook\n",[2928,27477,27478],{"class":2930,"line":2993},[2928,27479,3383],{"class":2953},[2928,27481,27482,27484],{"class":2930,"line":2999},[2928,27483,2987],{"class":2953},[2928,27485,2990],{"class":2949},[2885,27487,27489],{"id":27488},"preview-mode","🎨 Preview mode",[2896,27491,3846,27492,27494],{},[2890,27493,563],{}," composable aims to make it simple to use preview mode in your Nuxt app.",[2918,27496,27499],{"className":2920,"code":27497,"filename":27498,"language":2923,"meta":2924,"style":2924},"const { enabled, state } = usePreviewMode()\n","plugins\u002Ftest.client.ts",[2890,27500,27501],{"__ignoreMap":2924},[2928,27502,27503,27505,27507,27510,27512,27515,27517,27519,27522],{"class":2930,"line":2931},[2928,27504,3171],{"class":2945},[2928,27506,3174],{"class":2953},[2928,27508,27509],{"class":2949}," enabled",[2928,27511,3617],{"class":2953},[2928,27513,27514],{"class":2949}," state ",[2928,27516,2987],{"class":2953},[2928,27518,3045],{"class":2953},[2928,27520,27521],{"class":2957}," usePreviewMode",[2928,27523,3051],{"class":2949},[2896,27525,27526,27527,2892,27529,27531],{},"When preview mode is enabled, all your data fetching composables, like ",[2890,27528,515],{},[2890,27530,527],{}," will rerun, meaning any cached data in the payload will be bypassed.",[3233,27533],{"to":27534},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-preview-mode",[2885,27536,27538],{"id":27537},"cache-busting-payloads","💰 Cache-busting payloads",[2896,27540,27541,27542,2916],{},"We now automatically cache-bust your payloads if you haven't disabled Nuxt's app manifest, meaning you shouldn't be stuck with outdated data after a deployment (",[2910,27543,27546],{"href":27544,"rel":27545},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F26068",[2914],"#26068",[2885,27548,27550,27551],{"id":27549},"️-middleware-routerules","👮‍♂️ Middleware ",[2890,27552,4782],{},[2896,27554,27555,27556,2916],{},"It's now possible to define middleware for page paths within the Vue app part of your application (that is, not your Nitro routes) (",[2910,27557,27560],{"href":27558,"rel":27559},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F25841",[2914],"#25841",[2918,27562,27564],{"className":2920,"code":27563,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  routeRules: {\n    '\u002Fadmin\u002F**': {\n      \u002F\u002F or appMiddleware: 'auth'\n      appMiddleware: ['auth']\n    },\n    '\u002Fadmin\u002Flogin': {\n      \u002F\u002F You can 'turn off' middleware that would otherwise run for a page\n      appMiddleware: {\n        auth: false\n      }\n    },\n  },\n})\n",[2890,27565,27566,27578,27586,27598,27603,27621,27625,27638,27643,27651,27660,27664,27668,27672],{"__ignoreMap":2924},[2928,27567,27568,27570,27572,27574,27576],{"class":2930,"line":2931},[2928,27569,2942],{"class":2941},[2928,27571,3871],{"class":2941},[2928,27573,3874],{"class":2957},[2928,27575,2961],{"class":2949},[2928,27577,2964],{"class":2953},[2928,27579,27580,27582,27584],{"class":2930,"line":2938},[2928,27581,4653],{"class":2970},[2928,27583,2974],{"class":2953},[2928,27585,3033],{"class":2953},[2928,27587,27588,27590,27592,27594,27596],{"class":2930,"line":2967},[2928,27589,4662],{"class":2953},[2928,27591,4665],{"class":2970},[2928,27593,3197],{"class":2953},[2928,27595,2974],{"class":2953},[2928,27597,3033],{"class":2953},[2928,27599,27600],{"class":2930,"line":2984},[2928,27601,27602],{"class":2934},"      \u002F\u002F or appMiddleware: 'auth'\n",[2928,27604,27605,27608,27610,27612,27614,27617,27619],{"class":2930,"line":2993},[2928,27606,27607],{"class":2970},"      appMiddleware",[2928,27609,2974],{"class":2953},[2928,27611,4961],{"class":2949},[2928,27613,3197],{"class":2953},[2928,27615,27616],{"class":3156},"auth",[2928,27618,3197],{"class":2953},[2928,27620,7438],{"class":2949},[2928,27622,27623],{"class":2930,"line":2999},[2928,27624,3378],{"class":2953},[2928,27626,27627,27629,27632,27634,27636],{"class":2930,"line":3005},[2928,27628,4662],{"class":2953},[2928,27630,27631],{"class":2970},"\u002Fadmin\u002Flogin",[2928,27633,3197],{"class":2953},[2928,27635,2974],{"class":2953},[2928,27637,3033],{"class":2953},[2928,27639,27640],{"class":2930,"line":3036},[2928,27641,27642],{"class":2934},"      \u002F\u002F You can 'turn off' middleware that would otherwise run for a page\n",[2928,27644,27645,27647,27649],{"class":2930,"line":3054},[2928,27646,27607],{"class":2970},[2928,27648,2974],{"class":2953},[2928,27650,3033],{"class":2953},[2928,27652,27653,27656,27658],{"class":2930,"line":3059},[2928,27654,27655],{"class":2970},"        auth",[2928,27657,2974],{"class":2953},[2928,27659,5979],{"class":2977},[2928,27661,27662],{"class":2930,"line":3067},[2928,27663,5989],{"class":2953},[2928,27665,27666],{"class":2930,"line":3077},[2928,27667,3378],{"class":2953},[2928,27669,27670],{"class":2930,"line":3110},[2928,27671,3383],{"class":2953},[2928,27673,27674,27676],{"class":2930,"line":3116},[2928,27675,2987],{"class":2953},[2928,27677,2990],{"class":2949},[3233,27679],{"to":27680},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Frendering#route-rules",[2885,27682,27684,27685,27687],{"id":27683},"new-clear-data-fetching-utility","⌫ New ",[2890,27686,10340],{}," data fetching utility",[2896,27689,27690,27691,2892,27693,27695,27696,27698,27699,27701,27702,10579,27704,27707,27708,10579,27711,27707,27713,10579,27715,27718,27719,3027],{},"Now, ",[2890,27692,515],{},[2890,27694,527],{}," expose a ",[2890,27697,10340],{}," utility. This is a function that can be used to set ",[2890,27700,15807],{}," to undefined, set ",[2890,27703,3734],{},[2890,27705,27706],{},"null",", set ",[2890,27709,27710],{},"pending",[2890,27712,4933],{},[2890,27714,5756],{},[2890,27716,27717],{},"idle",", and mark any currently pending requests as cancelled. (",[2910,27720,27723],{"href":27721,"rel":27722},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F26259",[2914],"#26259",[2918,27725,27727],{"className":3129,"code":27726,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup lang=\"ts\">\nconst { data, clear } = await useFetch('\u002Fapi\u002Ftest')\n\nconst route = useRoute()\nwatch(() => route.path, (path) => {\n  if (path === '\u002F') clear()\n})\n\u003C\u002Fscript>\n",[2890,27728,27729,27749,27781,27785,27798,27826,27848,27854],{"__ignoreMap":2924},[2928,27730,27731,27733,27735,27737,27739,27741,27743,27745,27747],{"class":2930,"line":2931},[2928,27732,3139],{"class":2953},[2928,27734,3142],{"class":2970},[2928,27736,3145],{"class":2945},[2928,27738,3148],{"class":2945},[2928,27740,2954],{"class":2953},[2928,27742,3153],{"class":2953},[2928,27744,2923],{"class":3156},[2928,27746,3153],{"class":2953},[2928,27748,3161],{"class":2953},[2928,27750,27751,27753,27755,27757,27759,27762,27764,27766,27768,27771,27773,27775,27777,27779],{"class":2930,"line":2938},[2928,27752,3171],{"class":2945},[2928,27754,3174],{"class":2953},[2928,27756,3177],{"class":2949},[2928,27758,3617],{"class":2953},[2928,27760,27761],{"class":2949}," clear ",[2928,27763,2987],{"class":2953},[2928,27765,3045],{"class":2953},[2928,27767,3189],{"class":2941},[2928,27769,27770],{"class":2957}," useFetch",[2928,27772,2961],{"class":2949},[2928,27774,3197],{"class":2953},[2928,27776,27363],{"class":3156},[2928,27778,3197],{"class":2953},[2928,27780,2990],{"class":2949},[2928,27782,27783],{"class":2930,"line":2967},[2928,27784,2996],{"emptyLinePlaceholder":1196},[2928,27786,27787,27789,27792,27794,27796],{"class":2930,"line":2984},[2928,27788,3171],{"class":2945},[2928,27790,27791],{"class":2949}," route ",[2928,27793,2954],{"class":2953},[2928,27795,22810],{"class":2957},[2928,27797,3051],{"class":2949},[2928,27799,27800,27802,27804,27806,27808,27810,27812,27814,27816,27818,27820,27822,27824],{"class":2930,"line":2993},[2928,27801,14142],{"class":2957},[2928,27803,2961],{"class":2949},[2928,27805,3647],{"class":2953},[2928,27807,3030],{"class":2945},[2928,27809,17691],{"class":2949},[2928,27811,3088],{"class":2953},[2928,27813,6760],{"class":2949},[2928,27815,3617],{"class":2953},[2928,27817,3248],{"class":2953},[2928,27819,6760],{"class":3023},[2928,27821,3027],{"class":2953},[2928,27823,3030],{"class":2945},[2928,27825,3033],{"class":2953},[2928,27827,27828,27830,27832,27834,27836,27838,27840,27842,27844,27846],{"class":2930,"line":2999},[2928,27829,5104],{"class":2941},[2928,27831,3248],{"class":2970},[2928,27833,6760],{"class":2949},[2928,27835,7687],{"class":2953},[2928,27837,3329],{"class":2953},[2928,27839,3288],{"class":3156},[2928,27841,3197],{"class":2953},[2928,27843,3737],{"class":2970},[2928,27845,10340],{"class":2957},[2928,27847,3051],{"class":2970},[2928,27849,27850,27852],{"class":2930,"line":3005},[2928,27851,2987],{"class":2953},[2928,27853,2990],{"class":2949},[2928,27855,27856,27858,27860],{"class":2930,"line":3036},[2928,27857,3209],{"class":2953},[2928,27859,3142],{"class":2970},[2928,27861,3161],{"class":2953},[3233,27863],{"to":27864},"\u002Fdocs\u002Fgetting-started\u002Fdata-fetching",[2885,27866,27868,27869,27872],{"id":27867},"️-new-teleports-target","🕳️ New ",[2890,27870,27871],{},"#teleports"," target",[2896,27874,27875,27876,27879,27880,27883],{},"Nuxt now includes a new ",[2890,27877,27878],{},"\u003Cdiv id=\"teleports\">\u003C\u002Fdiv>"," element in your app within your ",[2890,27881,27882],{},"\u003Cbody>"," tag. It supports server-side teleports, meaning you can do this safely on the server:",[2918,27885,27887],{"className":3129,"code":27886,"filename":219,"language":3132,"meta":2924,"style":2924},"\u003Ctemplate>\n  \u003CTeleport to=\"#teleports\">\n    \u003Cspan>\n      Something\n    \u003C\u002Fspan>\n  \u003C\u002FTeleport>\n\u003C\u002Ftemplate>\n",[2890,27888,27889,27897,27915,27923,27928,27936,27944],{"__ignoreMap":2924},[2928,27890,27891,27893,27895],{"class":2930,"line":2931},[2928,27892,3139],{"class":2953},[2928,27894,3521],{"class":2970},[2928,27896,3161],{"class":2953},[2928,27898,27899,27901,27903,27905,27907,27909,27911,27913],{"class":2930,"line":2938},[2928,27900,3528],{"class":2953},[2928,27902,977],{"class":2970},[2928,27904,17923],{"class":2945},[2928,27906,2954],{"class":2953},[2928,27908,3153],{"class":2953},[2928,27910,27871],{"class":3156},[2928,27912,3153],{"class":2953},[2928,27914,3161],{"class":2953},[2928,27916,27917,27919,27921],{"class":2930,"line":2967},[2928,27918,3557],{"class":2953},[2928,27920,2928],{"class":2970},[2928,27922,3161],{"class":2953},[2928,27924,27925],{"class":2930,"line":2984},[2928,27926,27927],{"class":2949},"      Something\n",[2928,27929,27930,27932,27934],{"class":2930,"line":2993},[2928,27931,9484],{"class":2953},[2928,27933,2928],{"class":2970},[2928,27935,3161],{"class":2953},[2928,27937,27938,27940,27942],{"class":2930,"line":2999},[2928,27939,3567],{"class":2953},[2928,27941,977],{"class":2970},[2928,27943,3161],{"class":2953},[2928,27945,27946,27948,27950],{"class":2930,"line":3005},[2928,27947,3209],{"class":2953},[2928,27949,3521],{"class":2970},[2928,27951,3161],{"class":2953},[2885,27953,27955],{"id":27954},"loading-indicator-and-transition-controls","🚦 Loading indicator and transition controls",[2896,27957,27958,27959,27962,27963,2916],{},"It's now possible to set custom timings for hiding the loading indicator, and forcing the ",[2890,27960,27961],{},"finish()"," method if needed (",[2910,27964,27967],{"href":27965,"rel":27966},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F25932",[2914],"#25932",[2896,27969,27970,27971,27974,27975,27980],{},"There's also a new ",[2890,27972,27973],{},"page:view-transition:start"," hook for hooking into the View Transitions API (",[2910,27976,27979],{"href":27977,"rel":27978},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F26045",[2914],"#26045",") if you have that feature enabled.",[2885,27982,27984],{"id":27983},"️-server-and-client-only-pages","🛍️ Server- and client-only pages",[2896,27986,27987,27988,4913,27991,27994],{},"This release sees server- and client-only pages land in Nuxt! You can now add a ",[2890,27989,27990],{},".server.vue",[2890,27992,27993],{},".client.vue"," suffix to a page to get automatic handling of it.",[2896,27996,27997,28000,28001,28003,28004,28006,28007,28010,28011,2916],{},[2900,27998,27999],{},"Client-only pages"," will render entirely on the client-side, and skip server-rendering entirely, just as if the entire page was wrapped in ",[2890,28002,440],{},". Use this responsibly. The flash of load on the client-side can be a bad user experience so make sure you really need to avoid server-side loading. Also consider using ",[2890,28005,440],{}," with a ",[2890,28008,28009],{},"fallback"," slot to render a skeleton loader (",[2910,28012,28015],{"href":28013,"rel":28014},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F25037",[2914],"#25037",[2896,28017,28018,28019,28022,28023,2916],{},"⚗️ ",[2900,28020,28021],{},"Server-only pages"," are even more useful because they enable you to integrate fully-server rendered HTML within client-side navigation. They will even be prefetched when links to them are in the viewport - so you will get instantaneous loading (",[2910,28024,28027],{"href":28025,"rel":28026},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F24954",[2914],"#24954",[2885,28029,28031],{"id":28030},"server-component-bonanza","🤠 Server component bonanza",[2896,28033,28034,28035,28038,28039,2916],{},"When you are using server components, you can now use the ",[2890,28036,28037],{},"nuxt-client"," attribute anywhere within your tree (",[2910,28040,28043],{"href":28041,"rel":28042},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F25479",[2914],"#25479",[2918,28045,28047],{"className":2920,"code":28046,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  experimental: {\n    componentIslands: {\n      selectiveClient: 'deep'\n    }\n  },\n})\n",[2890,28048,28049,28061,28069,28078,28092,28096,28100],{"__ignoreMap":2924},[2928,28050,28051,28053,28055,28057,28059],{"class":2930,"line":2931},[2928,28052,2942],{"class":2941},[2928,28054,3871],{"class":2941},[2928,28056,3874],{"class":2957},[2928,28058,2961],{"class":2949},[2928,28060,2964],{"class":2953},[2928,28062,28063,28065,28067],{"class":2930,"line":2938},[2928,28064,3883],{"class":2970},[2928,28066,2974],{"class":2953},[2928,28068,3033],{"class":2953},[2928,28070,28071,28074,28076],{"class":2930,"line":2967},[2928,28072,28073],{"class":2970},"    componentIslands",[2928,28075,2974],{"class":2953},[2928,28077,3033],{"class":2953},[2928,28079,28080,28083,28085,28087,28090],{"class":2930,"line":2984},[2928,28081,28082],{"class":2970},"      selectiveClient",[2928,28084,2974],{"class":2953},[2928,28086,3329],{"class":2953},[2928,28088,28089],{"class":3156},"deep",[2928,28091,5269],{"class":2953},[2928,28093,28094],{"class":2930,"line":2993},[2928,28095,4866],{"class":2953},[2928,28097,28098],{"class":2930,"line":2999},[2928,28099,3383],{"class":2953},[2928,28101,28102,28104],{"class":2930,"line":3005},[2928,28103,2987],{"class":2953},[2928,28105,2990],{"class":2949},[2896,28107,28108,28109,28112,28113,2916],{},"You can listen to an ",[2890,28110,28111],{},"@error"," event from server components that will be triggered if there is any issue loading the component (",[2910,28114,28117],{"href":28115,"rel":28116},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F25798",[2914],"#25798",[2896,28119,28120,28121,2916],{},"Finally, server-only components are now smartly enabled when you have a server-only component or a server-only page within your project or any of its layers (",[2910,28122,28125],{"href":28123,"rel":28124},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F26223",[2914],"#26223",[6238,28127,28128],{"type":10634},[2896,28129,28130],{},"Server components remain experimental and their API may change, so be careful\nbefore depending on implementation details.",[2885,28132,20875],{"id":4394},[2896,28134,28135,28136,28141,28142,28147],{},"We've shipped a number of performance improvements, including only updating changed virtual templates (",[2910,28137,28140],{"href":28138,"rel":28139},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F26250",[2914],"#26250","), using a 'layered' prerender cache (",[2910,28143,28146],{"href":28144,"rel":28145},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F26104",[2914],"#26104",") that falls back to filesystem instead of keeping everything in memory when prerendering - and lots of other examples.",[2885,28149,28151],{"id":28150},"public-assets-handling","📂 Public assets handling",[2896,28153,28154,28155,28158,28159,28164,28165,28168],{},"We have shipped a reimplementation of Vite's public asset handling, meaning that public assets in your ",[2890,28156,28157],{},"public\u002F"," directory or your layer directories are now resolved entirely by Nuxt (",[2910,28160,28163],{"href":28161,"rel":28162},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F26163",[2914],"#26163","), so if you have added ",[2890,28166,28167],{},"nitro.publicAssets"," directories with a custom prefix, these will now work.",[2885,28170,28172],{"id":28171},"chunk-naming","📦 Chunk naming",[2896,28174,28175,28176,28179,28180,28183,28184,3027],{},"We have changed the default ",[2890,28177,28178],{},"_nuxt\u002F[name].[hash].js"," file name pattern for your JS chunks. Now, we default to ",[2890,28181,28182],{},"_nuxt\u002F[hash].js",". This is to avoid false positives by ad blockers triggering off your component or chunk names, which can be a very difficult issue to debug. (",[2910,28185,28188],{"href":28186,"rel":28187},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F26203",[2914],"#26203",[2896,28190,28191],{},"You can easily configure this to revert to previous behaviour if you wish:",[2918,28193,28195],{"className":2920,"code":28194,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  vite: {\n    $client: {\n      build: {\n        rollupOptions: {\n          output: {\n            chunkFileNames: '_nuxt\u002F[name].[hash].js',\n            entryFileNames: '_nuxt\u002F[name].[hash].js'\n          }\n        }\n      }\n    }\n  },\n})\n",[2890,28196,28197,28209,28218,28227,28236,28245,28254,28269,28282,28286,28290,28294,28298,28302],{"__ignoreMap":2924},[2928,28198,28199,28201,28203,28205,28207],{"class":2930,"line":2931},[2928,28200,2942],{"class":2941},[2928,28202,3871],{"class":2941},[2928,28204,3874],{"class":2957},[2928,28206,2961],{"class":2949},[2928,28208,2964],{"class":2953},[2928,28210,28211,28214,28216],{"class":2930,"line":2938},[2928,28212,28213],{"class":2970},"  vite",[2928,28215,2974],{"class":2953},[2928,28217,3033],{"class":2953},[2928,28219,28220,28223,28225],{"class":2930,"line":2967},[2928,28221,28222],{"class":2970},"    $client",[2928,28224,2974],{"class":2953},[2928,28226,3033],{"class":2953},[2928,28228,28229,28232,28234],{"class":2930,"line":2984},[2928,28230,28231],{"class":2970},"      build",[2928,28233,2974],{"class":2953},[2928,28235,3033],{"class":2953},[2928,28237,28238,28241,28243],{"class":2930,"line":2993},[2928,28239,28240],{"class":2970},"        rollupOptions",[2928,28242,2974],{"class":2953},[2928,28244,3033],{"class":2953},[2928,28246,28247,28250,28252],{"class":2930,"line":2999},[2928,28248,28249],{"class":2970},"          output",[2928,28251,2974],{"class":2953},[2928,28253,3033],{"class":2953},[2928,28255,28256,28259,28261,28263,28265,28267],{"class":2930,"line":3005},[2928,28257,28258],{"class":2970},"            chunkFileNames",[2928,28260,2974],{"class":2953},[2928,28262,3329],{"class":2953},[2928,28264,28178],{"class":3156},[2928,28266,3197],{"class":2953},[2928,28268,2981],{"class":2953},[2928,28270,28271,28274,28276,28278,28280],{"class":2930,"line":3036},[2928,28272,28273],{"class":2970},"            entryFileNames",[2928,28275,2974],{"class":2953},[2928,28277,3329],{"class":2953},[2928,28279,28178],{"class":3156},[2928,28281,5269],{"class":2953},[2928,28283,28284],{"class":2930,"line":3054},[2928,28285,20420],{"class":2953},[2928,28287,28288],{"class":2930,"line":3059},[2928,28289,5984],{"class":2953},[2928,28291,28292],{"class":2930,"line":3067},[2928,28293,5989],{"class":2953},[2928,28295,28296],{"class":2930,"line":3077},[2928,28297,4866],{"class":2953},[2928,28299,28300],{"class":2930,"line":3110},[2928,28301,3383],{"class":2953},[2928,28303,28304,28306],{"class":2930,"line":3116},[2928,28305,2987],{"class":2953},[2928,28307,2990],{"class":2949},[2885,28309,28311],{"id":28310},"type-fixes","💪 Type fixes",[2896,28313,28314,28315,28318],{},"Previously users with ",[2890,28316,28317],{},"shamefully-hoist=false"," may have encountered issues with types not being resolved or working correctly. You may also have encountered problems with excessive type instantiation.",[2896,28320,28321,28322,2916],{},"We now try to tell TypeScript about certain key types so they can be resolved even if deeply nested (",[2910,28323,28326],{"href":28324,"rel":28325},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F26158",[2914],"#26158",[2896,28328,28329,28330,2892,28335,28340,28341,2916],{},"There are a whole raft of other type fixes, including some regarding import types (",[2910,28331,28334],{"href":28332,"rel":28333},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F26218",[2914],"#26218",[2910,28336,28339],{"href":28337,"rel":28338},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F25965",[2914],"#25965",") and module typings (",[2910,28342,28345],{"href":28343,"rel":28344},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F25548",[2914],"#25548",[2885,28347,6103],{"id":6102},[2896,28349,28350],{},"As usual, our recommendation for upgrading Nuxt is to run:",[2918,28352,28354],{"className":4317,"code":28353,"language":4319,"meta":2924,"style":2924},"nuxi upgrade --force\n",[2890,28355,28356],{"__ignoreMap":2924},[2928,28357,28358,28361,28363],{"class":2930,"line":2931},[2928,28359,28360],{"class":3448},"nuxi",[2928,28362,4452],{"class":3156},[2928,28364,20926],{"class":3156},[2896,28366,20929],{},[2885,28368,10111],{"id":4472},[3233,28370,28372],{"to":28371,"icon":4477,"target":4478},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv3.11.0",[2896,28373,4481,28374,3088],{},[2890,28375,28376],{},"v3.11.0",[2896,28378,11288],{},[2896,28380,28381],{},[2900,28382,11293],{},[4489,28384,28385],{},"html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":2924,"searchDepth":2938,"depth":2938,"links":28387},[28388,28389,28390,28391,28393,28395,28397,28398,28399,28400,28401,28402,28403,28404,28405],{"id":27243,"depth":2938,"text":27244},{"id":27488,"depth":2938,"text":27489},{"id":27537,"depth":2938,"text":27538},{"id":27549,"depth":2938,"text":28392},"👮‍♂️ Middleware routeRules",{"id":27683,"depth":2938,"text":28394},"⌫ New clear data fetching utility",{"id":27867,"depth":2938,"text":28396},"🕳️ New #teleports target",{"id":27954,"depth":2938,"text":27955},{"id":27983,"depth":2938,"text":27984},{"id":28030,"depth":2938,"text":28031},{"id":4394,"depth":2938,"text":20875},{"id":28150,"depth":2938,"text":28151},{"id":28171,"depth":2938,"text":28172},{"id":28310,"depth":2938,"text":28311},{"id":6102,"depth":2938,"text":6103},{"id":4472,"depth":2938,"text":10111},"2024-03-16","Nuxt 3.11 is out - with better logging, preview mode, server pages and much more!","\u002Fassets\u002Fblog\u002Fv3.11.png",{},"\u002Fblog\u002Fv3-11",{"title":27232,"description":28407},"blog\u002F22.v3-11","C5AvLDaCeE8VlWmXqgvk_gL4zM2zdaqZa1DKAljqy8o",{"id":28415,"title":2805,"authors":28416,"body":28419,"category":8580,"date":30018,"description":30019,"draft":108,"extension":4520,"image":30020,"meta":30021,"navigation":1196,"path":2806,"seo":30022,"stem":2807,"tags":6,"__hash__":30023},"blog\u002Fblog\u002F21.shiki-v1.md",[28417],{"name":20973,"avatar":28418,"to":20976,"twitter":20977},{"src":20975},{"type":2882,"value":28420,"toc":30010},[28421,28447,28469,29074,29077,29096,29099,29103,29116,29129,29138,29159,29233,29281,29318,29321,29324,29328,29341,29401,29410,29427,29453,29465,29506,29523,29527,29541,29544,29557,29564,29571,29580,29584,29630,29645,29655,29678,29697,29839,29873,29877,29880,29980,29987,29991,30007],[2896,28422,28423,28428,28429,28434,28435,28440,28441,28446],{},[2910,28424,28427],{"href":28425,"rel":28426},"https:\u002F\u002Fgithub.com\u002Fshikijs\u002Fshiki",[2914],"Shiki"," is a syntax highlighter that uses ",[2910,28430,28433],{"href":28431,"rel":28432},"https:\u002F\u002Fcode.visualstudio.com\u002Fapi\u002Flanguage-extensions\u002Fsyntax-highlight-guide#textmate-grammars",[2914],"TextMate grammars and themes",", the same engine that powers VS Code. It provides one of the most accurate and beautiful syntax highlighting for your code snippets. It was created by ",[2910,28436,28439],{"href":28437,"rel":28438},"https:\u002F\u002Fgithub.com\u002Foctref",[2914],"Pine Wu"," back in 2018, when he was part of the VS Code team. It started as an experiment to use ",[2910,28442,28445],{"href":28443,"rel":28444},"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fvscode-oniguruma",[2914],"Oniguruma"," to do syntax highlighting.",[2896,28448,28449,28450,2892,28455,28460,28461,28464,28465,28468],{},"Different from existing syntax highlighters like ",[2910,28451,28454],{"href":28452,"rel":28453},"https:\u002F\u002Fprismjs.com\u002F",[2914],"Prism",[2910,28456,28459],{"href":28457,"rel":28458},"https:\u002F\u002Fhighlightjs.org\u002F",[2914],"Highlight.js"," that designed to run in the browser, Shiki took a different approach by ",[2900,28462,28463],{},"highlighting ahead of time",". It ships the highlighted HTML to the client, producing accurate and beautiful syntax highlighting with ",[2900,28466,28467],{},"zero JavaScript",". It soon took off and became a very popular choice, especially for static site generators and documentation sites.",[28470,28471,28473,28476,28524,28527,29067],"collapsible",{"name":28472},"Shiki Example",[2896,28474,28475],{},"For example, with the code snippet below:",[2918,28477,28479],{"className":2920,"code":28478,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  modules: [\n    '@nuxt\u002Fcontent',\n  ],\n})\n",[2890,28480,28481,28493,28501,28512,28518],{"__ignoreMap":2924},[2928,28482,28483,28485,28487,28489,28491],{"class":2930,"line":2931},[2928,28484,2942],{"class":2941},[2928,28486,3871],{"class":2941},[2928,28488,3874],{"class":2957},[2928,28490,2961],{"class":2949},[2928,28492,2964],{"class":2953},[2928,28494,28495,28497,28499],{"class":2930,"line":2938},[2928,28496,6392],{"class":2970},[2928,28498,2974],{"class":2953},[2928,28500,16685],{"class":2949},[2928,28502,28503,28505,28508,28510],{"class":2930,"line":2967},[2928,28504,4662],{"class":2953},[2928,28506,28507],{"class":3156},"@nuxt\u002Fcontent",[2928,28509,3197],{"class":2953},[2928,28511,2981],{"class":2953},[2928,28513,28514,28516],{"class":2930,"line":2984},[2928,28515,26512],{"class":2949},[2928,28517,2981],{"class":2953},[2928,28519,28520,28522],{"class":2930,"line":2993},[2928,28521,2987],{"class":2953},[2928,28523,2990],{"class":2949},[2896,28525,28526],{},"Shiki will generate the following HTML:",[2918,28528,28530],{"className":12274,"code":28529,"language":12276,"meta":2924,"style":2924},"\u003Cpre class=\"shiki material-theme-palenight\" style=\"background-color:#292D3E;color:#babed8\" tabindex=\"0\">\n  \u003Ccode>\n    \u003Cspan class=\"line\">\u003Cspan style=\"color:#89DDFF;font-style:italic\">export\u003C\u002Fspan>\u003Cspan style=\"color:#89DDFF;font-style:italic\"> default\u003C\u002Fspan>\u003Cspan style=\"color:#82AAFF\"> defineNuxtConfig\u003C\u002Fspan>\u003Cspan style=\"color:#BABED8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#89DDFF\">{\u003C\u002Fspan>\u003C\u002Fspan>\n    \u003Cspan class=\"line\">\u003Cspan style=\"color:#F07178\">  modules\u003C\u002Fspan>\u003Cspan style=\"color:#89DDFF\">:\u003C\u002Fspan>\u003Cspan style=\"color:#BABED8\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n    \u003Cspan class=\"line\">\u003Cspan style=\"color:#89DDFF\">    '\u003C\u002Fspan>\u003Cspan style=\"color:#C3E88D\">@nuxt\u002Fcontent\u003C\u002Fspan>\u003Cspan style=\"color:#89DDFF\">'\u003C\u002Fspan>\u003Cspan style=\"color:#89DDFF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n    \u003Cspan class=\"line\">\u003Cspan style=\"color:#BABED8\">  ]\u003C\u002Fspan>\u003Cspan style=\"color:#89DDFF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n    \u003Cspan class=\"line\">\u003Cspan style=\"color:#89DDFF\">}\u003C\u002Fspan>\u003Cspan style=\"color:#BABED8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n  \u003C\u002Fcode>\n\u003C\u002Fpre>\n",[2890,28531,28532,28574,28582,28719,28808,28919,28985,29051,29059],{"__ignoreMap":2924},[2928,28533,28534,28536,28538,28540,28542,28544,28547,28549,28552,28554,28556,28559,28561,28564,28566,28568,28570,28572],{"class":2930,"line":2931},[2928,28535,3139],{"class":2953},[2928,28537,2918],{"class":2970},[2928,28539,15516],{"class":2945},[2928,28541,2954],{"class":2953},[2928,28543,3153],{"class":2953},[2928,28545,28546],{"class":3156},"shiki material-theme-palenight",[2928,28548,3153],{"class":2953},[2928,28550,28551],{"class":2945}," style",[2928,28553,2954],{"class":2953},[2928,28555,3153],{"class":2953},[2928,28557,28558],{"class":3156},"background-color:#292D3E;color:#babed8",[2928,28560,3153],{"class":2953},[2928,28562,28563],{"class":2945}," tabindex",[2928,28565,2954],{"class":2953},[2928,28567,3153],{"class":2953},[2928,28569,15884],{"class":3156},[2928,28571,3153],{"class":2953},[2928,28573,3161],{"class":2953},[2928,28575,28576,28578,28580],{"class":2930,"line":2938},[2928,28577,3528],{"class":2953},[2928,28579,2890],{"class":2970},[2928,28581,3161],{"class":2953},[2928,28583,28584,28586,28588,28590,28592,28594,28596,28598,28600,28602,28604,28606,28608,28611,28613,28615,28617,28619,28621,28623,28625,28627,28629,28631,28633,28635,28637,28639,28641,28643,28645,28647,28649,28651,28653,28656,28658,28660,28662,28664,28666,28668,28670,28672,28674,28676,28679,28681,28683,28685,28687,28689,28691,28693,28695,28697,28699,28702,28704,28706,28708,28710,28712,28715,28717],{"class":2930,"line":2967},[2928,28585,3557],{"class":2953},[2928,28587,2928],{"class":2970},[2928,28589,15516],{"class":2945},[2928,28591,2954],{"class":2953},[2928,28593,3153],{"class":2953},[2928,28595,2930],{"class":3156},[2928,28597,3153],{"class":2953},[2928,28599,24092],{"class":2953},[2928,28601,2928],{"class":2970},[2928,28603,28551],{"class":2945},[2928,28605,2954],{"class":2953},[2928,28607,3153],{"class":2953},[2928,28609,28610],{"class":3156},"color:#89DDFF;font-style:italic",[2928,28612,3153],{"class":2953},[2928,28614,9470],{"class":2953},[2928,28616,2942],{"class":2949},[2928,28618,3209],{"class":2953},[2928,28620,2928],{"class":2970},[2928,28622,24092],{"class":2953},[2928,28624,2928],{"class":2970},[2928,28626,28551],{"class":2945},[2928,28628,2954],{"class":2953},[2928,28630,3153],{"class":2953},[2928,28632,28610],{"class":3156},[2928,28634,3153],{"class":2953},[2928,28636,9470],{"class":2953},[2928,28638,3871],{"class":2949},[2928,28640,3209],{"class":2953},[2928,28642,2928],{"class":2970},[2928,28644,24092],{"class":2953},[2928,28646,2928],{"class":2970},[2928,28648,28551],{"class":2945},[2928,28650,2954],{"class":2953},[2928,28652,3153],{"class":2953},[2928,28654,28655],{"class":3156},"color:#82AAFF",[2928,28657,3153],{"class":2953},[2928,28659,9470],{"class":2953},[2928,28661,3874],{"class":2949},[2928,28663,3209],{"class":2953},[2928,28665,2928],{"class":2970},[2928,28667,24092],{"class":2953},[2928,28669,2928],{"class":2970},[2928,28671,28551],{"class":2945},[2928,28673,2954],{"class":2953},[2928,28675,3153],{"class":2953},[2928,28677,28678],{"class":3156},"color:#BABED8",[2928,28680,3153],{"class":2953},[2928,28682,9470],{"class":2953},[2928,28684,2961],{"class":2949},[2928,28686,3209],{"class":2953},[2928,28688,2928],{"class":2970},[2928,28690,24092],{"class":2953},[2928,28692,2928],{"class":2970},[2928,28694,28551],{"class":2945},[2928,28696,2954],{"class":2953},[2928,28698,3153],{"class":2953},[2928,28700,28701],{"class":3156},"color:#89DDFF",[2928,28703,3153],{"class":2953},[2928,28705,9470],{"class":2953},[2928,28707,9398],{"class":2949},[2928,28709,3209],{"class":2953},[2928,28711,2928],{"class":2970},[2928,28713,28714],{"class":2953},">\u003C\u002F",[2928,28716,2928],{"class":2970},[2928,28718,3161],{"class":2953},[2928,28720,28721,28723,28725,28727,28729,28731,28733,28735,28737,28739,28741,28743,28745,28748,28750,28752,28754,28756,28758,28760,28762,28764,28766,28768,28770,28772,28774,28776,28778,28780,28782,28784,28786,28788,28790,28792,28794,28796,28798,28800,28802,28804,28806],{"class":2930,"line":2984},[2928,28722,3557],{"class":2953},[2928,28724,2928],{"class":2970},[2928,28726,15516],{"class":2945},[2928,28728,2954],{"class":2953},[2928,28730,3153],{"class":2953},[2928,28732,2930],{"class":3156},[2928,28734,3153],{"class":2953},[2928,28736,24092],{"class":2953},[2928,28738,2928],{"class":2970},[2928,28740,28551],{"class":2945},[2928,28742,2954],{"class":2953},[2928,28744,3153],{"class":2953},[2928,28746,28747],{"class":3156},"color:#F07178",[2928,28749,3153],{"class":2953},[2928,28751,9470],{"class":2953},[2928,28753,6392],{"class":2949},[2928,28755,3209],{"class":2953},[2928,28757,2928],{"class":2970},[2928,28759,24092],{"class":2953},[2928,28761,2928],{"class":2970},[2928,28763,28551],{"class":2945},[2928,28765,2954],{"class":2953},[2928,28767,3153],{"class":2953},[2928,28769,28701],{"class":3156},[2928,28771,3153],{"class":2953},[2928,28773,9470],{"class":2953},[2928,28775,2974],{"class":2949},[2928,28777,3209],{"class":2953},[2928,28779,2928],{"class":2970},[2928,28781,24092],{"class":2953},[2928,28783,2928],{"class":2970},[2928,28785,28551],{"class":2945},[2928,28787,2954],{"class":2953},[2928,28789,3153],{"class":2953},[2928,28791,28678],{"class":3156},[2928,28793,3153],{"class":2953},[2928,28795,9470],{"class":2953},[2928,28797,4961],{"class":2949},[2928,28799,3209],{"class":2953},[2928,28801,2928],{"class":2970},[2928,28803,28714],{"class":2953},[2928,28805,2928],{"class":2970},[2928,28807,3161],{"class":2953},[2928,28809,28810,28812,28814,28816,28818,28820,28822,28824,28826,28828,28830,28832,28834,28836,28838,28840,28842,28844,28846,28848,28850,28852,28854,28856,28859,28861,28863,28865,28867,28869,28871,28873,28875,28877,28879,28881,28883,28885,28887,28889,28891,28893,28895,28897,28899,28901,28903,28905,28907,28909,28911,28913,28915,28917],{"class":2930,"line":2993},[2928,28811,3557],{"class":2953},[2928,28813,2928],{"class":2970},[2928,28815,15516],{"class":2945},[2928,28817,2954],{"class":2953},[2928,28819,3153],{"class":2953},[2928,28821,2930],{"class":3156},[2928,28823,3153],{"class":2953},[2928,28825,24092],{"class":2953},[2928,28827,2928],{"class":2970},[2928,28829,28551],{"class":2945},[2928,28831,2954],{"class":2953},[2928,28833,3153],{"class":2953},[2928,28835,28701],{"class":3156},[2928,28837,3153],{"class":2953},[2928,28839,9470],{"class":2953},[2928,28841,4662],{"class":2949},[2928,28843,3209],{"class":2953},[2928,28845,2928],{"class":2970},[2928,28847,24092],{"class":2953},[2928,28849,2928],{"class":2970},[2928,28851,28551],{"class":2945},[2928,28853,2954],{"class":2953},[2928,28855,3153],{"class":2953},[2928,28857,28858],{"class":3156},"color:#C3E88D",[2928,28860,3153],{"class":2953},[2928,28862,9470],{"class":2953},[2928,28864,28507],{"class":2949},[2928,28866,3209],{"class":2953},[2928,28868,2928],{"class":2970},[2928,28870,24092],{"class":2953},[2928,28872,2928],{"class":2970},[2928,28874,28551],{"class":2945},[2928,28876,2954],{"class":2953},[2928,28878,3153],{"class":2953},[2928,28880,28701],{"class":3156},[2928,28882,3153],{"class":2953},[2928,28884,9470],{"class":2953},[2928,28886,3197],{"class":2949},[2928,28888,3209],{"class":2953},[2928,28890,2928],{"class":2970},[2928,28892,24092],{"class":2953},[2928,28894,2928],{"class":2970},[2928,28896,28551],{"class":2945},[2928,28898,2954],{"class":2953},[2928,28900,3153],{"class":2953},[2928,28902,28701],{"class":3156},[2928,28904,3153],{"class":2953},[2928,28906,9470],{"class":2953},[2928,28908,3617],{"class":2949},[2928,28910,3209],{"class":2953},[2928,28912,2928],{"class":2970},[2928,28914,28714],{"class":2953},[2928,28916,2928],{"class":2970},[2928,28918,3161],{"class":2953},[2928,28920,28921,28923,28925,28927,28929,28931,28933,28935,28937,28939,28941,28943,28945,28947,28949,28951,28953,28955,28957,28959,28961,28963,28965,28967,28969,28971,28973,28975,28977,28979,28981,28983],{"class":2930,"line":2999},[2928,28922,3557],{"class":2953},[2928,28924,2928],{"class":2970},[2928,28926,15516],{"class":2945},[2928,28928,2954],{"class":2953},[2928,28930,3153],{"class":2953},[2928,28932,2930],{"class":3156},[2928,28934,3153],{"class":2953},[2928,28936,24092],{"class":2953},[2928,28938,2928],{"class":2970},[2928,28940,28551],{"class":2945},[2928,28942,2954],{"class":2953},[2928,28944,3153],{"class":2953},[2928,28946,28678],{"class":3156},[2928,28948,3153],{"class":2953},[2928,28950,9470],{"class":2953},[2928,28952,26512],{"class":2949},[2928,28954,3209],{"class":2953},[2928,28956,2928],{"class":2970},[2928,28958,24092],{"class":2953},[2928,28960,2928],{"class":2970},[2928,28962,28551],{"class":2945},[2928,28964,2954],{"class":2953},[2928,28966,3153],{"class":2953},[2928,28968,28701],{"class":3156},[2928,28970,3153],{"class":2953},[2928,28972,9470],{"class":2953},[2928,28974,3617],{"class":2949},[2928,28976,3209],{"class":2953},[2928,28978,2928],{"class":2970},[2928,28980,28714],{"class":2953},[2928,28982,2928],{"class":2970},[2928,28984,3161],{"class":2953},[2928,28986,28987,28989,28991,28993,28995,28997,28999,29001,29003,29005,29007,29009,29011,29013,29015,29017,29019,29021,29023,29025,29027,29029,29031,29033,29035,29037,29039,29041,29043,29045,29047,29049],{"class":2930,"line":3005},[2928,28988,3557],{"class":2953},[2928,28990,2928],{"class":2970},[2928,28992,15516],{"class":2945},[2928,28994,2954],{"class":2953},[2928,28996,3153],{"class":2953},[2928,28998,2930],{"class":3156},[2928,29000,3153],{"class":2953},[2928,29002,24092],{"class":2953},[2928,29004,2928],{"class":2970},[2928,29006,28551],{"class":2945},[2928,29008,2954],{"class":2953},[2928,29010,3153],{"class":2953},[2928,29012,28701],{"class":3156},[2928,29014,3153],{"class":2953},[2928,29016,9470],{"class":2953},[2928,29018,2987],{"class":2949},[2928,29020,3209],{"class":2953},[2928,29022,2928],{"class":2970},[2928,29024,24092],{"class":2953},[2928,29026,2928],{"class":2970},[2928,29028,28551],{"class":2945},[2928,29030,2954],{"class":2953},[2928,29032,3153],{"class":2953},[2928,29034,28678],{"class":3156},[2928,29036,3153],{"class":2953},[2928,29038,9470],{"class":2953},[2928,29040,3027],{"class":2949},[2928,29042,3209],{"class":2953},[2928,29044,2928],{"class":2970},[2928,29046,28714],{"class":2953},[2928,29048,2928],{"class":2970},[2928,29050,3161],{"class":2953},[2928,29052,29053,29055,29057],{"class":2930,"line":3036},[2928,29054,3567],{"class":2953},[2928,29056,2890],{"class":2970},[2928,29058,3161],{"class":2953},[2928,29060,29061,29063,29065],{"class":2930,"line":3054},[2928,29062,3209],{"class":2953},[2928,29064,2918],{"class":2970},[2928,29066,3161],{"class":2953},[2896,29068,29069,29070,29073],{},"It might look a bit overwhelming if you read it, but ",[2900,29071,29072],{},"this piece of HTML works everywhere without any JavaScript or CSS",". TextMate grammars has a very rich representation of the types of every token (TextMate scopes). Since Shiki flattens all the tokens into styled spans, it achieves accurate results that most traditional CSS-based highlighters have difficulties achieving.",[2896,29075,29076],{},"While Shiki is awesome, it's still a library that is designed to run on Node.js. This means it is limited to highlighting static code only and would have trouble with dynamic code, because Shiki doesn't work in the browser. In addition, Shiki relies on the WASM binary of Oniguruma, as well as a bunch of heavy grammar and theme files in JSON. It uses Node.js filesystem and path resolution to load these files, which is not accessible in the browser.",[2896,29078,29079,29080,29085,29086,29091,29092,29095],{},"To improve that situation, I ",[2910,29081,29084],{"href":29082,"rel":29083},"https:\u002F\u002Fgithub.com\u002Fshikijs\u002Fshiki\u002Fissues\u002F91",[2914],"started this RFC"," that later landed with ",[2910,29087,29090],{"href":29088,"rel":29089},"https:\u002F\u002Fgithub.com\u002Fshikijs\u002Fshiki\u002Fpull\u002F109",[2914],"this PR"," and shipped in Shiki v0.9. While it abstracted the file loading layer to use fetch or filesystem based on the environment, it's still quite complicated to use as you need to serve the grammars and theme files somewhere in your bundle or CDN manually, then call the ",[2890,29093,29094],{},"setCDN"," method to tell Shiki where to load these files.",[2896,29097,29098],{},"The solution is not perfect but at least it made it possible to run Shiki in the browser to highlight dynamic content. We have been using that approach since then - until the story of this article began.",[2885,29100,29102],{"id":29101},"the-start","The Start",[2896,29104,29105,29106,29109,29110,29115],{},"Nuxt is putting a lot effort in pushing the ",[2910,29107,29108],{"href":2794},"web to the edge",", making the web more accessible with lower latency and better performance. Like CDN servers, edge hosting services such as ",[2910,29111,29114],{"href":29112,"rel":29113},"https:\u002F\u002Fworkers.cloudflare.com\u002F",[2914],"CloudFlare Workers"," are deployed all over the world. Users get the content from the nearest edge server without the round trips to the origin server which could be thousands of miles away. With the awesome benefits it provides, it also comes with some trade-offs. For example, edge servers use a restricted runtime environment. CloudFlare Workers also does not support file system access and usually don't preserve the state between requests. While Shiki's main overhead is loading the grammars and themes upfront, that wouldn't work well in the edge environment.",[2896,29117,29118,29119,29123,29124,29128],{},"It all started with a chat between ",[2910,29120,29122],{"href":6225,"rel":29121},[2914],"Sébastien"," and me. We were trying to make ",[2910,29125,8142],{"href":29126,"rel":29127},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fcontent",[2914]," which uses Shiki to highlight the code blocks, to work on the edge.",[2896,29130,29131],{},[4183,29132],{"alt":29133,"className":29134,"src":29137},"Chat History Between Sébastien and Anthony",[15174,29135,29136,19239,5483],"shadow","max-w-[700px]","\u002Fassets\u002Fblog\u002Fshiki-start-chat.png",[2896,29139,29140,29141,29148,29149,29152,29153,29158],{},"I started the experiments by patching ",[2910,29142,29145],{"href":29143,"rel":29144},"https:\u002F\u002Fgithub.com\u002Fpi0\u002Fshiki-es",[2914],[2890,29146,29147],{},"shiki-es"," (a ESM build of Shiki by ",[2910,29150,27008],{"href":27006,"rel":29151},[2914],") locally, to convert the grammars and themes files into ",[2910,29154,29157],{"href":29155,"rel":29156},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FGuide\u002FModules",[2914],"ECMAScript Module (ESM)"," so that it could be understood and bundled by the build tools. This was done to create the code bundle for CloudFlare Workers to consume without using the filesystem nor making network requests.",[2918,29160,29163],{"className":2920,"code":29161,"filename":29162,"language":2923,"meta":2924,"style":2924},"import fs from 'fs\u002Fpromises'\n\nconst cssGrammar = JSON.parse(await fs.readFile('..\u002Flangs\u002Fcss.json', 'utf-8'))\n","Before - Read JSON assets from filesystem",[2890,29164,29165,29181,29185],{"__ignoreMap":2924},[2928,29166,29167,29169,29172,29174,29176,29179],{"class":2930,"line":2931},[2928,29168,5398],{"class":2941},[2928,29170,29171],{"class":2949}," fs ",[2928,29173,18761],{"class":2941},[2928,29175,3329],{"class":2953},[2928,29177,29178],{"class":3156},"fs\u002Fpromises",[2928,29180,5269],{"class":2953},[2928,29182,29183],{"class":2930,"line":2938},[2928,29184,2996],{"emptyLinePlaceholder":1196},[2928,29186,29187,29189,29192,29194,29196,29198,29201,29203,29205,29208,29210,29213,29215,29217,29220,29222,29224,29226,29229,29231],{"class":2930,"line":2967},[2928,29188,3171],{"class":2945},[2928,29190,29191],{"class":2949}," cssGrammar ",[2928,29193,2954],{"class":2953},[2928,29195,7410],{"class":2949},[2928,29197,3088],{"class":2953},[2928,29199,29200],{"class":2957},"parse",[2928,29202,2961],{"class":2949},[2928,29204,16363],{"class":2941},[2928,29206,29207],{"class":2949}," fs",[2928,29209,3088],{"class":2953},[2928,29211,29212],{"class":2957},"readFile",[2928,29214,2961],{"class":2949},[2928,29216,3197],{"class":2953},[2928,29218,29219],{"class":3156},"..\u002Flangs\u002Fcss.json",[2928,29221,3197],{"class":2953},[2928,29223,3617],{"class":2953},[2928,29225,3329],{"class":2953},[2928,29227,29228],{"class":3156},"utf-8",[2928,29230,3197],{"class":2953},[2928,29232,7346],{"class":2949},[2918,29234,29237],{"className":2920,"code":29235,"filename":29236,"language":2923,"meta":2924,"style":2924},"const cssGrammar = await import('..\u002Flangs\u002Fcss.mjs').then(m => m.default)\n","After - Using ESM import",[2890,29238,29239],{"__ignoreMap":2924},[2928,29240,29241,29243,29245,29247,29249,29251,29253,29255,29258,29260,29262,29264,29266,29268,29271,29273,29276,29278],{"class":2930,"line":2931},[2928,29242,3171],{"class":2945},[2928,29244,29191],{"class":2949},[2928,29246,2954],{"class":2953},[2928,29248,3189],{"class":2941},[2928,29250,5558],{"class":2953},[2928,29252,2961],{"class":2949},[2928,29254,3197],{"class":2953},[2928,29256,29257],{"class":3156},"..\u002Flangs\u002Fcss.mjs",[2928,29259,3197],{"class":2953},[2928,29261,3027],{"class":2949},[2928,29263,3088],{"class":2953},[2928,29265,5574],{"class":2957},[2928,29267,2961],{"class":2949},[2928,29269,29270],{"class":3023},"m",[2928,29272,3030],{"class":2945},[2928,29274,29275],{"class":2949}," m",[2928,29277,3088],{"class":2953},[2928,29279,29280],{"class":2949},"default)\n",[2896,29282,29283,29284,29291,29292,29294,29295,29298,29299,29301,29302,2892,29307,29312,29313,3088],{},"We need to wrap the JSON files into ESM as inline literal so that we can use ",[2910,29285,29288],{"href":29286,"rel":29287},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FOperators\u002Fimport",[2914],[2890,29289,29290],{},"import()"," to dynamically import them. The difference is that ",[2890,29293,29290],{}," is a standard JavaScript feature that works everywhere, while ",[2890,29296,29297],{},"fs.readFile"," is a Node.js specific API that only works in Node.js. Having ",[2890,29300,29290],{}," statically would also make bundlers like ",[2910,29303,29306],{"href":29304,"rel":29305},"https:\u002F\u002Frollupjs.org\u002F",[2914],"Rollup",[2910,29308,29311],{"href":29309,"rel":29310},"https:\u002F\u002Fwebpack.js.org\u002F",[2914],"webpack"," able to construct the module relationship graph and ",[2910,29314,29317],{"href":29315,"rel":29316},"https:\u002F\u002Frollupjs.org\u002Ftutorial\u002F#code-splitting",[2914],"emit the bundled code as chunks",[2896,29319,29320],{},"Then, I realized that it actually takes more than that to make it work on edge runtimes. Since bundlers expect imports to be resolvable at build time (meaning that in order to support all the languages and themes), we need to list all the import statements in every single grammar and theme file in the codebase. This would end up with a huge bundle size with a bunch of grammars and themes that you might not actually use. This problem is particularly important in the edge environment, where the bundle size is critical for performance.",[2896,29322,29323],{},"So, we needed to figure out a better middle ground to make it work better.",[2885,29325,29327],{"id":29326},"the-fork-shikiji","The Fork - Shikiji",[2896,29329,29330,29331,29336,29337,3088],{},"Knowing this might fundamentally change the way Shiki works, and since we don't want to risk breaking the existing Shiki users with our experiments, I started a fork of Shiki called ",[2910,29332,29335],{"href":29333,"rel":29334},"https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshikiji",[2914],"Shikiji",". I rewrote the code from scratch while keeping the previous API design decisions in mind. The goal is to make Shiki runtime-agnostic, performant and efficient, like the philosophy we have at ",[2910,29338,27061],{"href":29339,"rel":29340},"https:\u002F\u002Fgithub.com\u002Funjs",[2914],[2896,29342,29343,29344,29349,29350,2892,29356,29363,29364,29369,29370,29372,29373,29380,29381,29386,29387,29392,29393,29400],{},"To make that happen, we need to make Shikiji completely ESM-friendly, pure and ",[2910,29345,29348],{"href":29346,"rel":29347},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FTree_shaking",[2914],"tree-shakable",". This goes all the way up to the dependencies of Shiki such as ",[2910,29351,29353],{"href":28443,"rel":29352},[2914],[2890,29354,29355],{},"vscode-oniguruma",[2910,29357,29360],{"href":29358,"rel":29359},"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fvscode-textmate",[2914],[2890,29361,29362],{},"vscode-textmate",", which are provided in ",[2910,29365,29368],{"href":29366,"rel":29367},"https:\u002F\u002Frequirejs.org\u002Fdocs\u002Fcommonjs.html",[2914],"Common JS (CJS)"," format.  ",[2890,29371,29355],{}," also contains a WASM binding generated by ",[2910,29374,29377],{"href":29375,"rel":29376},"https:\u002F\u002Fgithub.com\u002Femscripten-core\u002Femscripten",[2914],[2890,29378,29379],{},"emscripten"," that contains ",[2910,29382,29385],{"href":29383,"rel":29384},"https:\u002F\u002Fgithub.com\u002Ftypescript-eslint\u002Ftypescript-eslint\u002Fblob\u002Fmain\u002Fpackages\u002Feslint-plugin\u002Fdocs\u002Frules\u002Fno-floating-promises.md",[2914],"dangling promises"," that will make CloudFlare Workers fail to finish the request. We ended up by embedding the WASM binary into a ",[2910,29388,29391],{"href":29389,"rel":29390},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FBase64",[2914],"base64 string"," and shipping it as an ES module, manually rewriting the WASM binding to avoid dangling promises, and ",[2910,29394,29397,29398],{"href":29395,"rel":29396},"https:\u002F\u002Fgithub.com\u002Fshikijs\u002Fshiki\u002Fblob\u002Fmain\u002FCONTRIBUTING.md#clone",[2914],"vendored ",[2890,29399,29362],{}," to compile from its source code and produce the efficient ESM output.",[2896,29402,29403,29404,29409],{},"The end result was very promising. We managed to get Shikiji working on any runtime environment, with even the possibility to ",[2910,29405,29408],{"href":29406,"rel":29407},"https:\u002F\u002Fshiki.style\u002Fguide\u002Finstall#cdn-usage",[2914],"import it from CDN and run in the browser"," with a single line of code.",[2896,29411,29412,29413,29420,29421,29426],{},"We also took the chance to improve the API and the internal architecture of Shiki. We switched from simple string concatenation to use ",[2910,29414,29417],{"href":29415,"rel":29416},"https:\u002F\u002Fgithub.com\u002Fsyntax-tree\u002Fhast",[2914],[2890,29418,29419],{},"hast",", creating an Abstract Syntax Tree (AST) for generating the HTML output. This opens up the possibility of exposing a ",[2910,29422,29425],{"href":29423,"rel":29424},"https:\u002F\u002Fshiki.style\u002Fguide\u002Ftransformers",[2914],"Transformers API"," to allow users to modify the intermediate HAST and do many cool integrations that would be very hard to achieve previously.",[2896,29428,29429,29430,29435,29436,29441,29442,29447,29448,3088],{},"Dark\u002FLight mode support ",[2910,29431,29434],{"href":29432,"rel":29433},"https:\u002F\u002Fgithub.com\u002Fshikijs\u002Fshiki\u002Fissues\u002F33",[2914],"was a frequently requested feature",". Because of the static approach Shiki takes, it won't be possible to change the theme on the fly at rendering. The solution in the past was to generate the highlighted HTML twice, and toggle their visibility based on the user's preference - it wasn't efficient as it duplicate the payload, or used ",[2910,29437,29440],{"href":29438,"rel":29439},"https:\u002F\u002Fgithub.com\u002Fshikijs\u002Fshiki\u002Fpull\u002F212",[2914],"CSS variables theme"," which lost the granular highlighting Shiki is great for. With the new architecture that Shikiji has, I took a step back and rethought the problem, and ",[2910,29443,29446],{"href":29444,"rel":29445},"https:\u002F\u002Fgithub.com\u002Fshikijs\u002Fshiki\u002Fissues\u002F33#issuecomment-1676362336",[2914],"came up with the idea"," of breaking down the common tokens and merge multiple themes as inlined CSS variables, which provide  efficient output while aligning with the Shiki's philosophy. You can learn more about it in ",[2910,29449,29452],{"href":29450,"rel":29451},"https:\u002F\u002Fshiki.style\u002Fguide\u002Fdual-themes",[2914],"Shiki's documentation",[2896,29454,29455,29456,29464],{},"To make the migration easier, we also created the ",[2910,29457,29460,29463],{"href":29458,"rel":29459},"https:\u002F\u002Fshikiji.netlify.app\u002Fguide\u002Fcompat",[2914],[2890,29461,29462],{},"shikiji-compat"," compatibility layer",", which uses Shikiji's new foundation and provides backward compatibility API.",[2896,29466,29467,29468,29473,29474,29477,29478,29481,29482,29489,29490,29495,29496,29501,29502,29505],{},"To get Shikiji to work on Cloudflare Workers, we had one last challenge as they don't support ",[2910,29469,29472],{"href":29470,"rel":29471},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWebAssembly\u002FJavaScript_interface\u002Finstantiate_static",[2914],"initiating WASM instance","s from inlined binary data. Instead it requires importing the static ",[2890,29475,29476],{},".wasm"," assets for security reasons. This means that our \"All-in-ESM\" approach does not work well on CloudFlare. This would require extra work for users to provide different WASM sources, which makes the experience more difficult than we intended. At this moment, ",[2910,29479,27008],{"href":27006,"rel":29480},[2914]," stepped in and made the universal layer ",[2910,29483,29486],{"href":29484,"rel":29485},"https:\u002F\u002Fgithub.com\u002Funjs\u002Funwasm",[2914],[2890,29487,29488],{},"unjs\u002Funwasm",", which supports the upcoming ",[2910,29491,29494],{"href":29492,"rel":29493},"https:\u002F\u002Fgithub.com\u002FWebAssembly\u002Fesm-integration\u002Ftree\u002Fmain\u002Fproposals\u002Fesm-integration",[2914],"WebAssembly\u002FES Module Integration"," proposal. It has been integrated into ",[2910,29497,29500],{"href":29498,"rel":29499},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fnitro\u002Fpull\u002F2037",[2914],"Nitro to have automated WASM targets",". We hope that ",[2890,29503,29504],{},"unwasm"," will help developers to have a better experience when working with WASM.",[2896,29507,29508,29509,4309,29512,2892,29517,29522],{},"Overall, the Shikiji rewrite works well. ",[2910,29510,8142],{"href":29126,"rel":29511},[2914],[2910,29513,29516],{"href":29514,"rel":29515},"https:\u002F\u002Fvitepress.dev\u002F",[2914],"VitePress",[2910,29518,29521],{"href":29519,"rel":29520},"https:\u002F\u002Fastro.build\u002F",[2914],"Astro"," have been migrated to it. The feedback we have received has also been very positive.",[2885,29524,29526],{"id":29525},"merging-back","Merging Back",[2896,29528,29529,29530,29534,29535,29540],{},"I am a team member of Shiki and have helped to do releases from time to time. While ",[2910,29531,29533],{"href":28437,"rel":29532},[2914],"Pine"," is the lead of Shiki, he was busy on other stuff and Shiki's iterations slowed down. During the experiments in Shikiji, I ",[2910,29536,29539],{"href":29537,"rel":29538},"https:\u002F\u002Fgithub.com\u002Fshikijs\u002Fshiki\u002Fissues\u002F510",[2914],"proposed a few improvements"," that could help Shiki acquire a modern structure. While generally everyone agreed with that direction, there would have been quite a lot of work to do and no one started to work on that.",[2896,29542,29543],{},"While we were happy to use Shikiji to solve the problems we had, we certainly didn't want to see the community split by two different versions of Shiki. After a call with Pine, we made the consensus to merge the two projects into one:",[3233,29545,29549],{"color":29546,"icon":29547,"to":29548},"purple","i-octicon-git-merge-24","https:\u002F\u002Fgithub.com\u002Fshikijs\u002Fshiki\u002Fpull\u002F557",[2896,29550,29551,29552],{},"feat!: merge Shikiji back into Shiki for v1.0 ",[2928,29553,29556],{"className":29554},[29555],"opacity-50","#557",[2896,29558,29559,29560,29563],{},"We are really happy to see that our work in Shikiji has been merged back to Shiki, that not only works for ourselves, but also benefits the entire community. With this merge, it ",[2900,29561,29562],{},"solves around 95% of the open issues"," we have had in Shiki for years:",[2896,29565,29566],{},[4183,29567],{"alt":29568,"className":29569,"src":29570},"Shikiji Merged Back to Shiki",[15174,29135],"\u002Fassets\u002Fblog\u002Fshiki-merge-pr.png",[2896,29572,29573,29574,29579],{},"Shiki now also got ",[2910,29575,29578],{"href":29576,"rel":29577},"https:\u002F\u002Fshiki.style\u002F",[2914],"a brand new documentation site"," where you can also play it right in your browser (thanks to the agnostic approach!). Many frameworks now has built-in integration with Shiki, maybe you are already using it somewhere!",[2885,29581,29583],{"id":29582},"twoslash","Twoslash",[2896,29585,29586,29590,29591,29596,29597,19250,29602,29607,29608,29613,29614,29619,29620,29625,29626,29629],{},[2910,29587,29583],{"href":29588,"rel":29589},"https:\u002F\u002Fgithub.com\u002Ftwoslashes\u002Ftwoslash",[2914]," is an integration tool to retrieve type information from ",[2910,29592,29595],{"href":29593,"rel":29594},"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FTypeScript\u002Fwiki\u002FUsing-the-Language-Service-API",[2914],"TypeScript Language Services"," and generated to your code snippet. It essentially make your static code snippet to have hover type information similar to your VS Code editor. It's made by ",[2910,29598,29601],{"href":29599,"rel":29600},"https:\u002F\u002Fgithub.com\u002Forta",[2914],"Orta Therox",[2910,29603,29606],{"href":29604,"rel":29605},"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FTypeScript-Website",[2914],"TypeScript documentation site",", there you can find ",[2910,29609,29612],{"href":29610,"rel":29611},"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FTypeScript-Website\u002Ftree\u002Fv2\u002Fpackages\u002Fts-twoslasher",[2914],"the original source code here",". Orta also created the ",[2910,29615,29618],{"href":29616,"rel":29617},"https:\u002F\u002Fgithub.com\u002Fshikijs\u002Ftwoslash",[2914],"Twoslash integration for Shiki v0.x versions",". Back then, Shiki ",[2910,29621,29624],{"href":29622,"rel":29623},"https:\u002F\u002Fgithub.com\u002Fshikijs\u002Fshiki\u002Fissues\u002F380",[2914],"did not have proper plugin system",", that makes the ",[2890,29627,29628],{},"shiki-twoslash"," had to be built as a wrapper over Shiki, make it a bit hard to set up as the existing Shiki integrations won't directly work with Twoslash.",[2896,29631,29632,29633,29638,29639,29644],{},"We also took the chance to revise the Twoslash integrations when we were rewriting Shikiji, also a way to ",[2910,29634,29637],{"href":29635,"rel":29636},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FEating_your_own_dog_food",[2914],"dog-fooding"," and verify the extensibility. With the new HAST internal, we are able to ",[2910,29640,29643],{"href":29641,"rel":29642},"https:\u002F\u002Fshiki.style\u002Fpackages\u002Ftwoslash",[2914],"integrate Twoslash as a transformer plugin",", making it works everywhere that Shiki works and also in a composable way to be used with other transformers.",[2896,29646,29647,29648,29650,29651,29654],{},"With this, we started to think that we could probably get Twoslash to work on ",[2910,29649,17199],{"href":3288},", the website you are looking at. nuxt.com uses ",[2910,29652,8142],{"href":29126,"rel":29653},[2914]," under the hood, and different from other documentation tools like VitePress, one of the benefits Nuxt Content provides is that it's able to handle dynamic content and runs on the edge. Since Twoslash is relying on TypeScript as well as the giant types modules graph from your dependencies, that would be not ideal to ship all those things to the edge or browser. Sounds tricky, but challenge accepted!",[2896,29656,29657,29658,29663,29664,29669,29670,29677],{},"We first come up of fetching the types on-demand from CDN, using the ",[2910,29659,29662],{"href":29660,"rel":29661},"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FTypeScript-Website\u002Ftree\u002Fv2\u002Fpackages\u002Fata",[2914],"Auto-Type-Acquisition"," technique that you will see on the ",[2910,29665,29668],{"href":29666,"rel":29667},"https:\u002F\u002Fwww.typescriptlang.org\u002Fplay",[2914],"TypeScript playground",". We made the ",[2910,29671,29674],{"href":29672,"rel":29673},"https:\u002F\u002Fgithub.com\u002Fantfu\u002Ftwoslash-cdn",[2914],[2890,29675,29676],{},"twoslash-cdn"," that allows Twoslash to run in any runtime. However, still, it sounds like not the most optimal solution, as it would still require to make many network requests that might defeat the purpose of running on the edge.",[2896,29679,29680,29681,29688,29689,29696],{},"After a few iterations on the underlying tools (e.g. on ",[2910,29682,29685],{"href":29683,"rel":29684},"https:\u002F\u002Fgithub.com\u002Fnuxt-modules\u002Fmdc\u002Fpull\u002F129",[2914],[2890,29686,29687],{},"@nuxtjs\u002Fmdc",", the markdown compiler used by Nuxt Content), we managed to take the hybrid approach and made ",[2910,29690,29693],{"href":29691,"rel":29692},"https:\u002F\u002Fgithub.com\u002Fantfu\u002Fnuxt-content-twoslash",[2914],[2890,29694,29695],{},"nuxt-content-twoslash"," that runs Twoslash on build time and caches the results for edge rendering. This way we could avoid shipping any extra dependencies to the final bundle, but still have the rich interactive code snippets on the website:",[2918,29698,29700],{"className":3129,"code":29699,"language":3132,"meta":29582,"style":2924},"\u003Cscript setup>\n\u002F\u002F Try hover on identifiers below to see the types\nconst count = useState('counter', () => 0)\nconst double = computed(() => count.value * 2)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton>Count is: {{ count }}\u003C\u002Fbutton>\n  \u003Cdiv>Double is: {{ double }}\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[2890,29701,29702,29712,29717,29745,29777,29785,29789,29797,29814,29831],{"__ignoreMap":2924},[2928,29703,29704,29706,29708,29710],{"class":2930,"line":2931},[2928,29705,3139],{"class":2953},[2928,29707,3142],{"class":2970},[2928,29709,3145],{"class":2945},[2928,29711,3161],{"class":2953},[2928,29713,29714],{"class":2930,"line":2938},[2928,29715,29716],{"class":2934},"\u002F\u002F Try hover on identifiers below to see the types\n",[2928,29718,29719,29721,29723,29725,29727,29729,29731,29733,29735,29737,29739,29741,29743],{"class":2930,"line":2967},[2928,29720,3171],{"class":2945},[2928,29722,4083],{"class":2949},[2928,29724,2954],{"class":2953},[2928,29726,4088],{"class":2957},[2928,29728,2961],{"class":2949},[2928,29730,3197],{"class":2953},[2928,29732,4095],{"class":3156},[2928,29734,3197],{"class":2953},[2928,29736,3617],{"class":2953},[2928,29738,4102],{"class":2953},[2928,29740,3030],{"class":2945},[2928,29742,4107],{"class":3988},[2928,29744,2990],{"class":2949},[2928,29746,29747,29749,29752,29754,29757,29759,29761,29763,29766,29768,29770,29773,29775],{"class":2930,"line":2984},[2928,29748,3171],{"class":2945},[2928,29750,29751],{"class":2949}," double ",[2928,29753,2954],{"class":2953},[2928,29755,29756],{"class":2957}," computed",[2928,29758,2961],{"class":2949},[2928,29760,3647],{"class":2953},[2928,29762,3030],{"class":2945},[2928,29764,29765],{"class":2949}," count",[2928,29767,3088],{"class":2953},[2928,29769,4032],{"class":2949},[2928,29771,29772],{"class":2953},"*",[2928,29774,7428],{"class":3988},[2928,29776,2990],{"class":2949},[2928,29778,29779,29781,29783],{"class":2930,"line":2993},[2928,29780,3209],{"class":2953},[2928,29782,3142],{"class":2970},[2928,29784,3161],{"class":2953},[2928,29786,29787],{"class":2930,"line":2999},[2928,29788,2996],{"emptyLinePlaceholder":1196},[2928,29790,29791,29793,29795],{"class":2930,"line":3005},[2928,29792,3139],{"class":2953},[2928,29794,3521],{"class":2970},[2928,29796,3161],{"class":2953},[2928,29798,29799,29801,29803,29805,29808,29810,29812],{"class":2930,"line":3036},[2928,29800,3528],{"class":2953},[2928,29802,18403],{"class":2970},[2928,29804,9470],{"class":2953},[2928,29806,29807],{"class":2949},"Count is: {{ count }}",[2928,29809,3209],{"class":2953},[2928,29811,18403],{"class":2970},[2928,29813,3161],{"class":2953},[2928,29815,29816,29818,29820,29822,29825,29827,29829],{"class":2930,"line":3054},[2928,29817,3528],{"class":2953},[2928,29819,11471],{"class":2970},[2928,29821,9470],{"class":2953},[2928,29823,29824],{"class":2949},"Double is: {{ double }}",[2928,29826,3209],{"class":2953},[2928,29828,11471],{"class":2970},[2928,29830,3161],{"class":2953},[2928,29832,29833,29835,29837],{"class":2930,"line":3059},[2928,29834,3209],{"class":2953},[2928,29836,3521],{"class":2970},[2928,29838,3161],{"class":2953},[2896,29840,29841,29842,29845,29846,29853,29854,29859,29860,2892,29865,29872],{},"During that, we also took the chance to refactor ",[2910,29843,29583],{"href":29588,"rel":29844},[2914]," with Orta to have a more efficient and modern structure. It also allows us have ",[2910,29847,29850],{"href":29848,"rel":29849},"https:\u002F\u002Fgithub.com\u002Ftwoslashes\u002Ftwoslash\u002Ftree\u002Fmain\u002Fpackages\u002Ftwoslash-vue",[2914],[2890,29851,29852],{},"twoslash-vue"," that provides the ",[2910,29855,29858],{"href":29856,"rel":29857},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fscaling-up\u002Fsfc.html",[2914],"Vue SFC"," support as you are playing above. It's powered by ",[2910,29861,29864],{"href":29862,"rel":29863},"https:\u002F\u002Fgithub.com\u002Fvolarjs\u002Fvolar.js",[2914],"Volar.js",[2910,29866,29869],{"href":29867,"rel":29868},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Flanguage-tools",[2914],[2890,29870,29871],{},"vuejs\u002Flanguage-tools",". With Volar growing to be framework agnostic and frameworks to work together, we are looking forward to see such integrations to expand to more syntaxes like Astro and Svelte components files in the future.",[2885,29874,29876],{"id":29875},"integrations","Integrations",[2896,29878,29879],{},"If you want to give Shiki a try in your own website, here you can find some integrations that we have made:",[4346,29881,29882,29920,29944],{},[3844,29883,29884,29888],{},[2910,29885,6331],{"href":29886,"rel":29887},"https:\u002F\u002Fshiki.style\u002Fpackages\u002Fnuxt",[2914],[4346,29889,29890,29909],{},[3844,29891,29892,29893,29896,29897,29902,29903,29908],{},"If using ",[2910,29894,8142],{"href":21289,"rel":29895},[2914],", Shiki is ",[2910,29898,29901],{"href":29899,"rel":29900},"https:\u002F\u002Fcontent.nuxt.com\u002Fget-started\u002Fconfiguration#highlight",[2914],"build-in",". For Twoslash, you can add ",[2910,29904,29906],{"href":29691,"rel":29905},[2914],[2890,29907,29695],{}," on top.",[3844,29910,29911,29912,29919],{},"If not, you can use ",[2910,29913,29916],{"href":29914,"rel":29915},"https:\u002F\u002Fgithub.com\u002Fpi0\u002Fnuxt-shiki",[2914],[2890,29917,29918],{},"nuxt-shiki"," to use Shiki as Vue component or composibles.",[3844,29921,29922,29926],{},[2910,29923,29516],{"href":29924,"rel":29925},"https:\u002F\u002Fshiki.style\u002Fpackages\u002Fvitepress",[2914],[4346,29927,29928],{},[3844,29929,29930,29931,29936,29937,3088],{},"Shiki is ",[2910,29932,29935],{"href":29933,"rel":29934},"https:\u002F\u002Fvitepress.dev\u002Fguide\u002Fmarkdown#syntax-highlighting-in-code-blocks",[2914],"built-in",". For Twoslash, you can use ",[2910,29938,29941],{"href":29939,"rel":29940},"https:\u002F\u002Fshiki.style\u002Fpackages\u002Fvitepress#twoslash",[2914],[2890,29942,29943],{},"vitepress-twoslash",[3844,29945,29946,29947],{},"Low-level integrations - Shiki provides official integrations for markdown compilers:\n",[4346,29948,29949,29965],{},[3844,29950,29951,29958,29959],{},[2910,29952,29955],{"href":29953,"rel":29954},"https:\u002F\u002Fshiki.style\u002Fpackages\u002Fmarkdown-it",[2914],[2890,29956,29957],{},"markdown-it"," - Plugin for ",[2910,29960,29963],{"href":29961,"rel":29962},"https:\u002F\u002Fgithub.com\u002Fmarkdown-it\u002Fmarkdown-it",[2914],[2890,29964,29957],{},[3844,29966,29967,29958,29974],{},[2910,29968,29971],{"href":29969,"rel":29970},"https:\u002F\u002Fshiki.style\u002Fpackages\u002Frehype",[2914],[2890,29972,29973],{},"rehype",[2910,29975,29978],{"href":29976,"rel":29977},"https:\u002F\u002Fgithub.com\u002Frehypejs\u002Frehype",[2914],[2890,29979,29973],{},[2896,29981,29982,29983],{},"Check out more integrations on ",[2910,29984,29986],{"href":29576,"rel":29985},[2914],"Shiki's Documentation",[2885,29988,29990],{"id":29989},"conclusions","Conclusions",[2896,29992,29993,29996,29997,4309,30000,4309,30003,30006],{},[2900,29994,29995],{},"Our mission at Nuxt is not only to make a better framework for developers, but also to make the entire frontend and web ecosystem a better place."," We are keeping pushing the boundaries and endorse the modern web standards and best practices. We hope you enjoy the new ",[2910,29998,28427],{"href":28425,"rel":29999},[2914],[2910,30001,29504],{"href":29484,"rel":30002},[2914],[2910,30004,29583],{"href":29588,"rel":30005},[2914]," and many other tools we made in the process of making Nuxt and the web better.",[4489,30008,30009],{},"html pre.shiki code .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sYRBq, html code.shiki .sYRBq{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}",{"title":2924,"searchDepth":2938,"depth":2938,"links":30011},[30012,30013,30014,30015,30016,30017],{"id":29101,"depth":2938,"text":29102},{"id":29326,"depth":2938,"text":29327},{"id":29525,"depth":2938,"text":29526},{"id":29582,"depth":2938,"text":29583},{"id":29875,"depth":2938,"text":29876},{"id":29989,"depth":2938,"text":29990},"2024-03-11","Shiki v1.0 came with many improvements and features - see how Nuxt drives the evolution of Shiki!","\u002Fassets\u002Fblog\u002Fshiki-cover.png",{},{"title":2805,"description":30019},"FaYPMMnvdKXTRMr_hfQATIWOlm_ObR2ydrdzrNDWTR4",{"id":30025,"title":30026,"authors":30027,"body":30030,"category":4517,"date":31031,"description":31032,"draft":108,"extension":4520,"image":31033,"meta":31034,"navigation":108,"path":31035,"seo":31036,"stem":31037,"tags":6,"__hash__":31038},"blog\u002Fblog\u002F20.v3-10.md","Nuxt 3.10",[30028],{"name":2877,"avatar":30029,"to":2880},{"src":2879},{"type":2882,"value":30031,"toc":31016},[30032,30035,30043,30051,30071,30113,30124,30127,30131,30144,30388,30395,30416,30419,30426,30435,30442,30484,30487,30578,30585,30589,30606,30612,30615,30619,30622,30665,30669,30679,30682,30752,30755,30811,30827,30831,30842,30886,30894,30898,30910,30926,30929,30932,30976,30978,30980,30995,30997,30999,31007,31009,31013],[2896,30033,30034],{},"v3.10 comes quite close on the heels of v3.9, but it's packed with features and fixes. Here are a few highlights.",[4543,30036,30038,30039,30042],{"id":30037},"experimental-shared-asyncdata-when-prerendering","✨ Experimental shared ",[2890,30040,30041],{},"asyncData"," when prerendering",[2896,30044,30045,30046,2916],{},"When prerendering routes, we can end up refetching the same data over and over again. In Nuxt 2 it was possible to create a 'payload' which could be fetched once and then accessed in every page (and this is of course possible to do manually in Nuxt 3 - see ",[2910,30047,30050],{"href":30048,"rel":30049},"https:\u002F\u002Froe.dev\u002Fblog\u002Fshared-data-nuxt-generate",[2914],"this article",[2896,30052,30053,30054,30059,30060,2892,30065,30070],{},"With ",[2910,30055,30058],{"href":30056,"rel":30057},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F24894",[2914],"#24894",", we are now able to do this automatically for you when prerendering your site. Your ",[2910,30061,30063],{"href":30062},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-async-data",[2890,30064,515],{},[2910,30066,30068],{"href":30067},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-fetch",[2890,30069,527],{}," calls will be deduplicated and cached between renders of your site.",[2918,30072,30074],{"className":2920,"code":30073,"filename":233,"language":2923,"meta":2924,"style":2924},"export defineNuxtConfig({\n  experimental: {\n    sharedPrerenderData: true\n  }\n})\n",[2890,30075,30076,30086,30094,30103,30107],{"__ignoreMap":2924},[2928,30077,30078,30080,30082,30084],{"class":2930,"line":2931},[2928,30079,2942],{"class":2945},[2928,30081,3874],{"class":2957},[2928,30083,2961],{"class":2949},[2928,30085,2964],{"class":2953},[2928,30087,30088,30090,30092],{"class":2930,"line":2938},[2928,30089,3883],{"class":2970},[2928,30091,2974],{"class":2953},[2928,30093,3033],{"class":2953},[2928,30095,30096,30099,30101],{"class":2930,"line":2967},[2928,30097,30098],{"class":2970},"    sharedPrerenderData",[2928,30100,2974],{"class":2953},[2928,30102,8120],{"class":2977},[2928,30104,30105],{"class":2930,"line":2984},[2928,30106,3113],{"class":2953},[2928,30108,30109,30111],{"class":2930,"line":2993},[2928,30110,2987],{"class":2953},[2928,30112,2990],{"class":2949},[4891,30114,30115],{},[2896,30116,30117,30118,30120,30121,30123],{},"It is particularly important to make sure that any unique key of your data is always resolvable to the same data. For example, if you are using ",[2890,30119,515],{}," to fetch data related to a particular page, you should provide a key that uniquely matches that data. (",[2890,30122,527],{}," should do this automatically.)",[3233,30125],{"to":30126},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fexperimental-features#sharedprerenderdata",[4543,30128,30130],{"id":30129},"ssr-safe-accessible-unique-id-creation","🆔 SSR-safe accessible unique ID creation",[2896,30132,30133,30134,30137,30138,30143],{},"We now ship a ",[2890,30135,30136],{},"useId"," composable for generating SSR-safe unique IDs (",[2910,30139,30142],{"href":30140,"rel":30141},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F23368",[2914],"#23368","). This allows creating more accessible interfaces in your app. For example:",[2918,30145,30148],{"className":3129,"code":30146,"filename":30147,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup>\nconst emailId = useId()\nconst passwordId = useId()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cform>\n    \u003Clabel :for=\"emailId\">Email\u003C\u002Flabel>\n    \u003Cinput\n      :id=\"emailId\"\n      name=\"email\"\n      type=\"email\"\n    >\n    \u003Clabel :for=\"passwordId\">Password\u003C\u002Flabel>\n    \u003Cinput\n      :id=\"passwordId\"\n      name=\"password\"\n      type=\"password\"\n    >\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n","components\u002FMyForm.vue",[2890,30149,30150,30160,30174,30187,30195,30199,30207,30216,30246,30253,30266,30280,30293,30297,30325,30331,30343,30356,30368,30372,30380],{"__ignoreMap":2924},[2928,30151,30152,30154,30156,30158],{"class":2930,"line":2931},[2928,30153,3139],{"class":2953},[2928,30155,3142],{"class":2970},[2928,30157,3145],{"class":2945},[2928,30159,3161],{"class":2953},[2928,30161,30162,30164,30167,30169,30172],{"class":2930,"line":2938},[2928,30163,3171],{"class":2945},[2928,30165,30166],{"class":2949}," emailId ",[2928,30168,2954],{"class":2953},[2928,30170,30171],{"class":2957}," useId",[2928,30173,3051],{"class":2949},[2928,30175,30176,30178,30181,30183,30185],{"class":2930,"line":2967},[2928,30177,3171],{"class":2945},[2928,30179,30180],{"class":2949}," passwordId ",[2928,30182,2954],{"class":2953},[2928,30184,30171],{"class":2957},[2928,30186,3051],{"class":2949},[2928,30188,30189,30191,30193],{"class":2930,"line":2984},[2928,30190,3209],{"class":2953},[2928,30192,3142],{"class":2970},[2928,30194,3161],{"class":2953},[2928,30196,30197],{"class":2930,"line":2993},[2928,30198,2996],{"emptyLinePlaceholder":1196},[2928,30200,30201,30203,30205],{"class":2930,"line":2999},[2928,30202,3139],{"class":2953},[2928,30204,3521],{"class":2970},[2928,30206,3161],{"class":2953},[2928,30208,30209,30211,30214],{"class":2930,"line":3005},[2928,30210,3528],{"class":2953},[2928,30212,30213],{"class":2970},"form",[2928,30215,3161],{"class":2953},[2928,30217,30218,30220,30223,30226,30228,30230,30233,30235,30237,30240,30242,30244],{"class":2930,"line":3036},[2928,30219,3557],{"class":2953},[2928,30221,30222],{"class":2970},"label",[2928,30224,30225],{"class":2945}," :for",[2928,30227,2954],{"class":2953},[2928,30229,3153],{"class":2953},[2928,30231,30232],{"class":3156},"emailId",[2928,30234,3153],{"class":2953},[2928,30236,9470],{"class":2953},[2928,30238,30239],{"class":2949},"Email",[2928,30241,3209],{"class":2953},[2928,30243,30222],{"class":2970},[2928,30245,3161],{"class":2953},[2928,30247,30248,30250],{"class":2930,"line":3054},[2928,30249,3557],{"class":2953},[2928,30251,30252],{"class":2970},"input\n",[2928,30254,30255,30258,30260,30262,30264],{"class":2930,"line":3059},[2928,30256,30257],{"class":2945},"      :id",[2928,30259,2954],{"class":2953},[2928,30261,3153],{"class":2953},[2928,30263,30232],{"class":3156},[2928,30265,11613],{"class":2953},[2928,30267,30268,30271,30273,30275,30278],{"class":2930,"line":3067},[2928,30269,30270],{"class":2945},"      name",[2928,30272,2954],{"class":2953},[2928,30274,3153],{"class":2953},[2928,30276,30277],{"class":3156},"email",[2928,30279,11613],{"class":2953},[2928,30281,30282,30285,30287,30289,30291],{"class":2930,"line":3077},[2928,30283,30284],{"class":2945},"      type",[2928,30286,2954],{"class":2953},[2928,30288,3153],{"class":2953},[2928,30290,30277],{"class":3156},[2928,30292,11613],{"class":2953},[2928,30294,30295],{"class":2930,"line":3110},[2928,30296,15444],{"class":2953},[2928,30298,30299,30301,30303,30305,30307,30309,30312,30314,30316,30319,30321,30323],{"class":2930,"line":3116},[2928,30300,3557],{"class":2953},[2928,30302,30222],{"class":2970},[2928,30304,30225],{"class":2945},[2928,30306,2954],{"class":2953},[2928,30308,3153],{"class":2953},[2928,30310,30311],{"class":3156},"passwordId",[2928,30313,3153],{"class":2953},[2928,30315,9470],{"class":2953},[2928,30317,30318],{"class":2949},"Password",[2928,30320,3209],{"class":2953},[2928,30322,30222],{"class":2970},[2928,30324,3161],{"class":2953},[2928,30326,30327,30329],{"class":2930,"line":6687},[2928,30328,3557],{"class":2953},[2928,30330,30252],{"class":2970},[2928,30332,30333,30335,30337,30339,30341],{"class":2930,"line":6703},[2928,30334,30257],{"class":2945},[2928,30336,2954],{"class":2953},[2928,30338,3153],{"class":2953},[2928,30340,30311],{"class":3156},[2928,30342,11613],{"class":2953},[2928,30344,30345,30347,30349,30351,30354],{"class":2930,"line":6708},[2928,30346,30270],{"class":2945},[2928,30348,2954],{"class":2953},[2928,30350,3153],{"class":2953},[2928,30352,30353],{"class":3156},"password",[2928,30355,11613],{"class":2953},[2928,30357,30358,30360,30362,30364,30366],{"class":2930,"line":6738},[2928,30359,30284],{"class":2945},[2928,30361,2954],{"class":2953},[2928,30363,3153],{"class":2953},[2928,30365,30353],{"class":3156},[2928,30367,11613],{"class":2953},[2928,30369,30370],{"class":2930,"line":6776},[2928,30371,15444],{"class":2953},[2928,30373,30374,30376,30378],{"class":2930,"line":6785},[2928,30375,3567],{"class":2953},[2928,30377,30213],{"class":2970},[2928,30379,3161],{"class":2953},[2928,30381,30382,30384,30386],{"class":2930,"line":6790},[2928,30383,3209],{"class":2953},[2928,30385,3521],{"class":2970},[2928,30387,3161],{"class":2953},[4543,30389,30391,30392],{"id":30390},"️-extending-approuteroptions","✍️ Extending ",[2890,30393,30394],{},"app\u002Frouter.options",[2896,30396,30397,30398,30401,30402,30407,30408,30411,30412,30415],{},"It's now possible for module authors to inject their own ",[2890,30399,30400],{},"router.options"," files (",[2910,30403,30406],{"href":30404,"rel":30405},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F24922",[2914],"#24922","). The new ",[2890,30409,30410],{},"pages:routerOptions"," hook allows module authors to do things like add custom ",[2890,30413,30414],{},"scrollBehavior"," or add runtime augmenting of routes.",[3233,30417],{"to":30418},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fcustom-routing#router-options",[4543,30420,30422,30425],{"id":30421},"client-side-nodejs-support",[26694,30423],{"name":30424},"i-vscode-icons-file-type-node"," Client-side Node.js support",[2896,30427,30428,30429,30434],{},"We now support (experimentally) polyfilling key Node.js built-ins (",[2910,30430,30433],{"href":30431,"rel":30432},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F25028",[2914],"#25028","), just as we already do via Nitro on the server when deploying to non-Node environments.",[2896,30436,30437,30438,30441],{},"That means that, within your client-side code, you can import directly from Node built-ins (",[2890,30439,30440],{},"node:"," and node imports are supported). However, nothing is globally injected for you, to avoid increasing your bundle size unnecessarily. You can either import them where needed.",[2918,30443,30446],{"className":2920,"code":30444,"filename":30445,"language":2923,"meta":2924,"style":2924},"import { Buffer } from 'node:buffer'\nimport process from 'node:process'\n","some-file.ts",[2890,30447,30448,30468],{"__ignoreMap":2924},[2928,30449,30450,30452,30454,30457,30459,30461,30463,30466],{"class":2930,"line":2931},[2928,30451,5398],{"class":2941},[2928,30453,3174],{"class":2953},[2928,30455,30456],{"class":2949}," Buffer",[2928,30458,3702],{"class":2953},[2928,30460,5408],{"class":2941},[2928,30462,3329],{"class":2953},[2928,30464,30465],{"class":3156},"node:buffer",[2928,30467,5269],{"class":2953},[2928,30469,30470,30472,30475,30477,30479,30482],{"class":2930,"line":2938},[2928,30471,5398],{"class":2941},[2928,30473,30474],{"class":2949}," process ",[2928,30476,18761],{"class":2941},[2928,30478,3329],{"class":2953},[2928,30480,30481],{"class":3156},"node:process",[2928,30483,5269],{"class":2953},[2896,30485,30486],{},"Or provide your own polyfill, for example, inside a Nuxt plugin.",[2918,30488,30491],{"className":2920,"code":30489,"filename":30490,"language":2923,"meta":2924,"style":2924},"import { Buffer } from 'node:buffer'\nimport process from 'node:process'\n\nglobalThis.Buffer = Buffer\nglobalThis.process = process\n\nexport default defineNuxtPlugin({})\n","plugins\u002Fnode.client.ts",[2890,30492,30493,30511,30525,30529,30544,30558,30562],{"__ignoreMap":2924},[2928,30494,30495,30497,30499,30501,30503,30505,30507,30509],{"class":2930,"line":2931},[2928,30496,5398],{"class":2941},[2928,30498,3174],{"class":2953},[2928,30500,30456],{"class":2949},[2928,30502,3702],{"class":2953},[2928,30504,5408],{"class":2941},[2928,30506,3329],{"class":2953},[2928,30508,30465],{"class":3156},[2928,30510,5269],{"class":2953},[2928,30512,30513,30515,30517,30519,30521,30523],{"class":2930,"line":2938},[2928,30514,5398],{"class":2941},[2928,30516,30474],{"class":2949},[2928,30518,18761],{"class":2941},[2928,30520,3329],{"class":2953},[2928,30522,30481],{"class":3156},[2928,30524,5269],{"class":2953},[2928,30526,30527],{"class":2930,"line":2967},[2928,30528,2996],{"emptyLinePlaceholder":1196},[2928,30530,30531,30534,30536,30539,30541],{"class":2930,"line":2984},[2928,30532,30533],{"class":2949},"globalThis",[2928,30535,3088],{"class":2953},[2928,30537,30538],{"class":2949},"Buffer ",[2928,30540,2954],{"class":2953},[2928,30542,30543],{"class":2949}," Buffer\n",[2928,30545,30546,30548,30550,30553,30555],{"class":2930,"line":2993},[2928,30547,30533],{"class":2949},[2928,30549,3088],{"class":2953},[2928,30551,30552],{"class":2949},"process ",[2928,30554,2954],{"class":2953},[2928,30556,30557],{"class":2949}," process\n",[2928,30559,30560],{"class":2930,"line":2999},[2928,30561,2996],{"emptyLinePlaceholder":1196},[2928,30563,30564,30566,30568,30571,30573,30576],{"class":2930,"line":3005},[2928,30565,2942],{"class":2941},[2928,30567,3871],{"class":2941},[2928,30569,30570],{"class":2957}," defineNuxtPlugin",[2928,30572,2961],{"class":2949},[2928,30574,30575],{"class":2953},"{}",[2928,30577,2990],{"class":2949},[2896,30579,30580,30581,30584],{},"This should make life easier for users who are working with libraries without proper browser support. However, because of the risk in increasing your bundle unnecessarily, we would strongly urge users ",[2900,30582,30583],{},"to choose other alternatives"," if at all possible.",[4543,30586,30588],{"id":30587},"better-cookie-reactivity","🍪 Better cookie reactivity",[2896,30590,30591,30592,30597,30598,30600,30601,2916],{},"We now allow you to opt-in to using the ",[2910,30593,30596],{"href":30594,"rel":30595},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FCookieStore",[2914],"CookieStore",". If browser support is present, this will then be used instead of a BroadcastChannel to update ",[2890,30599,519],{}," values reactively when the cookies are updated (",[2910,30602,30605],{"href":30603,"rel":30604},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F25198",[2914],"#25198",[2896,30607,30608,30609,30611],{},"This also comes paired with a new composable, ",[2890,30610,718],{}," which allows manually refreshing cookie values, such as after performing a request.",[3233,30613],{"to":30614},"\u002Fdocs\u002Fapi\u002Futils\u002Frefresh-cookie",[4543,30616,30618],{"id":30617},"detecting-anti-patterns","🏥 Detecting anti-patterns",[2896,30620,30621],{},"In this release, we've also shipped a range of features to detect potential bugs and performance problems.",[4346,30623,30624,30636,30645],{},[3844,30625,30626,30627,30630,30631,2916],{},"We now will throw an error if ",[2890,30628,30629],{},"setInterval"," is used on server (",[2910,30632,30635],{"href":30633,"rel":30634},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F25259",[2914],"#25259",[3844,30637,30638,30639,30644],{},"We warn (in development only) if data fetch composables are used wrongly (",[2910,30640,30643],{"href":30641,"rel":30642},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F25071",[2914],"#25071","), such as outside of a plugin or setup context.",[3844,30646,30647,30648,30651,30652,30654,30655,30660,30661,30664],{},"We warn (in development only) if you are not using ",[2890,30649,30650],{},"\u003CNuxtPage \u002F>"," but have the ",[2890,30653,22383],{}," integration enabled (",[2910,30656,30659],{"href":30657,"rel":30658},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F25490",[2914],"#25490","). (",[2890,30662,30663],{},"\u003CRouterView \u002F>"," should not be used on its own.)",[4543,30666,30668],{"id":30667},"granular-view-transitions-support","🧂 Granular view transitions support",[2896,30670,30671,30672,3248,30674,2916],{},"It's now possible to control view transitions support on a per-page basis, using ",[2890,30673,678],{},[2910,30675,30678],{"href":30676,"rel":30677},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F25264",[2914],"#25264",[2896,30680,30681],{},"You need to have experimental view transitions support enabled first:",[2918,30683,30685],{"className":2920,"code":30684,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  experimental: {\n    viewTransition: true\n  },\n  app: {\n    \u002F\u002F you can disable them globally if necessary (they are enabled by default)\n    viewTransition: false\n  }\n})\n",[2890,30686,30687,30699,30707,30716,30720,30729,30734,30742,30746],{"__ignoreMap":2924},[2928,30688,30689,30691,30693,30695,30697],{"class":2930,"line":2931},[2928,30690,2942],{"class":2941},[2928,30692,3871],{"class":2941},[2928,30694,3874],{"class":2957},[2928,30696,2961],{"class":2949},[2928,30698,2964],{"class":2953},[2928,30700,30701,30703,30705],{"class":2930,"line":2938},[2928,30702,3883],{"class":2970},[2928,30704,2974],{"class":2953},[2928,30706,3033],{"class":2953},[2928,30708,30709,30712,30714],{"class":2930,"line":2967},[2928,30710,30711],{"class":2970},"    viewTransition",[2928,30713,2974],{"class":2953},[2928,30715,8120],{"class":2977},[2928,30717,30718],{"class":2930,"line":2984},[2928,30719,3383],{"class":2953},[2928,30721,30722,30725,30727],{"class":2930,"line":2993},[2928,30723,30724],{"class":2970},"  app",[2928,30726,2974],{"class":2953},[2928,30728,3033],{"class":2953},[2928,30730,30731],{"class":2930,"line":2999},[2928,30732,30733],{"class":2934},"    \u002F\u002F you can disable them globally if necessary (they are enabled by default)\n",[2928,30735,30736,30738,30740],{"class":2930,"line":3005},[2928,30737,30711],{"class":2970},[2928,30739,2974],{"class":2953},[2928,30741,5979],{"class":2977},[2928,30743,30744],{"class":2930,"line":3036},[2928,30745,3113],{"class":2953},[2928,30747,30748,30750],{"class":2930,"line":3054},[2928,30749,2987],{"class":2953},[2928,30751,2990],{"class":2949},[2896,30753,30754],{},"And you can opt in\u002Fout granularly:",[2918,30756,30758],{"className":3129,"code":30757,"filename":21998,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup lang=\"ts\">\ndefinePageMeta({\n  viewTransition: false\n})\n\u003C\u002Fscript>\n",[2890,30759,30760,30780,30788,30797,30803],{"__ignoreMap":2924},[2928,30761,30762,30764,30766,30768,30770,30772,30774,30776,30778],{"class":2930,"line":2931},[2928,30763,3139],{"class":2953},[2928,30765,3142],{"class":2970},[2928,30767,3145],{"class":2945},[2928,30769,3148],{"class":2945},[2928,30771,2954],{"class":2953},[2928,30773,3153],{"class":2953},[2928,30775,2923],{"class":3156},[2928,30777,3153],{"class":2953},[2928,30779,3161],{"class":2953},[2928,30781,30782,30784,30786],{"class":2930,"line":2938},[2928,30783,678],{"class":2957},[2928,30785,2961],{"class":2949},[2928,30787,2964],{"class":2953},[2928,30789,30790,30793,30795],{"class":2930,"line":2967},[2928,30791,30792],{"class":2970},"  viewTransition",[2928,30794,2974],{"class":2953},[2928,30796,5979],{"class":2977},[2928,30798,30799,30801],{"class":2930,"line":2984},[2928,30800,2987],{"class":2953},[2928,30802,2990],{"class":2949},[2928,30804,30805,30807,30809],{"class":2930,"line":2993},[2928,30806,3209],{"class":2953},[2928,30808,3142],{"class":2970},[2928,30810,3161],{"class":2953},[2896,30812,30813,30814,3248,30817,30822,30823,30826],{},"Finally, Nuxt will not apply View Transitions if the user's browser matches ",[2890,30815,30816],{},"prefers-reduced-motion: reduce",[2910,30818,30821],{"href":30819,"rel":30820},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F22292",[2914],"#22292","). You can set ",[2890,30824,30825],{},"viewTransition: 'always'","; it will then be up to you to respect the user's preference.",[4543,30828,30830],{"id":30829},"️-build-time-route-metadata","🏗️ Build-time route metadata",[2896,30832,30833,30834,30836,30837,2916],{},"It's now possible to access routing metadata defined in ",[2890,30835,678],{}," at build-time, allowing modules and hooks to modify and change these values (",[2910,30838,30841],{"href":30839,"rel":30840},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F25210",[2914],"#25210",[2918,30843,30845],{"className":2920,"code":30844,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  experimental: {\n    scanPageMeta: true\n  }\n})\n",[2890,30846,30847,30859,30867,30876,30880],{"__ignoreMap":2924},[2928,30848,30849,30851,30853,30855,30857],{"class":2930,"line":2931},[2928,30850,2942],{"class":2941},[2928,30852,3871],{"class":2941},[2928,30854,3874],{"class":2957},[2928,30856,2961],{"class":2949},[2928,30858,2964],{"class":2953},[2928,30860,30861,30863,30865],{"class":2930,"line":2938},[2928,30862,3883],{"class":2970},[2928,30864,2974],{"class":2953},[2928,30866,3033],{"class":2953},[2928,30868,30869,30872,30874],{"class":2930,"line":2967},[2928,30870,30871],{"class":2970},"    scanPageMeta",[2928,30873,2974],{"class":2953},[2928,30875,8120],{"class":2977},[2928,30877,30878],{"class":2930,"line":2984},[2928,30879,3113],{"class":2953},[2928,30881,30882,30884],{"class":2930,"line":2993},[2928,30883,2987],{"class":2953},[2928,30885,2990],{"class":2949},[2896,30887,30888,30889,30891,30892,3088],{},"Please, experiment with this and let us know how it works for you. We hope to improve performance and enable this by default in a future release so modules like ",[2890,30890,25057],{}," and others can provide a deeper integration with routing options set in ",[2890,30893,678],{},[4543,30895,30897],{"id":30896},"bundler-module-resolution","📦 Bundler module resolution",[2896,30899,30053,30900,30905,30906,30909],{},[2910,30901,30904],{"href":30902,"rel":30903},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F24837",[2914],"#24837",", we are now opting in to the TypeScript ",[2890,30907,30908],{},"bundler"," resolution which should more closely resemble the actual way that we resolve subpath imports for modules in Nuxt projects.",[2896,30911,30912,30913,2892,30918,30923,30924,3088],{},"'Bundler' module resolution is ",[2910,30914,30917],{"href":30915,"rel":30916},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Ftsconfig\u002Fblob\u002Fmainz\u002Ftsconfig.json#L24-L26",[2914],"recommended by Vue",[2910,30919,30922],{"href":30920,"rel":30921},"https:\u002F\u002Fvitejs.dev\u002Fguide\u002Fperformance.html#reduce-resolve-operations",[2914],"by Vite",", but unfortunately there are still many packages that do not have the correct entries in their ",[2890,30925,237],{},[2896,30927,30928],{},"As part of this, we opened 85 PRs across the ecosystem to test switching the default, and identified and fixed some issues.",[2896,30930,30931],{},"If you need to switch off this behaviour, you can do so. However, please consider raising an issue (feel free to tag me in it) in the library or module's repo so it can be resolved at source.",[2918,30933,30935],{"className":2920,"code":30934,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  future: {\n    typescriptBundlerResolution: false\n  }\n})\n",[2890,30936,30937,30949,30957,30966,30970],{"__ignoreMap":2924},[2928,30938,30939,30941,30943,30945,30947],{"class":2930,"line":2931},[2928,30940,2942],{"class":2941},[2928,30942,3871],{"class":2941},[2928,30944,3874],{"class":2957},[2928,30946,2961],{"class":2949},[2928,30948,2964],{"class":2953},[2928,30950,30951,30953,30955],{"class":2930,"line":2938},[2928,30952,10604],{"class":2970},[2928,30954,2974],{"class":2953},[2928,30956,3033],{"class":2953},[2928,30958,30959,30962,30964],{"class":2930,"line":2967},[2928,30960,30961],{"class":2970},"    typescriptBundlerResolution",[2928,30963,2974],{"class":2953},[2928,30965,5979],{"class":2977},[2928,30967,30968],{"class":2930,"line":2984},[2928,30969,3113],{"class":2953},[2928,30971,30972,30974],{"class":2930,"line":2993},[2928,30973,2987],{"class":2953},[2928,30975,2990],{"class":2949},[2885,30977,6103],{"id":6102},[2896,30979,13730],{},[2918,30981,30983],{"className":4437,"code":30982,"language":4439,"meta":2924,"style":2924},"npx nuxi upgrade --force\n",[2890,30984,30985],{"__ignoreMap":2924},[2928,30986,30987,30989,30991,30993],{"class":2930,"line":2931},[2928,30988,4446],{"class":3448},[2928,30990,8166],{"class":3156},[2928,30992,4452],{"class":3156},[2928,30994,20926],{"class":3156},[2896,30996,20929],{},[2885,30998,21829],{"id":4472},[3233,31000,31002],{"to":31001,"icon":4477,"target":4478},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv3.10.0",[2896,31003,4481,31004,3088],{},[2890,31005,31006],{},"v3.10.0",[2896,31008,11288],{},[2896,31010,31011],{},[2900,31012,11293],{},[4489,31014,31015],{},"html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}",{"title":2924,"searchDepth":2938,"depth":2938,"links":31017},[31018,31020,31021,31023,31024,31025,31026,31027,31028,31029,31030],{"id":30037,"depth":2967,"text":31019},"✨ Experimental shared asyncData when prerendering",{"id":30129,"depth":2967,"text":30130},{"id":30390,"depth":2967,"text":31022},"✍️ Extending app\u002Frouter.options",{"id":30421,"depth":2967,"text":30425},{"id":30587,"depth":2967,"text":30588},{"id":30617,"depth":2967,"text":30618},{"id":30667,"depth":2967,"text":30668},{"id":30829,"depth":2967,"text":30830},{"id":30896,"depth":2967,"text":30897},{"id":6102,"depth":2938,"text":6103},{"id":4472,"depth":2938,"text":21829},"2024-01-30","Nuxt 3.10 is out - packed with features and fixes. Here are a few highlights.","\u002Fassets\u002Fblog\u002Fv3.10.png",{},"\u002Fblog\u002Fv3-10",{"title":30026,"description":31032},"blog\u002F20.v3-10","BcC1eJg86lcekAHLOd6aqGa-Tcy_ItXGUA5tJBiRQ8g",{"id":31040,"title":31041,"authors":31042,"body":31045,"category":4517,"date":31717,"description":31718,"draft":108,"extension":4520,"image":31719,"meta":31720,"navigation":108,"path":31721,"seo":31722,"stem":31723,"tags":6,"__hash__":31724},"blog\u002Fblog\u002F19.v3-9.md","Nuxt 3.9",[31043],{"name":2877,"avatar":31044,"to":2880},{"src":2879},{"type":2882,"value":31046,"toc":31704},[31047,31050,31053,31057,31060,31069,31073,31085,31091,31176,31180,31183,31238,31244,31272,31275,31279,31282,31356,31370,31446,31450,31469,31484,31490,31493,31506,31621,31628,31630,31634,31651,31660,31664,31667,31669,31671,31685,31687,31695,31697,31701],[2896,31048,31049],{},"A very merry Christmas to you and yours from all Nuxters involved in this release! 🎁🎄",[2896,31051,31052],{},"We have lots of features packed into v3.9 and can't wait for you to try them out.",[4543,31054,31056],{"id":31055},"️-vite-5","⚡️ Vite 5",[2896,31058,31059],{},"This release comes with Vite 5 and Rollup 4 support. Module authors may need to check to ensure that any vite plugins you're creating are compatible with these latest releases.",[2896,31061,31062,31063,31068],{},"This comes with a whole host of great improvements and bug fixes - check out ",[2910,31064,31067],{"href":31065,"rel":31066},"https:\u002F\u002Fvitejs.dev\u002Fguide\u002Fmigration.html#migration-from-v4",[2914],"the Vite changelog"," for more info.",[4543,31070,31072],{"id":31071},"vue-34-ready","✨ Vue 3.4 ready",[2896,31074,31075,31076,31081,31082,31084],{},"This release is tested with the latest Vue 3.4 release candidate, and has the necessary configuration to take advantage of ",[2910,31077,31080],{"href":31078,"rel":31079},"https:\u002F\u002Fblog.vuejs.org\u002Fposts\u002Fvue-3-4",[2914],"new features in Vue 3.4",", including debugging hydration errors in production (just set ",[2890,31083,19992],{},") in your Nuxt config.",[2896,31086,31087,31088,31090],{},"👉 To take advantage, just update your ",[2890,31089,3132],{}," version once v3.4 is released, or try out the release candidate today:",[2918,31092,31094],{"className":12434,"code":31093,"filename":237,"language":12436,"meta":2924,"style":2924},"{\n  \"dependencies\": {\n    \"nuxt\": \"3.9.0\",\n    \"vue\": \"3.4.0-rc.1\",\n    \"vue-router\": \"latest\"\n  }\n}\n",[2890,31095,31096,31100,31113,31132,31151,31168,31172],{"__ignoreMap":2924},[2928,31097,31098],{"class":2930,"line":2931},[2928,31099,2964],{"class":2953},[2928,31101,31102,31104,31107,31109,31111],{"class":2930,"line":2938},[2928,31103,12447],{"class":2953},[2928,31105,31106],{"class":2945},"dependencies",[2928,31108,3153],{"class":2953},[2928,31110,2974],{"class":2953},[2928,31112,3033],{"class":2953},[2928,31114,31115,31117,31119,31121,31123,31125,31128,31130],{"class":2930,"line":2967},[2928,31116,12461],{"class":2953},[2928,31118,4326],{"class":3448},[2928,31120,3153],{"class":2953},[2928,31122,2974],{"class":2953},[2928,31124,12471],{"class":2953},[2928,31126,31127],{"class":3156},"3.9.0",[2928,31129,3153],{"class":2953},[2928,31131,2981],{"class":2953},[2928,31133,31134,31136,31138,31140,31142,31144,31147,31149],{"class":2930,"line":2984},[2928,31135,12461],{"class":2953},[2928,31137,3132],{"class":3448},[2928,31139,3153],{"class":2953},[2928,31141,2974],{"class":2953},[2928,31143,12471],{"class":2953},[2928,31145,31146],{"class":3156},"3.4.0-rc.1",[2928,31148,3153],{"class":2953},[2928,31150,2981],{"class":2953},[2928,31152,31153,31155,31157,31159,31161,31163,31166],{"class":2930,"line":2993},[2928,31154,12461],{"class":2953},[2928,31156,22383],{"class":3448},[2928,31158,3153],{"class":2953},[2928,31160,2974],{"class":2953},[2928,31162,12471],{"class":2953},[2928,31164,31165],{"class":3156},"latest",[2928,31167,11613],{"class":2953},[2928,31169,31170],{"class":2930,"line":2999},[2928,31171,3113],{"class":2953},[2928,31173,31174],{"class":2930,"line":3005},[2928,31175,3764],{"class":2953},[4543,31177,31179],{"id":31178},"️-interactive-server-components","🏝️ Interactive Server Components",[2896,31181,31182],{},"This is a highly-experimental update, but it's now possible to play around with interactive components within Nuxt server components. You'll need to enable this new feature additionally to component islands:",[2918,31184,31186],{"className":2920,"code":31185,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  experimental: {\n    componentIslands: {\n      selectiveClient: true\n    }\n  }\n})\n",[2890,31187,31188,31200,31208,31216,31224,31228,31232],{"__ignoreMap":2924},[2928,31189,31190,31192,31194,31196,31198],{"class":2930,"line":2931},[2928,31191,2942],{"class":2941},[2928,31193,3871],{"class":2941},[2928,31195,3874],{"class":2957},[2928,31197,2961],{"class":2949},[2928,31199,2964],{"class":2953},[2928,31201,31202,31204,31206],{"class":2930,"line":2938},[2928,31203,3883],{"class":2970},[2928,31205,2974],{"class":2953},[2928,31207,3033],{"class":2953},[2928,31209,31210,31212,31214],{"class":2930,"line":2967},[2928,31211,28073],{"class":2970},[2928,31213,2974],{"class":2953},[2928,31215,3033],{"class":2953},[2928,31217,31218,31220,31222],{"class":2930,"line":2984},[2928,31219,28082],{"class":2970},[2928,31221,2974],{"class":2953},[2928,31223,8120],{"class":2977},[2928,31225,31226],{"class":2930,"line":2993},[2928,31227,4866],{"class":2953},[2928,31229,31230],{"class":2930,"line":2999},[2928,31231,3113],{"class":2953},[2928,31233,31234,31236],{"class":2930,"line":3005},[2928,31235,2987],{"class":2953},[2928,31237,2990],{"class":2949},[2896,31239,31240,31241,31243],{},"Now, within a server component, you can specify components to hydrate by using the ",[2890,31242,28037],{}," directive:",[2918,31245,31248],{"className":3129,"code":31246,"filename":31247,"language":3132,"meta":2924,"style":2924},"\u003CNuxtLink :to=\"\u002F\" nuxt-client \u002F>\n","components\u002FSomeComponent.server.vue",[2890,31249,31250],{"__ignoreMap":2924},[2928,31251,31252,31254,31256,31258,31260,31262,31265,31268,31270],{"class":2930,"line":2931},[2928,31253,3139],{"class":2953},[2928,31255,17920],{"class":2970},[2928,31257,7705],{"class":2953},[2928,31259,5093],{"class":2945},[2928,31261,2954],{"class":2953},[2928,31263,31264],{"class":2953},"\"\u002F",[2928,31266,31267],{"class":3156},"\" nuxt-client ",[2928,31269,3288],{"class":2953},[2928,31271,3161],{"class":2953},[2896,31273,31274],{},"We're pretty excited about this one - so do let us know how you're using it! 🙏",[4543,31276,31278],{"id":31277},"automatic-server-optimisations","🔥 Automatic Server Optimisations",[2896,31280,31281],{},"We now use Vite's new AST-aware 'define' to perform more accurate replacements on server-side code, meaning code like this will no longer throw an error:",[2918,31283,31285],{"className":3129,"code":31284,"filename":219,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup lang=\"ts\">\nif (document) {\n  console.log(document.querySelector('div'))\n}\n\u003C\u002Fscript>\n",[2890,31286,31287,31307,31316,31344,31348],{"__ignoreMap":2924},[2928,31288,31289,31291,31293,31295,31297,31299,31301,31303,31305],{"class":2930,"line":2931},[2928,31290,3139],{"class":2953},[2928,31292,3142],{"class":2970},[2928,31294,3145],{"class":2945},[2928,31296,3148],{"class":2945},[2928,31298,2954],{"class":2953},[2928,31300,3153],{"class":2953},[2928,31302,2923],{"class":3156},[2928,31304,3153],{"class":2953},[2928,31306,3161],{"class":2953},[2928,31308,31309,31311,31314],{"class":2930,"line":2938},[2928,31310,22846],{"class":2941},[2928,31312,31313],{"class":2949}," (document) ",[2928,31315,2964],{"class":2953},[2928,31317,31318,31320,31322,31324,31326,31329,31331,31334,31336,31338,31340,31342],{"class":2930,"line":2967},[2928,31319,9249],{"class":2949},[2928,31321,3088],{"class":2953},[2928,31323,9254],{"class":2957},[2928,31325,2961],{"class":2970},[2928,31327,31328],{"class":2949},"document",[2928,31330,3088],{"class":2953},[2928,31332,31333],{"class":2957},"querySelector",[2928,31335,2961],{"class":2970},[2928,31337,3197],{"class":2953},[2928,31339,11471],{"class":3156},[2928,31341,3197],{"class":2953},[2928,31343,7346],{"class":2970},[2928,31345,31346],{"class":2930,"line":2984},[2928,31347,3764],{"class":2953},[2928,31349,31350,31352,31354],{"class":2930,"line":2993},[2928,31351,3209],{"class":2953},[2928,31353,3142],{"class":2970},[2928,31355,3161],{"class":2953},[2896,31357,31358,31359,31361,31362,31365,31366,31369],{},"This hasn't been possible until now because we haven't wanted to run the risk of accidentally replacing normal words like ",[2890,31360,31328],{}," within non-JS parts of your apps. But Vite's new ",[2890,31363,31364],{},"define"," functionality is powered by ",[2890,31367,31368],{},"esbuild"," and is syntax-aware, so we feel confident in enabling this functionality. Nevertheless, you can opt out if you need to:",[2918,31371,31373],{"className":2920,"code":31372,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  hooks: {\n    'vite:extendConfig' (config) {\n      delete config.define!.document\n    }\n  }\n})\n",[2890,31374,31375,31387,31396,31414,31432,31436,31440],{"__ignoreMap":2924},[2928,31376,31377,31379,31381,31383,31385],{"class":2930,"line":2931},[2928,31378,2942],{"class":2941},[2928,31380,3871],{"class":2941},[2928,31382,3874],{"class":2957},[2928,31384,2961],{"class":2949},[2928,31386,2964],{"class":2953},[2928,31388,31389,31392,31394],{"class":2930,"line":2938},[2928,31390,31391],{"class":2970},"  hooks",[2928,31393,2974],{"class":2953},[2928,31395,3033],{"class":2953},[2928,31397,31398,31400,31403,31405,31407,31410,31412],{"class":2930,"line":2967},[2928,31399,4662],{"class":2953},[2928,31401,31402],{"class":3156},"vite:extendConfig",[2928,31404,3197],{"class":2953},[2928,31406,3248],{"class":2953},[2928,31408,31409],{"class":3023},"config",[2928,31411,3027],{"class":2953},[2928,31413,3033],{"class":2953},[2928,31415,31416,31419,31422,31424,31426,31429],{"class":2930,"line":2984},[2928,31417,31418],{"class":2953},"      delete",[2928,31420,31421],{"class":2949}," config",[2928,31423,3088],{"class":2953},[2928,31425,31364],{"class":2949},[2928,31427,31428],{"class":2953},"!.",[2928,31430,31431],{"class":2949},"document\n",[2928,31433,31434],{"class":2930,"line":2993},[2928,31435,4866],{"class":2953},[2928,31437,31438],{"class":2930,"line":2999},[2928,31439,3113],{"class":2953},[2928,31441,31442,31444],{"class":2930,"line":3005},[2928,31443,2987],{"class":2953},[2928,31445,2990],{"class":2949},[4543,31447,31449],{"id":31448},"granular-loading-api","🚦 Granular Loading API",[2896,31451,31452,31453,31458,31459,31461,31462,2892,31465,31468],{},"We now have a new hook-based system for ",[2910,31454,31456],{"href":31455},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-loading-indicator",[2890,31457,480],{},", including a ",[2890,31460,551],{}," composable that lets you control\u002Fstop\u002Fstart the loading state. You can also hook into ",[2890,31463,31464],{},"page:loading:start",[2890,31466,31467],{},"page:loading:end"," if you prefer.",[4460,31470,31471],{},[2896,31472,31473,31474,31478,31479,2916],{},"You can read more ",[2910,31475,31477],{"href":31476},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-loading-indicator","in the docs"," and in the original PR (",[2910,31480,31483],{"href":31481,"rel":31482},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F24010",[2914],"#24010",[4543,31485,31487,31488],{"id":31486},"run-single-events-in-callonce","🏁 Run single events in ",[2890,31489,642],{},[2896,31491,31492],{},"Sometimes you only want to run code once, no matter how many times you load a page - and you don't want to run it again on the client if it ran on the server.",[2896,31494,31495,31496,3248,31501,2916],{},"For this, we have a new utility: ",[2910,31497,31499],{"href":31498},"\u002Fdocs\u002Fapi\u002Futils\u002Fcall-once",[2890,31500,642],{},[2910,31502,31505],{"href":31503,"rel":31504},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F24787",[2914],"#24787",[2918,31507,31509],{"className":3129,"code":31508,"filename":219,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup>\nconst websiteConfig = useState('config')\n\nawait callOnce(async () => {\n  console.log('This will only be logged once')\n  websiteConfig.value = await $fetch('https:\u002F\u002Fmy-cms.com\u002Fapi\u002Fwebsite-config')\n})\n\u003C\u002Fscript>\n",[2890,31510,31511,31521,31542,31546,31562,31581,31607,31613],{"__ignoreMap":2924},[2928,31512,31513,31515,31517,31519],{"class":2930,"line":2931},[2928,31514,3139],{"class":2953},[2928,31516,3142],{"class":2970},[2928,31518,3145],{"class":2945},[2928,31520,3161],{"class":2953},[2928,31522,31523,31525,31528,31530,31532,31534,31536,31538,31540],{"class":2930,"line":2938},[2928,31524,3171],{"class":2945},[2928,31526,31527],{"class":2949}," websiteConfig ",[2928,31529,2954],{"class":2953},[2928,31531,4088],{"class":2957},[2928,31533,2961],{"class":2949},[2928,31535,3197],{"class":2953},[2928,31537,31409],{"class":3156},[2928,31539,3197],{"class":2953},[2928,31541,2990],{"class":2949},[2928,31543,31544],{"class":2930,"line":2967},[2928,31545,2996],{"emptyLinePlaceholder":1196},[2928,31547,31548,31550,31552,31554,31556,31558,31560],{"class":2930,"line":2984},[2928,31549,16363],{"class":2941},[2928,31551,20692],{"class":2957},[2928,31553,2961],{"class":2949},[2928,31555,3638],{"class":2945},[2928,31557,4102],{"class":2953},[2928,31559,3030],{"class":2945},[2928,31561,3033],{"class":2953},[2928,31563,31564,31566,31568,31570,31572,31574,31577,31579],{"class":2930,"line":2993},[2928,31565,9249],{"class":2949},[2928,31567,3088],{"class":2953},[2928,31569,9254],{"class":2957},[2928,31571,2961],{"class":2970},[2928,31573,3197],{"class":2953},[2928,31575,31576],{"class":3156},"This will only be logged once",[2928,31578,3197],{"class":2953},[2928,31580,2990],{"class":2970},[2928,31582,31583,31586,31588,31590,31592,31594,31596,31598,31600,31603,31605],{"class":2930,"line":2999},[2928,31584,31585],{"class":2949},"  websiteConfig",[2928,31587,3088],{"class":2953},[2928,31589,9263],{"class":2949},[2928,31591,3045],{"class":2953},[2928,31593,3189],{"class":2941},[2928,31595,3664],{"class":2957},[2928,31597,2961],{"class":2970},[2928,31599,3197],{"class":2953},[2928,31601,31602],{"class":3156},"https:\u002F\u002Fmy-cms.com\u002Fapi\u002Fwebsite-config",[2928,31604,3197],{"class":2953},[2928,31606,2990],{"class":2970},[2928,31608,31609,31611],{"class":2930,"line":3005},[2928,31610,2987],{"class":2953},[2928,31612,2990],{"class":2949},[2928,31614,31615,31617,31619],{"class":2930,"line":3036},[2928,31616,3209],{"class":2953},[2928,31618,3142],{"class":2970},[2928,31620,3161],{"class":2953},[2896,31622,31623,31624,31627],{},"Note that this utility is context-aware so it ",[10484,31625,31626],{},"must"," be called in component setup function or Nuxt plugin, as with other Nuxt composables.",[3233,31629],{"to":31498},[4543,31631,31633],{"id":31632},"error-types","🚨 Error Types",[2896,31635,31636,31637,2892,31639,31641,31642,31645,31646,10201,31648,31650],{},"For a while now, errors returned by ",[2890,31638,515],{},[2890,31640,527],{}," have been typed pretty generically as ",[2890,31643,31644],{},"Error",". We've significantly improved the type possibilities for them to make them more accurate in terms of what you'll actually receive. (We normalise errors with the ",[2890,31647,4543],{},[2890,31649,658],{}," utility under the hood, so they can be serialised from server to client, for example.)",[2896,31652,31653,31654,31659],{},"We've tried to implement the type change in a backwards compatible way, but you might notice that you need to update the generic if you're manually configuring the generics for these composables. See (",[2910,31655,31658],{"href":31656,"rel":31657},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F24396",[2914],"#24396",") for more information, and do let us know if you experience any issues.",[4543,31661,31663],{"id":31662},"schema-performance","🔥 Schema Performance",[2896,31665,31666],{},"We've taken some time in this release to make some minor performance improvements, so you should notice some things are a bit faster. This is an ongoing project and we have ideas for improving initial load time of the Nuxt dev server.",[2885,31668,6103],{"id":6102},[2896,31670,13730],{},[2918,31672,31674],{"className":4437,"code":31673,"language":4439,"meta":2924,"style":2924},"npx nuxi upgrade\n",[2890,31675,31676],{"__ignoreMap":2924},[2928,31677,31678,31680,31682],{"class":2930,"line":2931},[2928,31679,4446],{"class":3448},[2928,31681,8166],{"class":3156},[2928,31683,31684],{"class":3156}," upgrade\n",[2885,31686,21829],{"id":4472},[3233,31688,31690],{"to":31689,"icon":4477},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv3.9.0",[2896,31691,4481,31692,3088],{},[2890,31693,31694],{},"v3.9.0",[2896,31696,11288],{},[2896,31698,31699],{},[2900,31700,11293],{},[4489,31702,31703],{},"html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}html pre.shiki code .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":2924,"searchDepth":2938,"depth":2938,"links":31705},[31706,31707,31708,31709,31710,31711,31713,31714,31715,31716],{"id":31055,"depth":2967,"text":31056},{"id":31071,"depth":2967,"text":31072},{"id":31178,"depth":2967,"text":31179},{"id":31277,"depth":2967,"text":31278},{"id":31448,"depth":2967,"text":31449},{"id":31486,"depth":2967,"text":31712},"🏁 Run single events in callOnce",{"id":31632,"depth":2967,"text":31633},{"id":31662,"depth":2967,"text":31663},{"id":6102,"depth":2938,"text":6103},{"id":4472,"depth":2938,"text":21829},"2023-12-25","Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive server components, new composables, a new loading API and more.","\u002Fassets\u002Fblog\u002Fv3.9.png",{},"\u002Fblog\u002Fv3-9",{"title":31041,"description":31718},"blog\u002F19.v3-9","9_p--rasCWKzHF08w80BEXrs4niNjuvGLbsIjAby7rU",{"id":31726,"title":2797,"authors":31727,"body":31730,"category":4517,"date":32387,"description":32388,"draft":108,"extension":4520,"image":32389,"meta":32390,"navigation":1196,"path":2798,"seo":32391,"stem":2799,"tags":6,"__hash__":32392},"blog\u002Fblog\u002F18.nuxt-devtools-v1-0.md",[31728],{"name":20973,"avatar":31729,"to":20976,"twitter":20977},{"src":20975},{"type":2882,"value":31731,"toc":32354},[31732,31739,31749,31760,31805,31809,31812,31843,31850,31853,31857,31860,31867,31870,31873,31880,31882,31888,31892,31895,31899,31902,31922,31926,31929,31932,31936,31939,31942,31945,31949,31952,31955,31959,31962,31965,31968,31972,31978,31981,31985,31988,31991,31995,32008,32011,32015,32029,32032,32035,32039,32045,32048,32052,32055,32060,32063,32067,32070,32073,32077,32089,32092,32096,32099,32102,32106,32109,32112,32116,32119,32122,32126,32129,32132,32134,32137,32141,32144,32152,32155,32162,32165,32172,32175,32182,32185,32192,32195,32202,32205,32208,32212,32215,32252,32255,32257,32260,32283,32285,32288,32292,32299,32305,32308,32314,32320,32323,32330,32333,32336,32340,32348,32351],[2896,31733,31734,31735,31738],{},"We are thrilled to announce the release of ",[2910,31736,2797],{"href":26377,"rel":31737},[2914],"! 🎉",[4460,31740,31741],{},[2896,31742,31743,31744,31748],{},"Since this release, Nuxt DevTools is now enabled with ",[2910,31745,31747],{"href":31746},"\u002Fblog\u002Fv3-8","Nuxt v3.8"," and onwards by default. Generally available to all Nuxt projects!",[2896,31750,31751,31752,31755,31756,31759],{},"You can start playing with it by upgrading to the latest Nuxt, and press ",[2890,31753,31754],{},"Shift + Option + D"," (macOS) or ",[2890,31757,31758],{},"Shift + Alt + D"," (Windows) in your browser to open the DevTools. By default the floating panel is hidden to reduce the distraction. You can enable it inside Nuxt DevTools settings page, or explicitly enabled it in your config:",[2918,31761,31763],{"className":2920,"code":31762,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  devtools: {\n    enabled: true\n  }\n})\n",[2890,31764,31765,31777,31786,31795,31799],{"__ignoreMap":2924},[2928,31766,31767,31769,31771,31773,31775],{"class":2930,"line":2931},[2928,31768,2942],{"class":2941},[2928,31770,3871],{"class":2941},[2928,31772,3874],{"class":2957},[2928,31774,2961],{"class":2949},[2928,31776,2964],{"class":2953},[2928,31778,31779,31782,31784],{"class":2930,"line":2938},[2928,31780,31781],{"class":2970},"  devtools",[2928,31783,2974],{"class":2953},[2928,31785,3033],{"class":2953},[2928,31787,31788,31791,31793],{"class":2930,"line":2967},[2928,31789,31790],{"class":2970},"    enabled",[2928,31792,2974],{"class":2953},[2928,31794,8120],{"class":2977},[2928,31796,31797],{"class":2930,"line":2984},[2928,31798,3113],{"class":2953},[2928,31800,31801,31803],{"class":2930,"line":2993},[2928,31802,2987],{"class":2953},[2928,31804,2990],{"class":2949},[2885,31806,31808],{"id":31807},"the-reasons-we-built-nuxt-devtools","The Reasons We Built Nuxt DevTools",[2896,31810,31811],{},"Over the recent years, there has been an increasing focus on Developer Experience (DX). Tools and frameworks have been striving to improve the DX. Along the way, Nuxt introduced many innovative features and conventions to make your day-to-day development easier and more efficient.",[2896,31813,31814,31815,4309,31819,4309,31822,4309,31825,4309,31829,4309,31833,4309,31838,31842],{},"For example, ",[2910,31816,31818],{"href":31817},"\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Fpages","file-based routing",[2910,31820,31821],{"href":3477},"layout system",[2910,31823,175],{"href":31824},"\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Fplugins",[2910,31826,31828],{"href":31827},"\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Fmiddleware","route middleware",[2910,31830,31832],{"href":31831},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fauto-imports","composables auto-import",[2910,31834,31837],{"href":31835,"rel":31836},"https:\u002F\u002Fnitro.unjs.io\u002Fguide\u002Frouting",[2914],"file-based server APIs",[2910,31839,31841],{"href":31840},"\u002Fmodules","powerful module system"," and many more.",[2896,31844,31845],{},[4183,31846],{"alt":31847,"className":31848,"src":31849},"List of Nuxt features that enhance developer experience",[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fdevtools\u002Fslide-dx.png",[2896,31851,31852],{},"Nuxt is capable of creating various range of applications, from simple hobby projects to large scale applications, from simple client-rendered single-page applications to hybrid rendered sites with serverless functions on edge, etc. We provide those features and conventions to make it easier to support all those use cases and scenarios.",[4543,31854,31856],{"id":31855},"the-problem","The Problem",[2896,31858,31859],{},"Out of all these benefits of having a powerful framework, we have to made some trade-offs. Sometimes, we have to sacrifice a bit of the transparency of the underlying implementation to make things easier to use.",[2896,31861,31862],{},[4183,31863],{"alt":31864,"className":31865,"src":31866},"\"Transparency\" as the trade offs of having \"Conventions\", \"Abstractions\", \"Sensible Defaults\" and \"Normalizations\"",[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fdevtools\u002Fslide-transparency.png",[2896,31868,31869],{},"Conventional abstractions are great things to transfer implementation complexity and make things easier to get more focus when building. On the other hand, they can also add extra burden for users to learn and understand what's going on under the hood. Leading also to implicitness, like where a auto-imported component is from, or how many modules is using a certain component, etc. It can also make things hard to debug.",[2896,31871,31872],{},"Trade-offs are inevitable. Generally we believe those trade-offs are worth it, as they would help organizing users' codebase and make it easier to maintain in the long run. In the meantime, we also want to compensate the transparency we lost by providing a tool to help you understand what's going on under the hood and make the learning curve smoother.",[2896,31874,31875,31876,31879],{},"That's where Nuxt DevTools comes in! We ",[2910,31877,31878],{"href":2822},"first introduced it"," in February 2023 to experiment with the idea. After a few months of exploration and development, from surprisingly positive feedbacks from the community, this idea has been proven to be useful and we decided to make it a core part of your Nuxt development experience.",[2885,31881,395],{"id":11695},[2896,31883,31884,31887],{},[2910,31885,26379],{"href":26377,"rel":31886},[2914]," is a set of visual tools to help you understand your Nuxt app and improve the developer experience even further. It's created to provide better transparency between Nuxt and your app, find performance bottlenecks and help you manage your app and configuration.",[4543,31889,31891],{"id":31890},"in-app-devtools","In App DevTools",[2896,31893,31894],{},"From the overview, Nuxt DevTools is an in-app DevTools that lives alongside your app. It will show up as a floating panel that you can click to open.",[31896,31897],"article-video",{"cloudinary":31898},"v1700132388\u002Fdevtools\u002F0-intro_ilgwel",[2896,31900,31901],{},"We believe this is a better approach than the traditional browser extension DevTools, as it's:",[4346,31903,31904,31910,31916],{},[3844,31905,31906,31909],{},[2900,31907,31908],{},"Works across all browsers",", and even on mobile devices! - The capability of browser extension DevTools are limited by the APIs each browsers provides, and also maintain multiple extensions would require a lot of effort. This approach would allow us to focus more on the functionality and features, while having it accessible to users on any browsers and devices.",[3844,31911,31912,31915],{},[2900,31913,31914],{},"Build tools integrations"," - Tranditionally browser extension DevTools are only able to access the runtime context of your app and have no access to the build tools. Having the DevTools comes with Nuxt, allows us to communicate with the build tools and provide much more insights and features.",[3844,31917,31918,31921],{},[2900,31919,31920],{},"Avoid layout shifts"," - Having the DevTools as a floating panel would avoid the layout shifts when toggling the DevTools.",[4543,31923,31925],{"id":31924},"pages-view","Pages View",[2896,31927,31928],{},"To help improving the implicitness of file-based routing, we introduced the Pages View in DevTools. It lists all the pages that have been registered in your app, that you can easily test and navigate between them.",[31896,31930],{"cloudinary":31931},"v1700132393\u002Fdevtools\u002F1-pages_kkbecx",[4543,31933,31935],{"id":31934},"components-view","Components View",[2896,31937,31938],{},"The Components tab shows all the components you are using in your app and where they are from. You can also search for them and go to the source code.",[2896,31940,31941],{},"It also provides a graph view that show the relationship between components. You can filter the components to see the dependencies of a specific component. This could help to identify unintended dependencies and improve the performance and bundle size of pages.",[31896,31943],{"cloudinary":31944},"v1700132398\u002Fdevtools\u002F2-components_paj0uv",[4543,31946,31948],{"id":31947},"composables-view","Composables View",[2896,31950,31951],{},"Composables view shows all the auto-imported composables registered to Nuxt. You can see which files are importing them, and where they are from. Some entries can also provide short descriptions and documentation links.",[31896,31953],{"cloudinary":31954},"v1700132395\u002Fdevtools\u002F3-imports_qhahdf",[4543,31956,31958],{"id":31957},"modules-management","Modules Management",[2896,31960,31961],{},"The Modules tab shows all the modules that are registered in your app, with the links to their documentations and repositories.",[2896,31963,31964],{},"We also provide the ability for you to search for and explore the modules from the community. And install them with a single click!",[31896,31966],{"cloudinary":31967},"v1700132389\u002Fdevtools\u002F4-modules_v5ha5u",[4543,31969,31971],{"id":31970},"static-assets-management","Static Assets Management",[2896,31973,31974,31975,31977],{},"The Assets tab shows all the static assets under your ",[2890,31976,180],{}," directory. It supports previewing images, videos, fonts, PDFs, and other files, that you can easily copy the URL or code snippet to use in your app. You may also drag and drop files to upload them directly from Nuxt DevTools.",[31896,31979],{"cloudinary":31980},"v1700132394\u002Fdevtools\u002F5-assets_mpzyrs",[4543,31982,31984],{"id":31983},"runtime-configs-editor","Runtime Configs Editor",[2896,31986,31987],{},"The Runtime Configs tab shows the runtime configs of your app and provides an interactive editor for you to play with different values.",[31896,31989],{"cloudinary":31990},"v1700132393\u002Fdevtools\u002F6-runtime-configs_fzlrik",[4543,31992,31994],{"id":31993},"payload-editor","Payload Editor",[2896,31996,31997,31998,2892,32003,32007],{},"Similar to the Runtime Configs Editor, the Payload Editor allows you to edit the payload from composables like ",[2910,31999,32001],{"href":32000},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-state",[2890,32002,619],{},[2910,32004,32005],{"href":30067},[2890,32006,527],{}," to see what have been passed from server to client on server-side rendering.",[31896,32009],{"cloudinary":32010},"v1700132389\u002Fdevtools\u002F7-payload_nfzobp",[4543,32012,32014],{"id":32013},"open-graph-preview","Open Graph Preview",[2896,32016,32017,32022,32023,32028],{},[2910,32018,32021],{"href":32019,"rel":32020},"https:\u002F\u002Fogp.me\u002F",[2914],"Open Graph"," plays an important role in social media sharing as well as ",[2910,32024,32027],{"href":32025,"rel":32026},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FSearch_engine_optimization",[2914],"SEO",". In the traditional workflow, we usually need to first deploy our app to check if the Open Graph is working as expected on various social media platforms. With the Open Graph Preview, you can now preview the Open Graph in DevTools and update it live with an instant feedback loop.",[2896,32030,32031],{},"We also help you check the Open Graph tags in your app and provide suggestions to improve them. You can copy the generated code snippet and paste it to your routes to fix them in one go.",[31896,32033],{"cloudinary":32034},"v1700132390\u002Fdevtools\u002F8-open-graph_hjawen",[4543,32036,32038],{"id":32037},"plugins-overview","Plugins Overview",[2896,32040,32041,32042,32044],{},"Plugins Overview list all the ",[2910,32043,175],{"href":31824}," registered in your app. As the plugins are executed in the runtime before your app renders, it's important to keep plugins performant and avoid blocking the rendering. We provide the execution time of each plugin and the total time of all plugins, so you can better identify the potential performance bottlenecks.",[31896,32046],{"cloudinary":32047},"v1700132390\u002Fdevtools\u002F9-plugins_bhcobr",[4543,32049,32051],{"id":32050},"timeline","Timeline",[2896,32053,32054],{},"Timeline is a tool for you to check when and how each composable been called. Different from browser DevTools' performance tools, this tab only check the high-level composables combining with other events like route navigration, which is closer to day-to-day use. It also records the arguments and return values of each call, so you can better understand what's going on under the hood.",[10634,32056,32057],{},[2896,32058,32059],{},"As of November 2023, the Timeline is still an experimental feature that requires manually opt-in.",[31896,32061],{"cloudinary":32062},"v1700132392\u002Fdevtools\u002F10-timeline_zeei5s",[4543,32064,32066],{"id":32065},"production-build-analyzer","Production Build Analyzer",[2896,32068,32069],{},"While Nuxt DevTools is mostly focused on providing development tools, sometimes we might want to know how chunks are composed in production. The Build Analyzer allows you to fire up a production build and analyze the chunks and modules at any time and see how they are bundled. You can also do multiple builds on different branches to compare how your refactoring\u002Fchanges affect the bundle size, etc.",[31896,32071],{"cloudinary":32072},"v1700132394\u002Fdevtools\u002F11-build-analyze_f3wx6q",[4543,32074,32076],{"id":32075},"server-api-playground","Server API Playground",[2896,32078,32079,32080,32084,32085,32088],{},"Nuxt provides a very convenient way to create server API functions with the ",[2910,32081,32083],{"href":32082},"\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Fserver#server-routes","server routes",". Since in Nuxt we have that information, we are able to provide a playground for you to test and debug your server API functions, similar to tools like Postman. We list all the server APIs available in your app automatically. And we execute those functions ",[2900,32086,32087],{},"within the same context of your app",", so you don't need to manually set them up in external tools. As always, we also have code snippets for you to copy and paste into your app.",[31896,32090],{"cloudinary":32091},"v1700132388\u002Fdevtools\u002F12-server-api_owjyjg",[4543,32093,32095],{"id":32094},"embedded-full-feature-vs-code","Embedded Full-feature VS Code",[2896,32097,32098],{},"Thanks to the flexibility of our DevTools approach, we can leverage the power of the modern web to embed a full-featured VS Code right in the DevTools. In that VS Code, you can sign in to your account and synchronize your settings, and all the extensions just work as your normal VS Code client. This allows you to quickly edit your code without leaving your browser.",[31896,32100],{"cloudinary":32101},"v1700132395\u002Fdevtools\u002F13-vscode_je5x0m",[4543,32103,32105],{"id":32104},"component-inspector","Component Inspector",[2896,32107,32108],{},"The Inspector allows you to inspect the DOM tree and see which component is rendering it. Click to go to your editor for the specific line. Making it much easier to make changes without the requirement of understanding the project structure thoroughly.",[31896,32110],{"cloudinary":32111},"v1700132391\u002Fdevtools\u002F0-inspector_fuxmr7",[4543,32113,32115],{"id":32114},"split-screens","Split Screens",[2896,32117,32118],{},"In the recent releases, we introduced a split screen feature, that allows you to open two tabs side-by-side.",[31896,32120],{"cloudinary":32121},"v1700132391\u002Fdevtools\u002F0-split-view_mdeiie",[4543,32123,32125],{"id":32124},"ui-customization","UI Customization",[2896,32127,32128],{},"In DevTools setting, we provide a few options for you to customize the tabs you want to see, and the layout of the DevTools.",[31896,32130],{"cloudinary":32131},"v1700132391\u002Fdevtools\u002F0-settings_weflmu",[2885,32133,26584],{"id":26583},[2896,32135,32136],{},"In Nuxt, we value the ecosystem a lot. Similar to how Nuxt modules enhance Nuxt core, we also designed Nuxt DevTools to be highly extensible, allowing modules to provide additional features and integrations.",[4543,32138,32140],{"id":32139},"community-modules","Community Modules",[2896,32142,32143],{},"We are proud to see the community has already started to build modules for Nuxt DevTools. Here are some of them:",[2896,32145,32146,32151],{},[2910,32147,32150],{"href":32148,"rel":32149},"https:\u002F\u002Fnuxt.com\u002Fmodules\u002Fvitest",[2914],"Vitest module"," provides Vitest UI for tests running with the same pipeline as your Nuxt app. Made it easier to debug your tests alongside your app.",[31896,32153],{"cloudinary":32154},"v1700132393\u002Fdevtools\u002F99-vitest_wwikpc",[2896,32156,32157,32161],{},[2910,32158,32160],{"href":32159},"\u002Fmodules\u002Fvueuse","VueUse module"," provides a search page for available composables and see their documentation.",[31896,32163],{"cloudinary":32164},"v1700132390\u002Fdevtools\u002F99-vueuse_simsfj",[2896,32166,32167,32171],{},[2910,32168,32170],{"href":32169},"\u002Fmodules\u002Fsitemap","SiteMap module"," provides an interactive editor for you to manage your sitemap.",[31896,32173],{"cloudinary":32174},"v1700132390\u002Fdevtools\u002F99-sitemap_xpsfek",[2896,32176,32177,32181],{},[2910,32178,32180],{"href":32179},"\u002Fmodules\u002Ftailwindcss","TailwindCSS module"," provides the Tailwind Config Viewer for you to check what's available based on your config.",[31896,32183],{"cloudinary":32184},"v1700132388\u002Fdevtools\u002F99-tailwind_dgiodc",[2896,32186,32187,32191],{},[2910,32188,32190],{"href":32189},"\u002Fmodules\u002Funocss","UnoCSS module"," provides an interactive inspector to see how each module contributes to the final CSS.",[31896,32193],{"cloudinary":32194},"v1700132394\u002Fdevtools\u002F99-unocss_xvii5x",[2896,32196,32197,32201],{},[2910,32198,32200],{"href":32199},"\u002Fmodules\u002Fstorybook","Storybook module"," provides a Storybook UI for your components.",[31896,32203],{"cloudinary":32204},"v1700132388\u002Fdevtools\u002F99-storybook_ifxt4r",[2896,32206,32207],{},"And they are just a few of them! We are looking forward to see more modules coming to Nuxt DevTools!",[4543,32209,32211],{"id":32210},"projects-inspired-by-nuxt-devtools","Projects Inspired by Nuxt DevTools",[2896,32213,32214],{},"In the meantime, we are also flattered that other frameworks are starting to build their own DevTools inspired by Nuxt DevTools:",[4346,32216,32217,32227,32236,32244],{},[3844,32218,32219,32226],{},[2910,32220,32223],{"href":32221,"rel":32222},"https:\u002F\u002Fgithub.com\u002Fwebfansplz\u002Fvite-plugin-vue-devtools",[2914],[2890,32224,32225],{},"webfansplz\u002Fvite-plugin-vue-devtools"," - A Nuxt DevTools port to support DevTools for Vite + Vue 3 apps.",[3844,32228,32229,32235],{},[2910,32230,32232],{"href":26819,"rel":32231},[2914],[2890,32233,32234],{},"pheno-agency\u002Fvite-plugin-devtools"," - An experiment on building framework-agnostic DevTools for Vite.",[3844,32237,32238,32243],{},[2910,32239,32242],{"href":32240,"rel":32241},"https:\u002F\u002Fgithub.com\u002FAsuka109\u002Fmodern.js\u002Ftree\u002Fdev\u002Fmodernjs-devtools\u002Fpackages\u002Fdevtools\u002Fplugin",[2914],"Modern.js DevTools"," - In App DevTools for Modern.js",[3844,32245,32246,32251],{},[2910,32247,32250],{"href":32248,"rel":32249},"https:\u002F\u002Fgithub.com\u002FQwikDev\u002Fdevtools",[2914],"Qwik DevTools"," - DevTools for Qwik",[2896,32253,32254],{},"We are working closely with the maintainers of those projects to see how we can bring the experience of DevTools to the next level.",[2885,32256,17125],{"id":16893},[2896,32258,32259],{},"Nuxt DevTools just reached v1.0, but t doesn't mean we are done. There are still a lot of things we want to explore and improve. Here are some of the ideas we are considering:",[4346,32261,32262,32269,32276],{},[3844,32263,32264,32265,32268],{},"Nuxt Accessibility Integration - We are building an a11y integration for Nuxt (",[2910,32266,15057],{"href":3781,"rel":32267},[2914],"). We'll build a dedicated view in Nuxt DevTools for you to check the accessibility hints interactively.",[3844,32270,32271,32272,32275],{},"Vue DevTools Integration - We are working with the Vue team to bring the Vue DevTools experience to a shared tool that works for both browser extensions and in-app DevTools like ",[2890,32273,32274],{},"vite-plugin-vue-devtools"," and Nuxt DevTools.",[3844,32277,32278],{},[2910,32279,32282],{"href":32280,"rel":32281},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fdevtools\u002Fdiscussions\u002F29",[2914],"Let us know your ideas\u002Fsuggestions!",[2885,32284,26621],{"id":26620},[2896,32286,32287],{},"We are excited to see how Nuxt DevTools can help you build better apps and improve your developer experience. Going forward, we are imagining something bigger than Nuxt DevTools itself. We believe that having such framework-specific DevTools is the way onwards to provide even better developer experience. We also see there are many parts of such tools can actually be shared and reused across tools. We came up with the idea of the DevTools Kit.",[4543,32289,32291],{"id":32290},"devtools-kit","DevTools Kit",[2896,32293,32294,32295,32298],{},"DevTools Kit is an idea of the universal protocol that is still in the early brainstorming phase. We imagine that in the best world, each feature of the DevTools should be ",[2900,32296,32297],{},"composable, extensible, and collaborative",". Meta-frameworks could build their own features for their specific needs, while the common web-related tools could be shared and collaborated on between different frameworks.",[2896,32300,32301],{},[4183,32302],{"alt":32291,"className":32303,"src":32304},[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fdevtools\u002Fslide-devtools-kit.png",[2896,32306,32307],{},"Imagine we could have all these features, each as a standalone package. We could have general web-related tools like SEO, Accessibility, PWA, Static Assets, etc. Then low-level build tools related, like Vite build analyzer, Vite Inspector, or Webpack visualizer, etc. And finally, we could have framework and meta-framework specific tools like Vue Components view, or Nuxt Server API Playground, etc.",[2896,32309,32310],{},[4183,32311],{"alt":26379,"className":32312,"src":32313},[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fdevtools\u002Fslide-nuxt-devtools.png",[2896,32315,32316],{},[4183,32317],{"alt":26379,"className":32318,"src":32319},[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fdevtools\u002Fslide-vue-devtools.png",[2896,32321,32322],{},"At that time, Vue DevTools would be a composition of common web features and Vue-specific features. And Nuxt DevTools would essentially be a composition of the features above, inherit all features from Vue DevTools, and add Nuxt specific features on top of it.",[2896,32324,32325],{},[4183,32326],{"alt":32327,"className":32328,"src":32329},"Your DevTools",[19239,19240,5483,15174],"\u002Fassets\u002Fblog\u002Fdevtools\u002Fslide-your-devtools.png",[2896,32331,32332],{},"It would even be possible to compose your own DevTools as you like.",[2896,32334,32335],{},"That said, we are still thinking about and discussing the details of the DevTools Kit. Stay tuned for more updates!",[2885,32337,32339],{"id":32338},"conclusion","Conclusion",[2896,32341,32342,32343,32347],{},"We hope you enjoy the new Nuxt DevTools experience! We are looking forward to seeing how it can help you build better apps and improve your developer experience. If you have any ideas or suggestions, feel free to let us know in the ",[2910,32344,32346],{"href":32280,"rel":32345},[2914],"Ideas & Suggestions"," discussion.",[2896,32349,32350],{},"Thank you for your support and happy hacking! 🚀",[4489,32352,32353],{},"html pre.shiki code .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}",{"title":2924,"searchDepth":2938,"depth":2938,"links":32355},[32356,32359,32378,32382,32383,32386],{"id":31807,"depth":2938,"text":31808,"children":32357},[32358],{"id":31855,"depth":2967,"text":31856},{"id":11695,"depth":2938,"text":395,"children":32360},[32361,32362,32363,32364,32365,32366,32367,32368,32369,32370,32371,32372,32373,32374,32375,32376,32377],{"id":31890,"depth":2967,"text":31891},{"id":31924,"depth":2967,"text":31925},{"id":31934,"depth":2967,"text":31935},{"id":31947,"depth":2967,"text":31948},{"id":31957,"depth":2967,"text":31958},{"id":31970,"depth":2967,"text":31971},{"id":31983,"depth":2967,"text":31984},{"id":31993,"depth":2967,"text":31994},{"id":32013,"depth":2967,"text":32014},{"id":32037,"depth":2967,"text":32038},{"id":32050,"depth":2967,"text":32051},{"id":32065,"depth":2967,"text":32066},{"id":32075,"depth":2967,"text":32076},{"id":32094,"depth":2967,"text":32095},{"id":32104,"depth":2967,"text":32105},{"id":32114,"depth":2967,"text":32115},{"id":32124,"depth":2967,"text":32125},{"id":26583,"depth":2938,"text":26584,"children":32379},[32380,32381],{"id":32139,"depth":2967,"text":32140},{"id":32210,"depth":2967,"text":32211},{"id":16893,"depth":2938,"text":17125},{"id":26620,"depth":2938,"text":26621,"children":32384},[32385],{"id":32290,"depth":2967,"text":32291},{"id":32338,"depth":2938,"text":32339},"2023-11-13","Nuxt DevTools v1.0 is out, generally available to all Nuxt projects!","\u002Fassets\u002Fblog\u002Fnuxt-devtools-1-0.png",{},{"title":2797,"description":32388},"3RdDyJaaWbGXpVUnja1ZA5rw--kXAPr5vkWPDzKwDQg",{"id":32394,"title":32395,"authors":32396,"body":32399,"category":4517,"date":33653,"description":33654,"draft":108,"extension":4520,"image":33655,"meta":33656,"navigation":108,"path":31746,"seo":33657,"stem":33658,"tags":6,"__hash__":33659},"blog\u002Fblog\u002F17.v3-8.md","Nuxt 3.8",[32397],{"name":2877,"avatar":32398,"to":2880},{"src":2879},{"type":2882,"value":32400,"toc":33637},[32401,32405,32414,32422,32427,32437,32441,32444,32449,32453,32464,32476,32489,32500,32504,32510,32525,32563,32572,32576,32588,32598,32609,32740,32748,32765,32769,32786,32802,32809,32834,32841,32883,32888,32892,32908,32924,32927,33015,33019,33030,33062,33181,33186,33193,33323,33327,33352,33375,33381,33385,33395,33425,33434,33438,33441,33460,33466,33470,33475,33485,33496,33522,33525,33528,33599,33602,33604,33606,33618,33620,33628,33630,33634],[4543,32402,32404],{"id":32403},"cli-improvements","💻 CLI Improvements",[2896,32406,32407,32408,32413],{},"Just to remind you, we're now using ",[2910,32409,32412],{"href":32410,"rel":32411},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fcli",[2914],"the new Nuxt CLI"," which is now versioned separately.",[4460,32415,32416],{},[2896,32417,32418,32419],{},"You can now install a module with ",[2890,32420,32421],{},"nuxi module add \u003Cmodule-name>",[3774,32423,32424],{"icon":14},[2896,32425,32426],{},"We now share the same port with the Vite websocket, meaning better support for docker containers in development.",[3233,32428,32431],{"to":32429,"icon":4477,"color":32430,"target":4478},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fcli\u002Freleases\u002Ftag\u002Fv3.9.0","gray",[2896,32432,32433,32434,32436],{},"Read the Nuxt CLI ",[2890,32435,31694],{}," release notes.",[4543,32438,32440],{"id":32439},"built-in-nuxt-devtools","✨ Built-in Nuxt DevTools",[2896,32442,32443],{},"Nuxt DevTools v1.0.0 is out and we now think it's ready to be shipped as a direct dependency of Nuxt.",[3233,32445,32446],{"to":2798,"icon":4477,"color":32430},[2896,32447,32448],{},"Check out Nuxt DevTools v1.0 announcement.",[4543,32450,32452],{"id":32451},"nuxt-image-auto-install","📸 Nuxt Image Auto-install",[2896,32454,32455,2892,32459,32463],{},[2910,32456,32457],{"href":26787},[2890,32458,496],{},[2910,32460,32461],{"href":26792},[2890,32462,452],{}," first-class built-in components.",[2896,32465,32466,32467,32470,32471,2916],{},"We now auto-installing ",[2890,32468,32469],{},"@nuxt\u002Fimage"," the first time that they are used (",[2910,32472,32475],{"href":32473,"rel":32474},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F23717",[2914],"#23717",[5478,32477,32480,32483,32486],{":controls":4902,"className":32478,"poster":32479},[5481,5482,5483],"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1697721767\u002Fnuxt3\u002Fnuxt-image-auto-install_uqkptq.jpg",[5486,32481],{"src":32482,"type":5489},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1697721767\u002Fnuxt3\u002Fnuxt-image-auto-install_uqkptq.webm",[5486,32484],{"src":32485,"type":5493},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1697721767\u002Fnuxt3\u002Fnuxt-image-auto-install_uqkptq.mp4",[5486,32487],{"src":32488,"type":5497},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1697721767\u002Fnuxt3\u002Fnuxt-image-auto-install_uqkptq.ogg",[4460,32490,32491],{},[2896,32492,32493,32494,32499],{},"We advise using ",[2910,32495,32497],{"href":10093,"rel":32496},[2914],[2890,32498,32469],{}," if you're using images in your site; it can apply optimisations to make your site more performant.",[4543,32501,32503],{"id":32502},"deeper-layout-scanning","📂 Deeper Layout Scanning",[32505,32506,32507],"caution",{},[2896,32508,32509],{},"This is a behaviour change so do take care with this one.",[2896,32511,32512,32513,32518,32519,3088],{},"We now support scanning layouts within subfolders in ",[2910,32514,32515],{"href":3477},[2890,32516,32517],{},"~\u002Flayouts"," in the same way as we do with ",[2910,32520,32522],{"href":32521},"\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Fcomponents",[2890,32523,32524],{},"~\u002Fcomponents",[17076,32526,32527,32537],{},[17079,32528,32529],{},[17082,32530,32531,32534],{},[17085,32532,32533],{},"File",[17085,32535,32536],{},"Layout name",[17090,32538,32539,32547,32555],{},[17082,32540,32541,32544],{},[17095,32542,32543],{},"~\u002Flayouts\u002Fdesktop\u002Fdefault.vue",[17095,32545,32546],{},"'desktop-default'",[17082,32548,32549,32552],{},[17095,32550,32551],{},"~\u002Flayouts\u002Fdesktop-base\u002Fbase.vue",[17095,32553,32554],{},"'desktop-base'",[17082,32556,32557,32560],{},[17095,32558,32559],{},"~\u002Flayouts\u002Fdesktop\u002Findex.vue",[17095,32561,32562],{},"'desktop'",[3233,32564,32566],{"to":32565},"\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Flayouts#named-layout",[2896,32567,32568,32569,3088],{},"Read more about ",[2900,32570,32571],{},"Named Layouts",[4543,32573,32575],{"id":32574},"app-manifest","📊 App Manifest",[2896,32577,32578,32579,32584,32585,3088],{},"We now support a built-in app manifest (see ",[2910,32580,32583],{"href":32581,"rel":32582},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F21641",[2914],"PR #21641","), which generates a manifest at ",[2890,32586,32587],{},"\u002F_nuxt\u002Fbuilds\u002Fmeta\u002F\u003CbuildId>.json",[2896,32589,32590,32591,32594,32595,32597],{},"It enables loading payloads ",[2900,32592,32593],{},"only for prerendered routes",", if a site is generated with ",[2890,32596,781],{},", preventing 404s in the console.",[2896,32599,32600,32601,32604,32605,32608],{},"It also enables ",[2900,32602,32603],{},"client-side route rules",". Only ",[2890,32606,32607],{},"redirect"," route rules is supported for now; they will now redirect when performing client-side navigation.",[3508,32610,32611,32672],{},[2918,32612,32614],{"className":2920,"code":32613,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  routeRules: {\n    '\u002Fabout': { redirect: '\u002Fabout-us' }\n  }\n})\n",[2890,32615,32616,32628,32636,32662,32666],{"__ignoreMap":2924},[2928,32617,32618,32620,32622,32624,32626],{"class":2930,"line":2931},[2928,32619,2942],{"class":2941},[2928,32621,3871],{"class":2941},[2928,32623,3874],{"class":2957},[2928,32625,2961],{"class":2949},[2928,32627,2964],{"class":2953},[2928,32629,32630,32632,32634],{"class":2930,"line":2938},[2928,32631,4653],{"class":2970},[2928,32633,2974],{"class":2953},[2928,32635,3033],{"class":2953},[2928,32637,32638,32640,32642,32644,32646,32648,32651,32653,32655,32658,32660],{"class":2930,"line":2967},[2928,32639,4662],{"class":2953},[2928,32641,17930],{"class":2970},[2928,32643,3197],{"class":2953},[2928,32645,2974],{"class":2953},[2928,32647,3174],{"class":2953},[2928,32649,32650],{"class":2970}," redirect",[2928,32652,2974],{"class":2953},[2928,32654,3329],{"class":2953},[2928,32656,32657],{"class":3156},"\u002Fabout-us",[2928,32659,3197],{"class":2953},[2928,32661,4739],{"class":2953},[2928,32663,32664],{"class":2930,"line":2984},[2928,32665,3113],{"class":2953},[2928,32667,32668,32670],{"class":2930,"line":2993},[2928,32669,2987],{"class":2953},[2928,32671,2990],{"class":2949},[2918,32673,32675],{"className":3129,"code":32674,"filename":21998,"language":3132,"meta":2924,"style":2924},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- Will be redirected to \u002Fabout-us on client-side -->\n    \u003CNuxtLink to=\"\u002Fabout\">About\u003C\u002FNuxtLink>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[2890,32676,32677,32685,32693,32698,32724,32732],{"__ignoreMap":2924},[2928,32678,32679,32681,32683],{"class":2930,"line":2931},[2928,32680,3139],{"class":2953},[2928,32682,3521],{"class":2970},[2928,32684,3161],{"class":2953},[2928,32686,32687,32689,32691],{"class":2930,"line":2938},[2928,32688,3528],{"class":2953},[2928,32690,11471],{"class":2970},[2928,32692,3161],{"class":2953},[2928,32694,32695],{"class":2930,"line":2967},[2928,32696,32697],{"class":2934},"    \u003C!-- Will be redirected to \u002Fabout-us on client-side -->\n",[2928,32699,32700,32702,32704,32706,32708,32710,32712,32714,32716,32718,32720,32722],{"class":2930,"line":2984},[2928,32701,3557],{"class":2953},[2928,32703,17920],{"class":2970},[2928,32705,17923],{"class":2945},[2928,32707,2954],{"class":2953},[2928,32709,3153],{"class":2953},[2928,32711,17930],{"class":3156},[2928,32713,3153],{"class":2953},[2928,32715,9470],{"class":2953},[2928,32717,17940],{"class":2949},[2928,32719,3209],{"class":2953},[2928,32721,17920],{"class":2970},[2928,32723,3161],{"class":2953},[2928,32725,32726,32728,32730],{"class":2930,"line":2993},[2928,32727,3567],{"class":2953},[2928,32729,11471],{"class":2970},[2928,32731,3161],{"class":2953},[2928,32733,32734,32736,32738],{"class":2930,"line":2999},[2928,32735,3209],{"class":2953},[2928,32737,3521],{"class":2970},[2928,32739,3161],{"class":2953},[4460,32741,32742],{"icon":14},[2896,32743,32744,32745,3088],{},"The app manifest also enables future enhancements including detection of a new deployment by checking ",[2890,32746,32747],{},"\u002F_nuxt\u002Fbuilds\u002Flatest.json",[3774,32749,32750],{},[2896,32751,32752,32753,32756,32757,10579,32760,14018,32762,32764],{},"You can ",[2900,32754,32755],{},"opt-on from this behaviour if you need to"," by setting ",[2890,32758,32759],{},"experimental.appManifest",[2890,32761,4933],{},[2890,32763,233],{}," file.",[4543,32766,32768],{"id":32767},"scope-and-context-improvements","🤝 Scope and Context Improvements",[2896,32770,32771,32772,32777,32778,32785],{},"We now define a 'scope' for Nuxt composables executed in plugins (",[2910,32773,32776],{"href":32774,"rel":32775},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F23667",[2914],"#23667","), which allows running synchronous cleanup before navigating away from your site, using the Vue ",[2910,32779,32782],{"href":32780,"rel":32781},"https:\u002F\u002Fvuejs.org\u002Fapi\u002Freactivity-advanced.html#onscopedispose",[2914],[2890,32783,32784],{},"onScopeDispose"," lifecycle method.",[3774,32787,32788],{},[2896,32789,32790,32791,32796,32797,2916],{},"This should fix an edge case with cookies (",[2910,32792,32795],{"href":32793,"rel":32794},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F23697",[2914],"#23697",") and also improves memory management such as Pinia stores (",[2910,32798,32801],{"href":32799,"rel":32800},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fissues\u002F23650",[2914],"#23650",[3233,32803,32806],{"to":32804,"icon":32805,"target":4478},"https:\u002F\u002Fvuejs.org\u002Fapi\u002Freactivity-advanced.html#effectscope","i-simple-icons-vuedotjs",[2896,32807,32808],{},"Read more about Vue effect scopes.",[2896,32810,32811,32812,19250,32819,3248,32822,32827,32828,3088],{},"We also now support ",[2910,32813,32816],{"href":32814,"rel":32815},"https:\u002F\u002Fnodejs.org\u002Fapi\u002Fasync_context.html",[2914],[2900,32817,32818],{},"native async context",[10484,32820,32821],{},"Vue composition API",[2910,32823,32826],{"href":32824,"rel":32825},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F23526",[2914],"#23526","). In case you're unaware, we support native async context on Node and Bun, enabled with ",[2910,32829,32831],{"href":32830},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fexperimental-features#asynccontext",[2890,32832,32833],{},"experimental.asyncContext",[2896,32835,32836,32837,32840],{},"If you experience issues with ",[2890,32838,32839],{},"Nuxt instance unavailable",", enabling this option may solve your issues:",[2918,32842,32843],{"className":2920,"code":8088,"filename":233,"language":2923,"meta":2924,"style":2924},[2890,32844,32845,32857,32865,32873,32877],{"__ignoreMap":2924},[2928,32846,32847,32849,32851,32853,32855],{"class":2930,"line":2931},[2928,32848,2942],{"class":2941},[2928,32850,3871],{"class":2941},[2928,32852,3874],{"class":2957},[2928,32854,2961],{"class":2949},[2928,32856,2964],{"class":2953},[2928,32858,32859,32861,32863],{"class":2930,"line":2938},[2928,32860,3883],{"class":2970},[2928,32862,2974],{"class":2953},[2928,32864,3033],{"class":2953},[2928,32866,32867,32869,32871],{"class":2930,"line":2967},[2928,32868,8115],{"class":2970},[2928,32870,2974],{"class":2953},[2928,32872,8120],{"class":2977},[2928,32874,32875],{"class":2930,"line":2984},[2928,32876,3113],{"class":2953},[2928,32878,32879,32881],{"class":2930,"line":2993},[2928,32880,2987],{"class":2953},[2928,32882,2990],{"class":2949},[3774,32884,32885],{},[2896,32886,32887],{},"Once we have cross-runtime support, we will enable it by default.",[4543,32889,32891],{"id":32890},"nuxtlink-defaults","🔗 NuxtLink Defaults",[2896,32893,32894,32895,32900,32901,32907],{},"You can define your own ",[2910,32896,32898],{"href":32897},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-link",[2890,32899,476],{}," components with the ",[2910,32902,32904],{"href":32903},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-link#definenuxtlink-signature",[2890,32905,32906],{},"defineNuxtLink"," utility.",[2896,32909,32910,32911,32915,32916,32918,32919,2916],{},"Today, you can cutomize the options for the built-in ",[2910,32912,32913],{"href":32897},[2890,32914,476],{},", directly in your ",[2890,32917,233],{}," file (",[2910,32920,32923],{"href":32921,"rel":32922},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F23724",[2914],"#23724",[2896,32925,32926],{},"This can enable you to enforce trailing slash behaviour across your entire site, for example:",[2918,32928,32930],{"className":2920,"code":32929,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  experimental: {\n    defaults: {\n      nuxtLink: {\n        activeClass: 'nuxt-link-active',\n        trailingSlash: 'append'\n      }\n    }\n  }\n})\n",[2890,32931,32932,32944,32952,32960,32968,32984,32997,33001,33005,33009],{"__ignoreMap":2924},[2928,32933,32934,32936,32938,32940,32942],{"class":2930,"line":2931},[2928,32935,2942],{"class":2941},[2928,32937,3871],{"class":2941},[2928,32939,3874],{"class":2957},[2928,32941,2961],{"class":2949},[2928,32943,2964],{"class":2953},[2928,32945,32946,32948,32950],{"class":2930,"line":2938},[2928,32947,3883],{"class":2970},[2928,32949,2974],{"class":2953},[2928,32951,3033],{"class":2953},[2928,32953,32954,32956,32958],{"class":2930,"line":2967},[2928,32955,22138],{"class":2970},[2928,32957,2974],{"class":2953},[2928,32959,3033],{"class":2953},[2928,32961,32962,32964,32966],{"class":2930,"line":2984},[2928,32963,22147],{"class":2970},[2928,32965,2974],{"class":2953},[2928,32967,3033],{"class":2953},[2928,32969,32970,32973,32975,32977,32980,32982],{"class":2930,"line":2993},[2928,32971,32972],{"class":2970},"        activeClass",[2928,32974,2974],{"class":2953},[2928,32976,3329],{"class":2953},[2928,32978,32979],{"class":3156},"nuxt-link-active",[2928,32981,3197],{"class":2953},[2928,32983,2981],{"class":2953},[2928,32985,32986,32989,32991,32993,32995],{"class":2930,"line":2999},[2928,32987,32988],{"class":2970},"        trailingSlash",[2928,32990,2974],{"class":2953},[2928,32992,3329],{"class":2953},[2928,32994,25964],{"class":3156},[2928,32996,5269],{"class":2953},[2928,32998,32999],{"class":2930,"line":3005},[2928,33000,5989],{"class":2953},[2928,33002,33003],{"class":2930,"line":3036},[2928,33004,4866],{"class":2953},[2928,33006,33007],{"class":2930,"line":3054},[2928,33008,3113],{"class":2953},[2928,33010,33011,33013],{"class":2930,"line":3059},[2928,33012,2987],{"class":2953},[2928,33014,2990],{"class":2949},[4543,33016,33018],{"id":33017},"️-data-fetching-improvements","⚡️ Data Fetching Improvements",[2896,33020,33021,33022,2892,33026,2974],{},"We have two very significant new features for ",[2910,33023,33024],{"href":30062},[2890,33025,515],{},[2910,33027,33028],{"href":30067},[2890,33029,527],{},[3841,33031,33032,33050],{},[3844,33033,33034,33035,33038,33039,33041,33042,33047,33048,3088],{},"You can now set ",[2890,33036,33037],{},"deep: false"," to prevent deep reactivity on the ",[2890,33040,15807],{}," object returned from these composables (",[2910,33043,33046],{"href":33044,"rel":33045},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F23600",[2914],"#23600","). It should be a performance improvement if you are returning large arrays or objects. The object will still update when refetched; it just won't trigger reactive effects if you change a property deep within the ",[2890,33049,15807],{},[3844,33051,33052,33053,33056,33057,3027],{},"You can now use the ",[2890,33054,33055],{},"getCachedData"," option to handle custom caching for these composables (",[2910,33058,33061],{"href":33059,"rel":33060},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F20747",[2914],"#20747",[2918,33063,33065],{"className":3129,"code":33064,"filename":21998,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup>\nconst nuxtApp = useNuxtApp()\nconst { data } = await useAsyncData(() => { \u002F* fetcher *\u002F }, {\n  \u002F\u002F this will not refetch if the key exists in the payload\n  getCachedData: key => nuxtApp.payload.static[key] ?? nuxtApp.payload.data[key]\n})\n\u003C\u002Fscript>\n",[2890,33066,33067,33077,33091,33123,33128,33167,33173],{"__ignoreMap":2924},[2928,33068,33069,33071,33073,33075],{"class":2930,"line":2931},[2928,33070,3139],{"class":2953},[2928,33072,3142],{"class":2970},[2928,33074,3145],{"class":2945},[2928,33076,3161],{"class":2953},[2928,33078,33079,33081,33084,33086,33089],{"class":2930,"line":2938},[2928,33080,3171],{"class":2945},[2928,33082,33083],{"class":2949}," nuxtApp ",[2928,33085,2954],{"class":2953},[2928,33087,33088],{"class":2957}," useNuxtApp",[2928,33090,3051],{"class":2949},[2928,33092,33093,33095,33097,33099,33101,33103,33105,33107,33109,33111,33113,33115,33118,33121],{"class":2930,"line":2967},[2928,33094,3171],{"class":2945},[2928,33096,3174],{"class":2953},[2928,33098,14114],{"class":2949},[2928,33100,2987],{"class":2953},[2928,33102,3045],{"class":2953},[2928,33104,3189],{"class":2941},[2928,33106,10264],{"class":2957},[2928,33108,2961],{"class":2949},[2928,33110,3647],{"class":2953},[2928,33112,3030],{"class":2945},[2928,33114,3174],{"class":2953},[2928,33116,33117],{"class":2934}," \u002F* fetcher *\u002F",[2928,33119,33120],{"class":2953}," },",[2928,33122,3033],{"class":2953},[2928,33124,33125],{"class":2930,"line":2984},[2928,33126,33127],{"class":2934},"  \u002F\u002F this will not refetch if the key exists in the payload\n",[2928,33129,33130,33133,33135,33138,33140,33143,33145,33148,33150,33153,33156,33158,33160,33162,33164],{"class":2930,"line":2993},[2928,33131,33132],{"class":2957},"  getCachedData",[2928,33134,2974],{"class":2953},[2928,33136,33137],{"class":3023}," key",[2928,33139,3030],{"class":2945},[2928,33141,33142],{"class":2949}," nuxtApp",[2928,33144,3088],{"class":2953},[2928,33146,33147],{"class":2949},"payload",[2928,33149,3088],{"class":2953},[2928,33151,33152],{"class":2949},"static[key] ",[2928,33154,33155],{"class":2953},"??",[2928,33157,33142],{"class":2949},[2928,33159,3088],{"class":2953},[2928,33161,33147],{"class":2949},[2928,33163,3088],{"class":2953},[2928,33165,33166],{"class":2949},"data[key]\n",[2928,33168,33169,33171],{"class":2930,"line":2999},[2928,33170,2987],{"class":2953},[2928,33172,2990],{"class":2949},[2928,33174,33175,33177,33179],{"class":2930,"line":3005},[2928,33176,3209],{"class":2953},[2928,33178,3142],{"class":2970},[2928,33180,3161],{"class":2953},[33182,33183],"video-accordion",{"title":33184,"video-id":33185},"Watch the video from Alexander Lichter about Client-side caching with getCachedData.","aQPR0xn-MMk",[2896,33187,33188,33189,3839],{},"We also support configuring some default values for these composables in an app-wide way (",[2910,33190,33192],{"href":33059,"rel":33191},[2914],"#23725",[2918,33194,33196],{"className":2920,"code":33195,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  experimental: {\n    defaults: {\n      useAsyncData: {\n        deep: false\n      },\n      useFetch: {\n        retry: false,\n        retryDelay: 100,\n        retryStatusCodes: [500],\n        timeout: 100\n      }\n    }\n  }\n})\n",[2890,33197,33198,33210,33218,33226,33235,33244,33248,33257,33268,33280,33295,33305,33309,33313,33317],{"__ignoreMap":2924},[2928,33199,33200,33202,33204,33206,33208],{"class":2930,"line":2931},[2928,33201,2942],{"class":2941},[2928,33203,3871],{"class":2941},[2928,33205,3874],{"class":2957},[2928,33207,2961],{"class":2949},[2928,33209,2964],{"class":2953},[2928,33211,33212,33214,33216],{"class":2930,"line":2938},[2928,33213,3883],{"class":2970},[2928,33215,2974],{"class":2953},[2928,33217,3033],{"class":2953},[2928,33219,33220,33222,33224],{"class":2930,"line":2967},[2928,33221,22138],{"class":2970},[2928,33223,2974],{"class":2953},[2928,33225,3033],{"class":2953},[2928,33227,33228,33231,33233],{"class":2930,"line":2984},[2928,33229,33230],{"class":2970},"      useAsyncData",[2928,33232,2974],{"class":2953},[2928,33234,3033],{"class":2953},[2928,33236,33237,33240,33242],{"class":2930,"line":2993},[2928,33238,33239],{"class":2970},"        deep",[2928,33241,2974],{"class":2953},[2928,33243,5979],{"class":2977},[2928,33245,33246],{"class":2930,"line":2999},[2928,33247,18962],{"class":2953},[2928,33249,33250,33253,33255],{"class":2930,"line":3005},[2928,33251,33252],{"class":2970},"      useFetch",[2928,33254,2974],{"class":2953},[2928,33256,3033],{"class":2953},[2928,33258,33259,33262,33264,33266],{"class":2930,"line":3036},[2928,33260,33261],{"class":2970},"        retry",[2928,33263,2974],{"class":2953},[2928,33265,2978],{"class":2977},[2928,33267,2981],{"class":2953},[2928,33269,33270,33273,33275,33278],{"class":2930,"line":3054},[2928,33271,33272],{"class":2970},"        retryDelay",[2928,33274,2974],{"class":2953},[2928,33276,33277],{"class":3988}," 100",[2928,33279,2981],{"class":2953},[2928,33281,33282,33285,33287,33289,33291,33293],{"class":2930,"line":3059},[2928,33283,33284],{"class":2970},"        retryStatusCodes",[2928,33286,2974],{"class":2953},[2928,33288,4961],{"class":2949},[2928,33290,18007],{"class":3988},[2928,33292,4971],{"class":2949},[2928,33294,2981],{"class":2953},[2928,33296,33297,33300,33302],{"class":2930,"line":3067},[2928,33298,33299],{"class":2970},"        timeout",[2928,33301,2974],{"class":2953},[2928,33303,33304],{"class":3988}," 100\n",[2928,33306,33307],{"class":2930,"line":3077},[2928,33308,5989],{"class":2953},[2928,33310,33311],{"class":2930,"line":3110},[2928,33312,4866],{"class":2953},[2928,33314,33315],{"class":2930,"line":3116},[2928,33316,3113],{"class":2953},[2928,33318,33319,33321],{"class":2930,"line":6687},[2928,33320,2987],{"class":2953},[2928,33322,2990],{"class":2949},[4543,33324,33326],{"id":33325},"layer-improvements","🔢 Layer Improvements",[2896,33328,33329,33330,2892,33335,33340,33341,2892,33346,33351],{},"We now more carefully load layer plugins (",[2910,33331,33334],{"href":33332,"rel":33333},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F22889",[2914],"#22889",[2910,33336,33339],{"href":33337,"rel":33338},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F23148",[2914],"#23148",") and middleware (",[2910,33342,33345],{"href":33343,"rel":33344},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F22925",[2914],"#22925",[2910,33347,33350],{"href":33348,"rel":33349},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F23552",[2914],"#23552",") in the order of the layers, always loading your own plugins and middleware last. This should mean you can rely on utilities that layers may inject.",[2896,33353,33354,33355,21607,33360,33365,33366,33374],{},"And probably one of the most significant changes - if you are using remote layers we now clone these within your ",[2910,33356,33358],{"href":33357},"\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Fnode_modules",[2890,33359,14787],{},[2910,33361,33364],{"href":33362,"rel":33363},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fc12\u002Fpull\u002F109",[2914],"#109",") so layers can use dependencies with your project. See ",[2910,33367,33370,33373],{"href":33368,"rel":33369},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fc12\u002Freleases\u002Ftag\u002Fv1.5.1",[2914],[2890,33371,33372],{},"c12"," release notes"," for full details.",[4460,33376,33378],{"icon":33377},"i-lucide-check-circle",[2896,33379,33380],{},"We've also added a test suite to cover these layer resolution changes.",[4543,33382,33384],{"id":33383},"nightly-release-channel","😴 Nightly Release Channel",[2896,33386,33387,33388,33390,33391,33394],{},"Every commit to the ",[2890,33389,4577],{}," branch of Nuxt is automatically deployed to a new release, for easier testing before releases. We've renamed this from the 'edge release channel' to the 'nightly release channel' to avoid confusion with ",[10484,33392,33393],{},"edge deployments",". And probably also with Microsoft Edge (though I haven't heard that anyone was confused with that one!)",[4346,33396,33397,33406,33414,33422],{},[3844,33398,33399,33402,33403],{},[2890,33400,33401],{},"nuxt3"," is now ",[2890,33404,33405],{},"nuxt-nightly",[3844,33407,33408,33402,33411],{},[2890,33409,33410],{},"nuxi-edge",[2890,33412,33413],{},"nuxi-nightly",[3844,33415,33416,33402,33419],{},[2890,33417,33418],{},"@​nuxt\u002Fkit-edge",[2890,33420,33421],{},"@​nuxt\u002Fkit-nightly",[3844,33423,33424],{},"... and so on.",[3233,33426,33428],{"to":33427},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fnightly-release-channel#nightly-release-channel",[2896,33429,33430,33431,3088],{},"Read more about the ",[2900,33432,33433],{},"Nighly Release Channel",[4543,33435,33437],{"id":33436},"️-nitro-v27","⚗️ Nitro v2.7",[2896,33439,33440],{},"Nitro v2.7 has been released with lots of improvements and bug fixes.",[4460,33442,33443],{"icon":14},[2896,33444,33445,33446,33449,33450,33453,33454,33459],{},"🔥 One of the most significant is that we now save ",[2900,33447,33448],{},"40% of bundle size in production"," by using native ",[2890,33451,33452],{},"fetch"," supported in Node 18+ (",[2910,33455,33458],{"href":33456,"rel":33457},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fnitro\u002Fpull\u002F1724",[2914],"#1724","). So if possible, we'd recommend you update your Node version to at least 18.",[3233,33461,33463],{"to":33462,"icon":4477,"color":32430,"target":4478},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fnitro\u002Freleases\u002Ftag\u002Fv2.7.0",[2896,33464,33465],{},"Check out Nitro v2.7 release note.",[4543,33467,33469],{"id":33468},"type-import-changes","💪 Type Import Changes",[10634,33471,33472],{},[2896,33473,33474],{},"This is likely to need code changes in your project.",[2896,33476,33477,33478,3088],{},"Vue requires that type imports be explicit (so that the Vue compiler can correctly optimise and resolve type imports for props and so on). See ",[2910,33479,33482,33483],{"href":33480,"rel":33481},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Ftsconfig\u002Fblob\u002Fmain\u002Ftsconfig.json#L30-L33",[2914],"core Vue ",[2890,33484,242],{},[2896,33486,33487,33488,33491,33492,33495],{},"We've therefore taken the decision to turn on ",[2890,33489,33490],{},"verbatimModuleSyntax"," by default in Nuxt projects, which will throw a type error if types are imported without an explicit ",[2890,33493,33494],{},"type"," import. To resolve it you will need to update your imports:",[2918,33497,33499],{"className":5774,"code":33498,"language":5776,"meta":2924,"style":2924},"- import { someFunction, SomeOptions } from 'some-library'\n+ import { someFunction } from 'some-library'\n+ import type { SomeOptions } from 'some-library'\n",[2890,33500,33501,33508,33515],{"__ignoreMap":2924},[2928,33502,33503,33505],{"class":2930,"line":2931},[2928,33504,5783],{"class":2953},[2928,33506,33507],{"class":2970}," import { someFunction, SomeOptions } from 'some-library'\n",[2928,33509,33510,33512],{"class":2930,"line":2938},[2928,33511,5791],{"class":2953},[2928,33513,33514],{"class":3156}," import { someFunction } from 'some-library'\n",[2928,33516,33517,33519],{"class":2930,"line":2967},[2928,33518,5791],{"class":2953},[2928,33520,33521],{"class":3156}," import type { SomeOptions } from 'some-library'\n",[2896,33523,33524],{},"You may also encounter modules in the Nuxt ecosystem that need to be updated; please open an issue for those modules. I'm also very happy to help if you're encountering any problems with this, if you're a module author. Just tag me and I'll take a look.",[2896,33526,33527],{},"If for whatever reason you need to undo this change in your project you can set the following configuration:",[2918,33529,33531],{"className":2920,"code":33530,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  typescript: {\n    tsConfig: {\n      compilerOptions: {\n        verbatimModuleSyntax: false\n      }\n    }\n  }\n})\n",[2890,33532,33533,33545,33554,33563,33572,33581,33585,33589,33593],{"__ignoreMap":2924},[2928,33534,33535,33537,33539,33541,33543],{"class":2930,"line":2931},[2928,33536,2942],{"class":2941},[2928,33538,3871],{"class":2941},[2928,33540,3874],{"class":2957},[2928,33542,2961],{"class":2949},[2928,33544,2964],{"class":2953},[2928,33546,33547,33550,33552],{"class":2930,"line":2938},[2928,33548,33549],{"class":2970},"  typescript",[2928,33551,2974],{"class":2953},[2928,33553,3033],{"class":2953},[2928,33555,33556,33559,33561],{"class":2930,"line":2967},[2928,33557,33558],{"class":2970},"    tsConfig",[2928,33560,2974],{"class":2953},[2928,33562,3033],{"class":2953},[2928,33564,33565,33568,33570],{"class":2930,"line":2984},[2928,33566,33567],{"class":2970},"      compilerOptions",[2928,33569,2974],{"class":2953},[2928,33571,3033],{"class":2953},[2928,33573,33574,33577,33579],{"class":2930,"line":2993},[2928,33575,33576],{"class":2970},"        verbatimModuleSyntax",[2928,33578,2974],{"class":2953},[2928,33580,5979],{"class":2977},[2928,33582,33583],{"class":2930,"line":2999},[2928,33584,5989],{"class":2953},[2928,33586,33587],{"class":2930,"line":3005},[2928,33588,4866],{"class":2953},[2928,33590,33591],{"class":2930,"line":3036},[2928,33592,3113],{"class":2953},[2928,33594,33595,33597],{"class":2930,"line":3054},[2928,33596,2987],{"class":2953},[2928,33598,2990],{"class":2949},[2896,33600,33601],{},"However, we'd recommend only doing that temporarily, as Vue does need this option to be set for best results.",[2885,33603,6103],{"id":6102},[2896,33605,13730],{},[2918,33607,33608],{"className":4437,"code":31673,"language":4439,"meta":2924,"style":2924},[2890,33609,33610],{"__ignoreMap":2924},[2928,33611,33612,33614,33616],{"class":2930,"line":2931},[2928,33613,4446],{"class":3448},[2928,33615,8166],{"class":3156},[2928,33617,31684],{"class":3156},[2885,33619,21829],{"id":4472},[3233,33621,33623],{"to":33622,"icon":4477,"color":32430},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv3.8.0",[2896,33624,4481,33625,3088],{},[2890,33626,33627],{},"v3.8.0",[2896,33629,11288],{},[2896,33631,33632],{},[2900,33633,11293],{},[4489,33635,33636],{},"html pre.shiki code .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}html pre.shiki code .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sYRBq, html code.shiki .sYRBq{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}",{"title":2924,"searchDepth":2938,"depth":2938,"links":33638},[33639,33640,33641,33642,33643,33644,33645,33646,33647,33648,33649,33650,33651,33652],{"id":32403,"depth":2967,"text":32404},{"id":32439,"depth":2967,"text":32440},{"id":32451,"depth":2967,"text":32452},{"id":32502,"depth":2967,"text":32503},{"id":32574,"depth":2967,"text":32575},{"id":32767,"depth":2967,"text":32768},{"id":32890,"depth":2967,"text":32891},{"id":33017,"depth":2967,"text":33018},{"id":33325,"depth":2967,"text":33326},{"id":33383,"depth":2967,"text":33384},{"id":33436,"depth":2967,"text":33437},{"id":33468,"depth":2967,"text":33469},{"id":6102,"depth":2938,"text":6103},{"id":4472,"depth":2938,"text":21829},"2023-10-19","Nuxt 3.8 is out, bringing built-in DevTools, automatic Nuxt Image install, a new app manifest and much more.","\u002Fassets\u002Fblog\u002Fv3.8.png",{},{"title":32395,"description":33654},"blog\u002F17.v3-8","sRkqqxqvLaBplZhdzCdxQS0Ag32DugyTrOM9sLAkzU4",{"id":33661,"title":33662,"authors":33663,"body":33668,"category":24716,"date":34081,"description":34082,"draft":108,"extension":4520,"image":34083,"meta":34084,"navigation":108,"path":34085,"seo":34086,"stem":34087,"tags":6,"__hash__":34088},"blog\u002Fblog\u002F16.new-website.md","A New Website",[33664,33666],{"name":6222,"avatar":33665,"to":11332,"twitter":24560},{"src":11331},{"name":11325,"avatar":33667,"to":11328},{"src":11327},{"type":2882,"value":33669,"toc":34071},[33670,33677,33681,33691,33700,33713,33716,33758,33764,33768,33771,33784,33787,33800,33804,33829,33836,33844,33848,33866,33869,33883,33886,33899,33903,33921,33929,33944,33955,33973,33980,33984,33987,33994,34001,34008,34012,34019,34027,34030,34033,34053,34068],[2896,33671,33672,33673,33676],{},"Nuxt.com is the main entry point when you want to learn Nuxt. With ",[2900,33674,33675],{},"more than 300k visitors every month",", it was time to give it a new look and feel.",[2885,33678,33680],{"id":33679},"new-design","New Design",[2896,33682,33683,33684,33687,33688,2916],{},"We are back to the original colors of Nuxt, with a navy background (",[2890,33685,33686],{},"#020420",") and its signature shiny green (",[2890,33689,33690],{},"#00DC82",[33692,33693],"nuxt-img",{"alt":33694,"className":33695,"height":33697,"src":33698,"width":33699},"Nuxt Website Screenshot",[15174,19239,33696],"border-gray-700",497,"\u002Fassets\u002Fblog\u002Fwebsite\u002Fnuxt-website.png",832,[3233,33701,33703],{"to":33702,"icon":47},"\u002Fdesign-kit",[2896,33704,33705,33706,33709,33710,3088],{},"Discover the ",[2900,33707,33708],{},"Nuxt Design Kit"," as well as our ",[2900,33711,33712],{},"Logo History",[2896,33714,33715],{},"We wanted to achieve a consistent design across all our official documentations:",[11471,33717,33722,33736,33743,33751],{"className":33718},[33719,33720,33721],"grid","sm:grid-cols-2","gap-4",[33723,33724,33727],"nuxt-link",{"className":33725,"target":4478,"to":10093},[33726],"hover:border-transparent",[33692,33728],{"alt":33729,"className":33730,"height":33733,"src":33734,"width":33735},"Nuxt Image",[33731,19239,33732,33696],"m-0","rounded-md",255,"\u002Fassets\u002Fblog\u002Fwebsite\u002Fnuxt-image.png",408,[33723,33737,33739],{"className":33738,"target":4478,"to":8140},[33726],[33692,33740],{"alt":8142,"className":33741,"height":33733,"src":33742,"width":33735},[33731,19239,33732,33696],"\u002Fassets\u002Fblog\u002Fwebsite\u002Fnuxt-content.png",[33723,33744,33747],{"className":33745,"target":4478,"to":33746},[33726],"https:\u002F\u002Fdevtools.nuxt.com",[33692,33748],{"alt":26379,"className":33749,"height":33733,"src":33750,"width":33735},[33731,19239,33732,33696],"\u002Fassets\u002Fblog\u002Fwebsite\u002Fnuxt-devtools.png",[33723,33752,33754],{"className":33753,"target":4478,"to":11342},[33726],[33692,33755],{"alt":6336,"className":33756,"height":33733,"src":33757,"width":33735},[33731,19239,33732,33696],"\u002Fassets\u002Fblog\u002Fwebsite\u002Fnuxt-ui.png",[2896,33759,33760,33761],{},"We really love this new design and hope you do too. ",[2900,33762,33763],{},"This is only the first step toward many improvements coming to the website.",[2885,33765,33767],{"id":33766},"improved-navigation","Improved Navigation",[2896,33769,33770],{},"From now on, you can easily jump between the five main documentation categories:",[5478,33772,33775,33778,33781],{":controls":4902,"className":33773,"poster":33774},[5481,5482,5483],"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1697548111\u002Fnuxt3\u002Fnuxt-website-docs-nav.jpg",[5486,33776],{"src":33777,"type":5489},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1697548111\u002Fnuxt3\u002Fnuxt-website-docs-nav.webm",[5486,33779],{"src":33780,"type":5493},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1697548111\u002Fnuxt3\u002Fnuxt-website-docs-nav.mp4",[5486,33782],{"src":33783,"type":5497},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1697548111\u002Fnuxt3\u002Fnuxt-website-docs-nav.ogg",[2896,33785,33786],{},"On the right side, you can see the table of contents as well as community shortcuts: Edit this page, Chat on Discord, etc.",[5478,33788,33791,33794,33797],{":controls":4902,"className":33789,"poster":33790},[5481,5482,5483],"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1697549697\u002Fnuxt3\u002Fnuxt-website-docs-aside.jpg",[5486,33792],{"src":33793,"type":5489},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1697549697\u002Fnuxt3\u002Fnuxt-website-docs-aside.webm",[5486,33795],{"src":33796,"type":5493},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1697549697\u002Fnuxt3\u002Fnuxt-website-docs-aside.mp4",[5486,33798],{"src":33799,"type":5497},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1697549697\u002Fnuxt3\u002Fnuxt-website-docs-aside.ogg",[2885,33801,33803],{"id":33802},"source-code-buttons","Source Code Buttons",[2896,33805,33806,33807,4309,33810,4309,33813,4309,33816,2892,33820,33824,33825,33828],{},"When looking at Nuxt built-in ",[2910,33808,132],{"href":33809},"\u002Fdocs\u002Fapi\u002Fcomponents",[2910,33811,137],{"href":33812},"\u002Fdocs\u002Fapi\u002Fcomposables",[2910,33814,195],{"href":33815},"\u002Fdocs\u002Fapi\u002Futils",[2910,33817,33819],{"href":33818},"\u002Fdocs\u002Fapi\u002Fcommands","commands",[2910,33821,33823],{"href":33822},"\u002Fdocs\u002Fapi\u002Fkit","kit utilities",", you can now jump to the source code by clicking on the ",[8518,33826,33827],{"color":32430,"icon":4477,"size":9934},"Source"," button.",[33692,33830],{"alt":33831,"className":33832,"height":33833,"src":33834,"width":33835},"Nuxt Source Code Button",[19239,5481,33696],343,"\u002Fassets\u002Fblog\u002Fwebsite\u002Fnuxt-website-source-button.png",818,[3233,33837,33838],{"to":32897},[2896,33839,33840,33841,33843],{},"Checkout an example on ",[2890,33842,476],{}," documentation page.",[2885,33845,33847],{"id":33846},"improved-search-feature","Improved Search Feature",[2896,33849,33850,33851,10201,33854,33857,33858,33865],{},"You may notice a new modal when hitting ",[33852,33853],"kbd",{"value":5058},[33852,33855],{"value":33856},"K",". We leverage the Nuxt UI ",[2910,33859,33862],{"href":33860,"rel":33861},"https:\u002F\u002Fui.nuxt.com\u002Fcomponents\u002Fcommand-palette",[2914],[2890,33863,33864],{},"\u003CCommandPalette>"," components combined with Nuxt Content data (search & navigation) to provide a better search experience.",[2896,33867,33868],{},"With the command palette, you can:",[4346,33870,33871,33874,33877,33880],{},[3844,33872,33873],{},"Jump to a page",[3844,33875,33876],{},"Search in the documentation",[3844,33878,33879],{},"Search a module",[3844,33881,33882],{},"Switch the color mode",[2896,33884,33885],{},"We plan to add more commands soon.",[5478,33887,33890,33893,33896],{":controls":4902,"className":33888,"poster":33889},[5481,5482,5483],"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1697550571\u002Fnuxt3\u002Fnuxt-website-search.jpg",[5486,33891],{"src":33892,"type":5489},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1697550571\u002Fnuxt3\u002Fnuxt-website-search.webm",[5486,33894],{"src":33895,"type":5493},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1697550571\u002Fnuxt3\u002Fnuxt-website-search.mp4",[5486,33897],{"src":33898,"type":5497},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1697550571\u002Fnuxt3\u002Fnuxt-website-search.ogg",[2885,33900,33902],{"id":33901},"migration-to-nuxt-ui","Migration to Nuxt UI",[2896,33904,33905,33906,33909,33910,33915,33916,3088],{},"The new website is powered by ",[2910,33907,6336],{"href":11342,"rel":33908},[2914],", our UI library tailored made for Nuxt and built on top of ",[2910,33911,33914],{"href":33912,"rel":33913},"https:\u002F\u002Ftailwindcss.com",[2914],"Tailwind CSS"," & ",[2910,33917,33920],{"href":33918,"rel":33919},"https:\u002F\u002Fheadlessui.com\u002F",[2914],"Headless UI",[2896,33922,33923,33924,33928],{},"The website also uses ",[2910,33925,27017],{"href":33926,"rel":33927},"https:\u002F\u002Fui.nuxt.com\u002Fpro",[2914],", a set of premium components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.",[2896,33930,33931,33932,4309,33935,4309,33938,4309,33941,26827],{},"It includes components such as ",[2890,33933,33934],{},"\u003CUHeader>",[2890,33936,33937],{},"\u003CUFooter>",[2890,33939,33940],{},"\u003CULandingHero>",[2890,33942,33943],{},"\u003CULandingCard>",[3774,33945,33946],{},[2896,33947,33948,33949,33954],{},"We plan to launch the full documentation of Nuxt UI Pro at the end of October. If you cannot wait and want early access, you can already ",[2910,33950,33953],{"href":33951,"rel":33952},"https:\u002F\u002Fui.nuxt.com\u002Fpro\u002Fpurchase",[2914],"purchase a license"," now and get access to our private repository on GitHub.",[2896,33956,33957,33958,33962,33963,33967,33968,33972],{},"This ",[2910,33959,19029],{"href":33960,"rel":33961},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.com\u002Fpull\u002F1365",[2914]," was a great opportunity to improve Nuxt UI & UI Pro and fix some bugs, as well as a difference of ",[2928,33964,33966],{"className":33965},[18603],"+9,004"," \u002F ",[2928,33969,33971],{"className":33970},[18682],"-23,113"," lines of code changed.",[3233,33974,33976],{"to":11342,"icon":33975,"target":4478},"i-simple-icons-nuxtdotjs",[2896,33977,32568,33978,3088],{},[2900,33979,6336],{},[2885,33981,33983],{"id":33982},"open-graph-images","Open Graph Images",[2896,33985,33986],{},"We are big fans of having a custom image when we share a link on social media. That's why we have added OG images on all our documentation pages.",[2896,33988,33989,33990,2974],{},"Example of the ",[2910,33991,33993],{"href":33992},"\u002Fdocs\u002Fgetting-started\u002Finstallation","Installation page",[4183,33995],{"alt":33996,"className":33997,"height":33998,"src":33999,"width":34000},"Nuxt OG Image",[19239,5481,33696],630,"\u002F__og-image__\u002Fimage\u002Fdocs\u002Fgetting-started\u002Fintroduction\u002Fog.png",1200,[3233,34002,34004],{"to":34003,"target":4478},"https:\u002F\u002Fnuxtseo.com\u002Fog-image\u002Fgetting-started\u002Finstallation",[2896,34005,33705,34006,11015],{},[2900,34007,33996],{},[2885,34009,34011],{"id":34010},"available-on-github","Available on GitHub",[2896,34013,34014,34015,34018],{},"We are proud to announce that the website is ",[2900,34016,34017],{},"now open source"," and available on GitHub.",[3233,34020,34021],{"to":8542,"icon":4477,"target":4478,"color":32430},[2896,34022,34023,34024,17247],{},"Check out ",[2890,34025,34026],{},"nuxt\u002Fnuxt.com",[2885,34028,34029],{"id":16893},"What's next?",[2896,34031,34032],{},"This new website is the beginning of upcoming changes we are planing, some of them are:",[4346,34034,34035,34038,34041,34050],{},[3844,34036,34037],{},"Team & Contributors pages",[3844,34039,34040],{},"Integrations page to showcase all the possibilities with Nuxt: Hosting, CMS, Database, etc.",[3844,34042,34043,34044,34049],{},"Templates page (currently ",[2910,34045,34048],{"href":34046,"rel":34047},"https:\u002F\u002Fnuxt.new",[2914],"nuxt.new",") to list official and community starters",[3844,34051,34052],{},"And more...",[2896,34054,34055,3088],{},[2900,34056,34057,34058,4309,34061,4913,34065],{},"We are looking forward to your feedback on ",[2910,34059,27105],{"href":27103,"rel":34060},[2914],[2910,34062,26767],{"href":34063,"rel":34064},"https:\u002F\u002Fdiscord.com\u002Finvite\u002Fnuxt",[2914],[2910,34066,8544],{"href":8542,"rel":34067},[2914],[2896,34069,34070],{},"Thank you for reading this blog post, and happy Nuxting 🤟",{"title":2924,"searchDepth":2938,"depth":2938,"links":34072},[34073,34074,34075,34076,34077,34078,34079,34080],{"id":33679,"depth":2938,"text":33680},{"id":33766,"depth":2938,"text":33767},{"id":33802,"depth":2938,"text":33803},{"id":33846,"depth":2938,"text":33847},{"id":33901,"depth":2938,"text":33902},{"id":33982,"depth":2938,"text":33983},{"id":34010,"depth":2938,"text":34011},{"id":16893,"depth":2938,"text":34029},"2023-10-18","We are thrilled to release the new nuxt.com, powered by Nuxt UI and now open source.","\u002Fassets\u002Fblog\u002Fnew-website.png",{},"\u002Fblog\u002Fnew-website",{"title":33662,"description":34082},"blog\u002F16.new-website","JTv1XCXglGspa_8DojyqVkjJzv4LQLgTnXQL3XCIFVo",{"id":34090,"title":34091,"authors":34092,"body":34095,"category":4517,"date":34653,"description":34654,"draft":108,"extension":4520,"image":34655,"meta":34656,"navigation":108,"path":34657,"seo":34658,"stem":34659,"tags":6,"__hash__":34660},"blog\u002Fblog\u002F15.v3-7.md","Nuxt 3.7",[34093],{"name":2877,"avatar":34094,"to":2880},{"src":2879},{"type":2882,"value":34096,"toc":34639},[34097,34101,34117,34139,34145,34152,34172,34183,34187,34218,34238,34282,34290,34294,34322,34324,34449,34453,34456,34465,34469,34484,34492,34506,34510,34518,34528,34533,34575,34579,34582,34586,34592,34600,34602,34604,34618,34625,34629,34636],[4543,34098,34100],{"id":34099},"a-new-cli","🐣 A New CLI",[2896,34102,34103,34104,22627,34106,34111,34112,34116],{},"We've refactored ",[2890,34105,28360],{},[2910,34107,34110],{"href":34108,"rel":34109},"http:\u002F\u002Fgithub.com\u002Funjs\u002Fcitty",[2914],"unjs\u002Fcitty"," 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 ",[2910,34113,34115],{"href":32410,"rel":34114},[2914],"nuxt\u002Fcli"," and please feel free to contribute!",[4346,34118,34119,34127,34133],{},[3844,34120,34121],{},[2910,34122,34124],{"href":34123,"target":4478},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fcli\u002Fdiscussions\u002F3",[2900,34125,34126],{},"Project Goals",[3844,34128,34129],{},[2910,34130,34132],{"href":34131,"target":4478},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fcli\u002Fdiscussions\u002F4","Feedbacks and Ideas",[3844,34134,34135],{},[2910,34136,34138],{"href":34137,"target":4478},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fcli\u002Fdiscussions\u002F7","The journey of Nuxt CLI Generations",[2896,34140,34141,34142,34144],{},"Nuxi is now decoupled from the main ",[2890,34143,4326],{}," version - we plan to iterate and release nuxi more quickly in future so you can expect new things coming soon!",[4543,34146,34148,34149],{"id":34147},"️-native-web-streams-and-response","🕸️ Native Web Streams and ",[2890,34150,34151],{},"Response",[2896,34153,34154,34155,2892,34160,34165,34166,34168,34169,34171],{},"With improvements in ",[2910,34156,34159],{"href":34157,"rel":34158},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fh3",[2914],"unjs\u002Fh3",[2910,34161,34164],{"href":34162,"rel":34163},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fnitro",[2914],"unjs\u002Fnitro",", it's now possible to directly return a ",[2890,34167,34151],{}," object from server routes, meaning it's ",[10484,34170,27052],{}," possible to return and handle streams natively in Nuxt.",[2896,34173,34174,34175,2892,34179,32436],{},"👉 Check out the full detail in the ",[2910,34176,34159],{"href":34177,"rel":34178},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fh3\u002Freleases",[2914],[2910,34180,34164],{"href":34181,"rel":34182},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fnitro\u002Freleases",[2914],[4543,34184,34186],{"id":34185},"html-rendering-optimisations","🔥 HTML Rendering Optimisations",[2896,34188,34189,34190,34193,34194,3248,34196,34201,34202,34205,34206,4309,34209,4309,34212,4309,34214,34217],{},"This release comes with a couple of improvements in rendering HTML responses from the server. We now determine whether to preload\u002Fprefetch resources at build time (so you can customise this in the ",[2890,34191,34192],{},"build:manifest"," hook). We also now manage rendering the HTML for them directly in ",[2890,34195,19278],{},[2910,34197,34200],{"href":34198,"rel":34199},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F22179",[2914],"#22179","), which means you can configure the ",[10484,34203,34204],{},"order"," for ",[2890,34207,34208],{},"\u003Clink>",[2890,34210,34211],{},"\u003Cmeta>",[2890,34213,23324],{},[2890,34215,34216],{},"\u003Cstyle>",", and more. And - in our preliminary testing - it's even faster!",[2896,34219,34220,34221,34224,34225,3248,34230,34235,34236,2974],{},"It's possible to opt-in to upcoming head improvements with the ",[2890,34222,34223],{},"experimental.headNext"," flag. This currently includes a new ordering algorithm based on ",[2910,34226,34229],{"href":34227,"rel":34228},"https:\u002F\u002Fgithub.com\u002Frviscomi\u002Fcapo.js",[2914],"capo.js",[2910,34231,34234],{"href":34232,"rel":34233},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F22431",[2914],"#22431",") and allows enabling future optimisations as they are released in ",[2890,34237,19278],{},[2918,34239,34241],{"className":2920,"code":34240,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  experimental: {\n    headNext: true\n  }\n})\n",[2890,34242,34243,34255,34263,34272,34276],{"__ignoreMap":2924},[2928,34244,34245,34247,34249,34251,34253],{"class":2930,"line":2931},[2928,34246,2942],{"class":2941},[2928,34248,3871],{"class":2941},[2928,34250,3874],{"class":2957},[2928,34252,2961],{"class":2949},[2928,34254,2964],{"class":2953},[2928,34256,34257,34259,34261],{"class":2930,"line":2938},[2928,34258,3883],{"class":2970},[2928,34260,2974],{"class":2953},[2928,34262,3033],{"class":2953},[2928,34264,34265,34268,34270],{"class":2930,"line":2967},[2928,34266,34267],{"class":2970},"    headNext",[2928,34269,2974],{"class":2953},[2928,34271,8120],{"class":2977},[2928,34273,34274],{"class":2930,"line":2984},[2928,34275,3113],{"class":2953},[2928,34277,34278,34280],{"class":2930,"line":2993},[2928,34279,2987],{"class":2953},[2928,34281,2990],{"class":2949},[2896,34283,34284,34285,3088],{},"We'd love your thoughts - you can respond with any issues\u002Ffeedback in ",[2910,34286,34289],{"href":34287,"rel":34288},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fdiscussions\u002F22632",[2914],"this discussion",[4543,34291,34293],{"id":34292},"️-build-environment-shortcuts","🛠️ Build Environment Shortcuts",[2896,34295,34296,34297,2892,34300,34303,34304,34309,34310,34315,34316,2892,34318,34321],{},"In your Nuxt config you can now use ",[2890,34298,34299],{},"$client",[2890,34301,34302],{},"$server"," shortcuts to easily define configuration that is specific to just the Vite client\u002Fserver (",[2910,34305,34308],{"href":34306,"rel":34307},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F22302",[2914],"#22302",") or webpack client\u002Fserver (",[2910,34311,34314],{"href":34312,"rel":34313},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F22304",[2914],"#22304",") builds. This previously was only possible with the ",[2890,34317,31402],{},[2890,34319,34320],{},"webpack:config"," hooks.",[2896,34323,21883],{},[2918,34325,34327],{"className":2920,"code":34326,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  vite: {\n    $client: {\n      build: {\n        rollupOptions: {\n          output: {\n            chunkFileNames: '_nuxt\u002F[hash].js',\n            assetFileNames: '_nuxt\u002F[hash][extname]',\n            entryFileNames: '_nuxt\u002F[hash].js'\n          }\n        }\n      }\n    }\n  }\n})\n",[2890,34328,34329,34341,34349,34357,34365,34373,34381,34395,34411,34423,34427,34431,34435,34439,34443],{"__ignoreMap":2924},[2928,34330,34331,34333,34335,34337,34339],{"class":2930,"line":2931},[2928,34332,2942],{"class":2941},[2928,34334,3871],{"class":2941},[2928,34336,3874],{"class":2957},[2928,34338,2961],{"class":2949},[2928,34340,2964],{"class":2953},[2928,34342,34343,34345,34347],{"class":2930,"line":2938},[2928,34344,28213],{"class":2970},[2928,34346,2974],{"class":2953},[2928,34348,3033],{"class":2953},[2928,34350,34351,34353,34355],{"class":2930,"line":2967},[2928,34352,28222],{"class":2970},[2928,34354,2974],{"class":2953},[2928,34356,3033],{"class":2953},[2928,34358,34359,34361,34363],{"class":2930,"line":2984},[2928,34360,28231],{"class":2970},[2928,34362,2974],{"class":2953},[2928,34364,3033],{"class":2953},[2928,34366,34367,34369,34371],{"class":2930,"line":2993},[2928,34368,28240],{"class":2970},[2928,34370,2974],{"class":2953},[2928,34372,3033],{"class":2953},[2928,34374,34375,34377,34379],{"class":2930,"line":2999},[2928,34376,28249],{"class":2970},[2928,34378,2974],{"class":2953},[2928,34380,3033],{"class":2953},[2928,34382,34383,34385,34387,34389,34391,34393],{"class":2930,"line":3005},[2928,34384,28258],{"class":2970},[2928,34386,2974],{"class":2953},[2928,34388,3329],{"class":2953},[2928,34390,28182],{"class":3156},[2928,34392,3197],{"class":2953},[2928,34394,2981],{"class":2953},[2928,34396,34397,34400,34402,34404,34407,34409],{"class":2930,"line":3036},[2928,34398,34399],{"class":2970},"            assetFileNames",[2928,34401,2974],{"class":2953},[2928,34403,3329],{"class":2953},[2928,34405,34406],{"class":3156},"_nuxt\u002F[hash][extname]",[2928,34408,3197],{"class":2953},[2928,34410,2981],{"class":2953},[2928,34412,34413,34415,34417,34419,34421],{"class":2930,"line":3054},[2928,34414,28273],{"class":2970},[2928,34416,2974],{"class":2953},[2928,34418,3329],{"class":2953},[2928,34420,28182],{"class":3156},[2928,34422,5269],{"class":2953},[2928,34424,34425],{"class":2930,"line":3059},[2928,34426,20420],{"class":2953},[2928,34428,34429],{"class":2930,"line":3067},[2928,34430,5984],{"class":2953},[2928,34432,34433],{"class":2930,"line":3077},[2928,34434,5989],{"class":2953},[2928,34436,34437],{"class":2930,"line":3110},[2928,34438,4866],{"class":2953},[2928,34440,34441],{"class":2930,"line":3116},[2928,34442,3113],{"class":2953},[2928,34444,34445,34447],{"class":2930,"line":6687},[2928,34446,2987],{"class":2953},[2928,34448,2990],{"class":2949},[4543,34450,34452],{"id":34451},"️-vite-44","⚡️ Vite 4.4",[2896,34454,34455],{},"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!",[2896,34457,34458,34459,34464],{},"👉 Check out the ",[2910,34460,34463],{"href":34461,"rel":34462},"https:\u002F\u002Fgithub.com\u002Fvitejs\u002Fvite\u002Fblob\u002Fmain\u002Fpackages\u002Fvite\u002FCHANGELOG.md#440-2023-07-06",[2914],"Vite release notes"," for more.",[4543,34466,34468],{"id":34467},"typescript-updates","💪 TypeScript Updates",[2896,34470,34471,34472,34474,34475,34478,34479,2916],{},"We now use purely relative paths in the generated ",[2890,34473,242],{}," instead of setting a ",[2890,34476,34477],{},"baseUrl",". This means better support for dev environments like docker images where the absolute path may not match your IDE (",[2910,34480,34483],{"href":34481,"rel":34482},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F22410",[2914],"#22410",[2896,34485,34486,34487,2916],{},"We also set a couple of additional compiler flag defaults to match Vite\u002FTS recommendations (",[2910,34488,34491],{"href":34489,"rel":34490},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F22468",[2914],"#22468",[2896,34493,34494,34495,34497,34498,3248,34501,2916],{},"Plus, you should now get type hinted access to layouts in ",[2890,34496,730],{}," and also in ",[2890,34499,34500],{},"\u003CNuxtLayout name>",[2910,34502,34505],{"href":34503,"rel":34504},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F22362",[2914],"#22363",[4543,34507,34509],{"id":34508},"async-context-support","🦄 Async Context support",[2896,34511,34512,34513,2916],{},"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 (",[2910,34514,34517],{"href":34515,"rel":34516},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F20918",[2914],"#20918",[2896,34519,34520,34521,34524,34525,34527],{},"This enables using Nuxt composables on the server ",[10484,34522,34523],{},"without"," needing to ensure they are being called directly in a setup function. It also allows the same in Nitro, with a new ",[2890,34526,8080],{}," utility that is usable in server routes.",[2896,34529,34530,34531,2974],{},"To try it out, you can enable ",[2890,34532,32833],{},[2918,34534,34535],{"className":2920,"code":8088,"language":2923,"meta":2924,"style":2924},[2890,34536,34537,34549,34557,34565,34569],{"__ignoreMap":2924},[2928,34538,34539,34541,34543,34545,34547],{"class":2930,"line":2931},[2928,34540,2942],{"class":2941},[2928,34542,3871],{"class":2941},[2928,34544,3874],{"class":2957},[2928,34546,2961],{"class":2949},[2928,34548,2964],{"class":2953},[2928,34550,34551,34553,34555],{"class":2930,"line":2938},[2928,34552,3883],{"class":2970},[2928,34554,2974],{"class":2953},[2928,34556,3033],{"class":2953},[2928,34558,34559,34561,34563],{"class":2930,"line":2967},[2928,34560,8115],{"class":2970},[2928,34562,2974],{"class":2953},[2928,34564,8120],{"class":2977},[2928,34566,34567],{"class":2930,"line":2984},[2928,34568,3113],{"class":2953},[2928,34570,34571,34573],{"class":2930,"line":2993},[2928,34572,2987],{"class":2953},[2928,34574,2990],{"class":2949},[4543,34576,34578],{"id":34577},"watcher-updates","👓 Watcher Updates",[2896,34580,34581],{},"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.",[4543,34583,34585],{"id":34584},"️-nitro-26","⚗️ Nitro 2.6",[2896,34587,34588,34589,34591],{},"There lots more exciting features coming directly from Nitro 2.6, including smaller, lighter servers and new persistent data storage in a ",[2890,34590,18151],{}," directory.",[2896,34593,34594,34595,3088],{},"👉 Read more in ",[2910,34596,34599],{"href":34597,"rel":34598},"https:\u002F\u002Funjs.io\u002Fblog\u002F2023-08-25-nitro-2.6",[2914],"the full release article",[2885,34601,6103],{"id":6102},[2896,34603,13730],{},[2918,34605,34606],{"className":4437,"code":30982,"language":4439,"meta":2924,"style":2924},[2890,34607,34608],{"__ignoreMap":2924},[2928,34609,34610,34612,34614,34616],{"class":2930,"line":2931},[2928,34611,4446],{"class":3448},[2928,34613,8166],{"class":3156},[2928,34615,4452],{"class":3156},[2928,34617,20926],{"class":3156},[2896,34619,34620,34621,34624],{},"This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the ",[2910,34622,9723],{"href":29339,"rel":34623},[2914]," ecosystem.",[2885,34626,34628],{"id":34627},"full-changelog","📃 Full changelog",[2896,34630,34631,34632],{},"Read the full release notes on ",[2910,34633,34634],{"href":34634,"rel":34635},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv3.7.0",[2914],[4489,34637,34638],{},"html pre.shiki code .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}",{"title":2924,"searchDepth":2938,"depth":2938,"links":34640},[34641,34642,34644,34645,34646,34647,34648,34649,34650,34651,34652],{"id":34099,"depth":2967,"text":34100},{"id":34147,"depth":2967,"text":34643},"🕸️ Native Web Streams and Response",{"id":34185,"depth":2967,"text":34186},{"id":34292,"depth":2967,"text":34293},{"id":34451,"depth":2967,"text":34452},{"id":34467,"depth":2967,"text":34468},{"id":34508,"depth":2967,"text":34509},{"id":34577,"depth":2967,"text":34578},{"id":34584,"depth":2967,"text":34585},{"id":6102,"depth":2938,"text":6103},{"id":34627,"depth":2938,"text":34628},"2023-08-25","Nuxt 3.7 is out, bringing a new CLI, native web streams and response, rendering optimisations, async context support - and much more.","\u002Fassets\u002Fblog\u002Fv3.7.png",{},"\u002Fblog\u002Fv3-7",{"title":34091,"description":34654},"blog\u002F15.v3-7","I7N_sMcyFzVefsFzomBujWnH99EG_pfvLu2-8nAEs-A",{"id":34662,"title":2793,"authors":34663,"body":34666,"category":8580,"date":35102,"description":35103,"draft":108,"extension":4520,"image":35104,"meta":35105,"navigation":1196,"path":2794,"seo":35106,"stem":2795,"tags":6,"__hash__":35107},"blog\u002Fblog\u002F14.nuxt-on-the-edge.md",[34664],{"name":6222,"avatar":34665,"to":11332,"twitter":24560},{"src":11331},{"type":2882,"value":34667,"toc":35096},[34668,34671,34686,34689,34695,34704,34717,34721,34724,34738,34741,34744,34748,34754,34757,34783,34792,34797,34800,34837,34848,34852,34860,34870,34925,34928,35014,35026,35032,35061,35075,35077,35080,35093],[2885,34669,19],{"id":34670},"introduction",[2896,34672,34673,34674,34679,34680,34685],{},"In September 2017, Cloudflare ",[2910,34675,34678],{"href":34676,"rel":34677},"https:\u002F\u002Fblog.cloudflare.com\u002Fintroducing-cloudflare-workers\u002F",[2914],"introduced Cloudflare Workers",", giving the ability to run JavaScript on their ",[2910,34681,34684],{"href":34682,"rel":34683},"https:\u002F\u002Fwww.cloudflare.com\u002Fnetwork\u002F",[2914],"edge network",". This means your code will deploy on the entire edge network in over a hundred locations worldwide in about 30 seconds. This technology allows you to focus on writing your application close to your users, wherever they are in the world (~50ms latency).",[2896,34687,34688],{},"The worker's runtime is not the same as Node.js or the Browser, it executes the code using V8, the JavaScript engine developed by Google Chrome. Until now, what you could run on their platform were small scripts running on the edge before hitting your server to increase the performance or add some logic based on request headers, for example.",[2896,34690,34691,34692,3088],{},"In November 2020, while working on Nuxt 3, ",[2900,34693,34694],{},"we made the bet to run Nuxt in-production on edge runtimes \u002F V8 isolates",[2896,34696,34697,34698,34703],{},"It unlocks the ability to server-render pages in ~50ms from all over the world when using a platform like CloudFlare Workers, without having to deal with servers, load balancers and caching, for about ",[2910,34699,34702],{"href":34700,"rel":34701},"https:\u002F\u002Fdevelopers.cloudflare.com\u002Fworkers\u002Fplatform\u002Fpricing\u002F",[2914],"$0.3 per million requests",". As of today, new platforms are coming to let run apps on V8 isolates such as Deno Deploy.",[3774,34705,34706],{},[2896,34707,34708,34711,34712,34716],{},[2900,34709,34710],{},"2024 update:"," I released ",[2910,34713,27029],{"href":34714,"rel":34715},"https:\u002F\u002Fhub.nuxt.com",[2914]," to let you build full-stack applications with Nuxt on the edge, on your Cloudflare account with zero configuration. It includes a database, blob storage, KV, remote storage and more.",[2885,34718,34720],{"id":34719},"the-challenge","The Challenge",[2896,34722,34723],{},"In order to make Nuxt run in workers, we had to rewrite some parts of Nuxt to be environmentally agnostic (runs in Node.js, Browser or V8).",[2896,34725,34726,34727,34731,34732,34737],{},"We started with our server and created ",[2910,34728,34159],{"href":34729,"rel":34730},"http:\u002F\u002Fgithub.com\u002Funjs\u002Fh3",[2914],": a minimal http framework built for high performance and portability. It replaces ",[2910,34733,34736],{"href":34734,"rel":34735},"https:\u002F\u002Fgithub.com\u002Fsenchalabs\u002Fconnect",[2914],"Connect"," we used in Nuxt 2 but has compatibility with it so you can keep using Connect\u002FExpress middleware. In the workers, for each incoming request, it starts Nuxt in production, sends the request to it and sends back the response.",[2896,34739,34740],{},"In Nuxt 2, the duration to start the server in production in memory (also named cold start) was about ~300ms, because we had to load all the dependencies of your server and application in order to handle the request.",[2896,34742,34743],{},"By working on h3, we decided to code-split each handler attached to the server and lazy-load them only when requested. When you start Nuxt 3, we only load h3 in memory and the corresponding handlers. When a request comes in, we load the handler corresponding to the route and execute it.",[5478,34745],{":controls":4902,"poster":34746,"src":34747},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1689236511\u002Fnuxt3\u002Fnuxt3-server-performance.jpg","https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1689236511\u002Fnuxt3\u002Fnuxt3-server-performance.mp4",[2896,34749,34750,34751,3088],{},"By adopting this approach, ",[2900,34752,34753],{},"we reduced the cold start from ~300ms to ~2ms",[2896,34755,34756],{},"We had another challenge in order to run Nuxt on the edge: the production bundle size. This includes the server, Vue app and Node.js dependencies combined. Cloudflare workers currently have a limit of 1MB (free plan) and 5MB ($5 per month plan) for the worker size.",[2896,34758,34759,34760,34764,34765,34767,34768,2892,34771,34776,34777,34779,34780],{},"In order to achieve this, we created ",[2910,34761,34164],{"href":34762,"rel":34763},"https:\u002F\u002Fnitro.unjs.io\u002F",[2914],", our server engine, when running the ",[2890,34766,761],{}," command, it bundles your whole project and includes all dependencies into the final output. It uses ",[2910,34769,29306],{"href":29304,"rel":34770},[2914],[2910,34772,34775],{"href":34773,"rel":34774},"https:\u002F\u002Fgithub.com\u002Fvercel\u002Fnft",[2914],"vercel\u002Fnft"," to trace only the code used by the ",[2890,34778,166],{}," to remove unnecessary code. ",[2900,34781,34782],{},"The total size of the generated output for a basic Nuxt 3 application is about 700kB gzip.",[2896,34784,34785,34786,34791],{},"Lastly, to provide the same developer experience between development (Node.js) and production on Cloudflare (Edge runtime), we created ",[2910,34787,34790],{"href":34788,"rel":34789},"https:\u002F\u002Fgithub.com\u002Funjs\u002Funenv",[2914],"unjs\u002Funenv",": a library to convert JavaScript code to run everywhere (platform agnostic) by mocking or adding polyfills for known dependencies.",[2896,34793,34794],{},[2900,34795,34796],{},"At Nuxt, we believe that you should have the freedom to choose the hosting provider that fits you best.",[2896,34798,34799],{},"This is why you can deploy a Nuxt application with edge-side rendering on:",[4346,34801,34802,34807,34814,34821,34829],{},[3844,34803,34804],{},[2910,34805,27029],{"href":34714,"rel":34806},[2914],[3844,34808,34809],{},[2910,34810,34813],{"href":34811,"rel":34812},"https:\u002F\u002Fnitro.unjs.io\u002Fdeploy\u002Fproviders\u002Fcloudflare#cloudflare-pages",[2914],"Cloudflare Page",[3844,34815,34816],{},[2910,34817,34820],{"href":34818,"rel":34819},"https:\u002F\u002Fnitro.unjs.io\u002Fdeploy\u002Fproviders\u002Fdeno-deploy",[2914],"Deno Deploy",[3844,34822,34823,34828],{},[2910,34824,34827],{"href":34825,"rel":34826},"https:\u002F\u002Fnitro.unjs.io\u002Fdeploy\u002Fproviders\u002Fvercel#vercel-edge-functions",[2914],"Vercel Edge Functions"," (using CloudFlare Workers under the hood)",[3844,34830,34831,34836],{},[2910,34832,34835],{"href":34833,"rel":34834},"https:\u002F\u002Fnitro.unjs.io\u002Fdeploy\u002Fproviders\u002Fnetlify#netlify-edge-functions",[2914],"Netlify Edge Functions"," (using Deno under the hood)",[2896,34838,34839,34840,4913,34844,3088],{},"We also support many other deployment providers, including ",[2910,34841,34843],{"href":34842},"\u002Fdocs\u002Fgetting-started\u002Fdeployment#static-hosting","static hosting",[2910,34845,34847],{"href":34846},"\u002Fdocs\u002Fgetting-started\u002Fdeployment#nodejs-server","traditional Node.js serverless and server hosts",[2885,34849,34851],{"id":34850},"pushing-full-stack-capabilities","Pushing Full-stack Capabilities",[2896,34853,34854,34855,34859],{},"Now that we have Nuxt running on edge runtime, we can do more than render a Vue application. Thanks to the ",[2910,34856,34858],{"href":34857},"\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Fserver","server directory",", creating an API route is a TypeScript file away.",[2896,34861,34862,34863,34866,34867,24749],{},"To add the ",[2890,34864,34865],{},"\u002Fapi\u002Fhello"," route, create a ",[2890,34868,34869],{},"server\u002Fapi\u002Fhello.ts",[2918,34871,34873],{"className":2920,"code":34872,"filename":34869,"language":2923,"meta":2924,"style":2924},"export default defineEventHandler((event) => {\n  return {\n    hello: 'world'\n  }\n})\n",[2890,34874,34875,34895,34901,34915,34919],{"__ignoreMap":2924},[2928,34876,34877,34879,34881,34883,34885,34887,34889,34891,34893],{"class":2930,"line":2931},[2928,34878,2942],{"class":2941},[2928,34880,3871],{"class":2941},[2928,34882,9053],{"class":2957},[2928,34884,2961],{"class":2949},[2928,34886,2961],{"class":2953},[2928,34888,6724],{"class":3023},[2928,34890,3027],{"class":2953},[2928,34892,3030],{"class":2945},[2928,34894,3033],{"class":2953},[2928,34896,34897,34899],{"class":2930,"line":2938},[2928,34898,3062],{"class":2941},[2928,34900,3033],{"class":2953},[2928,34902,34903,34906,34908,34910,34913],{"class":2930,"line":2967},[2928,34904,34905],{"class":2970},"    hello",[2928,34907,2974],{"class":2953},[2928,34909,3329],{"class":2953},[2928,34911,34912],{"class":3156},"world",[2928,34914,5269],{"class":2953},[2928,34916,34917],{"class":2930,"line":2984},[2928,34918,3113],{"class":2953},[2928,34920,34921,34923],{"class":2930,"line":2993},[2928,34922,2987],{"class":2953},[2928,34924,2990],{"class":2949},[2896,34926,34927],{},"You can now universally call this API in your pages and components:",[2918,34929,34931],{"className":3129,"code":34930,"filename":21998,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup>\nconst { data } = await useFetch('\u002Fapi\u002Fhello')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cpre>{{ data }}\u003C\u002Fpre>\n\u003C\u002Ftemplate>\n",[2890,34932,34933,34943,34969,34977,34981,34989,35006],{"__ignoreMap":2924},[2928,34934,34935,34937,34939,34941],{"class":2930,"line":2931},[2928,34936,3139],{"class":2953},[2928,34938,3142],{"class":2970},[2928,34940,3145],{"class":2945},[2928,34942,3161],{"class":2953},[2928,34944,34945,34947,34949,34951,34953,34955,34957,34959,34961,34963,34965,34967],{"class":2930,"line":2938},[2928,34946,3171],{"class":2945},[2928,34948,3174],{"class":2953},[2928,34950,14114],{"class":2949},[2928,34952,2987],{"class":2953},[2928,34954,3045],{"class":2953},[2928,34956,3189],{"class":2941},[2928,34958,27770],{"class":2957},[2928,34960,2961],{"class":2949},[2928,34962,3197],{"class":2953},[2928,34964,34865],{"class":3156},[2928,34966,3197],{"class":2953},[2928,34968,2990],{"class":2949},[2928,34970,34971,34973,34975],{"class":2930,"line":2967},[2928,34972,3209],{"class":2953},[2928,34974,3142],{"class":2970},[2928,34976,3161],{"class":2953},[2928,34978,34979],{"class":2930,"line":2984},[2928,34980,2996],{"emptyLinePlaceholder":1196},[2928,34982,34983,34985,34987],{"class":2930,"line":2993},[2928,34984,3139],{"class":2953},[2928,34986,3521],{"class":2970},[2928,34988,3161],{"class":2953},[2928,34990,34991,34993,34995,34997,35000,35002,35004],{"class":2930,"line":2999},[2928,34992,3528],{"class":2953},[2928,34994,2918],{"class":2970},[2928,34996,9470],{"class":2953},[2928,34998,34999],{"class":2949},"{{ data }}",[2928,35001,3209],{"class":2953},[2928,35003,2918],{"class":2970},[2928,35005,3161],{"class":2953},[2928,35007,35008,35010,35012],{"class":2930,"line":3005},[2928,35009,3209],{"class":2953},[2928,35011,3521],{"class":2970},[2928,35013,3161],{"class":2953},[2896,35015,35016,35017,2892,35019,35022,35023,3088],{},"One important thing to note when we created ",[2910,35018,527],{"href":30067},[2910,35020,630],{"href":35021},"\u002Fdocs\u002Fapi\u002Futils\u002Fdollarfetch"," is that during server-side rendering, if you call your API routes, it will emulate the request and call the function code directly: ",[2900,35024,35025],{},"avoiding an HTTP request and reducing page’s rendering time",[2896,35027,35028,35029],{},"In terms of developer experience, you will notice that when creating server files, the Nuxt server keeps running without rebuilding the Vue app. ",[2900,35030,35031],{},"This is because Nuxt 3 supports Hot Module Replacement (HMR) when creating API and server routes.",[2896,35033,35034,35035,35040,35041,4309,35046,4309,35051,4309,35056,26827],{},"Furthermore, by leveraging Object Relational Mapping (ORM) like ",[2910,35036,35039],{"href":35037,"rel":35038},"https:\u002F\u002Form.drizzle.team\u002F",[2914],"drizzle-orm",", developers can connect Edge & Serverless databases such as ",[2910,35042,35045],{"href":35043,"rel":35044},"https:\u002F\u002Fdevelopers.cloudflare.com\u002Fd1\u002F",[2914],"D1",[2910,35047,35050],{"href":35048,"rel":35049},"https:\u002F\u002Fturso.tech\u002F",[2914],"Turso",[2910,35052,35055],{"href":35053,"rel":35054},"https:\u002F\u002Fneon.tech",[2914],"Neon",[2910,35057,35060],{"href":35058,"rel":35059},"https:\u002F\u002Fplanetscale.com\u002F",[2914],"Planetscale",[2896,35062,35063,35064,35069,35070,3088],{},"I created ",[2910,35065,35068],{"href":35066,"rel":35067},"https:\u002F\u002Ftodos.nuxt.dev\u002F",[2914],"Atidone",", an open source demo to showcase a full-stack application with authentication and a database running on the edge. The source code is available on GitHub under the MIT license at ",[2910,35071,35074],{"href":35072,"rel":35073},"https:\u002F\u002Fgithub.com\u002Fatinux\u002Fatidone",[2914],"atinux\u002Fatidone",[2885,35076,32339],{"id":32338},[2896,35078,35079],{},"We are excited about edge-side rendering and what it unlocks. Our team at Nuxt can’t wait to see what you will build on top of this!",[2896,35081,35082,35083,35087,35088,35092],{},"Feel free to join our ",[2910,35084,35086],{"href":34063,"rel":35085},[2914],"Discord server"," or mention ",[2910,35089,35091],{"href":27103,"rel":35090},[2914],"@nuxt_js"," on Twitter to share your work.",[4489,35094,35095],{},"html pre.shiki code .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}",{"title":2924,"searchDepth":2938,"depth":2938,"links":35097},[35098,35099,35100,35101],{"id":34670,"depth":2938,"text":19},{"id":34719,"depth":2938,"text":34720},{"id":34850,"depth":2938,"text":34851},{"id":32338,"depth":2938,"text":32339},"2023-07-13","Learn how we made Nuxt 3 capable of running on edge runtimes to run with server-side rendering close to your users.","\u002Fassets\u002Fblog\u002Fnuxt-on-the-edge.png",{},{"title":2793,"description":35103},"rw87CPYMyxqPPet-DcGbP-jcD-YTEhaaK_mm4U8sATQ",{"id":35109,"title":2789,"authors":35110,"body":35113,"category":4517,"date":35454,"description":35455,"draft":108,"extension":4520,"image":35456,"meta":35457,"navigation":1196,"path":2790,"seo":35458,"stem":2791,"tags":6,"__hash__":35459},"blog\u002Fblog\u002F13.v3-6.md",[35111],{"name":2877,"avatar":35112,"to":2880},{"src":2879},{"type":2882,"value":35114,"toc":35441},[35115,35125,35137,35144,35156,35166,35169,35178,35185,35188,35192,35200,35210,35214,35227,35231,35253,35257,35272,35279,35283,35300,35308,35320,35347,35355,35359,35368,35377,35381,35398,35411,35413,35415,35429,35431,35433,35439],[2885,35116,35118,35124],{"id":35117},"spa-loading-indicator",[4183,35119],{"style":35120,"src":35121,"width":11850,"height":11850,"alt":35122,"vAlign":35123},"display:inline","\u002Fassets\u002Fdesign-kit\u002Ficon-green.svg","SPA loading indicator","center","  SPA loading indicator",[2896,35126,35127,35128,35131,35132,3088],{},"If your site is served with ",[2890,35129,35130],{},"ssr: false"," or you have disabled server-rendering on some of your pages, you might be particularly interested in the new ",[2910,35133,35136],{"href":35134,"rel":35135},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F21640",[2914],"built-in SPA loading indicator",[2896,35138,35139,35140,35143],{},"You can now place an HTML file in ",[2890,35141,35142],{},"~\u002Fapp\u002Fspa-loading-template.html"," with some HTML you would like to use to render a loading screen that will be rendered until your app is hydrated on these pages.",[3774,35145,35146],{},[2896,35147,35148,35149,35152,35153,3088],{},"In Nuxt v4 (or with ",[2890,35150,35151],{},"compatibilityMode: 4","), this path is now ",[2890,35154,35155],{},"~\u002Fspa-loading-template.html",[2896,35157,16939,35158,35161,35162,35165],{},[2900,35159,35160],{},"By default an animated Nuxt icon is rendered",". You can completely disable this indicator by setting ",[2890,35163,35164],{},"spaLoadingTemplate: false"," in your nuxt configuration file.",[2885,35167,35168],{"id":14386},"⚡️ Performance improvements",[2896,35170,35171,35172,35177],{},"The first thing that happens when your app is hydrated is that your plugins run, and so we now perform ",[2910,35173,35176],{"href":35174,"rel":35175},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F21611",[2914],"build-time optimisations on your plugins",", meaning they do not need to be normalised or reordered at runtime.",[2896,35179,35180,35181,35184],{},"We also include your error component JS in your main entrypoint, meaning that if an error occurs when a user has no connectivity, you can still handle it with your ",[2890,35182,35183],{},"~\u002Ferror.vue",". (This also should decrease your total bundle size.)",[2896,35186,35187],{},"👉 Compared to Nuxt 3.5.3, the minimal client bundle has decreased by ~0.7kB. Let's keep this up!",[2885,35189,35191],{"id":35190},"fully-static-server-components","🔥 Fully static server components",[2896,35193,35194,35195,3088],{},"It has been possible to use server components on static pages, but until now they would increase the payload size of your application. That is no longer true. We now store ",[2910,35196,35199],{"href":35197,"rel":35198},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F21461",[2914],"rendered server components as separate files, which are preloaded before navigation",[2896,35201,16939,35202,35205,35206,35209],{},[2900,35203,35204],{},"This does rely on the new, richer JSON payload format",", so make sure you have not disabled this by setting ",[2890,35207,35208],{},"experimental.renderJsonPayloads"," to false.",[2885,35211,35213],{"id":35212},"better-style-inlining","🎨 Better style inlining",[2896,35215,35216,35217,35220,35221,35226],{},"If you're monitoring your metrics closely and have not turned off ",[2890,35218,35219],{},"experimental.inlineSSRStyles",", you should see more CSS inlined in your page, and a significantly external CSS file. We're now ",[2910,35222,35225],{"href":35223,"rel":35224},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F21573",[2914],"better at deduplicating global CSS",", particularly added by libraries like tailwind or unocss.",[2885,35228,35230],{"id":35229},"animation-controls","🎬 Animation controls",[2896,35232,35233,35234,2892,35243,35252],{},"To give you more fine-grained control over your page\u002Flayout components, for example to create custom transitions with GSAP or other libraries, we now allow you to set ",[2910,35235,35238,26762,35241],{"href":35236,"rel":35237},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19403",[2914],[2890,35239,35240],{},"pageRef",[2890,35242,468],{},[2910,35244,35247,26762,35250],{"href":35245,"rel":35246},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19465",[2914],[2890,35248,35249],{},"layoutRef",[2890,35251,472],{},". These will get passed through to the underlying DOM elements.",[2885,35254,35256],{"id":35255},"automatic-static-preset-detection","✨ Automatic 'static' preset detection",[2896,35258,35259,35260,35262,35263,35268,35269,35271],{},"Up to now, running ",[2890,35261,781],{}," produced the same output on every deployment provider, but with Nuxt 3.6 we now enable ",[2910,35264,35267],{"href":35265,"rel":35266},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F21655",[2914],"static provider presets"," automatically. That means if you are deploying a static build (produced with ",[2890,35270,781],{},") to a supported provider (currently vercel and netlify with cloudflare and github pages coming soon) we'll prerender your pages with special support for that provider.",[2896,35273,35274,35275,35278],{},"This means we can configure any route rules (redirects\u002Fheaders\u002Fetc) that do not require a server function. So you should get the best of both worlds when deploying a site that doesn't require runtime SSR. It also unblocks use of ",[2910,35276,33729],{"href":10100,"rel":35277},[2914]," on Vercel (with more potential for automatic provider integration coming soon).",[2885,35280,35282],{"id":35281},"increased-type-safety","💪 Increased type safety",[2896,35284,35285,35286,35289,35290,35293,35294,35296,35297,35299],{},"We now have better support for server-specific ",[2890,35287,35288],{},"#imports"," and augmentations if you are using the new ",[2890,35291,35292],{},"~\u002Fserver\u002Ftsconfig.json"," we shipped in Nuxt 3.5. So when importing from ",[2890,35295,35288],{}," in your server directory, you'll get IDE auto-completion for the right import locations in Nitro, and won't see Vue auto-imports like ",[2890,35298,527],{}," that are unavailable within your server routes.",[2896,35301,35302,35303,3088],{},"You should now also have ",[2910,35304,35307],{"href":35305,"rel":35306},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F21666",[2914],"type support for runtime Nitro hooks",[2896,35309,35310,35311,35319],{},"Finally, we have ",[2910,35312,35315,35316,12292],{"href":35313,"rel":35314},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F21700",[2914],"removed more locations where objects had a default ",[2890,35317,35318],{},"any",". This should improve type safety within Nuxt in a number of locations where unspecified types fell back to any:",[4346,35321,35322,35327,35332,35342],{},[3844,35323,35324],{},[2890,35325,35326],{},"RuntimeConfig",[3844,35328,35329],{},[2890,35330,35331],{},"PageMeta",[3844,35333,35334,35337,35338,35341],{},[2890,35335,35336],{},"NuxtApp['payload']"," (accessible now from ",[2890,35339,35340],{},"NuxtPayload"," interface)",[3844,35343,35344],{},[2890,35345,35346],{},"ModuleMeta",[2896,35348,35349,35350,35354],{},"You can find out more about how to ",[2910,35351,35353],{"href":35313,"rel":35352},[2914],"update your code"," if this affects you in the original PR.",[2885,35356,35358],{"id":35357},"️-nitro-25-built-in","⚗️ Nitro 2.5 built-in",[2896,35360,35361,35362,35367],{},"This release ships with new Nitro 2.5, which has a ",[2910,35363,35366],{"href":35364,"rel":35365},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fnitro\u002Freleases\u002Ftag\u002Fv2.5.0",[2914],"whole list of exciting improvements"," that are worth checking out.",[2896,35369,35370,35371,35376],{},"Of particular note is experimental support for streaming, which is also enabled by a ",[2910,35372,35375],{"href":35373,"rel":35374},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F21665",[2914],"couple of changes"," in Nuxt itself.",[2885,35378,35380],{"id":35379},"️-new-tools-for-module-authors","🛠️ New tools for module authors",[2896,35382,35383,35384,2892,35389,35394,35395,11015],{},"This release brings a number of utilities for modules authors to easily ",[2910,35385,35388],{"href":35386,"rel":35387},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F21331",[2914],"add type templates",[2910,35390,35393],{"href":35391,"rel":35392},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F21246",[2914],"assert compatibility"," with a given version of ",[10484,35396,35397],{},"another",[2896,35399,35400,35401,35404,35405,35410],{},"In addition, this release will finally unlock a new ",[2890,35402,35403],{},"nuxt\u002Fmodule-builder"," mode that should improve type support for module authors. If you're a module author, you might consider following ",[2910,35406,35409],{"href":35407,"rel":35408},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fstarter\u002Fpull\u002F392",[2914],"these migration steps"," to try it out in the coming days.",[2885,35412,6103],{"id":6102},[2896,35414,13730],{},[2918,35416,35417],{"className":4437,"code":30982,"language":4439,"meta":2924,"style":2924},[2890,35418,35419],{"__ignoreMap":2924},[2928,35420,35421,35423,35425,35427],{"class":2930,"line":2931},[2928,35422,4446],{"class":3448},[2928,35424,8166],{"class":3156},[2928,35426,4452],{"class":3156},[2928,35428,20926],{"class":3156},[2896,35430,20929],{},[2885,35432,34628],{"id":34627},[2896,35434,34631,35435],{},[2910,35436,35437],{"href":35437,"rel":35438},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv3.6.0",[2914],[4489,35440,15103],{},{"title":2924,"searchDepth":2938,"depth":2938,"links":35442},[35443,35444,35445,35446,35447,35448,35449,35450,35451,35452,35453],{"id":35117,"depth":2938,"text":35124},{"id":14386,"depth":2938,"text":35168},{"id":35190,"depth":2938,"text":35191},{"id":35212,"depth":2938,"text":35213},{"id":35229,"depth":2938,"text":35230},{"id":35255,"depth":2938,"text":35256},{"id":35281,"depth":2938,"text":35282},{"id":35357,"depth":2938,"text":35358},{"id":35379,"depth":2938,"text":35380},{"id":6102,"depth":2938,"text":6103},{"id":34627,"depth":2938,"text":34628},"2023-06-23","Nuxt 3.6 is out, bringing performance improvements, fully static server components, better style inlining, static presets, increased type safety - and much more.","\u002Fassets\u002Fblog\u002Fv3-6.png",{},{"title":2789,"description":35455},"IQCRpG31i60b44iprSJQBQpH9wfbAaoE0ahdwSUpG8Y",{"id":35461,"title":2785,"authors":35462,"body":35465,"category":4517,"date":36208,"description":36209,"draft":108,"extension":4520,"image":36210,"meta":36211,"navigation":1196,"path":2786,"seo":36212,"stem":2787,"tags":6,"__hash__":36213},"blog\u002Fblog\u002F12.v3-5.md",[35463],{"name":2877,"avatar":35464,"to":2880},{"src":2879},{"type":2882,"value":35466,"toc":36194},[35467,35471,35474,35492,35510,35520,35524,35527,35530,35558,35567,35571,35588,35607,35616,35625,35628,35727,35734,35738,35749,35757,35761,35766,35855,35862,35870,35874,35888,35903,35927,35932,35976,35979,35990,35997,36069,36087,36091,36108,36114,36144,36151,36155,36162,36164,36166,36180,36182,36184,36191],[2885,35468,35470],{"id":35469},"️-vue-33-released","⚡️ Vue 3.3 released",[2896,35472,35473],{},"Vue 3.3 has been released, with lots of exciting features, particularly around type support.",[4346,35475,35476,35483,35486,35489],{},[3844,35477,35478,35479,35482],{},"new ",[2890,35480,35481],{},"defineOptions"," macro",[3844,35484,35485],{},"'generic' components",[3844,35487,35488],{},"typed slots and using external types in defineProps",[3844,35490,35491],{},"... and more",[2896,35493,35494,35495,35500,35501,2892,35505,3088],{},"This also brings a significant improvement to data fetching when navigating between nested pages (",[2910,35496,35499],{"href":35497,"rel":35498},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F20777",[2914],"#20777","), thanks to ",[2910,35502,35504],{"href":20976,"rel":35503},[2914],"@antfu",[2910,35506,35509],{"href":35507,"rel":35508},"https:\u002F\u002Fgithub.com\u002Fbaiwusanyu-c",[2914],"@baiwusanyu-c",[2896,35511,35512,35513,26407],{},"Read ",[2900,35514,35515],{},[2910,35516,35519],{"href":35517,"rel":35518},"https:\u002F\u002Fblog.vuejs.org\u002Fposts\u002Fvue-3-3",[2914],"the full release announcement",[4543,35521,35523],{"id":35522},"nitropack-v24","🙌 Nitropack v2.4",[2896,35525,35526],{},"We've been working on lots of improvements to Nitro and these have landed already in Nitro v2.4 - you may already have this upgrade, which contains a lot of bug fixes, updates to the module worker format for Cloudflare, Vercel KV support and more.",[2896,35528,35529],{},"One note: if you're deploying to Vercel or Netlify and want to benefit from incremental static regeneration, you should now update your route rules:",[2918,35531,35533],{"className":5774,"code":35532,"language":5776,"meta":2924,"style":2924},"routeRules: {\n--  '\u002Fblog\u002F**': { swr: 3000 },\n++  '\u002Fblog\u002F**': { isr: 3000 },\n}\n",[2890,35534,35535,35540,35547,35554],{"__ignoreMap":2924},[2928,35536,35537],{"class":2930,"line":2931},[2928,35538,35539],{"class":2949},"routeRules: {\n",[2928,35541,35542,35544],{"class":2930,"line":2938},[2928,35543,5783],{"class":2953},[2928,35545,35546],{"class":2970},"-  '\u002Fblog\u002F**': { swr: 3000 },\n",[2928,35548,35549,35551],{"class":2930,"line":2967},[2928,35550,5791],{"class":2953},[2928,35552,35553],{"class":3156},"+  '\u002Fblog\u002F**': { isr: 3000 },\n",[2928,35555,35556],{"class":2930,"line":2984},[2928,35557,3764],{"class":2949},[2896,35559,35512,35560,3088],{},[2900,35561,35562],{},[2910,35563,35566],{"href":35564,"rel":35565},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fnitro\u002Freleases\u002Ftag\u002Fv2.4.0",[2914],"the full release notes",[4543,35568,35570],{"id":35569},"rich-json-payloads","💖 Rich JSON payloads",[2896,35572,35573,35576,35577,4309,35582,35587],{},[2900,35574,35575],{},"Rich JSON payload serialisation"," is now enabled by default (",[2910,35578,35581],{"href":35579,"rel":35580},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19205",[2914],"#19205",[2910,35583,35586],{"href":35584,"rel":35585},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F20770",[2914],"#20770","). This is both faster and allows serialising complex objects in the payload passed from the Nuxt server to client (and also when extracting payload data for prerendered sites).",[2896,35589,35590,35591,35594,35595,4309,35598,4309,35601,2892,35604,3088],{},"This now means that ",[2900,35592,35593],{},"various rich JS types are supported out-of-the-box",": regular expressions, dates, Map and Set and BigInt as well as NuxtError - and Vue-specific objects like ",[2890,35596,35597],{},"ref",[2890,35599,35600],{},"reactive",[2890,35602,35603],{},"shallowRef",[2890,35605,35606],{},"shallowReactive",[2896,35608,35609,35610,35615],{},"You can find ",[2910,35611,35614],{"href":35612,"rel":35613},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fblob\u002Fmain\u002Ftest\u002Ffixtures\u002Fbasic\u002Fpages\u002Fjson-payload.vue",[2914],"an example"," in our test suite.",[2896,35617,35618,35619,35624],{},"This is all possible due to ",[2910,35620,35623],{"href":35621,"rel":35622},"https:\u002F\u002Fgithub.com\u002FRich-Harris\u002Fdevalue\u002Fpull\u002F58",[2914],"Rich-Harris\u002Fdevalue#58",". For a long time, Nuxt has been using our own fork of devalue owing to issues serialising Errors and other non-POJO objects, but we now have transitioned back to the original.",[2896,35626,35627],{},"You can even register your own custom types with a new object-syntax Nuxt plugin:",[2918,35629,35632],{"className":2920,"code":35630,"filename":35631,"language":2923,"meta":2924,"style":2924},"export default definePayloadPlugin(() => {\n  definePayloadReducer('BlinkingText', data => data === '\u003Coriginal-blink>' && '_')\n  definePayloadReviver('BlinkingText', () => '\u003Crevivified-blink>')\n})\n","plugins\u002Fcustom-payload-type.ts",[2890,35633,35634,35651,35693,35721],{"__ignoreMap":2924},[2928,35635,35636,35638,35640,35643,35645,35647,35649],{"class":2930,"line":2931},[2928,35637,2942],{"class":2941},[2928,35639,3871],{"class":2941},[2928,35641,35642],{"class":2957}," definePayloadPlugin",[2928,35644,2961],{"class":2949},[2928,35646,3647],{"class":2953},[2928,35648,3030],{"class":2945},[2928,35650,3033],{"class":2953},[2928,35652,35653,35656,35658,35660,35663,35665,35667,35669,35671,35673,35675,35677,35680,35682,35684,35686,35689,35691],{"class":2930,"line":2938},[2928,35654,35655],{"class":2957},"  definePayloadReducer",[2928,35657,2961],{"class":2970},[2928,35659,3197],{"class":2953},[2928,35661,35662],{"class":3156},"BlinkingText",[2928,35664,3197],{"class":2953},[2928,35666,3617],{"class":2953},[2928,35668,3177],{"class":3023},[2928,35670,3030],{"class":2945},[2928,35672,3177],{"class":2949},[2928,35674,7687],{"class":2953},[2928,35676,3329],{"class":2953},[2928,35678,35679],{"class":3156},"\u003Coriginal-blink>",[2928,35681,3197],{"class":2953},[2928,35683,20815],{"class":2953},[2928,35685,3329],{"class":2953},[2928,35687,35688],{"class":3156},"_",[2928,35690,3197],{"class":2953},[2928,35692,2990],{"class":2970},[2928,35694,35695,35698,35700,35702,35704,35706,35708,35710,35712,35714,35717,35719],{"class":2930,"line":2967},[2928,35696,35697],{"class":2957},"  definePayloadReviver",[2928,35699,2961],{"class":2970},[2928,35701,3197],{"class":2953},[2928,35703,35662],{"class":3156},[2928,35705,3197],{"class":2953},[2928,35707,3617],{"class":2953},[2928,35709,4102],{"class":2953},[2928,35711,3030],{"class":2945},[2928,35713,3329],{"class":2953},[2928,35715,35716],{"class":3156},"\u003Crevivified-blink>",[2928,35718,3197],{"class":2953},[2928,35720,2990],{"class":2970},[2928,35722,35723,35725],{"class":2930,"line":2984},[2928,35724,2987],{"class":2953},[2928,35726,2990],{"class":2949},[2896,35728,35729,35730,3088],{},"You can read more about how this works ",[2910,35731,15608],{"href":35732,"rel":35733},"https:\u002F\u002Fgithub.com\u002Frich-harris\u002Fdevalue#custom-types",[2914],[2885,35735,35737],{"id":35736},"interactive-server-components","🛝 Interactive server components",[2896,35739,35740,35741,3248,35744,2916],{},"This feature should be considered highly experimental, but thanks to some great work from @huang-julien we now support interactive content within server components via ",[10484,35742,35743],{},"slots",[2910,35745,35748],{"href":35746,"rel":35747},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F20284",[2914],"#20284",[2896,35750,35751,35752,3088],{},"You can follow the server component roadmap at ",[2910,35753,35756],{"href":35754,"rel":35755},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fissues\u002F19772",[2914],"#19772",[2885,35758,35760],{"id":35759},"environment-config","⏰ Environment config",[2896,35762,35763,35764,2974],{},"You can now configure fully typed, per-environment overrides in your ",[2890,35765,233],{},[2918,35767,35769],{"className":2920,"code":35768,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  $production: {\n    routeRules: {\n      '\u002F**': { isr: true }\n    }\n  },\n  $development: {\n    \u002F\u002F\n  }\n})\n",[2890,35770,35771,35783,35792,35801,35823,35827,35831,35840,35845,35849],{"__ignoreMap":2924},[2928,35772,35773,35775,35777,35779,35781],{"class":2930,"line":2931},[2928,35774,2942],{"class":2941},[2928,35776,3871],{"class":2941},[2928,35778,3874],{"class":2957},[2928,35780,2961],{"class":2949},[2928,35782,2964],{"class":2953},[2928,35784,35785,35788,35790],{"class":2930,"line":2938},[2928,35786,35787],{"class":2970},"  $production",[2928,35789,2974],{"class":2953},[2928,35791,3033],{"class":2953},[2928,35793,35794,35797,35799],{"class":2930,"line":2967},[2928,35795,35796],{"class":2970},"    routeRules",[2928,35798,2974],{"class":2953},[2928,35800,3033],{"class":2953},[2928,35802,35803,35805,35808,35810,35812,35814,35817,35819,35821],{"class":2930,"line":2984},[2928,35804,26189],{"class":2953},[2928,35806,35807],{"class":2970},"\u002F**",[2928,35809,3197],{"class":2953},[2928,35811,2974],{"class":2953},[2928,35813,3174],{"class":2953},[2928,35815,35816],{"class":2970}," isr",[2928,35818,2974],{"class":2953},[2928,35820,3355],{"class":2977},[2928,35822,4739],{"class":2953},[2928,35824,35825],{"class":2930,"line":2993},[2928,35826,4866],{"class":2953},[2928,35828,35829],{"class":2930,"line":2999},[2928,35830,3383],{"class":2953},[2928,35832,35833,35836,35838],{"class":2930,"line":3005},[2928,35834,35835],{"class":2970},"  $development",[2928,35837,2974],{"class":2953},[2928,35839,3033],{"class":2953},[2928,35841,35842],{"class":2930,"line":3036},[2928,35843,35844],{"class":2934},"    \u002F\u002F\n",[2928,35846,35847],{"class":2930,"line":3054},[2928,35848,3113],{"class":2953},[2928,35850,35851,35853],{"class":2930,"line":3059},[2928,35852,2987],{"class":2953},[2928,35854,2990],{"class":2949},[2896,35856,35857,35858,35861],{},"If you're authoring layers, you can also use the ",[2890,35859,35860],{},"$meta"," key to provide metadata that you or the consumers of your layer might use.",[2896,35863,35864,35865,3088],{},"Read more ",[2910,35866,35869],{"href":35867,"rel":35868},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F20329",[2914],"about per-environment overrides",[2885,35871,35873],{"id":35872},"fully-typed-pages","💪 Fully typed pages",[2896,35875,35876,35877,35881,35882,35887],{},"You can benefit from fully typed routing within your Nuxt app via this experimental integration with ",[2910,35878,3257],{"href":35879,"rel":35880},"https:\u002F\u002Fgithub.com\u002Fposva\u002Funplugin-vue-router",[2914]," - thanks to some great work from ",[2910,35883,35886],{"href":35884,"rel":35885},"https:\u002F\u002Fgithub.com\u002Fposva",[2914],"@posva","!",[2896,35889,35890,35891,4309,35896,4309,35900,26827],{},"Out of the box, this will enable typed usage of ",[2910,35892,35894],{"href":35893},"\u002Fdocs\u002Fapi\u002Futils\u002Fnavigate-to",[2890,35895,686],{},[2910,35897,35898],{"href":32897},[2890,35899,476],{},[2890,35901,35902],{},"router.push()",[2896,35904,35905,35906,3088],{},"You can even get typed params within a page by using ",[2890,35907,35908,35910,35912,35914,35916,35918,35920,35923,35925],{"className":2920,"language":2923,"style":2924},[2928,35909,3171],{"class":2945},[2928,35911,27791],{"class":2949},[2928,35913,2954],{"class":2953},[2928,35915,22810],{"class":2957},[2928,35917,2961],{"class":2949},[2928,35919,3197],{"class":2953},[2928,35921,35922],{"class":3156},"route-name",[2928,35924,3197],{"class":2953},[2928,35926,3027],{"class":2949},[2896,35928,35929,35930,2974],{},"Enable this feature directly in your ",[2890,35931,233],{},[2918,35933,35935],{"className":2920,"code":35934,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  experimental: {\n    typedPages: true\n  }\n})\n",[2890,35936,35937,35949,35957,35966,35970],{"__ignoreMap":2924},[2928,35938,35939,35941,35943,35945,35947],{"class":2930,"line":2931},[2928,35940,2942],{"class":2941},[2928,35942,3871],{"class":2941},[2928,35944,3874],{"class":2957},[2928,35946,2961],{"class":2949},[2928,35948,2964],{"class":2953},[2928,35950,35951,35953,35955],{"class":2930,"line":2938},[2928,35952,3883],{"class":2970},[2928,35954,2974],{"class":2953},[2928,35956,3033],{"class":2953},[2928,35958,35959,35962,35964],{"class":2930,"line":2967},[2928,35960,35961],{"class":2970},"    typedPages",[2928,35963,2974],{"class":2953},[2928,35965,8120],{"class":2977},[2928,35967,35968],{"class":2930,"line":2984},[2928,35969,3113],{"class":2953},[2928,35971,35972,35974],{"class":2930,"line":2993},[2928,35973,2987],{"class":2953},[2928,35975,2990],{"class":2949},[2885,35977,35978],{"id":30896},"🔎 'Bundler' module resolution",[2896,35980,35981,35982,35984,35985,3088],{},"We now have full support within Nuxt for the ",[2890,35983,30908],{}," strategy of ",[2910,35986,35989],{"href":35987,"rel":35988},"https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Fhandbook\u002Fmodule-resolution.html",[2914],"module resolution",[2896,35991,35992,35993,35996],{},"We would recommend adopting this if possible. It has type support for subpath exports, for example, but more exactly matches the behaviour of build tools like Vite and Nuxt than ",[2890,35994,35995],{},"Node16"," resolution.",[2918,35998,36000],{"className":2920,"code":35999,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  typescript: {\n    tsConfig: {\n      compilerOptions: {\n        moduleResolution: 'bundler'\n      }\n    }\n  }\n})\n",[2890,36001,36002,36014,36022,36030,36038,36051,36055,36059,36063],{"__ignoreMap":2924},[2928,36003,36004,36006,36008,36010,36012],{"class":2930,"line":2931},[2928,36005,2942],{"class":2941},[2928,36007,3871],{"class":2941},[2928,36009,3874],{"class":2957},[2928,36011,2961],{"class":2949},[2928,36013,2964],{"class":2953},[2928,36015,36016,36018,36020],{"class":2930,"line":2938},[2928,36017,33549],{"class":2970},[2928,36019,2974],{"class":2953},[2928,36021,3033],{"class":2953},[2928,36023,36024,36026,36028],{"class":2930,"line":2967},[2928,36025,33558],{"class":2970},[2928,36027,2974],{"class":2953},[2928,36029,3033],{"class":2953},[2928,36031,36032,36034,36036],{"class":2930,"line":2984},[2928,36033,33567],{"class":2970},[2928,36035,2974],{"class":2953},[2928,36037,3033],{"class":2953},[2928,36039,36040,36043,36045,36047,36049],{"class":2930,"line":2993},[2928,36041,36042],{"class":2970},"        moduleResolution",[2928,36044,2974],{"class":2953},[2928,36046,3329],{"class":2953},[2928,36048,30908],{"class":3156},[2928,36050,5269],{"class":2953},[2928,36052,36053],{"class":2930,"line":2999},[2928,36054,5989],{"class":2953},[2928,36056,36057],{"class":2930,"line":3005},[2928,36058,4866],{"class":2953},[2928,36060,36061],{"class":2930,"line":3036},[2928,36062,3113],{"class":2953},[2928,36064,36065,36067],{"class":2930,"line":3054},[2928,36066,2987],{"class":2953},[2928,36068,2990],{"class":2949},[2896,36070,36071,36072,36075,36076,36079,36080,36083,36084,3088],{},"This turns on TypeScript's ability to 'follow' Node subpath exports. For example, if a library has a subpath export like ",[2890,36073,36074],{},"mylib\u002Fpath"," that is mapped to ",[2890,36077,36078],{},"mylib\u002Fdist\u002Fpath.mjs"," then the types for this can be pulled in from ",[2890,36081,36082],{},"mylib\u002Fdist\u002Fpath.d.ts"," rather than requiring the library author to create ",[2890,36085,36086],{},"mylib\u002Fpath.d.ts",[2885,36088,36090],{"id":36089},"️-separate-server-types","⚗️ Separate server types",[2896,36092,36093,36094,36096,36097,36102,36103,2916],{},"We plan to improve clarity within your IDE between the 'nitro' and 'vue' part of your app, we've shipped the first part of this via a separate generated ",[2890,36095,242],{}," for your ",[2910,36098,36099],{"href":34857},[2890,36100,36101],{},"~\u002Fserver"," directory (",[2910,36104,36107],{"href":36105,"rel":36106},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F20559",[2914],"#20559",[2896,36109,36110,36111,36113],{},"You can use by adding an additional ",[2890,36112,35292],{}," with the following content:",[2918,36115,36117],{"className":12434,"code":36116,"language":12436,"meta":2924,"style":2924},"{\n  \"extends\": \"..\u002F.nuxt\u002Ftsconfig.server.json\"\n}\n",[2890,36118,36119,36123,36140],{"__ignoreMap":2924},[2928,36120,36121],{"class":2930,"line":2931},[2928,36122,2964],{"class":2953},[2928,36124,36125,36127,36129,36131,36133,36135,36138],{"class":2930,"line":2938},[2928,36126,12447],{"class":2953},[2928,36128,25467],{"class":2945},[2928,36130,3153],{"class":2953},[2928,36132,2974],{"class":2953},[2928,36134,12471],{"class":2953},[2928,36136,36137],{"class":3156},"..\u002F.nuxt\u002Ftsconfig.server.json",[2928,36139,11613],{"class":2953},[2928,36141,36142],{"class":2930,"line":2967},[2928,36143,3764],{"class":2953},[2896,36145,36146,36147,36150],{},"Although right now these values won't be respected when type checking (",[2890,36148,36149],{},"nuxi typecheck","), you should get better type hints in your IDE.",[2885,36152,36154],{"id":36153},"deprecations","💀 Deprecations",[2896,36156,36157,36158,36161],{},"Although we have not typed or documented the ",[2890,36159,36160],{},"build.extend"," hook from Nuxt 2, we have been calling it within the webpack builder. We are now explicitly deprecating this and will remove it in a future minor version.",[2885,36163,6103],{"id":6102},[2896,36165,13730],{},[2918,36167,36168],{"className":4437,"code":30982,"language":4439,"meta":2924,"style":2924},[2890,36169,36170],{"__ignoreMap":2924},[2928,36171,36172,36174,36176,36178],{"class":2930,"line":2931},[2928,36173,4446],{"class":3448},[2928,36175,8166],{"class":3156},[2928,36177,4452],{"class":3156},[2928,36179,20926],{"class":3156},[2896,36181,20929],{},[2885,36183,34628],{"id":34627},[2896,36185,36186,36187],{},"Read the full release note on ",[2910,36188,36189],{"href":36189,"rel":36190},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv3.5.0",[2914],[4489,36192,36193],{},"html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}",{"title":2924,"searchDepth":2938,"depth":2938,"links":36195},[36196,36200,36201,36202,36203,36204,36205,36206,36207],{"id":35469,"depth":2938,"text":35470,"children":36197},[36198,36199],{"id":35522,"depth":2967,"text":35523},{"id":35569,"depth":2967,"text":35570},{"id":35736,"depth":2938,"text":35737},{"id":35759,"depth":2938,"text":35760},{"id":35872,"depth":2938,"text":35873},{"id":30896,"depth":2938,"text":35978},{"id":36089,"depth":2938,"text":36090},{"id":36153,"depth":2938,"text":36154},{"id":6102,"depth":2938,"text":6103},{"id":34627,"depth":2938,"text":34628},"2023-05-16","Nuxt 3.5.0 is out, bringing Vue 3.3, new defaults, interactive server components, typed pages, environment config - and much more.","\u002Fassets\u002Fblog\u002Fv3-5.png",{},{"title":2785,"description":36209},"gZ8mR95uFP2v6aYGU4f7Dcq9aYDFkadFasjZLXA6Ab0",{"id":36215,"title":2781,"authors":36216,"body":36219,"category":4517,"date":36923,"description":36924,"draft":108,"extension":4520,"image":36925,"meta":36926,"navigation":1196,"path":2782,"seo":36927,"stem":2783,"tags":6,"__hash__":36928},"blog\u002Fblog\u002F11.v3-4.md",[36217],{"name":2877,"avatar":36218,"to":2880},{"src":2879},{"type":2882,"value":36220,"toc":36912},[36221,36225,36228,36241,36252,36260,36303,36307,36317,36361,36374,36379,36384,36386,36476,36481,36502,36509,36520,36524,36530,36663,36666,36670,36679,36710,36713,36722,36726,36748,36757,36761,36791,36795,36808,36812,36815,36889,36891,36893,36907,36909],[2885,36222,36224],{"id":36223},"view-transitions-api-support","🪄 View Transitions API Support",[31896,36226],{"cloudinary":36227},"v1681229056\u002Fnuxt3\u002Fnuxt-view-transitions_cruvma",[2896,36229,36230,36231,36235,36236,3088],{},"You can check a demo on ",[2910,36232,36233],{"href":36233,"rel":36234},"https:\u002F\u002Fnuxt-view-transitions.surge.sh",[2914]," and the ",[2910,36237,36240],{"href":36238,"rel":36239},"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fnuxt-view-transitions",[2914],"source on StackBlitz",[2896,36242,36243,36244,36251],{},"You may have noticed that Chromium-based browsers now ship a new web platform API: the ",[2910,36245,36248],{"href":36246,"rel":36247},"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fweb-platform\u002Fview-transitions\u002F",[2914],[2900,36249,36250],{},"View Transitions API",". This is an exciting new ability for native browser transitions which (among other things) have the ability to transition between unrelated elements on different pages.",[2896,36253,36254,36255,3088],{},"Nuxt now ships with an experimental implementation, which will be under active development during the v3.4 release cycle. See the known issues in the ",[2910,36256,36259],{"href":36257,"rel":36258},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F20092",[2914],"linked PR",[2918,36261,36263],{"className":2920,"code":36262,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  experimental: {\n    viewTransition: true\n  }\n})\n",[2890,36264,36265,36277,36285,36293,36297],{"__ignoreMap":2924},[2928,36266,36267,36269,36271,36273,36275],{"class":2930,"line":2931},[2928,36268,2942],{"class":2941},[2928,36270,3871],{"class":2941},[2928,36272,3874],{"class":2957},[2928,36274,2961],{"class":2949},[2928,36276,2964],{"class":2953},[2928,36278,36279,36281,36283],{"class":2930,"line":2938},[2928,36280,3883],{"class":2970},[2928,36282,2974],{"class":2953},[2928,36284,3033],{"class":2953},[2928,36286,36287,36289,36291],{"class":2930,"line":2967},[2928,36288,30711],{"class":2970},[2928,36290,2974],{"class":2953},[2928,36292,8120],{"class":2977},[2928,36294,36295],{"class":2930,"line":2984},[2928,36296,3113],{"class":2953},[2928,36298,36299,36301],{"class":2930,"line":2993},[2928,36300,2987],{"class":2953},[2928,36302,2990],{"class":2949},[2885,36304,36306],{"id":36305},"payload-enhancements","✨ Payload Enhancements",[2896,36308,36309,36310,36316],{},"We've merged a ",[2900,36311,36312],{},[2910,36313,36315],{"href":35579,"rel":36314},[2914],"significant change to how Nuxt handles payloads"," (under an experimental flag). Payloads are used to send data from the server to the client when doing server-side rendering and avoid double data-fetching during the hydration phase.",[2918,36318,36320],{"className":2920,"code":36319,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  experimental: {\n    renderJsonPayloads: true\n  }\n})\n",[2890,36321,36322,36334,36342,36351,36355],{"__ignoreMap":2924},[2928,36323,36324,36326,36328,36330,36332],{"class":2930,"line":2931},[2928,36325,2942],{"class":2941},[2928,36327,3871],{"class":2941},[2928,36329,3874],{"class":2957},[2928,36331,2961],{"class":2949},[2928,36333,2964],{"class":2953},[2928,36335,36336,36338,36340],{"class":2930,"line":2938},[2928,36337,3883],{"class":2970},[2928,36339,2974],{"class":2953},[2928,36341,3033],{"class":2953},[2928,36343,36344,36347,36349],{"class":2930,"line":2967},[2928,36345,36346],{"class":2970},"    renderJsonPayloads",[2928,36348,2974],{"class":2953},[2928,36350,8120],{"class":2977},[2928,36352,36353],{"class":2930,"line":2984},[2928,36354,3113],{"class":2953},[2928,36356,36357,36359],{"class":2930,"line":2993},[2928,36358,2987],{"class":2953},[2928,36360,2990],{"class":2949},[2896,36362,36363,36364,35594,36366,4309,36368,4309,36370,2892,36372,3088],{},"With this new option enabled, this now means that ",[2900,36365,35593],{},[2890,36367,35597],{},[2890,36369,35600],{},[2890,36371,35603],{},[2890,36373,35606],{},[2896,36375,35609,36376,35615],{},[2910,36377,35614],{"href":35612,"rel":36378},[2914],[2896,36380,35618,36381,35624],{},[2910,36382,35623],{"href":35621,"rel":36383},[2914],[2896,36385,35627],{},[2918,36387,36388],{"className":2920,"code":35630,"filename":35631,"language":2923,"meta":2924,"style":2924},[2890,36389,36390,36406,36444,36470],{"__ignoreMap":2924},[2928,36391,36392,36394,36396,36398,36400,36402,36404],{"class":2930,"line":2931},[2928,36393,2942],{"class":2941},[2928,36395,3871],{"class":2941},[2928,36397,35642],{"class":2957},[2928,36399,2961],{"class":2949},[2928,36401,3647],{"class":2953},[2928,36403,3030],{"class":2945},[2928,36405,3033],{"class":2953},[2928,36407,36408,36410,36412,36414,36416,36418,36420,36422,36424,36426,36428,36430,36432,36434,36436,36438,36440,36442],{"class":2930,"line":2938},[2928,36409,35655],{"class":2957},[2928,36411,2961],{"class":2970},[2928,36413,3197],{"class":2953},[2928,36415,35662],{"class":3156},[2928,36417,3197],{"class":2953},[2928,36419,3617],{"class":2953},[2928,36421,3177],{"class":3023},[2928,36423,3030],{"class":2945},[2928,36425,3177],{"class":2949},[2928,36427,7687],{"class":2953},[2928,36429,3329],{"class":2953},[2928,36431,35679],{"class":3156},[2928,36433,3197],{"class":2953},[2928,36435,20815],{"class":2953},[2928,36437,3329],{"class":2953},[2928,36439,35688],{"class":3156},[2928,36441,3197],{"class":2953},[2928,36443,2990],{"class":2970},[2928,36445,36446,36448,36450,36452,36454,36456,36458,36460,36462,36464,36466,36468],{"class":2930,"line":2967},[2928,36447,35697],{"class":2957},[2928,36449,2961],{"class":2970},[2928,36451,3197],{"class":2953},[2928,36453,35662],{"class":3156},[2928,36455,3197],{"class":2953},[2928,36457,3617],{"class":2953},[2928,36459,4102],{"class":2953},[2928,36461,3030],{"class":2945},[2928,36463,3329],{"class":2953},[2928,36465,35716],{"class":3156},[2928,36467,3197],{"class":2953},[2928,36469,2990],{"class":2970},[2928,36471,36472,36474],{"class":2930,"line":2984},[2928,36473,2987],{"class":2953},[2928,36475,2990],{"class":2949},[2896,36477,35729,36478,3088],{},[2910,36479,15608],{"href":35732,"rel":36480},[2914],[2896,36482,36483,36486,36487,36489,36490,36492,36493,36496,36497,4913,36499,36501],{},[2900,36484,36485],{},"Note",": this only affects payloads of the Nuxt app, that is, data stored within ",[2890,36488,619],{},", returned from ",[2890,36491,515],{}," or manually injected via ",[2890,36494,36495],{},"nuxtApp.payload",". It does not affect data fetched from Nitro server routes via ",[2890,36498,630],{},[2890,36500,527],{}," although this is one area I am keen to explore further.",[2896,36503,36504,36505,36508],{},"Preliminary testing shows a significant speed-up: ",[2900,36506,36507],{},"25% faster in total server response time"," for a very minimal app with a large JSON payload, but I'd urge you to run your own tests and share the results with us.",[2896,36510,36511,36512,36515,36516,36519],{},"As mentioned, we're merging this behind a flag so we can test this broadly and gather feedback on the new approach. The most significant potential change is that the payload is now no longer available on ",[2890,36513,36514],{},"window.__NUXT__"," immediately. Instead, we now need to initialise the Nuxt app to parse the payload so any code that accesses ",[2890,36517,36518],{},"__NUXT__"," will need to be run in a plugin or later in the Nuxt app lifecycle. Please feel free to raise an issue if you foresee or encounter issues in your projects.",[2885,36521,36523],{"id":36522},"object-syntax-nuxt-plugins","🎁 Object-syntax Nuxt plugins",[2896,36525,36526,36527,36529],{},"We now support object-syntax Nuxt plugins for better control over plugin ",[10484,36528,34204],{}," and easier registration of hooks.",[2918,36531,36534],{"className":2920,"code":36532,"filename":36533,"language":2923,"meta":2924,"style":2924},"export default defineNuxtPlugin({\n  name: 'my-plugin',\n  enforce: 'pre', \u002F\u002F or 'post'\n  async setup (nuxtApp) {\n    \u002F\u002F this is the equivalent of a normal functional plugin\n  },\n  hooks: {\n    \u002F\u002F You can directly register Nuxt app hooks here\n    'app:created'() {\n      const nuxtApp = useNuxtApp()\n      \u002F\u002F\n    }\n  }\n})\n","plugins\u002Fmy-plugin.ts",[2890,36535,36536,36548,36563,36581,36596,36601,36605,36613,36618,36631,36644,36649,36653,36657],{"__ignoreMap":2924},[2928,36537,36538,36540,36542,36544,36546],{"class":2930,"line":2931},[2928,36539,2942],{"class":2941},[2928,36541,3871],{"class":2941},[2928,36543,30570],{"class":2957},[2928,36545,2961],{"class":2949},[2928,36547,2964],{"class":2953},[2928,36549,36550,36552,36554,36556,36559,36561],{"class":2930,"line":2938},[2928,36551,6994],{"class":2970},[2928,36553,2974],{"class":2953},[2928,36555,3329],{"class":2953},[2928,36557,36558],{"class":3156},"my-plugin",[2928,36560,3197],{"class":2953},[2928,36562,2981],{"class":2953},[2928,36564,36565,36568,36570,36572,36574,36576,36578],{"class":2930,"line":2967},[2928,36566,36567],{"class":2970},"  enforce",[2928,36569,2974],{"class":2953},[2928,36571,3329],{"class":2953},[2928,36573,2918],{"class":3156},[2928,36575,3197],{"class":2953},[2928,36577,3617],{"class":2953},[2928,36579,36580],{"class":2934}," \u002F\u002F or 'post'\n",[2928,36582,36583,36585,36587,36589,36592,36594],{"class":2930,"line":2984},[2928,36584,5533],{"class":2945},[2928,36586,3145],{"class":2970},[2928,36588,3248],{"class":2953},[2928,36590,36591],{"class":3023},"nuxtApp",[2928,36593,3027],{"class":2953},[2928,36595,3033],{"class":2953},[2928,36597,36598],{"class":2930,"line":2993},[2928,36599,36600],{"class":2934},"    \u002F\u002F this is the equivalent of a normal functional plugin\n",[2928,36602,36603],{"class":2930,"line":2999},[2928,36604,3383],{"class":2953},[2928,36606,36607,36609,36611],{"class":2930,"line":3005},[2928,36608,31391],{"class":2970},[2928,36610,2974],{"class":2953},[2928,36612,3033],{"class":2953},[2928,36614,36615],{"class":2930,"line":3036},[2928,36616,36617],{"class":2934},"    \u002F\u002F You can directly register Nuxt app hooks here\n",[2928,36619,36620,36622,36625,36627,36629],{"class":2930,"line":3054},[2928,36621,4662],{"class":2953},[2928,36623,36624],{"class":3156},"app:created",[2928,36626,3197],{"class":2953},[2928,36628,3647],{"class":2953},[2928,36630,3033],{"class":2953},[2928,36632,36633,36636,36638,36640,36642],{"class":2930,"line":3059},[2928,36634,36635],{"class":2945},"      const",[2928,36637,33142],{"class":2949},[2928,36639,3045],{"class":2953},[2928,36641,33088],{"class":2957},[2928,36643,3051],{"class":2970},[2928,36645,36646],{"class":2930,"line":3067},[2928,36647,36648],{"class":2934},"      \u002F\u002F\n",[2928,36650,36651],{"class":2930,"line":3077},[2928,36652,4866],{"class":2953},[2928,36654,36655],{"class":2930,"line":3110},[2928,36656,3113],{"class":2953},[2928,36658,36659,36661],{"class":2930,"line":3116},[2928,36660,2987],{"class":2953},[2928,36662,2990],{"class":2949},[2896,36664,36665],{},"In future we plan to enable build optimizations based on the metadata you pass in your Nuxt plugins.",[2885,36667,36669],{"id":36668},"️-easier-devtools-configuration","🛠️ Easier Devtools Configuration",[2896,36671,36672,36673,14018,36676,36678],{},"It's even easier to enable Nuxt DevTools in your project: just set ",[2890,36674,36675],{},"devtools: true",[2890,36677,233],{}," file to enable devtools.",[2918,36680,36682],{"className":2920,"code":36681,"filename":233,"language":2923,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  devtools: true\n})\n",[2890,36683,36684,36696,36704],{"__ignoreMap":2924},[2928,36685,36686,36688,36690,36692,36694],{"class":2930,"line":2931},[2928,36687,2942],{"class":2941},[2928,36689,3871],{"class":2941},[2928,36691,3874],{"class":2957},[2928,36693,2961],{"class":2949},[2928,36695,2964],{"class":2953},[2928,36697,36698,36700,36702],{"class":2930,"line":2938},[2928,36699,31781],{"class":2970},[2928,36701,2974],{"class":2953},[2928,36703,8120],{"class":2977},[2928,36705,36706,36708],{"class":2930,"line":2967},[2928,36707,2987],{"class":2953},[2928,36709,2990],{"class":2949},[2896,36711,36712],{},"If it's not already installed, Nuxt will prompt to install it locally. This means you no longer need to have Nuxt DevTools enabled globally.",[2896,36714,36715,36717,36718,36721],{},[2900,36716,36485],{},": the DevTools is still experimental and under active development, so do be prepared for occasional unexpected behaviour, and please report issues directly to ",[2910,36719,26377],{"href":26377,"rel":36720},[2914]," 🙏",[2885,36723,36725],{"id":36724},"layers-improvements","📚 Layers Improvements",[2896,36727,36728,36729,36747],{},"We now support ",[2910,36730,36733,36734,3288,36737,3288,36740,3288,36743,36746],{"href":36731,"rel":36732},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19986",[2914],"transforming ",[2890,36735,36736],{},"~",[2890,36738,36739],{},"~~",[2890,36741,36742],{},"@",[2890,36744,36745],{},"@@"," aliases within layers",", meaning you now no longer need to use relative paths when importing within layers.",[2896,36749,36750,36751,36756],{},"This should mean it is much easier to use a 'normal' Nuxt project as a ",[2910,36752,36755],{"href":36753,"rel":36754},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fgetting-started\u002Flayers#layers",[2914],"layer"," without needing to specially write it as one.",[2885,36758,36760],{"id":36759},"better-context-transforms","🧸 Better Context Transforms",[2896,36762,36763,36764,2903,36769,2892,36771,36773,36774,36776,36777,2892,36779,36782,36783,2892,36785,19526,36788,36790],{},"We ",[2910,36765,36768],{"href":36766,"rel":36767},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F20182",[2914],"now transform certain keys",[2890,36770,678],{},[2890,36772,666],{}," which means you should have fewer issues with a missing Nuxt instance. This includes support accessing the Nuxt instance after an ",[2890,36775,16363],{}," within ",[2890,36778,30041],{},[2890,36780,36781],{},"setup"," functions for those still using the Options API. And you no longer need to wrap ",[2890,36784,157],{},[2890,36786,36787],{},"validate",[2890,36789,674],{}," when using async functions.",[2885,36792,36794],{"id":36793},"️-ecosystem-updates","♻️ Ecosystem Updates",[2896,36796,36797,36798,2892,36803,36807],{},"As usual, this release will pull in upstream improvements, including the new ",[2910,36799,36802],{"href":36800,"rel":36801},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fconsola",[2914],"Consola v3",[2910,36804,36806],{"href":34162,"rel":36805},[2914],"Nitropack v2.3.3"," (a new minor is expected shortly).",[2885,36809,36811],{"id":36810},"breaking-fixes","🚨 'Breaking fixes'",[2896,36813,36814],{},"We've also taken the opportunity to do some cleanup in this minor release.",[3841,36816,36817,36831,36857,36871,36881],{},[3844,36818,36819,36820,36823,36824,36826,36827,36830],{},"Previously it was possible to pass the ",[2890,36821,36822],{},"x-nuxt-no-ssr"," header (undocumented) to force SPA rendering. We've now disabled this behaviour by default but you can get it back by setting ",[2890,36825,25033],{}," to true. Alternatively, you can set ",[2890,36828,36829],{},"event.context.nuxt.noSSR"," on the server to force SPA rendering.",[3844,36832,36833,36834,36843,36844,36853,36854,36856],{},"We've ",[2910,36835,36838,36839,36842],{"href":36836,"rel":36837},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F20111",[2914],"removed the (deprecated) ",[2890,36840,36841],{},"#head"," alias"," and also disabled the ",[2910,36845,36848,36849,36852],{"href":36846,"rel":36847},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F20131",[2914],"polyfill for ",[2890,36850,36851],{},"@vueuse\u002Fhead"," behaviour"," by default. (It can still be enabled with ",[2890,36855,25022],{},".)",[3844,36858,36833,36859,36867,36868,3088],{},[2910,36860,36838,36863,36866],{"href":36861,"rel":36862},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F20112",[2914],[2890,36864,36865],{},"experimental.viteNode"," option",". It can be configured instead with ",[2890,36869,36870],{},"vite.devBundler",[3844,36872,36833,36873,36880],{},[2910,36874,36877,36878,33137],{"href":36875,"rel":36876},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F20082",[2914],"deprecated accessing public runtime config without the ",[2890,36879,180],{},". This was an undocument compatibility measure with Nuxt 2 and we plan to remove it entirely in v3.5.",[3844,36882,36883,36884,36888],{},"To fix a bug with our vue-router integration, we now generate a slightly different path matching syntax. If you were relying on the exact path generated, have a look at ",[2910,36885,36886],{"href":36886,"rel":36887},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19902",[2914]," for more information.",[2885,36890,6103],{"id":6102},[2896,36892,13730],{},[2918,36894,36895],{"className":4437,"code":30982,"language":4439,"meta":2924,"style":2924},[2890,36896,36897],{"__ignoreMap":2924},[2928,36898,36899,36901,36903,36905],{"class":2930,"line":2931},[2928,36900,4446],{"class":3448},[2928,36902,8166],{"class":3156},[2928,36904,4452],{"class":3156},[2928,36906,20926],{"class":3156},[2896,36908,20929],{},[4489,36910,36911],{},"html pre.shiki code .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}",{"title":2924,"searchDepth":2938,"depth":2938,"links":36913},[36914,36915,36916,36917,36918,36919,36920,36921,36922],{"id":36223,"depth":2938,"text":36224},{"id":36305,"depth":2938,"text":36306},{"id":36522,"depth":2938,"text":36523},{"id":36668,"depth":2938,"text":36669},{"id":36724,"depth":2938,"text":36725},{"id":36759,"depth":2938,"text":36760},{"id":36793,"depth":2938,"text":36794},{"id":36810,"depth":2938,"text":36811},{"id":6102,"depth":2938,"text":6103},"2023-04-11","Nuxt 3.4.0 is the latest release of Nuxt 3, bringing exciting new features, including support for the View Transitions API, transferring rich JavaScript payloads from server to client - and much more.","\u002Fassets\u002Fblog\u002Fv3-4.png",{},{"title":2781,"description":36924},"2SSZVrW0eZkHGrBJN-0NiIXN1QnvRffFvFt_53T8woU",{"id":36930,"title":2821,"authors":36931,"body":36934,"category":4517,"date":37637,"description":37638,"draft":108,"extension":4520,"image":37639,"meta":37640,"navigation":1196,"path":2822,"seo":37641,"stem":2823,"tags":6,"__hash__":37642},"blog\u002Fblog\u002F3.introducing-nuxt-devtools.md",[36932],{"name":20973,"avatar":36933,"to":20976,"twitter":20977},{"src":20975},{"type":2882,"value":36935,"toc":37614},[36936,36956,36962,36965,36969,36971,37005,37008,37049,37060,37070,37083,37096,37103,37105,37111,37114,37117,37123,37126,37132,37135,37143,37146,37152,37164,37166,37169,37181,37183,37186,37192,37194,37200,37206,37209,37215,37219,37222,37228,37230,37236,37242,37250,37256,37258,37266,37272,37274,37277,37283,37287,37290,37296,37300,37303,37309,37313,37334,37340,37344,37347,37353,37357,37360,37366,37370,37381,37387,37391,37404,37410,37414,37417,37421,37427,37431,37437,37444,37450,37457,37463,37467,37473,37476,37513,37522,37526,37529,37532,37584,37586,37599,37611],[2896,36937,36938,36939,26762,36942,36947,36948,36955],{},"We announced the preview of ",[2910,36940,26379],{"href":26377,"rel":36941},[2914],[2910,36943,36946],{"href":36944,"rel":36945},"https:\u002F\u002Fvuejs.amsterdam\u002F",[2914],"Vue Amsterdam 2023",", a new tool to help you understand your Nuxt app and improve the developer experience even further. Today we released a new minor version ",[2910,36949,36952],{"href":36950,"rel":36951},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fdevtools\u002Freleases\u002Ftag\u002Fv0.3.0",[2914],[2890,36953,36954],{},"v0.3.0"," with a bunch of updates and improvements.",[2896,36957,36958],{},[4183,36959],{"alt":36960,"src":36961},"devtools-tab-overview","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-overview.png",[2896,36963,36964],{},"In this post, we will explore the reasons behind the creation of Nuxt DevTools, how it can enhance your development experience, and what you can expect in the future.",[2885,36966,36968],{"id":36967},"developer-experience","Developer Experience",[2896,36970,31811],{},[2896,36972,36973,36974,36978,36979,36982,36983,4309,36988,4309,36993,2892,36997,10201,37002,3088],{},"In Nuxt 3, we switched to ",[2910,36975,1075],{"href":36976,"rel":36977},"https:\u002F\u002Fvitejs.dev\u002F",[2914]," as the default bundler for the instant hot module replacement (HMR) during developement, creating a faster feedback loop to your workflow. Additionally, we have introduced ",[2910,36980,833],{"href":34162,"rel":36981},[2914],", a new server engine that allows you to deploy your Nuxt app to any hosting service, such as ",[2910,36984,36987],{"href":36985,"rel":36986},"https:\u002F\u002Fvercel.com",[2914],"Vercel",[2910,36989,36992],{"href":36990,"rel":36991},"https:\u002F\u002Fnetlify.com",[2914],"Netlify",[2910,36994,10058],{"href":36995,"rel":36996},"https:\u002F\u002Fcloudflare.com",[2914],[2910,36998,37001],{"href":36999,"rel":37000},"https:\u002F\u002Fnitro.unjs.io\u002Fdeploy",[2914],"more",[2900,37003,37004],{},"with zero-config",[2896,37006,37007],{},"Nuxt offers many common practices built-in:",[4346,37009,37010,37013,37023,37035],{},[3844,37011,37012],{},"Write TypeScript and ESM out-of-the-box throughout your codebase.",[3844,37014,37015,37016,37022],{},"Build single-page applications (SPA), server-side rendering (SSR), static site generation (SSG), or ",[2910,37017,37018,37019],{"href":27680},"hybrid them ",[2900,37020,37021],{},"per routes"," - using the same codebase isomorphically without any explicit setup.",[3844,37024,37025,37026,2892,37030,37034],{},"Use several composables, like ",[2910,37027,37028],{"href":32000},[2890,37029,619],{},[2910,37031,37032],{"href":30062},[2890,37033,515],{}," for sharing states accessible across the server and client sides.",[3844,37036,37037,37038,2892,37043,37048],{},"Leverage SEO utilities, like ",[2910,37039,37041],{"href":37040},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-head",[2890,37042,531],{},[2910,37044,37046],{"href":37045},"\u002Fdocs\u002Fgetting-started\u002Fseo-meta#useseometa",[2890,37047,611],{}," to make meta-tags management a breaze.",[2896,37050,37051,37052,4309,37054,37056,37057,37059],{},"Moreover, features such as the ",[2910,37053,31821],{"href":3477},[2910,37055,175],{"href":31824},", route ",[2910,37058,157],{"href":31827},", and other tools make app creation easier and codebases more organized.",[2896,37061,37062,37063,2892,37065,37069],{},"Conventions like ",[2910,37064,31818],{"href":31817},[2910,37066,31837],{"href":37067,"rel":37068},"https:\u002F\u002Fnitro.unjs.io\u002Fguide\u002Fintroduction\u002Frouting",[2914]," making the routing intuitive and effortless.",[2896,37071,37072,37075,37076,37078,37079,3088],{},[2910,37073,37074],{"href":32521},"Components auto-imports"," makes it easy to create shared components that are directly available in any Vue file. Unlike global components, they are code-splitted. We also introduced ",[2910,37077,31832],{"href":31831},", where all APIs from Vue are directly available. Nuxt modules can also provide their custom composables to be auto-imported, as well as your ",[2910,37080,37082],{"href":37081},"\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Fcomposables","local composables",[2896,37084,37085,37086,2892,37089,37092,37093],{},"Recently, we introduced client and server-only components, which can be used by adding ",[2890,37087,37088],{},".client",[2890,37090,37091],{},".server"," to the filename. All these conventions are fully typed and developers can even have type autocomplete when doing route navigation or fetching data from APIs. ",[2900,37094,37095],{},"These conventions significantly reduce boilerplate code, avoid duplications, and improve productivity.",[2896,37097,37098,37099,37102],{},"When it comes to ecosystem, Nuxt has a large community of developers building modules around it, ",[2910,37100,37101],{"href":31840},"with hundreds of high-quality modules"," available. Modules allow developers to get integrations for features they want without worrying about configuration or best practices.",[2885,37104,31856],{"id":31855},[2896,37106,37107,37108,3088],{},"Nuxt is capable of creating a large scale application at ease, however there is one problem: ",[2900,37109,37110],{},"the lack of transparency",[2896,37112,37113],{},"For every new feature and convention we introduce, we are adding a bit more abstraction to the framework.",[2896,37115,37116],{},"Abstractions are great things to transfer implementation complexity and make things easier to get more focus when building. On the other hand, they can also add extra burden for users to learn and understand what's going on under the hood. Leading also to implicitness, like where a auto-imported component is from, or how many modules is using a certain component, etc. It can also make things hard to debug.",[2896,37118,37119,37120,3088],{},"This might be considered as a trade-off of any tools, you have to learn and understand the tool to use it with efficiency. Despite improving the documentation and providing more examples, ",[2900,37121,37122],{},"we believe of an opportunity to improve the lack of transparency",[2885,37124,2821],{"id":37125},"introducing-nuxt-devtools",[2896,37127,37128,37131],{},[2910,37129,26379],{"href":26377,"rel":37130},[2914]," is a visual tool to help you understand your Nuxt app and improve the developer experience even further. It's created to provide a better transparency of Nuxt and your app, find performance bottlenecks and help you manage your app and configuration.",[2896,37133,37134],{},"It is shipped as an experimental module and provide the views right inside your app. Once installed, it will add a small icon on the bottom of your app. Clicking it will open the DevTools panel.",[2896,37136,37137,37138,3088],{},"To try it, please refer to the ",[2910,37139,37142],{"href":37140,"rel":37141},"https:\u002F\u002Fdevtools.nuxtjs.org\u002Fguide",[2914],"installation guide",[4543,37144,1044],{"id":37145},"overview",[2896,37147,37148,37149],{},"Shows a quick overview of your app, including the Nuxt version, pages, components, modules, and plugins you are using. ",[2900,37150,37151],{},"It also check your Nuxt version and allow you to upgrade with a single click.",[5478,37153,37155,37158,37161],{":autoplay":4902,":controls":4902,"autoPlay":1196,"poster":37154},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1679922926\u002Fnuxt3\u002Fnuxt-devtools-upgrade_dnfghq.jpg",[5486,37156],{"src":37157,"type":5489},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1679922926\u002Fnuxt3\u002Fnuxt-devtools-upgrade_dnfghq.webm",[5486,37159],{"src":37160,"type":5493},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1679922926\u002Fnuxt3\u002Fnuxt-devtools-upgrade_dnfghq.mp4",[5486,37162],{"src":37163,"type":5497},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1679922926\u002Fnuxt3\u002Fnuxt-devtools-upgrade_dnfghq.ogg",[4543,37165,874],{"id":171},[2896,37167,37168],{},"The pages tab shows your current routes and provide a quick way to navigate to them. For dynamic routes, it also provide a form to fill with each params interactively. You can also use the textbox to play and test how each route is matched.",[5478,37170,37172,37175,37178],{":autoplay":4902,":controls":4902,"autoPlay":1196,"poster":37171},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1679923373\u002Fnuxt3\u002Fnuxt-devtools-pages_csjoh0.jpg",[5486,37173],{"src":37174,"type":5489},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1679923373\u002Fnuxt3\u002Fnuxt-devtools-pages_csjoh0.webm",[5486,37176],{"src":37177,"type":5493},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1679923373\u002Fnuxt3\u002Fnuxt-devtools-pages_csjoh0.mp4",[5486,37179],{"src":37180,"type":5497},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1679923373\u002Fnuxt3\u002Fnuxt-devtools-pages_csjoh0.ogg",[4543,37182,434],{"id":132},[2896,37184,37185],{},"Components tab show all the components you are using in your app and where they are from. You can also search for them and go to the source code.",[2896,37187,37188],{},[4183,37189],{"alt":37190,"src":37191},"nuxt-devtools-tab-components","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-components.png",[2896,37193,31941],{},[2896,37195,37196],{},[4183,37197],{"alt":37198,"src":37199},"nuxt-devtools-components-graph","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-components-graph-all.png",[2896,37201,37202],{},[4183,37203],{"alt":37204,"src":37205},"nuxt-devtools-components-graph-filtered","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-components-graph-filtered.png",[2896,37207,37208],{},"You can also use the \"Inspector\" feature to inspect the DOM tree and see which component is rendering it. Click to go to your editor of the specific line. Making it much easier to make changes, without the requirement of understanding the project structure thoroughly.",[2896,37210,37211],{},[4183,37212],{"alt":37213,"src":37214},"nuxt-devtools-tab-components-inspector","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-components-inspector.png",[4543,37216,37218],{"id":37217},"imports","Imports",[2896,37220,37221],{},"Imports tab shows all the auto-imports registered to Nuxt. You can see which files are importing them, and where they are from. Some entries can also provide short descriptions and documentation links.",[2896,37223,37224],{},[4183,37225],{"alt":37226,"src":37227},"nuxt-devtools-tab-imports","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-imports.png",[4543,37229,276],{"id":162},[2896,37231,37232,37233,3088],{},"Modules tab shows all the modules you have installed and providing the links to their documentation and source code. You can find more modules available in ",[2910,37234,37235],{"href":31840},"Nuxt Modules",[2896,37237,37238],{},[4183,37239],{"alt":37240,"src":37241},"nuxt-devtools-tab-modules","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-modules.png",[2896,37243,37244,37245,37249],{},"Recently we introduce the experimental upgrade feature, which allows you to upgrade your Nuxt or modules with ease. With the ",[2910,37246,37248],{"href":37247},"#terminals","Terminal tab",", it shows the output of the upgrade process transparently.",[2896,37251,37252],{},[4183,37253],{"alt":37254,"src":37255},"nuxt-devtools-tab-modules-upgrade","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-modules-upgrade.png",[4543,37257,39],{"id":127},[2896,37259,37260,37261,37265],{},"The assets tab that shows all your static assets and their information. You can copy the paths of the assets, or the code snippets of using them. In the future, with the integrations of ",[2910,37262,33729],{"href":37263,"rel":37264},"https:\u002F\u002Fimage.nuxtjs.org\u002F",[2914],", you can even optimize images with a single click.",[2896,37267,37268],{},[4183,37269],{"alt":37270,"src":37271},"nuxt-devtools-tab-assets","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-assets.png",[4543,37273,886],{"id":175},[2896,37275,37276],{},"Plugins tab shows all the plugins you are using in your app. As plugins runs before the app is mounted,the time spent in each plugin should be minimal to avoid blocking the app from rendering. The time cost of each plugin provided can be helpful to find performance bottlenecks.",[2896,37278,37279],{},[4183,37280],{"alt":37281,"src":37282},"nuxt-devtools-tab-plugins","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-plugins.png",[4543,37284,37286],{"id":37285},"hooks","Hooks",[2896,37288,37289],{},"Hooks tab can help you to monitor the time spent in each hook from both client and server side. You can also see how many lisenters registed to each hook, and how many times they have been invoked. This can be helpful to find performance bottlenecks.",[2896,37291,37292],{},[4183,37293],{"alt":37294,"src":37295},"nuxt-devtools-tab-hooks","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-hooks.png",[4543,37297,37299],{"id":37298},"app-config","App Config",[2896,37301,37302],{},"You can inspect and modify the app config in DevTools, try different configurations and see the effects immediately.",[2896,37304,37305],{},[4183,37306],{"alt":37307,"src":37308},"nuxt-devtools-app-config","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-app-config.png",[4543,37310,37312],{"id":37311},"payload-data","Payload & Data",[2896,37314,37315,37316,4309,37320,2892,37324,37328,37329,2892,37331,37333],{},"This tab shows the state created by ",[2910,37317,37318],{"href":32000},[2890,37319,619],{},[2910,37321,37322],{"href":30062},[2890,37323,515],{},[2910,37325,37326],{"href":30067},[2890,37327,527],{},". It can be helpful to understand how the data is fetched and how the state is managed, or change them reactively to see it they affects your app. For ",[2890,37330,515],{},[2890,37332,527],{},", you can also manually the trigger the refetch.",[2896,37335,37336],{},[4183,37337],{"alt":37338,"src":37339},"nuxt-devtools-tab-payload","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-payload.png",[4543,37341,37343],{"id":37342},"terminals","Terminals",[2896,37345,37346],{},"In some integrations, they might require to have subprocesses running to do certain jobs. Before DevTools, you either hide the output of the subprocess entirely and swallow the potential warnings\u002Ferrors, or pipe to stdout and pollute your terminal with multiple outputs. Now you can now have the outputs in DevTools for each process and clearly isolated.",[2896,37348,37349],{},[4183,37350],{"alt":37351,"src":37352},"nuxt-devtools-tab-terminals","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-terminals.png",[4543,37354,37356],{"id":37355},"virtual-files","Virtual Files",[2896,37358,37359],{},"Virtual Files tab shows the virtual files generated by Nuxt and Nitro to support the conventions. This can be helpful for advanced debugging.",[2896,37361,37362],{},[4183,37363],{"alt":37364,"src":37365},"nuxt-devtools-tab-virtual-files","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-virtual-files.png",[4543,37367,37369],{"id":37368},"inspect","Inspect",[2896,37371,37372,37373,37380],{},"Inspect expose the ",[2910,37374,37377],{"href":37375,"rel":37376},"https:\u002F\u002Fgithub.com\u002Fantfu\u002Fvite-plugin-inspect",[2914],[2890,37378,37379],{},"vite-plugin-inspect"," integration, allowing you to inspect transformation steps of Vite. It can be helpful to understand how each plugin is transforming your code and spot potential issues.",[2896,37382,37383],{},[4183,37384],{"alt":37385,"src":37386},"nuxt-devtools-vite-plugin-inspect","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-inspect.png",[4543,37388,37390],{"id":37389},"vs-code","VS Code",[2896,37392,37393,37394,37399,37400,37403],{},"Thanks to ",[2910,37395,37398],{"href":37396,"rel":37397},"https:\u002F\u002Fcode.visualstudio.com\u002Fdocs\u002Fremote\u002Fvscode-server",[2914],"VS Code Server",", we are able to integrate a ",[2900,37401,37402],{},"full-featured"," VS Code instance into DevTools. You can install extensions and sync your settings. This allows you to get closer feedback loop where you can change the code and see the result immediately without leaving the browser.",[2896,37405,37406],{},[4183,37407],{"alt":37408,"src":37409},"nuxt-devtools-tab-vscode","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-vscode.png",[4543,37411,37413],{"id":37412},"module-contributed-view","Module Contributed View",[2896,37415,37416],{},"With the ecosystem in mind, Nuxt DevTools to designed to be flexible and extendable. Modules could contribute their own views to DevTools, to provide interactive data and playgrounds for their integrations. The following are a few examples:",[2896,37418,37419,32161],{},[2910,37420,32160],{"href":32159},[2896,37422,37423],{},[4183,37424],{"alt":37425,"src":37426},"nuxt-devtools-tab-vueuse","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-vueuse.png",[2896,37428,37429,32191],{},[2910,37430,32190],{"href":32189},[2896,37432,37433],{},[4183,37434],{"alt":37435,"src":37436},"nuxt-devtools-tab-unocss","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-unocss.png",[2896,37438,37439,37443],{},[2910,37440,37442],{"href":37441},"\u002Fmodules\u002Ficon","Nuxt Icon module"," provides a search engine for all icons available.",[2896,37445,37446],{},[4183,37447],{"alt":37448,"src":37449},"nuxt-devtools-tab-nuxt-icon","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-icones.png",[2896,37451,37452,37456],{},[2910,37453,37455],{"href":32148,"rel":37454},[2914],"Nuxt Vitest module"," provides Vitest UI for tests runing with the same pipeline as your Nuxt app.",[2896,37458,37459],{},[4183,37460],{"alt":37461,"src":37462},"nuxt-devtools-tab-vitest","\u002Fassets\u002Fblog\u002Fdevtools\u002Ftab-vitest.png",[4543,37464,37466],{"id":37465},"for-module-authors","For Module Authors",[2896,37468,37469,37470,37472],{},"With the release of ",[2890,37471,36954],{},", we improved the ability for module authors to contribute to the DevTools.",[2896,37474,37475],{},"It includes:",[4346,37477,37478,37481,37484,37487,37490,37500,37510],{},[3844,37479,37480],{},"Module contributed views",[3844,37482,37483],{},"Access to client app's context and devtools' utils",[3844,37485,37486],{},"Custom RPC functions to communicate between server and client",[3844,37488,37489],{},"Subprocesses spawning and output steaming",[3844,37491,37492,37499],{},[2910,37493,37496],{"href":37494,"rel":37495},"https:\u002F\u002Fdevtools.nuxtjs.org\u002Fmodule\u002Futils-kit",[2914],[2890,37497,37498],{},"@nuxt\u002Fdevtools-kit"," - a set of utilities help you integrate your module with DevTools",[3844,37501,37502,37509],{},[2910,37503,37506],{"href":37504,"rel":37505},"https:\u002F\u002Fdevtools.nuxtjs.org\u002Fmodule\u002Fui-kit",[2914],[2890,37507,37508],{},"@nuxt\u002Fdevtools-ui-kit"," - the UI components used in DevTools, to make your module's view consistent with the rest of DevTools",[3844,37511,37512],{},"Starter template to create module with DevTools integration",[2896,37514,37515,37516,37521],{},"Please check out the ",[2910,37517,37520],{"href":37518,"rel":37519},"https:\u002F\u002Fdevtools.nuxtjs.org\u002Fmodule\u002Fguide",[2914],"Devtools Module Authors Guide"," to learn more.",[2885,37523,37525],{"id":37524},"what-to-expect-next","What to Expect Next?",[2896,37527,37528],{},"This is just the beginning of the journey. We are planning to add more features to DevTools, while exploring the ways to present the data in more intuitive and playful ways.",[2896,37530,37531],{},"The goals of Nuxt DevTools are to:",[4346,37533,37534,37542,37549,37556,37563,37570,37577],{},[3844,37535,37536,37541],{},[26694,37537],{"className":37538,"name":37540},[37539],"size-5","lucide:blend"," Improve transparency for conventions",[3844,37543,37544,37548],{},[26694,37545],{"className":37546,"name":37547},[37539],"lucide:gauge"," Inspecting performance & analysis",[3844,37550,37551,37555],{},[26694,37552],{"className":37553,"name":37554},[37539],"lucide:swatch-book"," Interactive & playful",[3844,37557,37558,37562],{},[26694,37559],{"className":37560,"name":37561},[37539],"lucide:file-pen-line"," Personalized documentations",[3844,37564,37565,37569],{},[26694,37566],{"className":37567,"name":37568},[37539],"lucide:blocks"," Manage and scaffold apps with ease",[3844,37571,37572,37576],{},[26694,37573],{"className":37574,"name":37575},[37539],"lucide:lightbulb"," Provide insights and improvements",[3844,37578,37579,37583],{},[26694,37580],{"className":37581,"name":37582},[37539],"lucide:user-check"," Make the development experience more enjoyable",[12207,37585],{},[2896,37587,37588,37589,37594,37595,37598],{},"You can check our ",[2910,37590,37593],{"href":37591,"rel":37592},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fdevtools\u002Fdiscussions\u002F31",[2914],"Project Roadmap"," and share your ",[2910,37596,32346],{"href":32280,"rel":37597},[2914],", helping us to make the DevTools better.",[2896,37600,37601,37602,37606,37607,3088],{},"You can follow the latest updates by staring the ",[2910,37603,37605],{"href":26377,"rel":37604},[2914],"GitHub repository",", and following ",[2910,37608,37610],{"href":27103,"rel":37609},[2914],"Nuxt's official Twitter",[2896,37612,37613],{},"Thank you for reading, and we are looking forward to your feedback and contributions!",{"title":2924,"searchDepth":2938,"depth":2938,"links":37615},[37616,37617,37618,37636],{"id":36967,"depth":2938,"text":36968},{"id":31855,"depth":2938,"text":31856},{"id":37125,"depth":2938,"text":2821,"children":37619},[37620,37621,37622,37623,37624,37625,37626,37627,37628,37629,37630,37631,37632,37633,37634,37635],{"id":37145,"depth":2967,"text":1044},{"id":171,"depth":2967,"text":874},{"id":132,"depth":2967,"text":434},{"id":37217,"depth":2967,"text":37218},{"id":162,"depth":2967,"text":276},{"id":127,"depth":2967,"text":39},{"id":175,"depth":2967,"text":886},{"id":37285,"depth":2967,"text":37286},{"id":37298,"depth":2967,"text":37299},{"id":37311,"depth":2967,"text":37312},{"id":37342,"depth":2967,"text":37343},{"id":37355,"depth":2967,"text":37356},{"id":37368,"depth":2967,"text":37369},{"id":37389,"depth":2967,"text":37390},{"id":37412,"depth":2967,"text":37413},{"id":37465,"depth":2967,"text":37466},{"id":37524,"depth":2938,"text":37525},"2023-03-27","Unleash the Developer Experience with Nuxt and understand your app better than ever.","\u002Fassets\u002Fblog\u002Fnuxt-devtools.png",{},{"title":2821,"description":37638},"ZP0H3bmFdIEPke-TTRJGx_WWjrMoCB-VoSpG_hPsKjA",{"id":37644,"title":2777,"authors":37645,"body":37648,"category":4517,"date":38328,"description":38329,"draft":108,"extension":4520,"image":38330,"meta":38331,"navigation":1196,"path":2778,"seo":38332,"stem":2779,"tags":6,"__hash__":38333},"blog\u002Fblog\u002F10.v3-3.md",[37646],{"name":2877,"avatar":37647,"to":2880},{"src":2879},{"type":2882,"value":37649,"toc":38315},[37650,37654,37657,37671,37674,37710,37724,37729,37733,37754,37756,37770,37777,37790,37824,37835,37921,37935,37939,37951,37973,37980,38021,38039,38043,38067,38080,38084,38111,38141,38143,38151,38162,38177,38181,38189,38208,38219,38223,38245,38253,38273,38277,38292,38295,38309,38312],[2885,37651,37653],{"id":37652},"local-module-development-dx","✨ Local module development DX",[2896,37655,37656],{},"We've landed a raft of changes to enable local modules and improve DX.",[2896,37658,37659,37660,37665,37666,2916],{},"We now auto-scan your ",[2910,37661,37663],{"href":37662},"\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Fmodules",[2890,37664,24835],{}," folder and register top level files there as modules in your project (",[2910,37667,37670],{"href":37668,"rel":37669},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19394",[2914],"#19394",[2896,37672,37673],{},"When these files are changed, we'll automatically restart the nuxt server.",[2918,37675,37677],{"className":5774,"code":37676,"language":5776,"meta":2924,"style":2924},"export default defineNuxtConfig({\n  modules: [\n    '@nuxtjs\u002Ftailwindcss',\n-   '~\u002Fmodules\u002Fpurge-comments'\n  ]\n})\n",[2890,37678,37679,37684,37689,37694,37701,37705],{"__ignoreMap":2924},[2928,37680,37681],{"class":2930,"line":2931},[2928,37682,37683],{"class":2949},"export default defineNuxtConfig({\n",[2928,37685,37686],{"class":2930,"line":2938},[2928,37687,37688],{"class":2949},"  modules: [\n",[2928,37690,37691],{"class":2930,"line":2967},[2928,37692,37693],{"class":2949},"    '@nuxtjs\u002Ftailwindcss',\n",[2928,37695,37696,37698],{"class":2930,"line":2984},[2928,37697,5783],{"class":2953},[2928,37699,37700],{"class":2970},"   '~\u002Fmodules\u002Fpurge-comments'\n",[2928,37702,37703],{"class":2930,"line":2993},[2928,37704,18830],{"class":2949},[2928,37706,37707],{"class":2930,"line":2999},[2928,37708,37709],{"class":2949},"})\n",[2896,37711,37712,37713,37716,37717,3248,37719,2916],{},"We also now expose ",[2890,37714,37715],{},"nuxt\u002Fkit"," for easy access to kit composables in your local project without having to install ",[2890,37718,13474],{},[2910,37720,37723],{"href":37721,"rel":37722},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19422",[2914],"#19422",[2896,37725,37726,3088],{},[2910,37727,37728],{"href":37662},"Read the documentation about local modules",[2885,37730,37732],{"id":37731},"️-restarting-nuxt","♻️ Restarting Nuxt",[2896,37734,37735,37736,37738,37739,37744,37745,37748,37749,2916],{},"You can add files to the ",[2890,37737,14142],{}," array to automatically restart the server (",[2910,37740,37743],{"href":37741,"rel":37742},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19530",[2914],"#19530","). This is likely to be particularly useful for module authors. You can also trigger a restart of the Nuxt server with the new ",[2890,37746,37747],{},"restart"," hook (",[2910,37750,37753],{"href":37751,"rel":37752},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19084",[2914],"#19084",[2885,37755,20875],{"id":4394},[2896,37757,37758,37759,37764,37765,2916],{},"We've increased static asset maxAge to 1 year as a matter of best practice (",[2910,37760,37763],{"href":37761,"rel":37762},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19335",[2914],"#19335","), and support tree-shaking more of your build (",[2910,37766,37769],{"href":37767,"rel":37768},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19508",[2914],"#19508",[2896,37771,37772],{},[4183,37773],{"alt":37774,"className":37775,"src":37776},"nuxt-performance-improvements",[15174,19239,33696],"\u002Fassets\u002Fblog\u002Fnuxt-performance-improvements.png",[2896,37778,37779,37780,37784,37785,3839],{},"We also now support preloading ",[2910,37781,37782],{"href":32897},[2890,37783,476],{}," with a route in object-syntax (",[2910,37786,37789],{"href":37787,"rel":37788},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19120",[2914],"#19120",[2918,37791,37793],{"className":12274,"code":37792,"language":12276,"meta":2924,"style":2924},"\u003CNuxtLink :to=\"{ name: 'home', query: { year: '2023' } }\">Home\u003C\u002FNuxtLink>\n",[2890,37794,37795],{"__ignoreMap":2924},[2928,37796,37797,37799,37801,37804,37806,37808,37811,37813,37815,37818,37820,37822],{"class":2930,"line":2931},[2928,37798,3139],{"class":2953},[2928,37800,17920],{"class":2970},[2928,37802,37803],{"class":2945}," :to",[2928,37805,2954],{"class":2953},[2928,37807,3153],{"class":2953},[2928,37809,37810],{"class":3156},"{ name: 'home', query: { year: '2023' } }",[2928,37812,3153],{"class":2953},[2928,37814,9470],{"class":2953},[2928,37816,37817],{"class":2949},"Home",[2928,37819,3209],{"class":2953},[2928,37821,17920],{"class":2970},[2928,37823,3161],{"class":2953},[2896,37825,37826,37827,3248,37830,2916],{},"We also track how long it takes each module you use to perform its setup, and warn if it takes too long. You can see all these values by running your dev server with ",[2890,37828,37829],{},"DEBUG=1",[2910,37831,37834],{"href":37832,"rel":37833},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F18648",[2914],"#18648",[2918,37836,37838],{"className":4437,"code":37837,"language":4439,"meta":2924,"style":2924},"DEBUG=1 npx nuxt dev\nℹ Module pages took 1.5ms to setup.\nℹ Module meta took 3.15ms to setup\nℹ Module components took 4.5ms to setup.\n...\n",[2890,37839,37840,37858,37879,37898,37916],{"__ignoreMap":2924},[2928,37841,37842,37845,37847,37850,37853,37855],{"class":2930,"line":2931},[2928,37843,37844],{"class":2949},"DEBUG",[2928,37846,2954],{"class":2953},[2928,37848,37849],{"class":3156},"1",[2928,37851,37852],{"class":3448}," npx",[2928,37854,4449],{"class":3156},[2928,37856,37857],{"class":3156}," dev\n",[2928,37859,37860,37863,37866,37868,37871,37874,37876],{"class":2930,"line":2938},[2928,37861,37862],{"class":3448},"ℹ",[2928,37864,37865],{"class":3156}," Module",[2928,37867,12809],{"class":3156},[2928,37869,37870],{"class":3156}," took",[2928,37872,37873],{"class":3156}," 1.5ms",[2928,37875,17923],{"class":3156},[2928,37877,37878],{"class":3156}," setup.\n",[2928,37880,37881,37883,37885,37888,37890,37893,37895],{"class":2930,"line":2967},[2928,37882,37862],{"class":3448},[2928,37884,37865],{"class":3156},[2928,37886,37887],{"class":3156}," meta",[2928,37889,37870],{"class":3156},[2928,37891,37892],{"class":3156}," 3.15ms",[2928,37894,17923],{"class":3156},[2928,37896,37897],{"class":3156}," setup\n",[2928,37899,37900,37902,37904,37907,37909,37912,37914],{"class":2930,"line":2984},[2928,37901,37862],{"class":3448},[2928,37903,37865],{"class":3156},[2928,37905,37906],{"class":3156}," components",[2928,37908,37870],{"class":3156},[2928,37910,37911],{"class":3156}," 4.5ms",[2928,37913,17923],{"class":3156},[2928,37915,37878],{"class":3156},[2928,37917,37918],{"class":2930,"line":2993},[2928,37919,37920],{"class":2957},"...\n",[2896,37922,37923,37924,37929,37930,2916],{},"You can also opt-in to some of Nuxt's internal optimisations by configuring composables to be treeshaken in a particular environment (",[2910,37925,37928],{"href":37926,"rel":37927},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19383",[2914],"#19383",") or to have magic keys automatically injected (",[2910,37931,37934],{"href":37932,"rel":37933},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19490",[2914],"#19490",[2885,37936,37938],{"id":37937},"error-handling","🐛 Error handling",[2896,37940,37941,37942,37947,37948,3088],{},"We now handle chunk errors by default (",[2910,37943,37946],{"href":37944,"rel":37945},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19086",[2914],"#19086","), meaning if your site updates with a redeploy, ",[2900,37949,37950],{},"we automatically handle reloading it on navigation",[2896,37952,37953,37954,26471,37957,37960,37961,37967,37968,3088],{},"To disable this behavior, set ",[2890,37955,37956],{},"experimental.emitRouteChunkError",[2890,37958,37959],{},"'manual'"," and handle it yourself with the new ",[2910,37962,37965],{"href":37963,"rel":37964},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fapi\u002Futils\u002Freload-nuxt-app",[2914],[2890,37966,726],{}," composable. Learn more how we implemented in our ",[2910,37969,37972],{"href":37970,"rel":37971},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fblob\u002Fmain\u002Fpackages\u002Fnuxt\u002Fsrc\u002Fapp\u002Fplugins\u002Fchunk-reload.client.ts",[2914],"chunk-reload.client.ts plugin",[2896,37974,37975,37976,37979],{},"You can also set ",[2890,37977,37978],{},"experimental.restoreState"," to preserve some of your app state across reloads:",[2918,37981,37983],{"className":2920,"code":37982,"filename":233,"language":2923,"meta":2924,"style":2924},"defineNuxtConfig({\n  experimental: {\n    restoreState: true\n  }\n})\n",[2890,37984,37985,37994,38002,38011,38015],{"__ignoreMap":2924},[2928,37986,37987,37990,37992],{"class":2930,"line":2931},[2928,37988,37989],{"class":2957},"defineNuxtConfig",[2928,37991,2961],{"class":2949},[2928,37993,2964],{"class":2953},[2928,37995,37996,37998,38000],{"class":2930,"line":2938},[2928,37997,3883],{"class":2970},[2928,37999,2974],{"class":2953},[2928,38001,3033],{"class":2953},[2928,38003,38004,38007,38009],{"class":2930,"line":2967},[2928,38005,38006],{"class":2970},"    restoreState",[2928,38008,2974],{"class":2953},[2928,38010,8120],{"class":2977},[2928,38012,38013],{"class":2930,"line":2984},[2928,38014,3113],{"class":2953},[2928,38016,38017,38019],{"class":2930,"line":2993},[2928,38018,2987],{"class":2953},[2928,38020,2990],{"class":2949},[2896,38022,38023,38024,3248,38029,38034,38035,38038],{},"We also have a new experimental error handling component: ",[2910,38025,38027],{"href":38026},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-client-fallback",[2890,38028,448],{},[2910,38030,38033],{"href":38031,"rel":38032},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fframework\u002Fpull\u002F8216",[2914],"#8216",") which can capture errors rendering on server, replace them with fallback content, and granularly trigger rerendering the part with an error on the client. This can be enabled with ",[2890,38036,38037],{},"experimental.clientFallback"," - feedback very welcome!",[2885,38040,38042],{"id":38041},"️-head-improvements","⚡️ Head improvements",[2896,38044,38045,38046,38050,38051,38056,38057,38060,38061,38066],{},"We've migrated to use ",[2910,38047,19278],{"href":38048,"rel":38049},"https:\u002F\u002Fgithub.com\u002Funjs\u002Funhead",[2914]," directly (",[2910,38052,38055],{"href":38053,"rel":38054},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19519",[2914],"#19519",") - and automatically tree-shake server-only head composables like ",[2890,38058,38059],{},"useServerHead"," from your client build (",[2910,38062,38065],{"href":38063,"rel":38064},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19576",[2914],"#19576","), meaning you can have great SEO without needing to include meta tag logic that's relevant only for crawlers in your client build.",[2896,38068,27970,38069,38074,38075,2916],{},[2910,38070,38072],{"href":38071},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-head-safe",[2890,38073,535],{}," composable that handles sanitising untrusted user input (",[2910,38076,38079],{"href":38077,"rel":38078},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19548",[2914],"#19548",[2885,38081,38083],{"id":38082},"better-logging-in-browser-devtools","🪵 Better logging in browser DevTools",[2896,38085,38086,38087,38092,38093,2892,38098,38103,38104,3088],{},"Working with the Chrome DevTools team, we've landed a couple of features across the unjs + Nuxt ecosystem meaning we now have first-class support for hiding Nuxt internal stack traces from logs in your (Chromium-based, for now) browser ",[2910,38088,38091],{"href":38089,"rel":38090},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19243",[2914],"#19243",". We also landed a couple of improvements with stacktraces involving Nuxt hooks (",[2910,38094,38097],{"href":38095,"rel":38096},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fhookable\u002Fpull\u002F69",[2914],"unjs\u002Fhookable#69",[2910,38099,38102],{"href":38100,"rel":38101},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fhookable\u002Fpull\u002F68",[2914],"unjs\u002Fhookable#68",") implementing ",[2910,38105,38108],{"href":38106,"rel":38107},"https:\u002F\u002Fdeveloper.chrome.com\u002Fblog\u002Fdevtools-modern-web-debugging\u002F#linked-stack-traces",[2914],[2890,38109,38110],{},"console.createTask",[17076,38112,38113,38123],{},[17079,38114,38115],{},[17082,38116,38117,38120],{},[17085,38118,38119],{},"Before",[17085,38121,38122],{},"After",[17090,38124,38125],{},[17082,38126,38127,38134],{},[17095,38128,38129],{},[4183,38130],{"width":38131,"alt":38132,"src":38133},529,"before-nuxt-console-improvements","https:\u002F\u002Fuser-images.githubusercontent.com\u002F28706372\u002F220933126-56d9a0e5-e846-4958-a40a-e528a48bcb32.png",[17095,38135,38136],{},[4183,38137],{"width":38138,"alt":38139,"src":38140},534,"after-nuxt-console-improvements","https:\u002F\u002Fuser-images.githubusercontent.com\u002F28706372\u002F220932932-932f193b-59a6-4385-8796-a62dcfd59c20.png",[2885,38142,25065],{"id":25064},[2896,38144,38145,38146,2916],{},"Types for server API routes are now more correct - with non-serialisable types stripped out of the return type (",[2910,38147,38150],{"href":38148,"rel":38149},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fnitro\u002Fpull\u002F1002",[2914],"unjs\u002Fnitro#1002",[2896,38152,38153,38154,38156,38157,2916],{},"We also now type more of ",[2890,38155,415],{}," and correctly type unknown injections for greater type-safety (",[2910,38158,38161],{"href":38159,"rel":38160},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19643",[2914],"#19643",[2896,38163,38164,38165,38168,38169,38171,38172,2916],{},"And if you were struggling with correct types when using ",[2890,38166,38167],{},"transform"," + ",[2890,38170,5589],{}," with Nuxt data fetching composables, fear no more - we now infer the types correctly (",[2910,38173,38176],{"href":38174,"rel":38175},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19487",[2914],"#19487",[2885,38178,38180],{"id":38179},"️-nitro-enhancements","⚗️ Nitro enhancements",[2896,38182,38183,38184,31068],{},"This release comes with Nitro v2.3, which brings lots of improvements of its own. Check out ",[2910,38185,38188],{"href":38186,"rel":38187},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fnitro\u002Freleases\u002Ftag\u002Fv2.3.0",[2914],"the release",[2896,38190,36728,38191,38196,38197,38202,38203,38207],{},[2910,38192,38194],{"href":38193},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-app-config",[2890,38195,511],{}," in nitro server routes (",[2910,38198,38201],{"href":38199,"rel":38200},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19489",[2914],"#19489",") - a long-awaited change. Now ",[2910,38204,38205],{"href":38193},[2890,38206,511],{}," is consistently available throughout your app for non-runtime configuration from layers, modules, etc.",[2896,38209,27429,38210,38213,38214,2916],{},[2890,38211,38212],{},"nitro:build:public-assets"," hook to allow modifying assets output from nitro's prerender\u002Fbuild phase (",[2910,38215,38218],{"href":38216,"rel":38217},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19638",[2914],"#19638",[2885,38220,38222],{"id":38221},"️-build-changes","🛠️ Build changes",[2896,38224,38225,38226,38234,38235,2892,38240,2916],{},"As part of moving towards ",[2910,38227,38230,38231],{"href":38228,"rel":38229},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fissues\u002F14146",[2914],"first-class support for PNP and pnpm support without ",[2890,38232,38233],{},"--shamefully-hoist",", we've dropped support for some internal (deprecated) utilities using CJS resolve patterns (",[2910,38236,38239],{"href":38237,"rel":38238},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19537",[2914],"#19537",[2910,38241,38244],{"href":38242,"rel":38243},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19608",[2914],"#19608",[2896,38246,38247,38248,4309,38250,38252],{},"We also now resolve dependencies like ",[2890,38249,4326],{},[2890,38251,13474],{}," and more using ESM search-paths. We'll be keeping a close eye on this.",[2896,38254,38255,38256,38261,38262,19397,38265,38268,38269,38272],{},"We're also preparing the groundwork for support of new TypeScript Node16 module resolution (",[2910,38257,38260],{"href":38258,"rel":38259},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fissues\u002F19606",[2914],"#19606","), and as part of this have changed the format of our runtime output (using ",[2890,38263,38264],{},".js",[2890,38266,38267],{},".mjs"," extensions, providing ",[2890,38270,38271],{},"types"," fields for subpath exports, and more).",[2885,38274,38276],{"id":38275},"️-custom-config-schema-advanced","🗺️ Custom config schema (advanced)",[2896,38278,38279,38280,38285,38286,38291],{},"We've been testing out an experimental feature to allow modules and users to extend the Nuxt config schema (",[2910,38281,38284],{"href":38282,"rel":38283},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fissues\u002F15592",[2914],"#15592","), and we've now enabled this by default (",[2910,38287,38290],{"href":38288,"rel":38289},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpull\u002F19172",[2914],"#19172","). We expect this will be particularly useful for module and layer\u002Ftheme authors, and should result in some nicer DX for their users.",[2885,38293,11439],{"id":38294},"changelog",[2896,38296,38297,38298,38303,38304,3088],{},"See the full changelog by ",[2910,38299,38302],{"href":38300,"rel":38301},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fcompare\u002Fv3.2.3...v3.3.0",[2914],"comparing the changes"," or checkout the ",[2910,38305,38308],{"href":38306,"rel":38307},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Freleases\u002Ftag\u002Fv3.3.0",[2914],"release on GitHub",[2896,38310,38311],{},"We would like to thank all the 28 contributors who helped on this release 💚",[4489,38313,38314],{},"html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}",{"title":2924,"searchDepth":2938,"depth":2938,"links":38316},[38317,38318,38319,38320,38321,38322,38323,38324,38325,38326,38327],{"id":37652,"depth":2938,"text":37653},{"id":37731,"depth":2938,"text":37732},{"id":4394,"depth":2938,"text":20875},{"id":37937,"depth":2938,"text":37938},{"id":38041,"depth":2938,"text":38042},{"id":38082,"depth":2938,"text":38083},{"id":25064,"depth":2938,"text":25065},{"id":38179,"depth":2938,"text":38180},{"id":38221,"depth":2938,"text":38222},{"id":38275,"depth":2938,"text":38276},{"id":38294,"depth":2938,"text":11439},"2023-03-14","The 3.3.0 is a minor (feature) release with lots of performance and DX improvements, bug fixes and new features to play with.","\u002Fassets\u002Fblog\u002Fv3-3.png",{},{"title":2777,"description":38329},"SzvXB__o6ch-gXWBoyHyf2iRnnou-PrWVWm9OsAD2hA",{"id":38335,"title":2801,"authors":38336,"body":38339,"category":4517,"date":38554,"description":38555,"draft":108,"extension":4520,"image":38556,"meta":38557,"navigation":1196,"path":2802,"seo":38558,"stem":2803,"tags":6,"__hash__":38559},"blog\u002Fblog\u002F2.vision-2023.md",[38337],{"name":2877,"avatar":38338,"to":2880},{"src":2879},{"type":2882,"value":38340,"toc":38546},[38341,38345,38348,38364,38371,38378,38381,38384,38388,38391,38408,38414,38418,38428,38435,38438,38454,38457,38461,38464,38473,38483,38487,38490,38493,38497,38500,38512,38515,38518,38526,38530,38533,38536,38539,38541,38544],[38342,38343,2801],"h1",{"id":38344},"nuxt-a-vision-for-2023",[2896,38346,38347],{},"This past year has been an exciting one. Looking into the new year, there is a lot we have planned as a team and we'd love to share it with you. ✨",[2896,38349,38350,38351,38355,38356,38359,38360,2916],{},"This past year has been an exciting one, with the release of Nuxt 3 and Nitro and the launch of the new ",[2910,38352,17199],{"href":38353,"rel":38354},"http:\u002F\u002Fnuxt.com\u002F",[2914]," website. It's been the culmination of years of work, and has not only resulted in a new major version of Nuxt, but a new Nuxt architecture, a full-stack server framework (",[2910,38357,833],{"href":34762,"rel":38358},[2914],"), and a new GitHub organisation and ecosystem (",[2910,38361,27061],{"href":38362,"rel":38363},"https:\u002F\u002Fgithub.com\u002Funjs\u002F",[2914],[2896,38365,38366,38367,38370],{},"Throughout that whole time, ",[2910,38368,27008],{"href":27006,"rel":38369},[2914]," has led the Nuxt team, putting in countless hours of work and thought into building Nuxt 3.",[2896,38372,38373,38374,38377],{},"Now, at the start of 2023, he's handing over the helm of the Nuxt open-source work to me (",[2910,38375,2877],{"href":24509,"rel":38376},[2914],"). Pooya will continue to be actively contributing to the Nuxt project and of course driving the development of UnJS ecosystem and Nitro project.",[2896,38379,38380],{},"This is a real honour and I'm hugely pleased to be able to work with the rest of the team and the community to continue to drive Nuxt forward to be the intuitive way to build a web application using Vue. 😊",[2896,38382,38383],{},"Looking into the new year, there is a lot we have planned as a team and we'd love to share it with you.",[2885,38385,38387],{"id":38386},"unifying-nuxt","Unifying Nuxt",[2896,38389,38390],{},"One important change will be unifying Nuxt into a single repository.",[2896,38392,38393,38394,38397,38398,38401,38402,38407],{},"As a complete rewrite of Nuxt 2, Nuxt 3 has been developed in a separate repository: ",[2890,38395,38396],{},"nuxt\u002Fframework",". Nuxt 3 even has its own documentation on ",[2910,38399,17199],{"href":38353,"rel":38400},[2914],", versus the Nuxt 2 documentation on ",[2910,38403,38406],{"href":38404,"rel":38405},"https:\u002F\u002Fv2.nuxt.com",[2914],"v2.nuxt.com",". In development, this helped us move faster but meant less attention on issues for Nuxt 2. It's also a bit confusing.",[2896,38409,38410,38411,38413],{},"So in the coming days, we'll be unifying the Nuxt repos into a single repository, ",[2890,38412,25181],{},". We'll transfer all issues and discussions across, of course, clearly labeling them as to which version of Nuxt they affect. This will also provide us an opportunity to close out issues and RFCs that we've resolved or implemented in Nuxt 3.",[2885,38415,38417],{"id":38416},"new-website","New Website",[2896,38419,38420,38421,38424,38425,3088],{},"This last year brought us the launch of ",[2910,38422,17199],{"href":38353,"rel":38423},[2914]," and the unveiling of Nuxt's ",[2910,38426,38427],{"href":33702},"new logo",[2896,38429,38430],{},[4183,38431],{"alt":38432,"className":38433,"src":38434},"Nuxt Website 2023",[15174,19239,33696],"\u002Fassets\u002Fblog\u002Fwebsite\u002Fnew-website-2023.png",[2896,38436,38437],{},"We'd like to make this website the central place for everything Nuxt. That includes:",[4346,38439,38440,38443,38446],{},[3844,38441,38442],{},"migrating Nuxt 2 documentation so there's a single website to check (with a version switcher)",[3844,38444,38445],{},"documentation for community modules (using multi-source to pull them from their own repositories)",[3844,38447,38448,38449,38453],{},"revamped ",[2910,38450,38452],{"href":38451},"\u002Fdocs\u002Fexamples\u002Fhello-world","examples"," that show off more real use cases, including authentication, monorepos and more",[2896,38455,38456],{},"We have some other exciting plans for the website, but I don't want to reveal too much, other than to say that we'll also (of course!) be open-sourcing the website soon.",[2885,38458,38460],{"id":38459},"key-modules","Key Modules",[2896,38462,38463],{},"The modules ecosystem is an incredibly powerful one, and we are grateful to all the module authors who extend Nuxt with so many features. Today we have more than 60 modules compatible with Nuxt 3. Our goal is to continue to empower module development as well as make sure that the most used modules in Nuxt 2 are updated or have a straightforward migration path.",[2896,38465,38466,38467,38470,38471,3088],{},"The main priorities at the start of the year are ",[2890,38468,38469],{},"nuxt\u002Fimage",", PWA and ",[2890,38472,26973],{},[2896,38474,38475,38476,2892,38479,38482],{},"We're also developing RFCs for ",[2890,38477,38478],{},"nuxt\u002Ffont",[2890,38480,38481],{},"nuxt\u002Fscript"," in conjunction with the Google Aurora team, which will make it much easier to apply best performance practices to your Nuxt apps. Watch this space!",[2885,38484,38486],{"id":38485},"dx-and-performance","DX and Performance",[2896,38488,38489],{},"We particularly care a lot about making Nuxt a joy to use, and we'd like to keep pushing the boundary of great developer experience, which we believe results in the best experience for users of the apps we write too.",[2896,38491,38492],{},"In the coming months, there will be a continued focus on developer experience and performance. Expect to see Nuxt DevTools and CLI improvements for scaffolding - and more. On the performance side, Nuxt 3 + Nitro is a game-changer for speed, performance, and customisability, and we’ll be building on top of that to enable some amazing features. 🚀",[2885,38494,38496],{"id":38495},"a-new-release-cycle","A New Release Cycle",[2896,38498,38499],{},"It's important to know what's coming, and we're going to be spending some time making sure we communicate clearly about what's happening with Nuxt through regular updates like this one.",[2896,38501,38502,38503,38508,38509,3088],{},"On top of that, we're planning a consistent release cycle, following ",[2910,38504,38507],{"href":38505,"rel":38506},"https:\u002F\u002Fsemver.org\u002F",[2914],"semver",". We'll aim for major framework releases every year, with an expectation of patch releases every week or so and minor releases every month or so. They should never contain breaking changes except within options clearly marked as ",[2890,38510,38511],{},"experimental",[2896,38513,38514],{},"One comment: We don't want there to be as big a gap (either in time or in breaking changes) between 3 -> 4 as there was between 2 -> 3, so, when the time comes for Nuxt 4, expect a much more gentle upgrade!",[2896,38516,38517],{},"In the upcoming 3.1.0 release, you can already find a host of bug fixes as well as:",[4346,38519,38520,38523],{},[3844,38521,38522],{},"experimental server-only components and a component island renderer",[3844,38524,38525],{},"Nitro 2, Vite 4 and Rollup 3 support",[2885,38527,38529],{"id":38528},"migrating-to-nuxt-3","Migrating to Nuxt 3",[2896,38531,38532],{},"On December 31st, 2023, Vue 2 will reach End of Life (EOL), and with it Nuxt 2. Both Vue and Nuxt will continue being available and working for many people, but at the same time, many companies and users will want to transition to Nuxt 3 (and we'd encourage this!).",[2896,38534,38535],{},"Part of our focus this year therefore will be supporting everyone who wants to migrate their apps to Nuxt 3. We'll also be working to backport key bug fixes and security fixes to Nuxt 2.",[2896,38537,38538],{},"In addition, there is Nuxt Bridge. It was built as a module to bring features and bug fixes from Nuxt 3 back to Nuxt 2, although it has not yet been released in a stable version. We plan to stabilise and release it in the next month or so, but our main focus over the course of the year will be on helping people transition to Nuxt 3.",[12207,38540],{},[2896,38542,38543],{},"It’s a privilege to be part of this community, and we wish you a very Happy New Year! 💚",[2896,38545,27211],{},{"title":2924,"searchDepth":2938,"depth":2938,"links":38547},[38548,38549,38550,38551,38552,38553],{"id":38386,"depth":2938,"text":38387},{"id":38416,"depth":2938,"text":38417},{"id":38459,"depth":2938,"text":38460},{"id":38485,"depth":2938,"text":38486},{"id":38495,"depth":2938,"text":38496},{"id":38528,"depth":2938,"text":38529},"2023-01-17","This past year has been an exciting one. Looking into the new year, there is a lot we have planned as a team and we'd love to share it with you.","\u002Fassets\u002Fblog\u002Fnuxt-a-vision-for-2023.png",{},{"title":2801,"description":38555},"c_JzcQ3G6YN11uU0x1GaW5mGURozClG6m_0Ek7d1qQw",{"id":38561,"title":2773,"authors":38562,"body":38568,"category":4517,"date":38708,"description":38709,"draft":108,"extension":4520,"image":38710,"meta":38711,"navigation":1196,"path":2774,"seo":38712,"stem":2775,"tags":6,"__hash__":38713},"blog\u002Fblog\u002F1.v3.md",[38563],{"name":27008,"avatar":38564,"to":38566,"twitter":38567},{"src":38565},"https:\u002F\u002Fgithub.com\u002Fpi0.png","https:\u002F\u002Fx.com\u002F_pi0_","_pi0_",{"type":2882,"value":38569,"toc":38702},[38570,38574,38577,38592,38598,38602,38613,38616,38620,38650,38657,38661,38670,38674,38677,38691,38699],[38342,38571,38573],{"id":38572},"announcing-nuxt-30-stable","Announcing Nuxt 3.0 stable",[2896,38575,38576],{},"We are thrilled to announce the first stable version of Nuxt 3.0.0 ✨",[2896,38578,38579,38580,4309,38583,24692,38588,38591],{},"Nuxt 3 is a modern rewrite of the Nuxt framework based on ",[2910,38581,1075],{"href":36976,"rel":38582},[2914],[2910,38584,38587],{"href":38585,"rel":38586},"https:\u002F\u002Fvuejs.org\u002F",[2914],"Vue3",[2910,38589,833],{"href":34762,"rel":38590},[2914]," with first-class TypeScript support and the result of more than two years of research, community feedback, innovation, and experiment to make a pleasant full-stack Developer Experience for Vue development to everyone.",[2896,38593,38594],{},[2910,38595,38597],{"href":38596},"\u002Fdocs\u002Fgetting-started\u002Fintroduction","Read More In the Documentation",[2885,38599,38601],{"id":38600},"api-stability","API Stability",[2896,38603,38604,38605,38608,38609,38612],{},"Nuxt 3.0.0 comes with a stable, production-ready API and 50+ ",[2910,38606,38607],{"href":31840},"supported modules"," built using ",[2910,38610,411],{"href":38611},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fmodules"," by the community and Nuxt team.",[2896,38614,38615],{},"All composables, filesystem conventions, and configurations are guaranteed to be backward compatible with Nuxt 3.0.0. Due to the nature of the meta-frameworks, some changes happen when we upgrade the underlying dependencies (vite, rollup, and nitropack). Thanks to the new Nuxt Kit and Schema tools, such upgrades will be backward compatible as long as you are using documented features. Kit and Schema also guarantee better future compatibility. This makes it faster for us to iterate and plan the next major versions of Nuxt.",[2885,38617,38619],{"id":38618},"the-browser-and-nodejs-support","The browser and Node.js support",[2896,38621,38622,38623,38628,38629,38634,38635,10201,38640,38645,38646,38649],{},"Nuxt 3 officially supports evergreen browsers only. The \"core browser set\" is what we (And ",[2910,38624,38627],{"href":38625,"rel":38626},"http:\u002F\u002Fweb.dev",[2914],"web.dev"," team) believe most developers need to support most of the time in the absence of specific constraints. It takes into account ",[2910,38630,38633],{"href":38631,"rel":38632},"https:\u002F\u002Fcaniuse.com\u002Fusage-table",[2914],"usage numbers",", developer expectations, and ",[2910,38636,38639],{"href":38637,"rel":38638},"https:\u002F\u002Fmake.wordpress.org\u002Fcore\u002Fhandbook\u002Fbest-practices\u002Fbrowser-support\u002F",[2914],"existing support in",[2910,38641,38644],{"href":38642,"rel":38643},"https:\u002F\u002Fangular.io\u002Fguide\u002Fbrowser-support",[2914],"the ecosystem",". The core browser set targets the ",[2900,38647,38648],{},"2 most recent major versions"," of Chrome, Firefox, and Edge on a monthly basis and Safari on a yearly basis.",[2896,38651,38652,38653,38656],{},"On the server side, Nuxt 3 supports Node.js 14, 16, 18, and 19 at the moment. We encourage everyone to use the latest LTS releases of Node.js, we push them once ",[2900,38654,38655],{},"widely adopted by major deployment platforms",". This means we keep supporting Node.js versions as long as they are supported by the Node.js team on a rolling basis in non-major releases of Nuxt. Since 14.x is being end-of-life soon, we highly encourage you to update to the latest 18.x whenever possible.",[2885,38658,38660],{"id":38659},"we-love-community","We Love Community",[2896,38662,38663,38664,38669],{},"Nuxt wouldn’t be possible today without an amazing community making amazing modules, feedback, and contributions every day. Check our ",[2910,38665,38668],{"href":38666,"rel":38667},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fcommunity\u002Fgetting-help",[2914],"Community Documentation"," to be involved!",[2885,38671,38673],{"id":38672},"to-the-future","To the Future",[2896,38675,38676],{},"Releasing Nuxt 3 is a big milestone for us and opens a future-proof basis for new ideas and trust for the users to build their enterprise projects with Nuxt 3.",[2896,38678,38679,38680,2892,38685,38690],{},"Server Component Islands, WebSocket layer, new Deployment presets, improved CLI and DevTools and Testing infra are a few to mention. Keep an eye on the ",[2910,38681,38684],{"href":38682,"rel":38683},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fcommunity\u002Froadmap",[2914],"roadmap page",[2910,38686,38689],{"href":38687,"rel":38688},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fdiscussions",[2914],"GitHub discussions"," for updates.",[2896,38692,38693,38694,38698],{},"NuxtLabs is working on ",[2910,38695,38697],{"href":26855,"rel":38696},[2914],"new product"," and solutions on top of Nuxt 3 at the time of writing this article.",[2896,38700,38701],{},"Stay tuned for more exciting news and Happy Nuxting 💚",{"title":2924,"searchDepth":2938,"depth":2938,"links":38703},[38704,38705,38706,38707],{"id":38600,"depth":2938,"text":38601},{"id":38618,"depth":2938,"text":38619},{"id":38659,"depth":2938,"text":38660},{"id":38672,"depth":2938,"text":38673},"2022-11-16","We are thrilled to announce the first stable version of Nuxt 3.0.0","\u002Fassets\u002Fblog\u002Fv3.png",{},{"title":2773,"description":38709},"UiVSOCSepEM1-mCUXRdN9pZhchH5FQIa-5tUaTMa9ck",{"id":38715,"title":2825,"authors":38716,"body":38733,"category":4517,"date":39067,"description":39068,"draft":108,"extension":4520,"image":39069,"meta":39070,"navigation":1196,"path":2826,"seo":39071,"stem":2827,"tags":6,"__hash__":39072},"blog\u002Fblog\u002F3.nuxt3-rc.md",[38717,38719,38721,38723,38728],{"name":6222,"avatar":38718,"to":11332,"twitter":24560},{"src":6224},{"name":2877,"avatar":38720,"to":2880},{"src":2879},{"name":20973,"avatar":38722,"to":20976},{"src":20975},{"name":38724,"avatar":38725,"to":38727},"Alexandre Chopin",{"src":38726},"https:\u002F\u002Fgithub.com\u002Falexchopin.png","https:\u002F\u002Fx.com\u002Fthewikeo",{"name":38729,"avatar":38730,"to":38732},"Clement Ollivier",{"src":38731},"https:\u002F\u002Fgithub.com\u002Fclemcode.png","https:\u002F\u002Fx.com\u002Fclemcodes",{"type":2882,"value":38734,"toc":39062},[38735,38749,38757,38761,38780,38786,38798,38806,38810,38819,38824,38839,38842,38859,38861,38864,39025,39044,39047,39055],[2896,38736,38737,38738,38742,38743,38748],{},"We are excited to open source Nuxt 3 after more than a year of intense development. The repository is available on GitHub on ",[2910,38739,25181],{"href":38740,"rel":38741},"https:\u002F\u002Fgo.nuxt.com\u002Fgithub",[2914]," under the ",[2910,38744,38747],{"href":38745,"rel":38746},"https:\u002F\u002Fgo.nuxt.com\u002Flicense",[2914],"MIT"," license.",[4460,38750,38751],{},[2896,38752,38753,38754,3088],{},"The documentation is available on ",[2910,38755,6877],{"href":6877,"rel":38756},[2914],[2885,38758,38760],{"id":38759},"a-new-foundation","A new foundation",[2896,38762,38763,38764,4913,38769,38773,38774,38779],{},"On top of supporting ",[2910,38765,38768],{"href":38766,"rel":38767},"https:\u002F\u002Fvuejs.org",[2914],"Vue 3",[2910,38770,1075],{"href":38771,"rel":38772},"https:\u002F\u002Fvitejs.dev",[2914],", Nuxt 3 contains a new ",[2910,38775,38778],{"href":38776,"rel":38777},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fguide\u002Fconcepts\u002Fserver-engine",[2914],"server engine",", unlocking new full-stack capabilities to Nuxt server and beyond. It's the first JavaScript application server that is portable across a variety of modern cloud hosting providers.",[2896,38781,38782,38783,38785],{},"In production, it builds your Vue application and server into one universal ",[2890,38784,122],{}," directory. This output is light: minified and without any other Node.js dependencies (except polyfills). You can deploy this output on any system supporting JavaScript, whether Node.js, Serverless, Workers, Edge-side rendering or purely static.",[2896,38787,38788,38791,38792,38797],{},[2900,38789,38790],{},"Bonus:"," this server engine can be used on existing Nuxt 2 projects with ",[2910,38793,38796],{"href":38794,"rel":38795},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fgetting-started\u002Fbridge",[2914],"Nuxt Bridge"," 🚀",[2896,38799,38800,38801,38805],{},"Head over the ",[2910,38802,38804],{"href":6877,"rel":38803},[2914],"Nuxt 3 homepage"," to learn more about Nuxt Nitro and Nuxt Bridge.",[2885,38807,38809],{"id":38808},"important-notes","Important notes",[2896,38811,38812,38813,38818],{},"Nuxt 3 is currently in beta, so expect things to break (and be fixed quickly). We have ",[2910,38814,38817],{"href":38815,"rel":38816},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fissues",[2914],"plenty of work left"," but we want to open it publicly to gather feedback and contributions from the community 💚",[2896,38820,38821],{},[2900,38822,38823],{},"Do not use it for production until we reach the first release candidate.",[2896,38825,38826,38827,38832,38833,38838],{},"During the beta, almost every commit will ",[2910,38828,38831],{"href":38829,"rel":38830},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fblob\u002Fmain\u002F.github\u002Fworkflows\u002Fci.yml#L111-L119",[2914],"trigger a new npm release","; you may want to look at the ",[2910,38834,38837],{"href":38835,"rel":38836},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fpulls?q=is%3Apr+is%3Amerged",[2914],"merged pull requests"," until we begin generating automated changelogs in the documentation.",[2896,38840,38841],{},"We are working every day to improve the documentation, explaining as much as possible all the concepts, features and usage of Nuxt 3.",[2896,38843,38844,38845,4309,38849,4913,38854,3088],{},"Check out the community section of the Nuxt 3 website for ",[2910,38846,38848],{"href":38666,"rel":38847},[2914],"getting help",[2910,38850,38853],{"href":38851,"rel":38852},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fcommunity\u002Freporting-bugs",[2914],"reporting bugs",[2910,38855,38858],{"href":38856,"rel":38857},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fcommunity\u002Fcontribution",[2914],"contributing to the framework",[2885,38860,32051],{"id":32050},[2896,38862,38863],{},"Here some major milestones we've achieved on the way to Nuxt 3:",[4346,38865,38866,38872,38878,38891,38900,38911,38920,38931,38940,38950,38965,38977,38983,38989,39000,39006],{},[3844,38867,38868,38871],{},[2900,38869,38870],{},"Jul 2, 2020",": Nuxt 3 first commit with full TypeScript rewrite",[3844,38873,38874,38877],{},[2900,38875,38876],{},"Aug 7, 2020",": Webpack 5 support",[3844,38879,38880,14454,38883,38890],{},[2900,38881,38882],{},"Sep 15, 2020",[2910,38884,38887],{"href":38885,"rel":38886},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Fpages",[2914],[2890,38888,38889],{},"pages\u002F"," support",[3844,38892,38893,14454,38896,38899],{},[2900,38894,38895],{},"Oct 29, 2020",[2910,38897,38768],{"href":38766,"rel":38898},[2914]," support with bundle-renderer",[3844,38901,38902,14454,38905,38910],{},[2900,38903,38904],{},"Nov 2, 2020",[2910,38906,38909],{"href":38907,"rel":38908},"https:\u002F\u002Fnuxt.com\u002Fguide\u002Fconcepts\u002Fserver-engine",[2914],"Nuxt Nitro"," initial work",[3844,38912,38913,38916,38917,38890],{},[2900,38914,38915],{},"Jan 22, 2021",": Initial ",[2910,38918,1075],{"href":38771,"rel":38919},[2914],[3844,38921,38922,38925,38926],{},[2900,38923,38924],{},"Feb 4, 2021",": Nuxt can deploy on ",[2910,38927,38930],{"href":38928,"rel":38929},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fgetting-started\u002Fdeployment",[2914],"major serverless platforms",[3844,38932,38933,14454,38936,38939],{},[2900,38934,38935],{},"Mar 6, 2021",[2910,38937,27061],{"href":29339,"rel":38938},[2914]," organisation created on GitHub",[3844,38941,38942,38945,38946,3027],{},[2900,38943,38944],{},"Mar 28, 2021",": Init Nuxt Kit and Nuxt CLI (",[2910,38947,28360],{"href":38948,"rel":38949},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fapi\u002Fcommands\u002Fadd",[2914],[3844,38951,38952,14454,38955,38961,38962,38964],{},[2900,38953,38954],{},"May 20, 2021",[2910,38956,38959],{"href":38957,"rel":38958},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Fapp",[2914],[2890,38960,219],{}," support (",[2890,38963,38889],{}," becomes optional)",[3844,38966,38967,14454,38970,38890],{},[2900,38968,38969],{},"Jun 30, 2021",[2910,38971,38974],{"href":38972,"rel":38973},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Flayouts",[2914],[2890,38975,38976],{},"layouts\u002F",[3844,38978,38979,38982],{},[2900,38980,38981],{},"Jul 15, 2021",": Native ESM support",[3844,38984,38985,38988],{},[2900,38986,38987],{},"Aug 10, 2021",": Auto import of composables and components",[3844,38990,38991,38994,38995,38999],{},[2900,38992,38993],{},"Sep 5, 2021",": Init ",[2910,38996,38796],{"href":38997,"rel":38998},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fbridge\u002Foverview",[2914]," for improving Nuxt 2 experience",[3844,39001,39002,39005],{},[2900,39003,39004],{},"Sep 7, 2021",": Support Vite build for production",[3844,39007,39008,39011,39012,2892,39018,39024],{},[2900,39009,39010],{},"Oct 11, 2021",": Add ",[2910,39013,39016],{"href":39014,"rel":39015},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fgetting-started\u002Fstate-management",[2914],[2890,39017,619],{},[2910,39019,39022],{"href":39020,"rel":39021},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-fetch",[2914],[2890,39023,527],{}," composables",[2896,39026,39027,39028,39032,39033,39038,39039,3088],{},"So far, we've merged ",[2910,39029,39031],{"href":38835,"rel":39030},[2914],"385 pull requests",", closed ",[2910,39034,39037],{"href":39035,"rel":39036},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fissues?q=is%3Aissue+is%3Aclosed",[2914],"229 issues"," and made ",[2910,39040,39043],{"href":39041,"rel":39042},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fcommits\u002Fmain",[2914],"925+ commits",[2896,39045,39046],{},"We are excited to hear your thoughts and we thank you for your patience.",[2896,39048,39049,39050,39054],{},"Now you can go over the ",[2910,39051,39053],{"href":6877,"rel":39052},[2914],"Nuxt 3 documentation"," 😊",[2896,39056,39057,39058,39061],{},"Don't forget to follow us on ",[2910,39059,27105],{"href":27103,"rel":39060},[2914]," to get the latest news about Nuxt!",{"title":2924,"searchDepth":2938,"depth":2938,"links":39063},[39064,39065,39066],{"id":38759,"depth":2938,"text":38760},{"id":38808,"depth":2938,"text":38809},{"id":32050,"depth":2938,"text":32051},"2022-04-12","Nuxt 3 beta was announced on October 12, 2021 after 16 months of work, introducing a new foundation based on Vue 3, Vite and Nitro. Six months later, we are happy to announce the first release candidate of Nuxt 3, code named “Mount Hope“ 🚀","\u002Fassets\u002Fblog\u002Fannouncing-nuxt-3-release-candidate.png",{},{"title":2825,"description":39068},"YV-MvpTcC5BssDX7WtZS8ZFlMlu4f6qn9-Hoin-w2uE",{"id":39074,"title":2833,"authors":39075,"body":39084,"category":4517,"date":39309,"description":39310,"draft":108,"extension":4520,"image":39311,"meta":39312,"navigation":1196,"path":2834,"seo":39313,"stem":2835,"tags":6,"__hash__":39314},"blog\u002Fblog\u002F4.nuxt3-beta.md",[39076,39078,39080,39082],{"name":6222,"avatar":39077,"to":11332},{"src":6224},{"name":27008,"avatar":39079,"to":38566,"twitter":38567},{"src":38565},{"name":2877,"avatar":39081,"to":2880},{"src":2879},{"name":38724,"avatar":39083,"to":38727},{"src":38726},{"type":2882,"value":39085,"toc":39304},[39086,39095,39102,39104,39115,39119,39126,39131,39133,39138,39142,39150,39152,39163,39165,39167,39281,39292,39294,39299],[2896,39087,38737,39088,38742,39091,38748],{},[2910,39089,25181],{"href":25179,"rel":39090},[2914],[2910,39092,38747],{"href":39093,"rel":39094},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fblob\u002Fmain\u002FLICENSE",[2914],[4460,39096,39097],{},[2896,39098,38753,39099,3088],{},[2910,39100,6877],{"href":6877,"rel":39101},[2914],[2885,39103,38760],{"id":38759},[2896,39105,38763,39106,4913,39109,38773,39112,38779],{},[2910,39107,38768],{"href":38766,"rel":39108},[2914],[2910,39110,1075],{"href":38771,"rel":39111},[2914],[2910,39113,38778],{"href":38776,"rel":39114},[2914],[2896,39116,38782,39117,38785],{},[2890,39118,122],{},[2896,39120,39121,38791,39123,38797],{},[2900,39122,38790],{},[2910,39124,38796],{"href":38794,"rel":39125},[2914],[2896,39127,38800,39128,38805],{},[2910,39129,38804],{"href":6877,"rel":39130},[2914],[2885,39132,38809],{"id":38808},[2896,39134,38812,39135,38818],{},[2910,39136,38817],{"href":38815,"rel":39137},[2914],[2896,39139,39140],{},[2900,39141,38823],{},[2896,39143,38826,39144,38832,39147,38838],{},[2910,39145,38831],{"href":38829,"rel":39146},[2914],[2910,39148,38837],{"href":38835,"rel":39149},[2914],[2896,39151,38841],{},[2896,39153,38844,39154,4309,39157,4913,39160,3088],{},[2910,39155,38848],{"href":38666,"rel":39156},[2914],[2910,39158,38853],{"href":38851,"rel":39159},[2914],[2910,39161,38858],{"href":38856,"rel":39162},[2914],[2885,39164,32051],{"id":32050},[2896,39166,38863],{},[4346,39168,39169,39173,39177,39186,39193,39200,39207,39214,39221,39228,39239,39248,39252,39256,39263,39267],{},[3844,39170,39171,38871],{},[2900,39172,38870],{},[3844,39174,39175,38877],{},[2900,39176,38876],{},[3844,39178,39179,14454,39181,38890],{},[2900,39180,38882],{},[2910,39182,39184],{"href":38885,"rel":39183},[2914],[2890,39185,38889],{},[3844,39187,39188,14454,39190,38899],{},[2900,39189,38895],{},[2910,39191,38768],{"href":38766,"rel":39192},[2914],[3844,39194,39195,14454,39197,38910],{},[2900,39196,38904],{},[2910,39198,38909],{"href":38907,"rel":39199},[2914],[3844,39201,39202,38916,39204,38890],{},[2900,39203,38915],{},[2910,39205,1075],{"href":38771,"rel":39206},[2914],[3844,39208,39209,38925,39211],{},[2900,39210,38924],{},[2910,39212,38930],{"href":38928,"rel":39213},[2914],[3844,39215,39216,14454,39218,38939],{},[2900,39217,38935],{},[2910,39219,27061],{"href":29339,"rel":39220},[2914],[3844,39222,39223,38945,39225,3027],{},[2900,39224,38944],{},[2910,39226,28360],{"href":38948,"rel":39227},[2914],[3844,39229,39230,14454,39232,38961,39237,38964],{},[2900,39231,38954],{},[2910,39233,39235],{"href":38957,"rel":39234},[2914],[2890,39236,219],{},[2890,39238,38889],{},[3844,39240,39241,14454,39243,38890],{},[2900,39242,38969],{},[2910,39244,39246],{"href":38972,"rel":39245},[2914],[2890,39247,38976],{},[3844,39249,39250,38982],{},[2900,39251,38981],{},[3844,39253,39254,38988],{},[2900,39255,38987],{},[3844,39257,39258,38994,39260,38999],{},[2900,39259,38993],{},[2910,39261,38796],{"href":38997,"rel":39262},[2914],[3844,39264,39265,39005],{},[2900,39266,39004],{},[3844,39268,39269,39011,39271,2892,39276,39024],{},[2900,39270,39010],{},[2910,39272,39274],{"href":39014,"rel":39273},[2914],[2890,39275,619],{},[2910,39277,39279],{"href":39020,"rel":39278},[2914],[2890,39280,527],{},[2896,39282,39027,39283,39032,39286,39038,39289,3088],{},[2910,39284,39031],{"href":38835,"rel":39285},[2914],[2910,39287,39037],{"href":39035,"rel":39288},[2914],[2910,39290,39043],{"href":39041,"rel":39291},[2914],[2896,39293,39046],{},[2896,39295,39049,39296,39054],{},[2910,39297,39053],{"href":6877,"rel":39298},[2914],[2896,39300,39057,39301,39061],{},[2910,39302,27105],{"href":27103,"rel":39303},[2914],{"title":2924,"searchDepth":2938,"depth":2938,"links":39305},[39306,39307,39308],{"id":38759,"depth":2938,"text":38760},{"id":38808,"depth":2938,"text":38809},{"id":32050,"depth":2938,"text":32051},"2021-10-11","468 days after the first commit, the Nuxt 3 beta has finally arrived. Discover what's inside and what to expect from it. Yes, it includes Vue 3 and Vite ⚡️","\u002Fassets\u002Fblog\u002Fintroducing-nuxt-3-beta.png",{},{"title":2833,"description":39310},"wVMaHq95yZiMEOABlVFV8PYSOLH98OTfbwKm8Ojxk-w",{"id":39316,"title":2849,"authors":39317,"body":39328,"category":4517,"date":39906,"description":39907,"draft":108,"extension":4520,"image":39908,"meta":39909,"navigation":1196,"path":2850,"seo":39910,"stem":2851,"tags":6,"__hash__":39911},"blog\u002Fblog\u002F8.nuxt-static-improvements.md",[39318,39324,39326],{"name":39319,"avatar":39320,"to":39322,"twitter":39323},"Alexander Lichter",{"src":39321},"https:\u002F\u002Fgithub.com\u002FmanniL.png","https:\u002F\u002Fx.com\u002FTheAlexLichter","TheAlexLichter",{"name":6222,"avatar":39325,"to":11332},{"src":6224},{"name":27008,"avatar":39327,"to":38566,"twitter":38567},{"src":38565},{"type":2882,"value":39329,"toc":39893},[39330,39332,39346,39350,39366,39378,39382,39387,39401,39407,39416,39439,39443,39451,39478,39494,39527,39536,39541,39550,39561,39565,39568,39601,39613,39684,39690,39694,39708,39752,39756,39775,39784,39787,39797,39801,39816,39819,39836,39839,39860,39864,39890],[2885,39331,19],{"id":34670},[2896,39333,39334,39335,39338,39339,39342,39343],{},"With Nuxt version 2.13, the ",[2910,39336,39337],{"href":2838},"full-static mode"," has been introduced. In addition, a new command ",[2890,39340,39341],{},"nuxt export"," was added to pre-render your pages without triggering a webpack build with the goal to separate the rendering and build process. The only issue was that most Nuxt users weren't able to unleash the full potential of the separation... ",[2900,39344,39345],{},"until now.",[2885,39347,39349],{"id":39348},"faster-static-deployments","Faster Static Deployments",[2896,39351,39352,39353,39355,39356,39359,39360,39363,39364,3088],{},"With v2.14, ",[2890,39354,781],{}," will ",[2900,39357,39358],{},"automagically skip webpack build step when no code has been changed"," and use the previous build using cache. This will help to drastically improve static deployments time by avoiding unnecessary builds which is usually the most time-consuming part of generation process. Cache support is ",[2900,39361,39362],{},"platform-agnostic"," and works on Netlify, Vercel, or any other CI\u002FCD setup that is caching ",[2890,39365,166],{},[5478,39367,39369,39372,39375],{":autoplay":4902,":controls":4902,"autoPlay":1196,"poster":39368},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1595852304\u002Fnuxt-smart-generate_pjaat1.jpg",[5486,39370],{"src":39371,"type":5489},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1595852304\u002Fnuxt-smart-generate_pjaat1.webm",[5486,39373],{"src":39374,"type":5493},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1595852304\u002Fnuxt-smart-generate_pjaat1.mp4",[5486,39376],{"src":39377,"type":5497},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1595852304\u002Fnuxt-smart-generate_pjaat1.ogg",[2885,39379,39381],{"id":39380},"generate-time-cache-vs-full-webpack-build","Generate time: cache vs full webpack build",[2896,39383,39384,39385,2974],{},"See the comparison in seconds between two ",[2890,39386,781],{},[4346,39388,39389,39395],{},[3844,39390,39391,39394],{},[2890,39392,39393],{},"Build"," is when a webpack build is required",[3844,39396,39397,39400],{},[2890,39398,39399],{},"Cache"," is only when the content has changed (webpack build skipped)",[2896,39402,39403],{},[4183,39404],{"alt":39405,"src":39406},"Comparison between build VS cache time","\u002Fassets\u002Fblog\u002Fbar-chart-cache-build.png",[4460,39408,39409],{},[2896,39410,39411,39412,39415],{},"The static site generation of our projects on content changes are now ",[2900,39413,39414],{},"~3.6x times"," faster 🚀",[2896,39417,39418,39419,4309,39424,4309,39429,2892,39434,3088],{},"Project links: ",[2910,39420,39423],{"href":39421,"rel":39422},"https:\u002F\u002Fgithub.com\u002Fpi0\u002Fnuxt-static-demo",[2914],"Basic",[2910,39425,39428],{"href":39426,"rel":39427},"https:\u002F\u002Fgithub.com\u002Fnuxt-community\u002Fstrapi-module\u002Ftree\u002Fmaster\u002Fdocs",[2914],"Strapi Module Docs",[2910,39430,39433],{"href":39431,"rel":39432},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fcontent\u002Ftree\u002Fmaster\u002Fdocs",[2914],"Content Module Docs",[2910,39435,39438],{"href":39436,"rel":39437},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fwebsite-v2",[2914],"Nuxt 2 Docs",[2885,39440,39442],{"id":39441},"using-in-your-projects","Using in your projects",[3841,39444,39445],{},[3844,39446,39447,39448,39450],{},"Update ",[2890,39449,4326],{}," to the latest minor version, which is v2.14.",[3508,39452,39453,39465],{},[2918,39454,39456],{"className":4317,"code":39455,"filename":9772,"language":4319,"meta":2924,"style":2924},"npm update\n",[2890,39457,39458],{"__ignoreMap":2924},[2928,39459,39460,39462],{"class":2930,"line":2931},[2928,39461,9772],{"class":3448},[2928,39463,39464],{"class":3156}," update\n",[2918,39466,39468],{"className":4317,"code":39467,"filename":12551,"language":4319,"meta":2924,"style":2924},"yarn upgrade nuxt\n",[2890,39469,39470],{"__ignoreMap":2924},[2928,39471,39472,39474,39476],{"class":2930,"line":2931},[2928,39473,12551],{"class":3448},[2928,39475,4452],{"class":3156},[2928,39477,19232],{"class":3156},[3841,39479,39480],{"start":2938},[3844,39481,39482,39483,39486,39487,39490,39491],{},"Ensure ",[2890,39484,39485],{},"target"," is ",[2890,39488,39489],{},"static"," inside your ",[2890,39492,39493],{},"nuxt.config.js",[2918,39495,39497],{"className":26139,"code":39496,"filename":39493,"language":26141,"meta":2924,"style":2924},"export default {\n  target: 'static'\n  \u002F\u002F ...\n}\n",[2890,39498,39499,39507,39519,39523],{"__ignoreMap":2924},[2928,39500,39501,39503,39505],{"class":2930,"line":2931},[2928,39502,2942],{"class":2941},[2928,39504,3871],{"class":2941},[2928,39506,3033],{"class":2953},[2928,39508,39509,39511,39513,39515,39517],{"class":2930,"line":2938},[2928,39510,16549],{"class":2970},[2928,39512,2974],{"class":2953},[2928,39514,3329],{"class":2953},[2928,39516,39489],{"class":3156},[2928,39518,5269],{"class":2953},[2928,39520,39521],{"class":2930,"line":2967},[2928,39522,8893],{"class":2934},[2928,39524,39525],{"class":2930,"line":2984},[2928,39526,3764],{"class":2953},[2896,39528,39529,39531,39532,39535],{},[2890,39530,781],{}," will behave as before to avoid breaking changes and provide legacy compatibility if you keep ",[2890,39533,39534],{},"target: ‘server’"," or don't specify target.",[3841,39537,39538],{"start":2967},[3844,39539,39540],{},"That’s it 🙌",[2896,39542,39543,39544,39546,39547,39549],{},"Now, the ",[2890,39545,781],{}," command will build the project only if necessary, which is the case when files inside the project have been changed. It will always re-render your routes to static HTML files, like ",[2890,39548,39341],{}," is doing already.",[2896,39551,39552,39553,10579,39556,39558,39559,3088],{},"Now you only have to change your build command back from ",[2890,39554,39555],{},"nuxt build && nuxt export",[2890,39557,781],{}," on the platform you are using. If you are using a CI, ensure that you are properly caching ",[2890,39560,166],{},[4543,39562,39564],{"id":39563},"excluding-files-from-cache","Excluding Files from Cache",[2896,39566,39567],{},"By default, nuxt ignores these directories so if any change happens inside them, build will not be triggered:",[4346,39569,39570,39576,39582,39588,39592,39596],{},[3844,39571,39572,39573,3027],{},"Build directory (",[2890,39574,39575],{},".nuxt\u002F",[3844,39577,39578,39579,3027],{},"Static directory (",[2890,39580,39581],{},"static\u002F",[3844,39583,39584,39585,3027],{},"Generate dist (",[2890,39586,39587],{},"dist\u002F",[3844,39589,39590],{},[2890,39591,166],{},[3844,39593,39594],{},[2890,39595,7032],{},[3844,39597,39598,39599,3027],{},"Hidden dotfiles (like ",[2890,39600,19134],{},[2896,39602,39603,39604,39609,39610,2974],{},"You can add more patterns using ",[2910,39605,39608],{"href":39606,"rel":39607},"https:\u002F\u002Fv2.nuxt.com\u002Fdocs\u002Fconfiguration-glossary\u002Fconfiguration-generate\u002F#cache",[2914],"generate.cache.ignore"," option in ",[2890,39611,39612],{},"nuxt.config",[2918,39614,39616],{"className":26139,"code":39615,"filename":39493,"language":26141,"meta":2924,"style":2924},"export default {\n  generate: {\n    cache: {\n      ignore: [\n        \u002F\u002F When something changed in the docs folder, do not re-build via webpack\n        'docs'\n      ]\n    }\n  }\n}\n",[2890,39617,39618,39626,39635,39644,39653,39658,39667,39672,39676,39680],{"__ignoreMap":2924},[2928,39619,39620,39622,39624],{"class":2930,"line":2931},[2928,39621,2942],{"class":2941},[2928,39623,3871],{"class":2941},[2928,39625,3033],{"class":2953},[2928,39627,39628,39631,39633],{"class":2930,"line":2938},[2928,39629,39630],{"class":2970},"  generate",[2928,39632,2974],{"class":2953},[2928,39634,3033],{"class":2953},[2928,39636,39637,39640,39642],{"class":2930,"line":2967},[2928,39638,39639],{"class":2970},"    cache",[2928,39641,2974],{"class":2953},[2928,39643,3033],{"class":2953},[2928,39645,39646,39649,39651],{"class":2930,"line":2984},[2928,39647,39648],{"class":2970},"      ignore",[2928,39650,2974],{"class":2953},[2928,39652,16685],{"class":2949},[2928,39654,39655],{"class":2930,"line":2993},[2928,39656,39657],{"class":2934},"        \u002F\u002F When something changed in the docs folder, do not re-build via webpack\n",[2928,39659,39660,39662,39665],{"class":2930,"line":2999},[2928,39661,26045],{"class":2953},[2928,39663,39664],{"class":3156},"docs",[2928,39666,5269],{"class":2953},[2928,39668,39669],{"class":2930,"line":3005},[2928,39670,39671],{"class":2949},"      ]\n",[2928,39673,39674],{"class":2930,"line":3036},[2928,39675,4866],{"class":2953},[2928,39677,39678],{"class":2930,"line":3054},[2928,39679,3113],{"class":2953},[2928,39681,39682],{"class":2930,"line":3059},[2928,39683,3764],{"class":2953},[2896,39685,39686,39687,39689],{},"It is also possible to use a function for ",[2890,39688,13352],{}," option to override default ignore entries.",[4543,39691,39693],{"id":39692},"module-authors","Module Authors",[2896,39695,39696,39697,39700,39701,39703,39704,39707],{},"What if you are developing a nuxt module that is working with files that should not trigger a rebuild? The best example is for ",[2910,39698,28507],{"href":8140,"rel":39699},[2914]," module that reads markdown files from the repository. In this case, these files are used within a runtime module, which is the case when using ",[2890,39702,28507],{},", the module itself can tell nuxt to ignore these files for you already so you don't have to do anything! Module authors can use the new ",[2890,39705,39706],{},"generate:cache:ignore"," hook to do so:",[2918,39709,39711],{"className":26139,"code":39710,"language":26141,"meta":2924,"style":2924},"nuxt.hook('generate:cache:ignore', ignore => ignore.push('content'))\n",[2890,39712,39713],{"__ignoreMap":2924},[2928,39714,39715,39717,39719,39721,39723,39725,39727,39729,39731,39734,39736,39738,39740,39742,39744,39746,39748,39750],{"class":2930,"line":2931},[2928,39716,4326],{"class":2949},[2928,39718,3088],{"class":2953},[2928,39720,12795],{"class":2957},[2928,39722,2961],{"class":2949},[2928,39724,3197],{"class":2953},[2928,39726,39706],{"class":3156},[2928,39728,3197],{"class":2953},[2928,39730,3617],{"class":2953},[2928,39732,39733],{"class":3023}," ignore",[2928,39735,3030],{"class":2945},[2928,39737,39733],{"class":2949},[2928,39739,3088],{"class":2953},[2928,39741,12823],{"class":2957},[2928,39743,2961],{"class":2949},[2928,39745,3197],{"class":2953},[2928,39747,142],{"class":3156},[2928,39749,3197],{"class":2953},[2928,39751,7346],{"class":2949},[2885,39753,39755],{"id":39754},"how-it-works","How it works",[2896,39757,39758,39759,19526,39761,39763,39764,39767,39768,39771,39772,39774],{},"When using the new ",[2890,39760,781],{},[2890,39762,39489],{}," target, a snapshot including checksum of non-ignored project files as well as nuxt version and some other configuration will be written ",[2890,39765,39766],{},".nuxt\u002Fbuild.json",". In addition, we also move the build directory to ",[2890,39769,39770],{},"node_modules\u002F.cache\u002Fnuxt",". Because ",[2890,39773,166],{}," is cached by all major platforms (Netlify, Vercel, ...) and common CI\u002FCD scripts, this solution works out of the box without additional configuration.",[2896,39776,39777,39778,39780,39781,3088],{},"When ",[2890,39779,781],{}," is called subsequently, it will again create a checksum based on your project files and then compare it to the existing one inside ",[2890,39782,39783],{},"node_modules\u002F.cache\u002Fnuxt\u002Fbuild.json",[2896,39785,39786],{},"If they match, it means that nothing is changed that needs rebuild so we can directly start rendering pages.",[2896,39788,39789,39790,39792,39793,3088],{},"If a mismatch is detected, it means that a full rebuild would be necessary. You can also see what file caused rebuild by checking console logs. After the build, nuxt generate will save the new checksum inside ",[2890,39791,39766],{},". You can check full implementation ",[2910,39794,15608],{"href":39795,"rel":39796},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.js\u002Fpull\u002F7712",[2914],[4543,39798,39800],{"id":39799},"back-to-old-school-commands","Back to old school commands",[2896,39802,39803,39804,2892,39806,39809,39810,2892,39812,39815],{},"With Nuxt v2.13, we introduced ",[2890,39805,39341],{},[2890,39807,39808],{},"nuxt serve"," specially designed for the static target. With Nuxt v2.14, they are deprecated as ",[2890,39811,781],{},[2890,39813,39814],{},"nuxt start"," is smart to detect the target and build when necessary.",[2896,39817,39818],{},"Server target:",[4346,39820,39821,39826,39831],{},[3844,39822,39823,39825],{},[2890,39824,773],{}," = development server",[3844,39827,39828,39830],{},[2890,39829,761],{}," = build your application for production",[3844,39832,39833,39835],{},[2890,39834,39814],{}," = start the production server (use it for Node.js hosting like Heroku, DigitalOcean, etc)",[2896,39837,39838],{},"Static target:",[4346,39840,39841,39845,39852],{},[3844,39842,39843,39825],{},[2890,39844,773],{},[3844,39846,39847,39849,39850],{},[2890,39848,781],{}," = build if needed and statically export to ",[2890,39851,39587],{},[3844,39853,39854,39856,39857,39859],{},[2890,39855,39814],{}," = serve the ",[2890,39858,39587],{}," directory like your static hosting would do (Netlify, Vercel, Surge, etc), great for testing before deploying",[2885,39861,39863],{"id":39862},"what-to-do-next","What to do next",[4346,39865,39866,39874,39881,39887],{},[3844,39867,39868,39869],{},"Upgrade your project to ",[2910,39870,39873],{"href":39871,"rel":39872},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.js\u002Freleases\u002Ftag\u002Fv2.14.0",[2914],"nuxt@2.14.0",[3844,39875,39876,39877,19397,39879],{},"Use ",[2890,39878,781],{},[2890,39880,39341],{},[3844,39882,39876,39883,19397,39885],{},[2890,39884,39814],{},[2890,39886,39808],{},[3844,39888,39889],{},"Enjoy fast deployments 🤙",[4489,39891,39892],{},"html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}",{"title":2924,"searchDepth":2938,"depth":2938,"links":39894},[39895,39896,39897,39898,39902,39905],{"id":34670,"depth":2938,"text":19},{"id":39348,"depth":2938,"text":39349},{"id":39380,"depth":2938,"text":39381},{"id":39441,"depth":2938,"text":39442,"children":39899},[39900,39901],{"id":39563,"depth":2967,"text":39564},{"id":39692,"depth":2967,"text":39693},{"id":39754,"depth":2938,"text":39755,"children":39903},[39904],{"id":39799,"depth":2967,"text":39800},{"id":39862,"depth":2938,"text":39863},"2020-07-27","With Nuxt version 2.13, the full-static mode has been introduced. In addition, a new command nuxt export was added to pre-render your pages without triggering a webpack build with the goal to separate the rendering and build process. The only issue was that most Nuxt users weren't able to unleash the full potential of the separation... until now.","\u002Fassets\u002Fblog\u002Fnuxt-static-improvements.png",{},{"title":2849,"description":39907},"5MdnScMtYI2PAL0YhDI-tIKZmQc75RKF1G3x04P6jOg",{"id":39913,"title":2837,"authors":39914,"body":39918,"category":4517,"date":40534,"description":40535,"draft":108,"extension":4520,"image":40536,"meta":40537,"navigation":1196,"path":2838,"seo":40538,"stem":2839,"tags":6,"__hash__":40539},"blog\u002Fblog\u002F5.going-full-static.md",[39915],{"name":39916,"avatar":39917,"to":11332,"twitter":24560},"Sebastien Chopin",{"src":6224},{"type":2882,"value":39919,"toc":40515},[39920,39924,39948,39956,39968,39976,39980,39992,39996,40010,40013,40068,40077,40083,40091,40185,40198,40204,40235,40242,40248,40258,40262,40288,40295,40299,40302,40316,40324,40328,40336,40341,40354,40357,40360,40363,40425,40435,40443,40445,40451,40500,40502,40512],[2885,39921,39923],{"id":39922},"too-long-to-read","Too long to read",[3841,39925,39926,39932,39940,39945],{},[3844,39927,39928,39929],{},"Upgrade nuxt to ",[2890,39930,39931],{},"2.14.0",[3844,39933,39934,39935,14018,39938],{},"Set ",[2890,39936,39937],{},"target: 'static'",[2890,39939,39493],{},[3844,39941,39942,39943],{},"Run ",[2890,39944,781],{},[3844,39946,39947],{},"That's it ✨",[2896,39949,39950],{},[10484,39951,39952,39953,39955],{},"Bonus: you can run ",[2890,39954,39814],{}," to run a local server serving your generated static application.",[5478,39957,39959,39962,39965],{":autoplay":4902,":controls":4902,"autoPlay":1196,"poster":39958},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1588095794\u002Fnuxt-full-static_rnnbvm.jpg",[5486,39960],{"src":39961,"type":5489},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1588095794\u002Fnuxt-full-static_rnnbvm.webm",[5486,39963],{"src":39964,"type":5493},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1588095794\u002Fnuxt-full-static_rnnbvm.mp4",[5486,39966],{"src":39967,"type":5497},"https:\u002F\u002Fres.cloudinary.com\u002Fnuxt\u002Fvideo\u002Fupload\u002Fv1588095794\u002Fnuxt-full-static_rnnbvm.ogg",[2896,39969,39970,39971,39973,39974,3088],{},"Note: in this video we are using ",[2890,39972,39341],{}," which has been deprecated in favor of ",[2890,39975,781],{},[2885,39977,39979],{"id":39978},"history","History",[2896,39981,39982,39983,39985,39986,39991],{},"Nuxt had the static generation feature with ",[2890,39984,781],{}," since ",[2910,39987,39990],{"href":39988,"rel":39989},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.js\u002Freleases\u002Ftag\u002Fv0.3.2",[2914],"v0.3.2"," (November 2016), since then we have improved it in multiple ways but never achieved full static generation. Today I am excited to announce that full static export is now possible with Nuxt 2.13.",[2885,39993,39995],{"id":39994},"current-issues","Current issues",[2896,39997,39998,40000,40001,2892,40003,40005,40006,40009],{},[2890,39999,781],{}," is mostly pre-rendering, when you navigate client-side, ",[2890,40002,30041],{},[2890,40004,33452],{}," are called, ",[10484,40007,40008],{},"making a request to your API",". A lot of users asked to support a \"full static\" mode, meaning to not call these 2 hooks on navigation, since the next page has been already pre-rendered.",[2896,40011,40012],{},"Also, the developer experience is not optimal:",[4346,40014,40015,40027,40038,40051,40060],{},[3844,40016,40017,40018,4913,40021,40024,40025],{},"You have access to ",[2890,40019,40020],{},"req",[2890,40022,40023],{},"res"," on SSR but not when running ",[2890,40026,781],{},[3844,40028,40029,39486,40032,40034,40035,40037],{},[2890,40030,40031],{},"process.static",[2890,40033,4902],{}," only when running ",[2890,40036,781],{},", making it slow to develop Nuxt modules or plugins for static generation",[3844,40039,40040,40041,40046,40047,40050],{},"You have to specify all your ",[2910,40042,40045],{"href":40043,"rel":40044},"https:\u002F\u002Fv2.nuxt.com\u002Fdocs\u002Ffeatures\u002Ffile-system-routing#dynamic-routes",[2914],"dynamic routes"," in ",[2890,40048,40049],{},"generate.routes",", making it harder since you don't have access to nuxt modules there.",[3844,40052,40053,40054,40059],{},"You cannot test the ",[2910,40055,40058],{"href":40056,"rel":40057},"https:\u002F\u002Fv2.nuxt.com\u002Fdocs\u002Fconcepts\u002Fstatic-site-generation#spa-fallback",[2914],"SPA fallback"," in development, the fallback is a client-only version of your Nuxt application that loads when hitting a 404 page",[3844,40061,40062,40064,40065,40067],{},[2890,40063,781],{}," runs ",[2890,40066,761],{}," by default, making it slower to generate your website if only your content changed",[2896,40069,40070,40071,40076],{},"Note that it was possible to have full static support with ",[2910,40072,40075],{"href":40073,"rel":40074},"https:\u002F\u002Fgithub.com\u002FDreaMinder\u002Fnuxt-payload-extractor",[2914],"nuxt-payload-extractor"," module but it was more verbose to use and had limitations.",[2885,40078,40080,40081],{"id":40079},"new-config-option-target","New config option: ",[2890,40082,39485],{},[2896,40084,40085,40086,40088,40089,2974],{},"To improve the user experience as well as telling Nuxt that you want to export your application to static hosting, we are introducing a ",[2890,40087,39485],{}," option in your ",[2890,40090,39493],{},[2918,40092,40094],{"className":3129,"code":40093,"language":3132,"meta":2924,"style":2924},"\u003Cscript setup>\n  import { ref, computed } from '#imports'\n\n  const count = ref(1)\n  const double = computed(() => count.value * 2)\n\u003C\u002Fscript>\n",[2890,40095,40096,40106,40129,40133,40149,40177],{"__ignoreMap":2924},[2928,40097,40098,40100,40102,40104],{"class":2930,"line":2931},[2928,40099,3139],{"class":2953},[2928,40101,3142],{"class":2970},[2928,40103,3145],{"class":2945},[2928,40105,3161],{"class":2953},[2928,40107,40108,40111,40113,40115,40117,40119,40121,40123,40125,40127],{"class":2930,"line":2938},[2928,40109,40110],{"class":2941},"  import",[2928,40112,3174],{"class":2953},[2928,40114,9306],{"class":2949},[2928,40116,3617],{"class":2953},[2928,40118,29756],{"class":2949},[2928,40120,3702],{"class":2953},[2928,40122,5408],{"class":2941},[2928,40124,3329],{"class":2953},[2928,40126,35288],{"class":3156},[2928,40128,5269],{"class":2953},[2928,40130,40131],{"class":2930,"line":2967},[2928,40132,2996],{"emptyLinePlaceholder":1196},[2928,40134,40135,40137,40139,40141,40143,40145,40147],{"class":2930,"line":2984},[2928,40136,3039],{"class":2945},[2928,40138,4083],{"class":2949},[2928,40140,2954],{"class":2953},[2928,40142,9306],{"class":2957},[2928,40144,2961],{"class":2949},[2928,40146,37849],{"class":3988},[2928,40148,2990],{"class":2949},[2928,40150,40151,40153,40155,40157,40159,40161,40163,40165,40167,40169,40171,40173,40175],{"class":2930,"line":2993},[2928,40152,3039],{"class":2945},[2928,40154,29751],{"class":2949},[2928,40156,2954],{"class":2953},[2928,40158,29756],{"class":2957},[2928,40160,2961],{"class":2949},[2928,40162,3647],{"class":2953},[2928,40164,3030],{"class":2945},[2928,40166,29765],{"class":2949},[2928,40168,3088],{"class":2953},[2928,40170,4032],{"class":2949},[2928,40172,29772],{"class":2953},[2928,40174,7428],{"class":3988},[2928,40176,2990],{"class":2949},[2928,40178,40179,40181,40183],{"class":2930,"line":2999},[2928,40180,3209],{"class":2953},[2928,40182,3142],{"class":2970},[2928,40184,3161],{"class":2953},[4891,40186,40187],{},[2896,40188,40189,40190,40193,40194,40197],{},"Full static doesn't work with ",[2890,40191,40192],{},"ssr: 'false'"," (which is the same as the deprecated ",[2890,40195,40196],{},"mode: 'spa'",") as this is used for client-side rendering only (Single Page Applications).",[2896,40199,40200,40201,40203],{},"Running ",[2890,40202,773],{}," with the static target will improve the developer experience:",[4346,40205,40206,40214,40220,40229],{},[3844,40207,40208,40209,33915,40211,40213],{},"Remove ",[2890,40210,40020],{},[2890,40212,40023],{}," from context",[3844,40215,40216,40217,3027],{},"Fallback to client-side rendering on 404, errors and redirects (see ",[2910,40218,40058],{"href":40056,"rel":40219},[2914],[3844,40221,40222,40225,40226,40228],{},[2890,40223,40224],{},"$route.query"," will always be equal to ",[2890,40227,30575],{}," on server-side rendering",[3844,40230,40231,39486,40233],{},[2890,40232,40031],{},[2890,40234,4902],{},[2896,40236,40237,40238,40241],{},"We are also exposing ",[2890,40239,40240],{},"process.target"," for modules author to add logic depending on the user target.",[2885,40243,40245,40246],{"id":40244},"smarter-nuxt-generate","Smarter ",[2890,40247,781],{},[2896,40249,40250,40251,40254,40255,40257],{},"Now with ",[2890,40252,40253],{},"v2.14.0",", you can use ",[2890,40256,781],{},", it will smartly know if it has to build or not.",[4543,40259,40261],{"id":40260},"crazy-fast-static-applications","Crazy fast static applications",[2896,40263,40264,19526,40266,40268,40269,2892,40271,40273,40274,10201,40276,40279,40280,40283,40284,40287],{},[2890,40265,781],{},[2890,40267,39937],{}," will pre-render all your pages to HTML and save a payload file in order to mock ",[2890,40270,30041],{},[2890,40272,33452],{}," on client-side navigation, this means ",[2900,40275,23287],{},[2900,40277,40278],{},"more HTTP calls to your API on client-side navigation."," By extracting the page payload to a js file, ",[2900,40281,40282],{},"it also reduces the HTML size"," served as well as preloading it (from the ",[40285,40286],"link",{}," in the header) for optimal performance.",[2896,40289,40290,40291,40294],{},"We also improved the ",[2910,40292,40293],{"href":2842},"smart prefetching"," when doing full static, it will also fetch the payloads, making navigation instant 👀",[4543,40296,40298],{"id":40297},"crawler-integrated","Crawler integrated",[2896,40300,40301],{},"On top of that, it also has a crawler inside, detecting every relative link and generating it:",[2896,40303,40304,40305,40310,40311,40315],{},"If you want to exclude a bunch of routes, use the ",[2910,40306,40309],{"href":40307,"rel":40308},"https:\u002F\u002Fv2.nuxt.com\u002Fdocs\u002Fconfiguration-glossary\u002Fconfiguration-generate#exclude",[2914],"generate.exclude",". You can keep using ",[2910,40312,40049],{"href":40313,"rel":40314},"https:\u002F\u002Fv2.nuxt.com\u002Fdocs\u002Fconfiguration-glossary\u002Fconfiguration-generate#routes",[2914]," to add extra routes that the crawler could not detect.",[2896,40317,40318,40319,14018,40322],{},"To disable the crawler, set ",[2890,40320,40321],{},"generate.crawler: false",[2890,40323,39493],{},[4543,40325,40327],{"id":40326},"faster-re-deploy","Faster re-deploy",[2896,40329,40330,40331,2892,40333,40335],{},"By separating ",[2890,40332,761],{},[2890,40334,39341],{},", we are opening a new range of improvements: pre-render your pages only if you content has changed, this means: no webpack build → faster re-deployments.",[2885,40337,40245,40339],{"id":40338},"smarter-nuxt-start",[2890,40340,39814],{},[2896,40342,40343,40344,40346,40347,40349,40350,3088],{},"Once you statically generated your Nuxt app into ",[2890,40345,39587],{},", use ",[2890,40348,39814],{}," to start a production HTTP server and serve your static app, supporting ",[2910,40351,40353],{"href":40056,"rel":40352},[2914],"SPA Fallback",[2896,40355,40356],{},"This command is perfect to locally test your static application before pushing to your favorite static hosting provider.",[2885,40358,40359],{"id":27488},"Preview mode",[2896,40361,40362],{},"We do support live preview out of the box to keep calling your API:",[2918,40364,40367],{"className":26139,"code":40365,"filename":40366,"language":26141,"meta":2924,"style":2924},"export default async function ({ query, enablePreview }) {\n  if (query.preview) {\n    enablePreview()\n  }\n}\n","plugins\u002Fpreview.client.js",[2890,40368,40369,40393,40410,40417,40421],{"__ignoreMap":2924},[2928,40370,40371,40373,40375,40377,40379,40382,40384,40386,40389,40391],{"class":2930,"line":2931},[2928,40372,2942],{"class":2941},[2928,40374,3871],{"class":2941},[2928,40376,10800],{"class":2945},[2928,40378,3641],{"class":2945},[2928,40380,40381],{"class":2953}," ({",[2928,40383,8366],{"class":3023},[2928,40385,3617],{"class":2953},[2928,40387,40388],{"class":3023}," enablePreview",[2928,40390,6682],{"class":2953},[2928,40392,3033],{"class":2953},[2928,40394,40395,40397,40399,40401,40403,40406,40408],{"class":2930,"line":2938},[2928,40396,5104],{"class":2941},[2928,40398,3248],{"class":2970},[2928,40400,8394],{"class":2949},[2928,40402,3088],{"class":2953},[2928,40404,40405],{"class":2949},"preview",[2928,40407,3737],{"class":2970},[2928,40409,2964],{"class":2953},[2928,40411,40412,40415],{"class":2930,"line":2967},[2928,40413,40414],{"class":2957},"    enablePreview",[2928,40416,3051],{"class":2970},[2928,40418,40419],{"class":2930,"line":2984},[2928,40420,3113],{"class":2953},[2928,40422,40423],{"class":2930,"line":2993},[2928,40424,3764],{"class":2953},[2896,40426,40427,40428,4309,40431,2892,40433,2916],{},"It will automatically refresh the page data (calling ",[2890,40429,40430],{},"nuxtServerInit",[2890,40432,30041],{},[2890,40434,33452],{},[2896,40436,40437,40438,2892,40440,40442],{},"When the preview mode is activated, ",[2890,40439,30041],{},[2890,40441,33452],{}," original methods will be called.",[2885,40444,746],{"id":33819},[2896,40446,40447,40448,40450],{},"Depending of the ",[2890,40449,39485],{},", you can run these commands.",[4346,40452,40453,40474],{},[3844,40454,40455,40457],{},[2890,40456,185],{},[4346,40458,40459,40464,40469],{},[3844,40460,40461,40463],{},[2890,40462,773],{},": Start the development server",[3844,40465,40466,40468],{},[2890,40467,761],{},": Bundle your Nuxt application for production",[3844,40470,40471,40473],{},[2890,40472,39814],{},": Start the production server",[3844,40475,40476,40478],{},[2890,40477,39489],{},[4346,40479,40480,40485,40493],{},[3844,40481,40482,40484],{},[2890,40483,773],{},": Start the development server (static aware)",[3844,40486,40487,40489,40490,40492],{},[2890,40488,781],{},": Bundle your Nuxt application for production if needed (static aware) and export your application to static HTML in ",[2890,40491,39587],{}," directory",[3844,40494,40495,40497,40498],{},[2890,40496,39814],{},": Serve your production application from ",[2890,40499,39587],{},[4543,40501,39863],{"id":39862},[3233,40503,40505],{"target":4478,"to":40504},"https:\u002F\u002Fv2.nuxt.com\u002Ftutorials\u002Fmoving-from-nuxtjs-dotenv-to-runtime-config",[2896,40506,40507,40508,40511],{},"Learn more about how to move from ",[2890,40509,40510],{},"@nuxtjs\u002Fdotenv"," to runtime config.",[4489,40513,40514],{},"html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sYRBq, html code.shiki .sYRBq{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":2924,"searchDepth":2938,"depth":2938,"links":40516},[40517,40518,40519,40520,40522,40528,40530,40531],{"id":39922,"depth":2938,"text":39923},{"id":39978,"depth":2938,"text":39979},{"id":39994,"depth":2938,"text":39995},{"id":40079,"depth":2938,"text":40521},"New config option: target",{"id":40244,"depth":2938,"text":40523,"children":40524},"Smarter nuxt generate",[40525,40526,40527],{"id":40260,"depth":2967,"text":40261},{"id":40297,"depth":2967,"text":40298},{"id":40326,"depth":2967,"text":40327},{"id":40338,"depth":2938,"text":40529},"Smarter nuxt start",{"id":27488,"depth":2938,"text":40359},{"id":33819,"depth":2938,"text":746,"children":40532},[40533],{"id":39862,"depth":2967,"text":39863},"2020-06-18","Long awaited features for JAMstack fans has been shipped in v2.13: full static export, improved smart prefetching, integrated crawler, faster re-deploy, built-in web server and new target option for config ⚡️","\u002Fassets\u002Fblog\u002Fgoing-full-static.png",{},{"title":2837,"description":40535},"_J5pwBEjPIiHhPURlZSy25jZxW_jm6psFRLLiOT2G8o",{"id":40541,"title":2845,"authors":40542,"body":40549,"category":4517,"date":42148,"description":42149,"draft":108,"extension":4520,"image":42150,"meta":42151,"navigation":1196,"path":2846,"seo":42152,"stem":2847,"tags":6,"__hash__":42153},"blog\u002Fblog\u002F7.understanding-how-fetch-works-in-nuxt-2-12.md",[40543],{"name":40544,"avatar":40545,"to":40547,"twitter":40548},"Krutie Patel",{"src":40546},"https:\u002F\u002Fgithub.com\u002FKrutie.png","https:\u002F\u002Fx.com\u002FKrutiePatel","KrutiePatel",{"type":2882,"value":40550,"toc":42117},[40551,40557,40560,40564,40581,40587,40595,40639,40642,40646,40652,40659,40663,40686,40689,40693,40699,40704,40718,40722,40727,40730,40736,40740,40743,40746,40750,40753,40779,40792,40794,40800,40807,40813,40819,40822,40845,40848,40965,40980,41206,41212,41216,41219,41257,41313,41317,41328,41339,41352,41400,41408,41413,41440,41449,41458,41541,41545,41555,41566,41569,41588,41695,41699,41718,41835,41839,41845,41853,41861,41874,41881,41892,41900,41909,41920,41958,41966,42008,42014,42019,42024,42030,42037,42045,42054,42058,42067,42077,42080,42087,42100,42102,42105,42108,42114],[2896,40552,40553,40554,40556],{},"Nuxt introduces a new ",[2890,40555,33452],{}," with the latest release of version 2.12. Fetch provides a brand new way to bring data into Nuxt applications.",[2896,40558,40559],{},"In this post, we will explore different features of the fetch hook and try to understand how it works.",[2885,40561,40563],{"id":40562},"fetch-hook-and-nuxt-lifecycle","Fetch Hook and Nuxt Lifecycle",[2896,40565,40566,40567,40569,40570,40573,40574,40577,40578,40580],{},"In terms of Nuxt lifecycle hooks, ",[2890,40568,33452],{}," sits within Vue lifecycle after ",[2890,40571,40572],{},"created"," hook. As we already know that, all Vue lifecycle hooks are called with their ",[2890,40575,40576],{},"this"," context. The same applies to ",[2890,40579,33452],{}," hook as well.",[2896,40582,40583],{},[4183,40584],{"alt":40585,"src":40586},"New fetch in Nuxt lifecycle","\u002Fassets\u002Fblog\u002Fnew-fetch-lifecycle-hooks.png",[2896,40588,40589,40590,40592,40593,3088],{},"Fetch hook is called after the component instance is created on the server-side. That makes ",[2890,40591,40576],{}," context available inside the ",[2890,40594,33452],{},[2918,40596,40598],{"className":26139,"code":40597,"language":26141,"meta":2924,"style":2924},"export default {\n  fetch() {\n    console.log(this)\n  }\n}\n",[2890,40599,40600,40608,40617,40631,40635],{"__ignoreMap":2924},[2928,40601,40602,40604,40606],{"class":2930,"line":2931},[2928,40603,2942],{"class":2941},[2928,40605,3871],{"class":2941},[2928,40607,3033],{"class":2953},[2928,40609,40610,40613,40615],{"class":2930,"line":2938},[2928,40611,40612],{"class":2970},"  fetch",[2928,40614,3647],{"class":2953},[2928,40616,3033],{"class":2953},[2928,40618,40619,40621,40623,40625,40627,40629],{"class":2930,"line":2967},[2928,40620,13236],{"class":2949},[2928,40622,3088],{"class":2953},[2928,40624,9254],{"class":2957},[2928,40626,2961],{"class":2970},[2928,40628,40576],{"class":2953},[2928,40630,2990],{"class":2970},[2928,40632,40633],{"class":2930,"line":2984},[2928,40634,3113],{"class":2953},[2928,40636,40637],{"class":2930,"line":2993},[2928,40638,3764],{"class":2953},[2896,40640,40641],{},"Let’s see what this could mean for page components.",[4543,40643,40645],{"id":40644},"page-components","Page Components",[2896,40647,40648,40649,40651],{},"With the help of ",[2890,40650,40576],{}," context, fetch is able to mutate component’s data directly. It means we can set the component’s local data without having to dispatch Vuex store action or committing mutation from the page component.",[2896,40653,40654,40655,40658],{},"As a result, Vuex becomes optional, but not impossible. We can still use ",[2890,40656,40657],{},"this.$store"," as usual to access Vuex store if required.",[2885,40660,40662],{"id":40661},"availability-of-fetch-hook","Availability of fetch hook",[2896,40664,30053,40665,40667,40668,40671,40672,40675,40676,40678,40679,2892,40682,40685],{},[2890,40666,33452],{},", we can prefetch the data asynchronously ",[2900,40669,40670],{},"in any Vue components",". It means, other than page components found in ",[2890,40673,40674],{},"\u002Fpages"," directory, every other ",[2890,40677,26124],{}," components found in ",[2890,40680,40681],{},"\u002Flayouts",[2890,40683,40684],{},"\u002Fcomponents"," directories can also benefit from the fetch hook.",[2896,40687,40688],{},"Let's see what this could mean for layout and building-block components.",[4543,40690,40692],{"id":40691},"layout-components","Layout Components",[2896,40694,40695,40696,40698],{},"Using new ",[2890,40697,33452],{},", now we can make API calls directly from the layout components. This was impossible prior to the release of v2.12.",[2896,40700,40701],{},[2900,40702,40703],{},"Possible use cases",[4346,40705,40706,40709,40712],{},[3844,40707,40708],{},"Fetch config data from the back-end in Nuxt layouts to generate footer and navbar dynamically",[3844,40710,40711],{},"Fetch user related data (i.e. user profile, shopping-cart item count) in the navbar",[3844,40713,40714,40715],{},"Fetch site relevant data on ",[2890,40716,40717],{},"layouts\u002Ferror.vue",[4543,40719,40721],{"id":40720},"building-block-childnested-components","Building-block (Child\u002FNested) Components",[2896,40723,30053,40724,40726],{},[2890,40725,33452],{}," hook available in child components as well, we can off-load some of the data-fetching tasks from page-level components, and delegate them over to nested components. This was also impossible prior to the release of v2.12.",[2896,40728,40729],{},"This reduces the responsibility of route-level components to a great extent.",[2896,40731,40732,40735],{},[2900,40733,40734],{},"Possible use case -"," We can still pass props to child components, but if the child components need to have their own data-fetching logic, now they can!",[2885,40737,40739],{"id":40738},"call-order-of-multiple-fetch-hooks","Call order of multiple fetch hooks",[2896,40741,40742],{},"Since each component can have its own data-fetching logic, you may ask what would be the order in which each of them are called?",[2896,40744,40745],{},"Fetch hook is called on server-side once (on the first request to the Nuxt app) and then on client-side when navigating to further routes. But since we can define one fetch hook for each component, fetch hooks are called in sequence of their hierarchy.",[4543,40747,40749],{"id":40748},"disabling-fetch-on-server-side","Disabling fetch on server-side",[2896,40751,40752],{},"In addition, we can even disable fetch on the server-side if required.",[2918,40754,40756],{"className":26139,"code":40755,"language":26141,"meta":2924,"style":2924},"export default {\n  fetchOnServer: false\n}\n",[2890,40757,40758,40766,40775],{"__ignoreMap":2924},[2928,40759,40760,40762,40764],{"class":2930,"line":2931},[2928,40761,2942],{"class":2941},[2928,40763,3871],{"class":2941},[2928,40765,3033],{"class":2953},[2928,40767,40768,40771,40773],{"class":2930,"line":2938},[2928,40769,40770],{"class":2970},"  fetchOnServer",[2928,40772,2974],{"class":2953},[2928,40774,5979],{"class":2977},[2928,40776,40777],{"class":2930,"line":2967},[2928,40778,3764],{"class":2953},[2896,40780,40781,40782,40785,40786,6954,40789,40791],{},"And this way, the fetch hook will only be called on client-side. When ",[2890,40783,40784],{},"fetchOnServer"," is set to false, ",[2890,40787,40788],{},"$fetchState.pending",[2890,40790,4902],{}," when the component is rendered on server-side.",[2885,40793,74],{"id":37937},[2896,40795,40796,40797,40799],{},"New ",[2890,40798,33452],{}," handles error at component level. Let’s see how.",[2896,40801,40802,40803,40806],{},"Because we’re fetching data asynchronously, the new fetch() provides a ",[2890,40804,40805],{},"$fetchState"," object to check whether the request has finished and progressed successfully.",[2896,40808,40809,40810,40812],{},"Below is what the ",[2890,40811,40805],{}," object looks like.",[2918,40814,40817],{"className":40815,"code":40816,"language":6354},[6352],"$fetchState = {\n  pending: true | false,\n  error: null | {},\n  timestamp: Integer\n};\n",[2890,40818,40816],{"__ignoreMap":2924},[2896,40820,40821],{},"We have three keys,",[3841,40823,40824,40830,40836],{},[3844,40825,40826,40829],{},[2900,40827,40828],{},"Pending -"," lets you display a placeholder when fetch is being called on client-side",[3844,40831,40832,40835],{},[2900,40833,40834],{},"Error -"," lets you show an error message",[3844,40837,40838,40841,40842],{},[2900,40839,40840],{},"Timestamp -"," shows timestamp of the last fetch which is useful for caching with ",[2890,40843,40844],{},"keep-alive",[2896,40846,40847],{},"These keys are then used directly in the template area of the component to show relevant placeholders during the process of fetching data from the API.",[2918,40849,40851],{"className":12274,"code":40850,"language":12276,"meta":2924,"style":2924},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp v-if=\"$fetchState.pending\">Fetching posts...\u003C\u002Fp>\n    \u003Cp v-else-if=\"$fetchState.error\">Error while fetching posts\u003C\u002Fp>\n    \u003Cul v-else>\n      …\n    \u003C\u002Ful>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[2890,40852,40853,40861,40869,40896,40925,40936,40941,40949,40957],{"__ignoreMap":2924},[2928,40854,40855,40857,40859],{"class":2930,"line":2931},[2928,40856,3139],{"class":2953},[2928,40858,3521],{"class":2970},[2928,40860,3161],{"class":2953},[2928,40862,40863,40865,40867],{"class":2930,"line":2938},[2928,40864,3528],{"class":2953},[2928,40866,11471],{"class":2970},[2928,40868,3161],{"class":2953},[2928,40870,40871,40873,40875,40877,40879,40881,40883,40885,40887,40890,40892,40894],{"class":2930,"line":2967},[2928,40872,3557],{"class":2953},[2928,40874,2896],{"class":2970},[2928,40876,9458],{"class":2945},[2928,40878,2954],{"class":2953},[2928,40880,3153],{"class":2953},[2928,40882,40788],{"class":3156},[2928,40884,3153],{"class":2953},[2928,40886,9470],{"class":2953},[2928,40888,40889],{"class":2949},"Fetching posts...",[2928,40891,3209],{"class":2953},[2928,40893,2896],{"class":2970},[2928,40895,3161],{"class":2953},[2928,40897,40898,40900,40902,40905,40907,40909,40912,40914,40916,40919,40921,40923],{"class":2930,"line":2984},[2928,40899,3557],{"class":2953},[2928,40901,2896],{"class":2970},[2928,40903,40904],{"class":2945}," v-else-if",[2928,40906,2954],{"class":2953},[2928,40908,3153],{"class":2953},[2928,40910,40911],{"class":3156},"$fetchState.error",[2928,40913,3153],{"class":2953},[2928,40915,9470],{"class":2953},[2928,40917,40918],{"class":2949},"Error while fetching posts",[2928,40920,3209],{"class":2953},[2928,40922,2896],{"class":2970},[2928,40924,3161],{"class":2953},[2928,40926,40927,40929,40931,40934],{"class":2930,"line":2993},[2928,40928,3557],{"class":2953},[2928,40930,4346],{"class":2970},[2928,40932,40933],{"class":2945}," v-else",[2928,40935,3161],{"class":2953},[2928,40937,40938],{"class":2930,"line":2999},[2928,40939,40940],{"class":2949},"      …\n",[2928,40942,40943,40945,40947],{"class":2930,"line":3005},[2928,40944,9484],{"class":2953},[2928,40946,4346],{"class":2970},[2928,40948,3161],{"class":2953},[2928,40950,40951,40953,40955],{"class":2930,"line":3036},[2928,40952,3567],{"class":2953},[2928,40954,11471],{"class":2970},[2928,40956,3161],{"class":2953},[2928,40958,40959,40961,40963],{"class":2930,"line":3054},[2928,40960,3209],{"class":2953},[2928,40962,3521],{"class":2970},[2928,40964,3161],{"class":2953},[2896,40966,40967,40968,40971,40972,40975,40976,40979],{},"When error occurs at ",[2900,40969,40970],{},"component-level",", we can set HTTP status code on server-side by checking ",[2890,40973,40974],{},"process.server"," in fetch hook and follow it up with ",[2890,40977,40978],{},"throw new Error()"," statement.",[2918,40981,40983],{"className":26139,"code":40982,"language":26141,"meta":2924,"style":2924},"async fetch() {\n  const post = await fetch(`https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts\u002F${this.$route.params.id}`)\n                     .then((res) => res.json())\n\n  if (post.id === this.$route.params.id) {\n      this.post = post\n    } else {\n      \u002F\u002F set status code on server and\n      if (process.server) {\n        this.$nuxt.context.res.statusCode = 404\n      }\n      \u002F\u002F use throw new Error()\n      throw new Error('Post not found')\n    }\n}\n",[2890,40984,40985,40996,41037,41064,41068,41099,41111,41120,41125,41143,41168,41172,41177,41198,41202],{"__ignoreMap":2924},[2928,40986,40987,40990,40992,40994],{"class":2930,"line":2931},[2928,40988,40989],{"class":2949},"async ",[2928,40991,33452],{"class":2957},[2928,40993,10328],{"class":2949},[2928,40995,2964],{"class":2953},[2928,40997,40998,41000,41003,41005,41007,41010,41012,41014,41017,41019,41022,41025,41027,41029,41031,41033,41035],{"class":2930,"line":2938},[2928,40999,3039],{"class":2945},[2928,41001,41002],{"class":2949}," post",[2928,41004,3045],{"class":2953},[2928,41006,3189],{"class":2941},[2928,41008,41009],{"class":2957}," fetch",[2928,41011,2961],{"class":2970},[2928,41013,6555],{"class":2953},[2928,41015,41016],{"class":3156},"https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts\u002F",[2928,41018,6880],{"class":2953},[2928,41020,41021],{"class":2953},"this.",[2928,41023,41024],{"class":2949},"$route",[2928,41026,3088],{"class":2953},[2928,41028,10837],{"class":2949},[2928,41030,3088],{"class":2953},[2928,41032,16010],{"class":2949},[2928,41034,10845],{"class":2953},[2928,41036,2990],{"class":2970},[2928,41038,41039,41042,41044,41046,41048,41050,41052,41054,41057,41059,41061],{"class":2930,"line":2967},[2928,41040,41041],{"class":2953},"                     .",[2928,41043,5574],{"class":2957},[2928,41045,2961],{"class":2970},[2928,41047,2961],{"class":2953},[2928,41049,40023],{"class":3023},[2928,41051,3027],{"class":2953},[2928,41053,3030],{"class":2945},[2928,41055,41056],{"class":2949}," res",[2928,41058,3088],{"class":2953},[2928,41060,12436],{"class":2957},[2928,41062,41063],{"class":2970},"())\n",[2928,41065,41066],{"class":2930,"line":2984},[2928,41067,2996],{"emptyLinePlaceholder":1196},[2928,41069,41070,41072,41074,41076,41078,41080,41082,41085,41087,41089,41091,41093,41095,41097],{"class":2930,"line":2993},[2928,41071,5104],{"class":2941},[2928,41073,3248],{"class":2970},[2928,41075,10793],{"class":2949},[2928,41077,3088],{"class":2953},[2928,41079,16010],{"class":2949},[2928,41081,7687],{"class":2953},[2928,41083,41084],{"class":2953}," this.",[2928,41086,41024],{"class":2949},[2928,41088,3088],{"class":2953},[2928,41090,10837],{"class":2949},[2928,41092,3088],{"class":2953},[2928,41094,16010],{"class":2949},[2928,41096,3737],{"class":2970},[2928,41098,2964],{"class":2953},[2928,41100,41101,41104,41106,41108],{"class":2930,"line":2999},[2928,41102,41103],{"class":2953},"      this.",[2928,41105,10793],{"class":2949},[2928,41107,3045],{"class":2953},[2928,41109,41110],{"class":2949}," post\n",[2928,41112,41113,41115,41118],{"class":2930,"line":3005},[2928,41114,6895],{"class":2953},[2928,41116,41117],{"class":2941}," else",[2928,41119,3033],{"class":2953},[2928,41121,41122],{"class":2930,"line":3036},[2928,41123,41124],{"class":2934},"      \u002F\u002F set status code on server and\n",[2928,41126,41127,41130,41132,41135,41137,41139,41141],{"class":2930,"line":3054},[2928,41128,41129],{"class":2941},"      if",[2928,41131,3248],{"class":2970},[2928,41133,41134],{"class":2949},"process",[2928,41136,3088],{"class":2953},[2928,41138,185],{"class":2949},[2928,41140,3737],{"class":2970},[2928,41142,2964],{"class":2953},[2928,41144,41145,41148,41151,41153,41155,41157,41159,41161,41163,41165],{"class":2930,"line":3059},[2928,41146,41147],{"class":2953},"        this.",[2928,41149,41150],{"class":2949},"$nuxt",[2928,41152,3088],{"class":2953},[2928,41154,16475],{"class":2949},[2928,41156,3088],{"class":2953},[2928,41158,40023],{"class":2949},[2928,41160,3088],{"class":2953},[2928,41162,5752],{"class":2949},[2928,41164,3045],{"class":2953},[2928,41166,41167],{"class":3988}," 404\n",[2928,41169,41170],{"class":2930,"line":3067},[2928,41171,5989],{"class":2953},[2928,41173,41174],{"class":2930,"line":3077},[2928,41175,41176],{"class":2934},"      \u002F\u002F use throw new Error()\n",[2928,41178,41179,41182,41184,41187,41189,41191,41194,41196],{"class":2930,"line":3110},[2928,41180,41181],{"class":2941},"      throw",[2928,41183,10425],{"class":2953},[2928,41185,41186],{"class":2957}," Error",[2928,41188,2961],{"class":2970},[2928,41190,3197],{"class":2953},[2928,41192,41193],{"class":3156},"Post not found",[2928,41195,3197],{"class":2953},[2928,41197,2990],{"class":2970},[2928,41199,41200],{"class":2930,"line":3116},[2928,41201,4866],{"class":2953},[2928,41203,41204],{"class":2930,"line":6687},[2928,41205,3764],{"class":2953},[2896,41207,41208,41209,3088],{},"Setting the HTTP status code this way ",[2900,41210,41211],{},"is useful for correct SEO",[2885,41213,41215],{"id":41214},"fetch-as-a-method","Fetch as a method",[2896,41217,41218],{},"New fetch hook also acts as a method that can be invoked upon user interaction or invoked programmatically from the component methods.",[2918,41220,41222],{"className":12274,"code":41221,"language":12276,"meta":2924,"style":2924},"\u003C!-- from template in template  -->\n\u003Cbutton @click=\"$fetch\">Refresh Data\u003C\u002Fbutton>\n",[2890,41223,41224,41229],{"__ignoreMap":2924},[2928,41225,41226],{"class":2930,"line":2931},[2928,41227,41228],{"class":2934},"\u003C!-- from template in template  -->\n",[2928,41230,41231,41233,41235,41238,41240,41242,41244,41246,41248,41251,41253,41255],{"class":2930,"line":2938},[2928,41232,3139],{"class":2953},[2928,41234,18403],{"class":2970},[2928,41236,41237],{"class":2945}," @click",[2928,41239,2954],{"class":2953},[2928,41241,3153],{"class":2953},[2928,41243,630],{"class":3156},[2928,41245,3153],{"class":2953},[2928,41247,9470],{"class":2953},[2928,41249,41250],{"class":2949},"Refresh Data",[2928,41252,3209],{"class":2953},[2928,41254,18403],{"class":2970},[2928,41256,3161],{"class":2953},[2918,41258,41260],{"className":26139,"code":41259,"language":26141,"meta":2924,"style":2924},"\u002F\u002F from component methods in script section\nexport default {\n  methods: {\n    refresh() {\n      this.$fetch()\n    }\n  }\n}\n",[2890,41261,41262,41267,41275,41284,41293,41301,41305,41309],{"__ignoreMap":2924},[2928,41263,41264],{"class":2930,"line":2931},[2928,41265,41266],{"class":2934},"\u002F\u002F from component methods in script section\n",[2928,41268,41269,41271,41273],{"class":2930,"line":2938},[2928,41270,2942],{"class":2941},[2928,41272,3871],{"class":2941},[2928,41274,3033],{"class":2953},[2928,41276,41277,41280,41282],{"class":2930,"line":2967},[2928,41278,41279],{"class":2970},"  methods",[2928,41281,2974],{"class":2953},[2928,41283,3033],{"class":2953},[2928,41285,41286,41289,41291],{"class":2930,"line":2984},[2928,41287,41288],{"class":2970},"    refresh",[2928,41290,3647],{"class":2953},[2928,41292,3033],{"class":2953},[2928,41294,41295,41297,41299],{"class":2930,"line":2993},[2928,41296,41103],{"class":2953},[2928,41298,630],{"class":2957},[2928,41300,3051],{"class":2970},[2928,41302,41303],{"class":2930,"line":2999},[2928,41304,4866],{"class":2953},[2928,41306,41307],{"class":2930,"line":3005},[2928,41308,3113],{"class":2953},[2928,41310,41311],{"class":2930,"line":3036},[2928,41312,3764],{"class":2953},[2885,41314,41316],{"id":41315},"making-nuxt-pages-more-performant","Making Nuxt pages more performant",[2896,41318,41319,41320,41323,41324,41327],{},"We can use ",[2890,41321,41322],{},":keep-alive-props"," prop and ",[2890,41325,41326],{},"activated"," hook to make Nuxt page components more performant using a new fetch hook.",[2896,41329,41330,41331,41334,41335,41338],{},"Nuxt allows ",[2900,41332,41333],{},"caching a certain number of pages"," in the memory along with their fetched data. And also allows ",[2900,41336,41337],{},"adding a number of seconds"," before we can re-fetch the data.",[2896,41340,41341,41342,41344,41345,2892,41348,41351],{},"For any of the above methods to work, we have to use the ",[2890,41343,40844],{}," prop in generic ",[2890,41346,41347],{},"\u003Cnuxt \u002F>",[2890,41349,41350],{},"\u003Cnuxt-child","> components.",[2918,41353,41355],{"className":12274,"code":41354,"filename":26132,"language":12276,"meta":2924,"style":2924},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cnuxt keep-alive \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[2890,41356,41357,41365,41373,41384,41392],{"__ignoreMap":2924},[2928,41358,41359,41361,41363],{"class":2930,"line":2931},[2928,41360,3139],{"class":2953},[2928,41362,3521],{"class":2970},[2928,41364,3161],{"class":2953},[2928,41366,41367,41369,41371],{"class":2930,"line":2938},[2928,41368,3528],{"class":2953},[2928,41370,11471],{"class":2970},[2928,41372,3161],{"class":2953},[2928,41374,41375,41377,41379,41382],{"class":2930,"line":2967},[2928,41376,3557],{"class":2953},[2928,41378,4326],{"class":2970},[2928,41380,41381],{"class":2945}," keep-alive",[2928,41383,3534],{"class":2953},[2928,41385,41386,41388,41390],{"class":2930,"line":2984},[2928,41387,3567],{"class":2953},[2928,41389,11471],{"class":2970},[2928,41391,3161],{"class":2953},[2928,41393,41394,41396,41398],{"class":2930,"line":2993},[2928,41395,3209],{"class":2953},[2928,41397,3521],{"class":2970},[2928,41399,3161],{"class":2953},[2896,41401,41402,41403,10579,41405,41407],{},"In addition, we can pass ",[2890,41404,41322],{},[2890,41406,41347],{}," component to cache a number of pages along with their fetched data.",[2896,41409,41410,41412],{},[2890,41411,41322],{}," prop allow us to indicate the maximum number of pages that should be kept in the memory while we navigate elsewhere within the site.",[2918,41414,41416],{"className":12274,"code":41415,"filename":26132,"language":12276,"meta":2924,"style":2924},"\u003Cnuxt keep-alive :keep-alive-props=\"{ max: 10 }\" \u002F>\n",[2890,41417,41418],{"__ignoreMap":2924},[2928,41419,41420,41422,41424,41426,41429,41431,41433,41436,41438],{"class":2930,"line":2931},[2928,41421,3139],{"class":2953},[2928,41423,4326],{"class":2970},[2928,41425,41381],{"class":2945},[2928,41427,41428],{"class":2945}," :keep-alive-props",[2928,41430,2954],{"class":2953},[2928,41432,3153],{"class":2953},[2928,41434,41435],{"class":3156},"{ max: 10 }",[2928,41437,3153],{"class":2953},[2928,41439,3534],{"class":2953},[2896,41441,41442,41443,41445,41446,41448],{},"Above is one way to boost page performance which is more high-level and generic, while the next one drills down to optimize the fetch request calls by using the ",[2890,41444,16246],{}," property of ",[2890,41447,40805],{}," and comparing it against the number of seconds delay before it re-fetches the data.",[2896,41450,41451,41452,41454,41455,41457],{},"Vue’s ",[2890,41453,41326],{}," hook is used here with Nuxt's ",[2890,41456,40844],{}," prop to re-fetch the data.",[2918,41459,41461],{"className":26139,"code":41460,"language":26141,"meta":2924,"style":2924},"export default {\n  activated() {\n    \u002F\u002F Call fetch again if last fetch more than a minute ago\n    if (this.$fetchState.timestamp \u003C= Date.now() - 60000) {\n      this.$fetch()\n    }\n  }\n}\n",[2890,41462,41463,41471,41480,41485,41521,41529,41533,41537],{"__ignoreMap":2924},[2928,41464,41465,41467,41469],{"class":2930,"line":2931},[2928,41466,2942],{"class":2941},[2928,41468,3871],{"class":2941},[2928,41470,3033],{"class":2953},[2928,41472,41473,41476,41478],{"class":2930,"line":2938},[2928,41474,41475],{"class":2970},"  activated",[2928,41477,3647],{"class":2953},[2928,41479,3033],{"class":2953},[2928,41481,41482],{"class":2930,"line":2967},[2928,41483,41484],{"class":2934},"    \u002F\u002F Call fetch again if last fetch more than a minute ago\n",[2928,41486,41487,41490,41492,41494,41496,41498,41500,41503,41505,41507,41510,41512,41514,41517,41519],{"class":2930,"line":2984},[2928,41488,41489],{"class":2941},"    if",[2928,41491,3248],{"class":2970},[2928,41493,41021],{"class":2953},[2928,41495,40805],{"class":2949},[2928,41497,3088],{"class":2953},[2928,41499,16246],{"class":2949},[2928,41501,41502],{"class":2953}," \u003C=",[2928,41504,16513],{"class":2949},[2928,41506,3088],{"class":2953},[2928,41508,41509],{"class":2957},"now",[2928,41511,10328],{"class":2970},[2928,41513,5783],{"class":2953},[2928,41515,41516],{"class":3988}," 60000",[2928,41518,3737],{"class":2970},[2928,41520,2964],{"class":2953},[2928,41522,41523,41525,41527],{"class":2930,"line":2993},[2928,41524,41103],{"class":2953},[2928,41526,630],{"class":2957},[2928,41528,3051],{"class":2970},[2928,41530,41531],{"class":2930,"line":2999},[2928,41532,4866],{"class":2953},[2928,41534,41535],{"class":2930,"line":3005},[2928,41536,3113],{"class":2953},[2928,41538,41539],{"class":2930,"line":3036},[2928,41540,3764],{"class":2953},[2885,41542,41544],{"id":41543},"asyncdata-vs-fetch","asyncData vs Fetch",[2896,41546,41547,41548,41550,41551,41554],{},"As far as page components are concerned, new ",[2890,41549,33452],{}," seems way too similar to ",[2890,41552,41553],{},"asyncData()"," because they both deal with the local data. But there are some key differences worth taking note of as below.",[2896,41556,41557,41558,41560,41561,41563,41564,3088],{},"As of Nuxt 2.12, ",[2890,41559,30041],{}," method is still an active feature. Let’s examine some of the key differences between ",[2890,41562,30041],{}," and new ",[2890,41565,33452],{},[4543,41567,30041],{"id":41568},"asyncdata",[3841,41570,41571,41576,41581],{},[3844,41572,41573,41575],{},[2890,41574,30041],{}," is limited to only page-level components",[3844,41577,41578,41580],{},[2890,41579,40576],{}," context is unavailable",[3844,41582,41583,41584,41587],{},"Adds payload by ",[2900,41585,41586],{},"returning"," the data",[2918,41589,41591],{"className":26139,"code":41590,"language":26141,"meta":2924,"style":2924},"export default {\n  async asyncData(context) {\n    const data = await context.$axios.$get(\n      `https:\u002F\u002Fjsonplaceholder.typicode.com\u002Ftodos`\n    )\n    \u002F\u002F `todos` does not have to be declared in data()\n    return { todos: data.Item }\n    \u002F\u002F `todos` is merged with local data\n  }\n}\n",[2890,41592,41593,41601,41616,41641,41652,41657,41662,41682,41687,41691],{"__ignoreMap":2924},[2928,41594,41595,41597,41599],{"class":2930,"line":2931},[2928,41596,2942],{"class":2941},[2928,41598,3871],{"class":2941},[2928,41600,3033],{"class":2953},[2928,41602,41603,41605,41608,41610,41612,41614],{"class":2930,"line":2938},[2928,41604,5533],{"class":2945},[2928,41606,41607],{"class":2970}," asyncData",[2928,41609,2961],{"class":2953},[2928,41611,16475],{"class":3023},[2928,41613,3027],{"class":2953},[2928,41615,3033],{"class":2953},[2928,41617,41618,41620,41622,41624,41626,41629,41631,41634,41636,41639],{"class":2930,"line":2967},[2928,41619,6690],{"class":2945},[2928,41621,3177],{"class":2949},[2928,41623,3045],{"class":2953},[2928,41625,3189],{"class":2941},[2928,41627,41628],{"class":2949}," context",[2928,41630,3088],{"class":2953},[2928,41632,41633],{"class":2949},"$axios",[2928,41635,3088],{"class":2953},[2928,41637,41638],{"class":2957},"$get",[2928,41640,12703],{"class":2970},[2928,41642,41643,41646,41649],{"class":2930,"line":2984},[2928,41644,41645],{"class":2953},"      `",[2928,41647,41648],{"class":3156},"https:\u002F\u002Fjsonplaceholder.typicode.com\u002Ftodos",[2928,41650,41651],{"class":2953},"`\n",[2928,41653,41654],{"class":2930,"line":2993},[2928,41655,41656],{"class":2970},"    )\n",[2928,41658,41659],{"class":2930,"line":2999},[2928,41660,41661],{"class":2934},"    \u002F\u002F `todos` does not have to be declared in data()\n",[2928,41663,41664,41666,41668,41671,41673,41675,41677,41680],{"class":2930,"line":3005},[2928,41665,5153],{"class":2941},[2928,41667,3174],{"class":2953},[2928,41669,41670],{"class":2970}," todos",[2928,41672,2974],{"class":2953},[2928,41674,3177],{"class":2949},[2928,41676,3088],{"class":2953},[2928,41678,41679],{"class":2949},"Item",[2928,41681,4739],{"class":2953},[2928,41683,41684],{"class":2930,"line":3036},[2928,41685,41686],{"class":2934},"    \u002F\u002F `todos` is merged with local data\n",[2928,41688,41689],{"class":2930,"line":3054},[2928,41690,3113],{"class":2953},[2928,41692,41693],{"class":2930,"line":3059},[2928,41694,3764],{"class":2953},[4543,41696,41698],{"id":41697},"new-fetch","New Fetch",[3841,41700,41701,41706,41711],{},[3844,41702,41703,41705],{},[2890,41704,33452],{}," is available in all Vue components",[3844,41707,41708,41710],{},[2890,41709,40576],{}," context is available",[3844,41712,41713,41714,41717],{},"Simply ",[2900,41715,41716],{},"mutates"," the local data",[2918,41719,41721],{"className":26139,"code":41720,"language":26141,"meta":2924,"style":2924},"export default {\n  data() {\n    return {\n      todos: []\n    }\n  },\n  async fetch() {\n    const { data } = await axios.get(\n      `https:\u002F\u002Fjsonplaceholder.typicode.com\u002Ftodos`\n    )\n    \u002F\u002F `todos` has to be declared in data()\n    this.todos = data\n  }\n}\n",[2890,41722,41723,41731,41740,41746,41755,41759,41763,41773,41797,41805,41809,41814,41827,41831],{"__ignoreMap":2924},[2928,41724,41725,41727,41729],{"class":2930,"line":2931},[2928,41726,2942],{"class":2941},[2928,41728,3871],{"class":2941},[2928,41730,3033],{"class":2953},[2928,41732,41733,41736,41738],{"class":2930,"line":2938},[2928,41734,41735],{"class":2970},"  data",[2928,41737,3647],{"class":2953},[2928,41739,3033],{"class":2953},[2928,41741,41742,41744],{"class":2930,"line":2967},[2928,41743,5153],{"class":2941},[2928,41745,3033],{"class":2953},[2928,41747,41748,41751,41753],{"class":2930,"line":2984},[2928,41749,41750],{"class":2970},"      todos",[2928,41752,2974],{"class":2953},[2928,41754,7882],{"class":2970},[2928,41756,41757],{"class":2930,"line":2993},[2928,41758,4866],{"class":2953},[2928,41760,41761],{"class":2930,"line":2999},[2928,41762,3383],{"class":2953},[2928,41764,41765,41767,41769,41771],{"class":2930,"line":3005},[2928,41766,5533],{"class":2945},[2928,41768,41009],{"class":2970},[2928,41770,3647],{"class":2953},[2928,41772,3033],{"class":2953},[2928,41774,41775,41777,41779,41781,41783,41785,41787,41790,41792,41795],{"class":2930,"line":3036},[2928,41776,6690],{"class":2945},[2928,41778,3174],{"class":2953},[2928,41780,3177],{"class":2949},[2928,41782,3702],{"class":2953},[2928,41784,3045],{"class":2953},[2928,41786,3189],{"class":2941},[2928,41788,41789],{"class":2949}," axios",[2928,41791,3088],{"class":2953},[2928,41793,41794],{"class":2957},"get",[2928,41796,12703],{"class":2970},[2928,41798,41799,41801,41803],{"class":2930,"line":3054},[2928,41800,41645],{"class":2953},[2928,41802,41648],{"class":3156},[2928,41804,41651],{"class":2953},[2928,41806,41807],{"class":2930,"line":3059},[2928,41808,41656],{"class":2970},[2928,41810,41811],{"class":2930,"line":3067},[2928,41812,41813],{"class":2934},"    \u002F\u002F `todos` has to be declared in data()\n",[2928,41815,41816,41819,41822,41824],{"class":2930,"line":3077},[2928,41817,41818],{"class":2953},"    this.",[2928,41820,41821],{"class":2949},"todos",[2928,41823,3045],{"class":2953},[2928,41825,41826],{"class":2949}," data\n",[2928,41828,41829],{"class":2930,"line":3110},[2928,41830,3113],{"class":2953},[2928,41832,41833],{"class":2930,"line":3116},[2928,41834,3764],{"class":2953},[2885,41836,41838],{"id":41837},"fetch-before-nuxt-212","Fetch before Nuxt 2.12",[2896,41840,41841,41842,41844],{},"If you have been working with Nuxt for a while, then you’ll know that the previous version of ",[2890,41843,33452],{}," was significantly different.",[41846,41847,41848],"blockquote",{},[2896,41849,41850],{},[2900,41851,41852],{},"Is this a breaking change?",[41846,41854,41855],{},[2896,41856,41857,41858,41860],{},"No, it isn't. Actually, the old fetch can still be used by passing the ",[2890,41859,16475],{}," as the first argument to avoid any breaking changes in your existing Nuxt applications.",[2896,41862,41863,41864,41866,41867,2892,41870,41873],{},"Here’s the list of notable changes in ",[2890,41865,33452],{}," hook compared with ",[2900,41868,41869],{},"before",[2900,41871,41872],{},"after"," v2.12.",[4543,41875,41877,41878,41880],{"id":41876},"_1-call-order-of-fetch-hook","1. Call order of ",[2890,41879,33452],{}," hook",[2896,41882,41883,10201,41886,41888,41889,41891],{},[2900,41884,41885],{},"Before -",[2890,41887,33452],{}," hook was called before initiating the component, hence ",[2890,41890,40576],{}," wasn’t available inside the fetch hook.",[2896,41893,41894,10201,41897,41899],{},[2900,41895,41896],{},"After -",[2890,41898,33452],{}," is called after the component instance is created on the server-side when the route is accessed.",[4543,41901,41903,41904,41906,41907],{"id":41902},"_2-this-vs-context","2. ",[2890,41905,40576],{}," vs ",[2890,41908,16475],{},[2896,41910,41911,41913,41914,41916,41917,41919],{},[2900,41912,41885],{}," We had access to the Nuxt ",[2890,41915,16475],{}," on page-level components, given that the ",[2890,41918,16475],{}," is passed as a first parameter.",[2918,41921,41923],{"className":26139,"code":41922,"language":26141,"meta":2924,"style":2924},"export default {\n  fetch(context) {\n    \u002F\u002F …\n  }\n}\n",[2890,41924,41925,41933,41945,41950,41954],{"__ignoreMap":2924},[2928,41926,41927,41929,41931],{"class":2930,"line":2931},[2928,41928,2942],{"class":2941},[2928,41930,3871],{"class":2941},[2928,41932,3033],{"class":2953},[2928,41934,41935,41937,41939,41941,41943],{"class":2930,"line":2938},[2928,41936,40612],{"class":2970},[2928,41938,2961],{"class":2953},[2928,41940,16475],{"class":3023},[2928,41942,3027],{"class":2953},[2928,41944,3033],{"class":2953},[2928,41946,41947],{"class":2930,"line":2967},[2928,41948,41949],{"class":2934},"    \u002F\u002F …\n",[2928,41951,41952],{"class":2930,"line":2984},[2928,41953,3113],{"class":2953},[2928,41955,41956],{"class":2930,"line":2993},[2928,41957,3764],{"class":2953},[2896,41959,41960,41962,41963,41965],{},[2900,41961,41896],{}," We can access ",[2890,41964,40576],{}," context just like Vue client-side hooks without passing any parameters.",[2918,41967,41968],{"className":26139,"code":40597,"language":26141,"meta":2924,"style":2924},[2890,41969,41970,41978,41986,42000,42004],{"__ignoreMap":2924},[2928,41971,41972,41974,41976],{"class":2930,"line":2931},[2928,41973,2942],{"class":2941},[2928,41975,3871],{"class":2941},[2928,41977,3033],{"class":2953},[2928,41979,41980,41982,41984],{"class":2930,"line":2938},[2928,41981,40612],{"class":2970},[2928,41983,3647],{"class":2953},[2928,41985,3033],{"class":2953},[2928,41987,41988,41990,41992,41994,41996,41998],{"class":2930,"line":2967},[2928,41989,13236],{"class":2949},[2928,41991,3088],{"class":2953},[2928,41993,9254],{"class":2957},[2928,41995,2961],{"class":2970},[2928,41997,40576],{"class":2953},[2928,41999,2990],{"class":2970},[2928,42001,42002],{"class":2930,"line":2984},[2928,42003,3113],{"class":2953},[2928,42005,42006],{"class":2930,"line":2993},[2928,42007,3764],{"class":2953},[4543,42009,42011,42012,41880],{"id":42010},"_3-availability-of-fetch-hook","3. Availability of ",[2890,42013,33452],{},[2896,42015,42016,42018],{},[2900,42017,41885],{}," Only page (route-level) components were allowed to fetch data on the server-side.",[2896,42020,42021,42023],{},[2900,42022,41896],{}," Now, we can prefetch the data asynchronously in any Vue components.",[4543,42025,42027,42028,41880],{"id":42026},"_4-call-order-of-fetch-hook","4. Call order of ",[2890,42029,33452],{},[2896,42031,42032,10201,42034,42036],{},[2900,42033,41885],{},[2890,42035,33452],{}," could be called server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes.",[2896,42038,42039,42041,42042,42044],{},[2900,42040,41896],{}," New ",[2890,42043,33452],{}," is the same as an old fetch, but…",[2896,42046,42047,42048,42050,42051,42053],{},"…since we can have one ",[2890,42049,33452],{}," for each component, ",[2890,42052,33452],{}," hooks are called in sequence of their hierarchy.",[4543,42055,42057],{"id":42056},"_5-error-handling","5. Error Handling",[2896,42059,42060,42062,42063,42066],{},[2900,42061,41885],{}," We used the ",[2890,42064,42065],{},"context.error"," function that showed a custom error page when an error occurred during API calls.",[2896,42068,42069,42041,42071,42073,42074,42076],{},[2900,42070,41896],{},[2890,42072,33452],{}," uses the ",[2890,42075,40805],{}," object to handle errors in the template area during API calls.",[2896,42078,42079],{},"Error handling is performed at component level.",[41846,42081,42082],{},[2896,42083,42084],{},[2900,42085,42086],{},"Does this mean we cannot show users a custom error page like we did prior to Nuxt 2.12?",[2896,42088,42089,42090,42092,42093,42095,42096,42099],{},"Yes we can, but only with ",[2890,42091,41553],{}," when it's about page-level component data. When using ",[2890,42094,33452],{},", we can utilize ",[2890,42097,42098],{},"this.$nuxt.error({ statusCode: 404, message: 'Data not found' })"," to show a custom error page.",[2885,42101,32339],{"id":32338},[2896,42103,42104],{},"New fetch hook brings a lot of improvements and provides more flexibility in fetching data and organizing route-level & building-block components in a whole new way!",[2896,42106,42107],{},"It will certainly make you think a little differently when you plan and design your new Nuxt project that requires multiple API calls within the same route.",[2896,42109,42110,42111,42113],{},"I hope this article has helped you get acquainted with the new ",[2890,42112,33452],{}," feature. I'd love to see what you build with it.",[4489,42115,42116],{},"html pre.shiki code .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .s1nJG, html code.shiki .s1nJG{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sYRBq, html code.shiki .sYRBq{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}",{"title":2924,"searchDepth":2938,"depth":2938,"links":42118},[42119,42122,42126,42129,42130,42131,42132,42136,42147],{"id":40562,"depth":2938,"text":40563,"children":42120},[42121],{"id":40644,"depth":2967,"text":40645},{"id":40661,"depth":2938,"text":40662,"children":42123},[42124,42125],{"id":40691,"depth":2967,"text":40692},{"id":40720,"depth":2967,"text":40721},{"id":40738,"depth":2938,"text":40739,"children":42127},[42128],{"id":40748,"depth":2967,"text":40749},{"id":37937,"depth":2938,"text":74},{"id":41214,"depth":2938,"text":41215},{"id":41315,"depth":2938,"text":41316},{"id":41543,"depth":2938,"text":41544,"children":42133},[42134,42135],{"id":41568,"depth":2967,"text":30041},{"id":41697,"depth":2967,"text":41698},{"id":41837,"depth":2938,"text":41838,"children":42137},[42138,42140,42142,42144,42146],{"id":41876,"depth":2967,"text":42139},"1. Call order of fetch hook",{"id":41902,"depth":2967,"text":42141},"2. this vs context",{"id":42010,"depth":2967,"text":42143},"3. Availability of fetch hook",{"id":42026,"depth":2967,"text":42145},"4. Call order of fetch hook",{"id":42056,"depth":2967,"text":42057},{"id":32338,"depth":2938,"text":32339},"2020-04-06","Explore different features of the fetch hook and learn a brand new way to bring data into Nuxt applications.","\u002Fassets\u002Fblog\u002Funderstanding-how-fetch-works-in-nuxt-2.12.png",{},{"title":2845,"description":42149},"W3XQ4GMlrxK1DcftEe5FB72-lviE4EkujNxHJa47E8k",{"id":42155,"title":2853,"authors":42156,"body":42159,"category":4517,"date":42285,"description":42286,"draft":108,"extension":4520,"image":42287,"meta":42288,"navigation":1196,"path":2854,"seo":42289,"stem":2855,"tags":6,"__hash__":42290},"blog\u002Fblog\u002F9.nuxtjs-from-terminal-to-browser.md",[42157],{"name":6222,"avatar":42158,"to":11332,"twitter":24560},{"src":11331},{"type":2882,"value":42160,"toc":42280},[42161,42170,42180,42184,42194,42198,42203,42210,42215,42222,42227,42234,42238,42241,42244,42249,42252],[41846,42162,42163],{},[2896,42164,42165,42166,42169],{},"Nuxt is a Vue.js framework to create different kind of web applications with the ",[2900,42167,42168],{},"same directory structure & conventions",": Universal, Single Page, PWA or Static Generated.",[2896,42171,42172],{},[10484,42173,42174,42175,3088],{},"ℹ️ These features are all available with ",[2910,42176,42179],{"href":42177,"rel":42178},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.js\u002Freleases\u002Ftag\u002Fv2.8.0",[2914],"v2.8.0 release",[2885,42181,42183],{"id":42182},"problems","Problems",[3841,42185,42186,42189],{},[3844,42187,42188],{},"Developing JavaScript applications with Webpack or any bundler requires to switch between your browser and terminal for debugging purpose.",[3844,42190,19457,42191,42193],{},[2890,42192,27250],{}," to debug when the app is server rendered requires to remember that logs will be displayed on the terminal when refreshing the page.",[2885,42195,42197],{"id":42196},"solutions","Solutions",[3841,42199,42200],{},[3844,42201,42202],{},"Forwarding Webpack build state right in the browser and display them in a fancy manner.",[2896,42204,42205],{},[4183,42206],{"alt":42207,"className":42208,"src":42209},"forward-webpack-build-state",[15174,19239,33696],"\u002Fassets\u002Fblog\u002Fforward-webpack-build-state.gif",[3841,42211,42212],{"start":2938},[3844,42213,42214],{},"Same for Hot Module Replacement (really useful when the project gets bigger and takes more time to re-build).",[2896,42216,42217],{},[4183,42218],{"alt":42219,"className":42220,"src":42221},"nuxt-build-indicator-hmr",[15174,19239,33696],"\u002Fassets\u002Fblog\u002Fnuxt-build-indicator-hmr.gif",[3841,42223,42224],{"start":2967},[3844,42225,42226],{},"Forwarding SSR logs to the browser in development mode",[2896,42228,42229],{},[4183,42230],{"alt":42231,"className":42232,"src":42233},"nuxt-ssr-logs-forwarding",[15174,19239,33696],"\u002Fassets\u002Fblog\u002Fnuxt-ssr-logs-forwarding.gif",[2885,42235,42237],{"id":42236},"nuxt-vision","Nuxt Vision",[2896,42239,42240],{},"The purpose to these changes is to use the terminal for commands only.",[2896,42242,42243],{},"Now you can focus right on your code and its visual result 🙂",[41846,42245,42246],{},[2896,42247,42248],{},"Be lazy, be smart, be Nuxt.",[2896,42250,42251],{},"Links:",[4346,42253,42254,42260,42267,42274],{},[3844,42255,42256,42257],{},"Nuxt 2 docs: ",[2910,42258,38404],{"href":38404,"rel":42259},[2914],[3844,42261,42262,42263],{},"GitHub: ",[2910,42264,42265],{"href":42265,"rel":42266},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.js",[2914],[3844,42268,42269,42270],{},"Loading Screen source code: ",[2910,42271,42272],{"href":42272,"rel":42273},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Floading-screen",[2914],[3844,42275,42276,42277],{},"Twitter: ",[2910,42278,27103],{"href":27103,"rel":42279},[2914],{"title":2924,"searchDepth":2938,"depth":2938,"links":42281},[42282,42283,42284],{"id":42182,"depth":2938,"text":42183},{"id":42196,"depth":2938,"text":42197},{"id":42236,"depth":2938,"text":42237},"2019-06-03","How we changed the developer experience to stop switching between the terminal and browser.","\u002Fassets\u002Fblog\u002Fnuxt-from-terminal-to-browser.png",{},{"title":2853,"description":42286},"MkjDyPSx8l04n_HVU0_OnG74eaC-mAO2SbIaS8RoSC0",{"id":42292,"title":2841,"authors":42293,"body":42296,"category":4517,"date":42363,"description":42364,"draft":108,"extension":4520,"image":42365,"meta":42366,"navigation":1196,"path":2842,"seo":42367,"stem":2843,"tags":6,"__hash__":42368},"blog\u002Fblog\u002F6.introducing-smart-prefetching.md",[42294],{"name":6222,"avatar":42295,"to":11332,"twitter":24560},{"src":6224},{"type":2882,"value":42297,"toc":42360},[42298,42302,42324,42331,42334,42350],[2885,42299,42301],{"id":42300},"introducing-smart-prefetching-️","Introducing Smart prefetching ⚡️",[2896,42303,42304,42305,42310,42311,42314,42315,42318,42319,3088],{},"Starting from ",[2910,42306,42309],{"href":42307,"rel":42308},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.js\u002Freleases\u002Ftag\u002Fv2.4.0",[2914],"Nuxt v2.4.0",", Nuxt will automagically prefetch the code-splitted pages linked with ",[2890,42312,42313],{},"\u003Cnuxt-link>"," when visible in the viewport ",[2900,42316,42317],{},"by default",". This hugely improves the end user performances, inspired by ",[2910,42320,42323],{"href":42321,"rel":42322},"https:\u002F\u002Fgithub.com\u002FGoogleChromeLabs\u002Fquicklink",[2914],"quicklink",[2896,42325,42326],{},[4183,42327],{"alt":42328,"className":42329,"src":42330},"nuxt-prefetch-comparison",[15174,19239,33696],"\u002Fassets\u002Fblog\u002Fnuxt-prefetch-comparison.gif",[2896,42332,42333],{},"Demos are online and we recommend you to try it out to feel the difference:",[4346,42335,42336,42343],{},[3844,42337,42338,42339],{},"No prefetching (v2.3): ",[2910,42340,42341],{"href":42341,"rel":42342},"https:\u002F\u002Fnuxt-no-prefetch.surge.sh",[2914],[3844,42344,42345,42346],{},"With prefetching (v2.4): ",[2910,42347,42348],{"href":42348,"rel":42349},"https:\u002F\u002Fnuxt-prefetch.surge.sh",[2914],[2896,42351,42352,42353,42359],{},"You can learn more about this feature in the ",[2910,42354,42357],{"href":42355,"rel":42356},"https:\u002F\u002Fv2.nuxt.com\u002Fdocs\u002Ffeatures\u002Fnuxt-components#the-nuxtlink-component",[2914],[2890,42358,42313],{}," section of the documentation.",{"title":2924,"searchDepth":2938,"depth":2938,"links":42361},[42362],{"id":42300,"depth":2938,"text":42301},"2019-01-28","Starting from Nuxt v2.4.0, Nuxt will automagically prefetch the code-splitted pages linked with a nuxt-link when visible in the viewport by default.","\u002Fassets\u002Fblog\u002Fintroducing-smart-prefetching.png",{},{"title":2841,"description":42364},"9c3wRuPIq5IpM_jzI-ck81aFNSDsdHX2enhGdtG8igw",1775080850348]