[{"data":1,"prerenderedAt":1299},["ShallowReactive",2],{"latest-posts":3},[4,614,1095],{"id":5,"title":6,"author":7,"body":8,"date":592,"description":14,"extension":593,"meta":594,"navigation":595,"path":596,"seo":597,"slug":604,"status":605,"stem":606,"summary":607,"tags":608,"__hash__":613},"blog\u002Fblog\u002Fnuxt-content-example.md","Getting Started with Folio","Sharique",{"type":9,"value":10,"toc":575},"minimark",[11,15,20,28,38,50,54,57,228,235,240,247,251,258,419,423,442,446,460,464,467,471,488,492,495,515,519,539,543,552,556,571],[12,13,14],"p",{},"This post walks through how Folio is built — how posts are written, what the frontmatter schema looks like, and how SEO and social sharing tags are generated automatically for every post.",[16,17,19],"h2",{"id":18},"writing-a-post","Writing a Post",[12,21,22,23,27],{},"Every blog post is a plain Markdown file stored in ",[24,25,26],"code",{},"content\u002Fblog\u002F",". The filename becomes the URL slug:",[29,30,35],"pre",{"className":31,"code":33,"language":34},[32],"language-text","content\u002Fblog\u002Fmy-post-title.md  →  \u002Fblog\u002Fmy-post-title\n","text",[24,36,33],{"__ignoreMap":37},"",[12,39,40,41,45,46,49],{},"At the top of each file is a ",[42,43,44],"strong",{},"frontmatter block"," — a YAML section wrapped in ",[24,47,48],{},"---"," that provides metadata about the post.",[16,51,53],{"id":52},"frontmatter-schema","Frontmatter Schema",[12,55,56],{},"Here is the full schema this blog supports:",[29,58,62],{"className":59,"code":60,"language":61,"meta":37,"style":37},"language-yaml shiki shiki-themes github-light github-dark","---\ntitle: \"My Post Title\"        # required — shown in the page heading and browser tab\ndate: 2025-01-15              # required — used for sorting and displayed on the post\nsummary: \"Short description\"  # required — shown on the blog listing card\ntags: [\"Vue\", \"Nuxt\"]         # optional — displayed as pills at the bottom of the post\nauthor: \"Your Name\"           # optional — defaults to \"Unknown\"\nstatus: \"published\"           # \"draft\" | \"published\" — drafts are hidden from the listing\nseo:\n  description: \"Custom text for search engines and social previews\"\n  keywords: [\"keyword1\", \"keyword2\"]\n  og:image: \"https:\u002F\u002Fexample.com\u002Fcover.jpg\"\n---\n","yaml",[24,63,64,73,92,107,121,145,159,173,182,193,212,223],{"__ignoreMap":37},[65,66,69],"span",{"class":67,"line":68},"line",1,[65,70,72],{"class":71},"sScJk","---\n",[65,74,76,80,84,88],{"class":67,"line":75},2,[65,77,79],{"class":78},"s9eBZ","title",[65,81,83],{"class":82},"sVt8B",": ",[65,85,87],{"class":86},"sZZnC","\"My Post Title\"",[65,89,91],{"class":90},"sJ8bj","        # required — shown in the page heading and browser tab\n",[65,93,95,98,100,104],{"class":67,"line":94},3,[65,96,97],{"class":78},"date",[65,99,83],{"class":82},[65,101,103],{"class":102},"sj4cs","2025-01-15",[65,105,106],{"class":90},"              # required — used for sorting and displayed on the post\n",[65,108,110,113,115,118],{"class":67,"line":109},4,[65,111,112],{"class":78},"summary",[65,114,83],{"class":82},[65,116,117],{"class":86},"\"Short description\"",[65,119,120],{"class":90},"  # required — shown on the blog listing card\n",[65,122,124,127,130,133,136,139,142],{"class":67,"line":123},5,[65,125,126],{"class":78},"tags",[65,128,129],{"class":82},": [",[65,131,132],{"class":86},"\"Vue\"",[65,134,135],{"class":82},", ",[65,137,138],{"class":86},"\"Nuxt\"",[65,140,141],{"class":82},"]         ",[65,143,144],{"class":90},"# optional — displayed as pills at the bottom of the post\n",[65,146,148,151,153,156],{"class":67,"line":147},6,[65,149,150],{"class":78},"author",[65,152,83],{"class":82},[65,154,155],{"class":86},"\"Your Name\"",[65,157,158],{"class":90},"           # optional — defaults to \"Unknown\"\n",[65,160,162,165,167,170],{"class":67,"line":161},7,[65,163,164],{"class":78},"status",[65,166,83],{"class":82},[65,168,169],{"class":86},"\"published\"",[65,171,172],{"class":90},"           # \"draft\" | \"published\" — drafts are hidden from the listing\n",[65,174,176,179],{"class":67,"line":175},8,[65,177,178],{"class":78},"seo",[65,180,181],{"class":82},":\n",[65,183,185,188,190],{"class":67,"line":184},9,[65,186,187],{"class":78},"  description",[65,189,83],{"class":82},[65,191,192],{"class":86},"\"Custom text for search engines and social previews\"\n",[65,194,196,199,201,204,206,209],{"class":67,"line":195},10,[65,197,198],{"class":78},"  keywords",[65,200,129],{"class":82},[65,202,203],{"class":86},"\"keyword1\"",[65,205,135],{"class":82},[65,207,208],{"class":86},"\"keyword2\"",[65,210,211],{"class":82},"]\n",[65,213,215,218,220],{"class":67,"line":214},11,[65,216,217],{"class":78},"  og:image",[65,219,83],{"class":82},[65,221,222],{"class":86},"\"https:\u002F\u002Fexample.com\u002Fcover.jpg\"\n",[65,224,226],{"class":67,"line":225},12,[65,227,72],{"class":71},[12,229,230,231,234],{},"All fields are validated at build time using ",[42,232,233],{},"Zod",". If a required field is missing, the build will fail with a clear error.",[236,237,239],"h3",{"id":238},"draft-vs-published","Draft vs Published",[12,241,242,243,246],{},"Setting ",[24,244,245],{},"status: \"draft\""," hides the post from the blog listing and sitemap. It is still accessible by direct URL during development, making it easy to preview before publishing.",[16,248,250],{"id":249},"seo-and-open-graph-tags","SEO and Open Graph Tags",[12,252,253,254,257],{},"Every page on this blog sets meta tags automatically using Nuxt's built-in ",[24,255,256],{},"useSeoMeta()"," composable. On post pages, the tags are populated from the frontmatter:",[29,259,263],{"className":260,"code":261,"language":262,"meta":37,"style":37},"language-ts shiki shiki-themes github-light github-dark","useSeoMeta({\n  title: () => post.value?.title,\n  description: () => post.value?.seo?.description || post.value?.summary,\n  \u002F\u002F Open Graph — controls previews on LinkedIn, Slack, iMessage, etc.\n  ogTitle: () => post.value?.title,\n  ogDescription: () => post.value?.seo?.description || post.value?.summary,\n  ogImage: () => post.value?.seo?.[\"og:image\"] || \"\",\n  ogType: \"article\",\n  \u002F\u002F Twitter \u002F X Card\n  twitterCard: \"summary_large_image\",\n  twitterTitle: () => post.value?.title,\n  twitterDescription: () => post.value?.seo?.description || post.value?.summary,\n});\n","ts",[24,264,265,273,288,305,310,321,336,362,372,377,387,398,413],{"__ignoreMap":37},[65,266,267,270],{"class":67,"line":68},[65,268,269],{"class":71},"useSeoMeta",[65,271,272],{"class":82},"({\n",[65,274,275,278,281,285],{"class":67,"line":75},[65,276,277],{"class":71},"  title",[65,279,280],{"class":82},": () ",[65,282,284],{"class":283},"szBVR","=>",[65,286,287],{"class":82}," post.value?.title,\n",[65,289,290,292,294,296,299,302],{"class":67,"line":94},[65,291,187],{"class":71},[65,293,280],{"class":82},[65,295,284],{"class":283},[65,297,298],{"class":82}," post.value?.seo?.description ",[65,300,301],{"class":283},"||",[65,303,304],{"class":82}," post.value?.summary,\n",[65,306,307],{"class":67,"line":109},[65,308,309],{"class":90},"  \u002F\u002F Open Graph — controls previews on LinkedIn, Slack, iMessage, etc.\n",[65,311,312,315,317,319],{"class":67,"line":123},[65,313,314],{"class":71},"  ogTitle",[65,316,280],{"class":82},[65,318,284],{"class":283},[65,320,287],{"class":82},[65,322,323,326,328,330,332,334],{"class":67,"line":147},[65,324,325],{"class":71},"  ogDescription",[65,327,280],{"class":82},[65,329,284],{"class":283},[65,331,298],{"class":82},[65,333,301],{"class":283},[65,335,304],{"class":82},[65,337,338,341,343,345,348,351,354,356,359],{"class":67,"line":161},[65,339,340],{"class":71},"  ogImage",[65,342,280],{"class":82},[65,344,284],{"class":283},[65,346,347],{"class":82}," post.value?.seo?.[",[65,349,350],{"class":86},"\"og:image\"",[65,352,353],{"class":82},"] ",[65,355,301],{"class":283},[65,357,358],{"class":86}," \"\"",[65,360,361],{"class":82},",\n",[65,363,364,367,370],{"class":67,"line":175},[65,365,366],{"class":82},"  ogType: ",[65,368,369],{"class":86},"\"article\"",[65,371,361],{"class":82},[65,373,374],{"class":67,"line":184},[65,375,376],{"class":90},"  \u002F\u002F Twitter \u002F X Card\n",[65,378,379,382,385],{"class":67,"line":195},[65,380,381],{"class":82},"  twitterCard: ",[65,383,384],{"class":86},"\"summary_large_image\"",[65,386,361],{"class":82},[65,388,389,392,394,396],{"class":67,"line":214},[65,390,391],{"class":71},"  twitterTitle",[65,393,280],{"class":82},[65,395,284],{"class":283},[65,397,287],{"class":82},[65,399,400,403,405,407,409,411],{"class":67,"line":225},[65,401,402],{"class":71},"  twitterDescription",[65,404,280],{"class":82},[65,406,284],{"class":283},[65,408,298],{"class":82},[65,410,301],{"class":283},[65,412,304],{"class":82},[65,414,416],{"class":67,"line":415},13,[65,417,418],{"class":82},"});\n",[236,420,422],{"id":421},"fallback-chain-for-description","Fallback chain for description",[12,424,425,426,429,430,432,433,435,436,438,439,441],{},"The ",[24,427,428],{},"seo.description"," field is optional. When it is absent, ",[24,431,269],{}," falls back to the post's ",[24,434,112],{},". This means every post gets a meaningful social preview as long as ",[24,437,112],{}," is set — even without a dedicated ",[24,440,178],{}," block.",[236,443,445],{"id":444},"ogimage","og:image",[12,447,448,449,451,452,455,456,459],{},"If you provide an ",[24,450,445],{}," URL in the frontmatter, it will appear as the preview image when the post is shared on social platforms. The URL must be ",[42,453,454],{},"absolute"," (e.g. ",[24,457,458],{},"https:\u002F\u002Fexample.com\u002Fcover.jpg",") — relative paths are not fetched by social crawlers.",[16,461,463],{"id":462},"markdown-features","Markdown Features",[12,465,466],{},"Standard Markdown is fully supported inside the post body:",[236,468,470],{"id":469},"headings","Headings",[29,472,476],{"className":473,"code":474,"language":475,"meta":37,"style":37},"language-markdown shiki shiki-themes github-light github-dark","## H2 heading\n### H3 heading (also appears in the table of contents)\n","markdown",[24,477,478,483],{"__ignoreMap":37},[65,479,480],{"class":67,"line":68},[65,481,482],{},"## H2 heading\n",[65,484,485],{"class":67,"line":75},[65,486,487],{},"### H3 heading (also appears in the table of contents)\n",[236,489,491],{"id":490},"code-blocks","Code Blocks",[12,493,494],{},"Fenced code blocks with language hints get syntax highlighting automatically:",[29,496,498],{"className":473,"code":497,"language":475,"meta":37,"style":37},"```ts\nconst greeting = (name: string) => `Hello, ${name}!`\n```\n",[24,499,500,505,510],{"__ignoreMap":37},[65,501,502],{"class":67,"line":68},[65,503,504],{},"```ts\n",[65,506,507],{"class":67,"line":75},[65,508,509],{},"const greeting = (name: string) => `Hello, ${name}!`\n",[65,511,512],{"class":67,"line":94},[65,513,514],{},"```\n",[236,516,518],{"id":517},"lists-bold-italic","Lists, Bold, Italic",[29,520,522],{"className":473,"code":521,"language":475,"meta":37,"style":37},"- item one\n- **bold text**\n- _italic text_\n",[24,523,524,529,534],{"__ignoreMap":37},[65,525,526],{"class":67,"line":68},[65,527,528],{},"- item one\n",[65,530,531],{"class":67,"line":75},[65,532,533],{},"- **bold text**\n",[65,535,536],{"class":67,"line":94},[65,537,538],{},"- _italic text_\n",[236,540,542],{"id":541},"links","Links",[29,544,546],{"className":473,"code":545,"language":475,"meta":37,"style":37},"[Link text](https:\u002F\u002Fexample.com)\n",[24,547,548],{"__ignoreMap":37},[65,549,550],{"class":67,"line":68},[65,551,545],{},[16,553,555],{"id":554},"sitemap","Sitemap",[12,557,558,559,562,563,566,567,570],{},"Published posts are included in ",[24,560,561],{},"\u002Fsitemap.xml"," automatically. A server endpoint queries all posts with ",[24,564,565],{},"status: \"published\""," and passes them to ",[24,568,569],{},"@nuxtjs\u002Fsitemap",", which pre-renders the sitemap file at build time. Draft posts are excluded.",[572,573,574],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":37,"searchDepth":75,"depth":94,"links":576},[577,578,581,585,591],{"id":18,"depth":75,"text":19},{"id":52,"depth":75,"text":53,"children":579},[580],{"id":238,"depth":94,"text":239},{"id":249,"depth":75,"text":250,"children":582},[583,584],{"id":421,"depth":94,"text":422},{"id":444,"depth":94,"text":445},{"id":462,"depth":75,"text":463,"children":586},[587,588,589,590],{"id":469,"depth":94,"text":470},{"id":490,"depth":94,"text":491},{"id":517,"depth":94,"text":518},{"id":541,"depth":94,"text":542},{"id":554,"depth":75,"text":555},"2026-03-22","md",{},true,"\u002Fblog\u002Fnuxt-content-example",{"description":598,"keywords":599,"title":6},"Learn how this Nuxt 4 blog works — Markdown posts, frontmatter schema, Zod validation, and automatic Open Graph and Twitter Card meta tags via useSeoMeta.",[600,601,602,269,603],"Nuxt Content","Markdown blog","Open Graph","frontmatter","nuxt-content-example","published","blog\u002Fnuxt-content-example","A practical walkthrough of how this blog works — writing posts in Markdown, the frontmatter schema, and how SEO and Open Graph tags are generated automatically from post metadata.",[609,610,611,612],"Nuxt","Vue","Content Management","SEO","0U4u9FLqde-XiMBfzMtlSRokC1NaN55sN0oITa9wQLI",{"id":615,"title":616,"author":7,"body":617,"date":1080,"description":621,"extension":593,"meta":1081,"navigation":595,"path":1082,"seo":1083,"slug":1088,"status":605,"stem":1089,"summary":1090,"tags":1091,"__hash__":1094},"blog\u002Fblog\u002Fupgrading-to-vite-8-with-nuxt.md","Upgrading to Vite 8 in a Nuxt Project",{"type":9,"value":618,"toc":1068},[619,622,626,637,648,658,662,671,711,714,729,735,751,758,762,765,780,783,789,796,800,803,807,824,827,870,877,881,892,896,899,964,967,971,974,1013,1016,1020,1026,1054,1065],[12,620,621],{},"Vite 8 is out, and it's not a small release. The entire build pipeline has been replaced — esbuild and Rollup are out, Rolldown and Oxc are in. For most projects, the upgrade is seamless. But if you're on Nuxt, there's a catch you need to know about before you do anything.",[16,623,625],{"id":624},"the-problem-with-nuxt-and-vite-versions","The Problem with Nuxt and Vite Versions",[12,627,628,629,632,633,636],{},"If you look at your Nuxt project's ",[24,630,631],{},"package.json",", you won't find a ",[24,634,635],{},"vite"," entry. That's because Nuxt manages Vite as an internal dependency — it ships its own version of Vite and handles all Vite configuration internally.",[12,638,639,640,643,644,647],{},"This means running ",[24,641,642],{},"npm install vite@8"," won't do what you want. npm will install Vite 8 in your ",[24,645,646],{},"node_modules",", but Nuxt will continue using its own bundled version. You'd end up with two copies of Vite and no actual upgrade.",[12,649,650,651,654,655,657],{},"The correct approach is to use npm's ",[24,652,653],{},"overrides"," field, which forces every package in your dependency tree — including Nuxt — to resolve ",[24,656,635],{}," to the version you specify.",[16,659,661],{"id":660},"the-fix","The Fix",[12,663,664,665,667,668,670],{},"Open your ",[24,666,631],{}," and add an ",[24,669,653],{}," field at the top level:",[29,672,676],{"className":673,"code":674,"language":675,"meta":37,"style":37},"language-json shiki shiki-themes github-light github-dark","{\n  \"overrides\": {\n    \"vite\": \"^8.0.0\"\n  }\n}\n","json",[24,677,678,683,691,701,706],{"__ignoreMap":37},[65,679,680],{"class":67,"line":68},[65,681,682],{"class":82},"{\n",[65,684,685,688],{"class":67,"line":75},[65,686,687],{"class":102},"  \"overrides\"",[65,689,690],{"class":82},": {\n",[65,692,693,696,698],{"class":67,"line":94},[65,694,695],{"class":102},"    \"vite\"",[65,697,83],{"class":82},[65,699,700],{"class":86},"\"^8.0.0\"\n",[65,702,703],{"class":67,"line":109},[65,704,705],{"class":82},"  }\n",[65,707,708],{"class":67,"line":123},[65,709,710],{"class":82},"}\n",[12,712,713],{},"Then run:",[29,715,719],{"className":716,"code":717,"language":718,"meta":37,"style":37},"language-bash shiki shiki-themes github-light github-dark","npm install\n","bash",[24,720,721],{"__ignoreMap":37},[65,722,723,726],{"class":67,"line":68},[65,724,725],{"class":71},"npm",[65,727,728],{"class":86}," install\n",[12,730,731,732,734],{},"That's it. npm will now resolve all ",[24,733,635],{}," imports across your entire dependency tree to Vite 8. You can confirm it worked by checking the installed version:",[29,736,738],{"className":716,"code":737,"language":718,"meta":37,"style":37},"node -e \"console.log(require('.\u002Fnode_modules\u002Fvite\u002Fpackage.json').version)\"\n",[24,739,740],{"__ignoreMap":37},[65,741,742,745,748],{"class":67,"line":68},[65,743,744],{"class":71},"node",[65,746,747],{"class":102}," -e",[65,749,750],{"class":86}," \"console.log(require('.\u002Fnode_modules\u002Fvite\u002Fpackage.json').version)\"\n",[12,752,753,754,757],{},"You should see ",[24,755,756],{},"8.0.0",".",[16,759,761],{"id":760},"verifying-the-build","Verifying the Build",[12,763,764],{},"Run your production build to make sure everything works:",[29,766,768],{"className":716,"code":767,"language":718,"meta":37,"style":37},"npm run build\n",[24,769,770],{"__ignoreMap":37},[65,771,772,774,777],{"class":67,"line":68},[65,773,725],{"class":71},[65,775,776],{"class":86}," run",[65,778,779],{"class":86}," build\n",[12,781,782],{},"If the upgrade is successful, you'll see Vite's version reported in Nuxt's build output:",[29,784,787],{"className":785,"code":786,"language":34},[32],"Nuxt 4.4.2 (with Nitro 2.13.1, Vite 8.0.0 and Vue 3.5.30)\n",[24,788,786],{"__ignoreMap":37},[12,790,791,792,795],{},"For this project — a Nuxt 4 blog using ",[24,793,794],{},"@nuxt\u002Fcontent",", Tailwind CSS v4, and DaisyUI — the build completed without any errors or warnings. The client built in ~2.9 seconds and the server in ~1.5 seconds.",[16,797,799],{"id":798},"what-actually-changed-in-vite-8","What Actually Changed in Vite 8",[12,801,802],{},"Understanding what changed helps you know what to watch out for if you do run into issues.",[236,804,806],{"id":805},"rolldown-replaces-rollup-and-esbuild","Rolldown replaces Rollup and esbuild",[12,808,809,810,817,818,823],{},"The biggest change in Vite 8 is that Rollup (used for production bundling) and esbuild (used for dependency pre-bundling and JS transforms) have been replaced by ",[811,812,816],"a",{"href":813,"rel":814},"https:\u002F\u002Frolldown.rs\u002F",[815],"nofollow","Rolldown"," — a new Rust-based bundler — and ",[811,819,822],{"href":820,"rel":821},"https:\u002F\u002Foxc.rs\u002F",[815],"Oxc"," for transforms and minification.",[12,825,826],{},"In practice, this means:",[828,829,830,842,852],"ul",{},[831,832,833,838,839],"li",{},[42,834,835],{},[24,836,837],{},"build.rollupOptions"," is now ",[24,840,841],{},"build.rolldownOptions",[831,843,844,838,849],{},[42,845,846],{},[24,847,848],{},"optimizeDeps.esbuildOptions",[24,850,851],{},"optimizeDeps.rolldownOptions",[831,853,854,863,864,859,867],{},[42,855,856,859,860],{},[24,857,858],{},"esbuild.jsx"," \u002F ",[24,861,862],{},"esbuild.define"," options move to ",[24,865,866],{},"oxc.jsx",[24,868,869],{},"oxc.define",[12,871,872,873,876],{},"If you have a custom ",[24,874,875],{},"vite.config.ts"," using any of these options, you'll need to update them. For a standard Nuxt project with no custom Vite config (like this one), none of this matters — Nuxt handles it internally.",[236,878,880],{"id":879},"javascript-minification-now-uses-oxc","JavaScript minification now uses Oxc",[12,882,883,884,887,888,891],{},"The default JS minifier has switched from esbuild to Oxc Minifier. This is generally faster and produces similar output, but there's one limitation to be aware of: ",[42,885,886],{},"Oxc does not support lowering native decorators",". If your code uses the ",[24,889,890],{},"@decorator"," syntax and you need it transpiled for older browsers, you'll need to add a Babel or SWC plugin as a workaround.",[236,893,895],{"id":894},"browser-targets-have-been-raised","Browser targets have been raised",[12,897,898],{},"The minimum browser targets in Vite 8 are slightly higher:",[900,901,902,918],"table",{},[903,904,905],"thead",{},[906,907,908,912,915],"tr",{},[909,910,911],"th",{},"Browser",[909,913,914],{},"Vite 7",[909,916,917],{},"Vite 8",[919,920,921,933,942,953],"tbody",{},[906,922,923,927,930],{},[924,925,926],"td",{},"Chrome",[924,928,929],{},"107",[924,931,932],{},"111",[906,934,935,938,940],{},[924,936,937],{},"Edge",[924,939,929],{},[924,941,932],{},[906,943,944,947,950],{},[924,945,946],{},"Firefox",[924,948,949],{},"104",[924,951,952],{},"114",[906,954,955,958,961],{},[924,956,957],{},"Safari",[924,959,960],{},"16.0",[924,962,963],{},"16.4",[12,965,966],{},"For most modern web apps this is a non-issue, but if you're targeting older browsers, double-check that your target audience falls within the new minimums.",[236,968,970],{"id":969},"some-advanced-options-have-been-removed","Some advanced options have been removed",[12,972,973],{},"A few less commonly used features were dropped:",[828,975,976,986,999],{},[831,977,425,978,981,982,985],{},[24,979,980],{},"\"system\""," and ",[24,983,984],{},"\"amd\""," output formats are no longer supported",[831,987,425,988,135,991,994,995,998],{},[24,989,990],{},"shouldTransformCachedModule",[24,992,993],{},"resolveImportMeta",", and ",[24,996,997],{},"renderDynamicImport"," plugin hooks have been removed",[831,1000,1001,1004,1005,1008,1009,1012],{},[24,1002,1003],{},"build()"," now throws a ",[24,1006,1007],{},"BundleError"," (with an ",[24,1010,1011],{},".errors"," property) instead of a raw error object",[12,1014,1015],{},"Again, for a typical Nuxt app you're unlikely to hit any of these.",[16,1017,1019],{"id":1018},"should-you-do-this","Should You Do This?",[12,1021,1022,1023,1025],{},"Nuxt 4.2.2 ships with Vite 7 by default. Using ",[24,1024,653],{}," to force Vite 8 is a reasonable thing to do — it's the standard approach for testing ahead of official framework support — but it's worth knowing that:",[1027,1028,1029,1039,1045],"ol",{},[831,1030,1031,1034,1035,1038],{},[42,1032,1033],{},"It's not officially supported yet."," Nuxt hasn't cut a release with Vite 8. If something breaks after a future ",[24,1036,1037],{},"npm update",", the override is the first thing to check.",[831,1040,1041,1044],{},[42,1042,1043],{},"It works fine for this project."," No issues encountered — the build is clean, dev server starts up, and all pages render correctly.",[831,1046,1047,1050,1051,1053],{},[42,1048,1049],{},"Remove the override when Nuxt officially upgrades."," Once a Nuxt version ships with Vite 8 natively, you can drop the ",[24,1052,653],{}," field and let Nuxt manage the version again.",[12,1055,1056,1057,1061,1062,1064],{},"The migration itself took less than five minutes. The harder part was understanding ",[1058,1059,1060],"em",{},"why"," ",[24,1063,642],{}," doesn't work for a Nuxt project — and now you know.",[572,1066,1067],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":37,"searchDepth":75,"depth":94,"links":1069},[1070,1071,1072,1073,1079],{"id":624,"depth":75,"text":625},{"id":660,"depth":75,"text":661},{"id":760,"depth":75,"text":761},{"id":798,"depth":75,"text":799,"children":1074},[1075,1076,1077,1078],{"id":805,"depth":94,"text":806},{"id":879,"depth":94,"text":880},{"id":894,"depth":94,"text":895},{"id":969,"depth":94,"text":970},{"id":1018,"depth":75,"text":1019},"2026-03-15",{},"\u002Fblog\u002Fupgrading-to-vite-8-with-nuxt",{"description":1084,"keywords":1085,"title":616},"Step-by-step guide to upgrading a Nuxt 4 project to Vite 8 using npm overrides, including what changed in Vite 8 and how to verify the migration.",[917,609,1086,1087,816,822],"Vite upgrade","npm overrides","upgrading-to-vite-8-with-nuxt","blog\u002Fupgrading-to-vite-8-with-nuxt","Vite 8 ships with a completely new build engine under the hood. Here's how I upgraded my Nuxt blog to Vite 8, why a direct npm install won't work, and what actually changed.",[1092,609,1093],"Vite","JavaScript","WjqxAKbo2n7U_jxyD8wYxmz_ovQBFWnf0z36erkebV8",{"id":1096,"title":1097,"author":7,"body":1098,"date":1281,"description":1102,"extension":593,"meta":1282,"navigation":595,"path":1283,"seo":1284,"slug":1292,"status":605,"stem":1293,"summary":1294,"tags":1295,"__hash__":1298},"blog\u002Fblog\u002Fdatabase-design-patterns.md","Database Design Patterns",{"type":9,"value":1099,"toc":1271},[1100,1103,1106,1109,1111,1113,1117,1119,1121,1125,1128,1130,1132,1136,1153,1157,1160,1162,1166,1212,1216,1218,1232,1234,1236,1240,1242,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266,1268],[12,1101,1102],{},"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",[12,1104,1105],{},"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",[12,1107,1108],{},"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",[12,1110,1105],{},[12,1112,1108],{},[16,1114,1116],{"id":1115},"introduction","Introduction",[12,1118,1105],{},[12,1120,1108],{},[16,1122,1124],{"id":1123},"key-concepts","Key Concepts",[12,1126,1127],{},"Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.",[12,1129,1105],{},[12,1131,1108],{},[236,1133,1135],{"id":1134},"important-points","Important Points",[828,1137,1138,1141,1144,1147,1150],{},[831,1139,1140],{},"First important consideration about this topic",[831,1142,1143],{},"Second key aspect to understand",[831,1145,1146],{},"Third critical element to remember",[831,1148,1149],{},"Fourth essential principle to follow",[831,1151,1152],{},"Fifth fundamental concept to grasp",[16,1154,1156],{"id":1155},"deep-dive","Deep Dive",[12,1158,1159],{},"Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.",[12,1161,1102],{},[16,1163,1165],{"id":1164},"code-example","Code Example",[29,1167,1171],{"className":1168,"code":1169,"language":1170,"meta":37,"style":37},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Example code snippet\nfunction exampleFunction() {\n  const data = 'Lorem ipsum';\n  console.log(data);\n  return data.toUpperCase();\n}\n\nexampleFunction();\n","javascript",[24,1172,1173,1178,1183,1188,1193,1198,1202,1207],{"__ignoreMap":37},[65,1174,1175],{"class":67,"line":68},[65,1176,1177],{},"\u002F\u002F Example code snippet\n",[65,1179,1180],{"class":67,"line":75},[65,1181,1182],{},"function exampleFunction() {\n",[65,1184,1185],{"class":67,"line":94},[65,1186,1187],{},"  const data = 'Lorem ipsum';\n",[65,1189,1190],{"class":67,"line":109},[65,1191,1192],{},"  console.log(data);\n",[65,1194,1195],{"class":67,"line":123},[65,1196,1197],{},"  return data.toUpperCase();\n",[65,1199,1200],{"class":67,"line":147},[65,1201,710],{},[65,1203,1204],{"class":67,"line":161},[65,1205,1206],{"emptyLinePlaceholder":595},"\n",[65,1208,1209],{"class":67,"line":175},[65,1210,1211],{},"exampleFunction();\n",[16,1213,1215],{"id":1214},"best-practices","Best Practices",[12,1217,1105],{},[1027,1219,1220,1223,1226,1229],{},[831,1221,1222],{},"First best practice to follow",[831,1224,1225],{},"Second recommended approach",[831,1227,1228],{},"Third important guideline",[831,1230,1231],{},"Fourth essential technique",[12,1233,1105],{},[12,1235,1108],{},[16,1237,1239],{"id":1238},"conclusion","Conclusion",[12,1241,1108],{},[12,1243,1127],{},[12,1245,1105],{},[12,1247,1108],{},[12,1249,1105],{},[12,1251,1108],{},[12,1253,1105],{},[12,1255,1108],{},[12,1257,1105],{},[12,1259,1108],{},[12,1261,1105],{},[12,1263,1108],{},[12,1265,1105],{},[12,1267,1108],{},[572,1269,1270],{},"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":37,"searchDepth":75,"depth":94,"links":1272},[1273,1274,1277,1278,1279,1280],{"id":1115,"depth":75,"text":1116},{"id":1123,"depth":75,"text":1124,"children":1275},[1276],{"id":1134,"depth":94,"text":1135},{"id":1155,"depth":75,"text":1156},{"id":1164,"depth":75,"text":1165},{"id":1214,"depth":75,"text":1215},{"id":1238,"depth":75,"text":1239},"2026-01-28",{"url":1283},"\u002Fblog\u002Fdatabase-design-patterns",{"description":1285,"keywords":1286,"title":1097},"Core database design patterns every developer should know — normalization, indexing strategies, ORMs, and when to choose SQL vs NoSQL.",[1287,1288,1289,1290,1291],"Database Design","SQL","NoSQL","Data Modeling","Indexing","database-design-patterns","blog\u002Fdatabase-design-patterns","Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q...",[610,1296,1297],"React","Angular","vtPlvOV21obP54x3kW6AQjSeAdWEXYxqP5q9zzPN7ek",1778492224325]