[{"data":1,"prerenderedAt":690},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002Fmigrating-from-wordpress-to-nuxt-content-using-nuxt-studio":142,"\u002Fblog\u002Fmigrating-from-wordpress-to-nuxt-content-using-nuxt-studio-surround":687},[4],{"title":5,"path":6,"stem":7,"children":8,"page":141},"Blog","\u002Fblog","blog",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137],{"title":10,"path":11,"stem":12},"VueJS Introducing Dynamic Layouts using the Atomic Design Principles","\u002Fblog\u002Fvuejs-introducing-dynamic-layouts-using-the-atomic-design-principles","blog\u002F001.vuejs-introducing-dynamic-layouts-using-the-atomic-design-principles",{"title":14,"path":15,"stem":16},"Understanding JavaScript and Its Quirks","\u002Fblog\u002Funderstanding-javascript-and-its-quirks","blog\u002F002.understanding-javascript-and-its-quirks",{"title":18,"path":19,"stem":20},"Introducing Vue’s latest experimental Vapor Mode","\u002Fblog\u002Fintroducing-vues-latest-experimental-vapor-mode","blog\u002F003.introducing-vues-latest-experimental-vapor-mode",{"title":22,"path":23,"stem":24},"ECMAScript 2024 Nears Finalization","\u002Fblog\u002Fecmascript-2024-nears-finalization","blog\u002F004.ecmascript-2024-nears-finalization",{"title":26,"path":27,"stem":28},"UI Libraries for VueJS: Vuetify, Tailwind, and PrimeVue","\u002Fblog\u002Fui-libraries-for-vuejs-vuetify-tailwind-and-primevue","blog\u002F005.ui-libraries-for-vuejs-vuetify-tailwind-and-primevue",{"title":30,"path":31,"stem":32},"Micro Frontend Architecture","\u002Fblog\u002Fmicro-frontend-architecture","blog\u002F006.micro-frontend-architecture",{"title":34,"path":35,"stem":36},"Pre-rendering and Hydration in Vue.js","\u002Fblog\u002Fpre-rendering-and-hydration-in-vuejs","blog\u002F007.pre-rendering-and-hydration-in-vuejs",{"title":38,"path":39,"stem":40},"Satori by Vercel — Dynamic Image Generation in JavaScript","\u002Fblog\u002Fsatori-by-vercel-dynamic-image-generation-in-javascript","blog\u002F008.satori-by-vercel-dynamic-image-generation-in-javascript",{"title":42,"path":43,"stem":44},"Vue.js and Progressive Web Apps (PWA) – Enhancing Web Experiences","\u002Fblog\u002Fvuejs-and-progressive-web-apps-pwa-enhancing-web-experiences","blog\u002F009.vuejs-and-progressive-web-apps-pwa-enhancing-web-experiences",{"title":46,"path":47,"stem":48},"Moving from a Traditional Node.js CRUD API to Serverless Architecture—A Deep Dive","\u002Fblog\u002Fmoving-from-a-traditional-nodejs-crud-api-to-serverless-architecturea-deep-dive","blog\u002F010.moving-from-a-traditional-nodejs-crud-api-to-serverless-architecturea-deep-dive",{"title":50,"path":51,"stem":52},"Nuxt 3 and Serverless Edge Functions—Unlocking Performance and Scalability","\u002Fblog\u002Fnuxt-3-and-serverless-edge-functionsunlocking-performance-and-scalability","blog\u002F011.nuxt-3-and-serverless-edge-functionsunlocking-performance-and-scalability",{"title":54,"path":55,"stem":56},"A Tribute to Asa Bain: Thank You for Everything","\u002Fblog\u002Fa-tribute-to-asa-bain-thank-you-for-everything","blog\u002F012.a-tribute-to-asa-bain-thank-you-for-everything",{"title":58,"path":59,"stem":60},"Migrating JavaScript to TypeScript in ASP.NET MVC Projects","\u002Fblog\u002Fmigrating-javascript-to-typescript-in-aspnet-mvc-projects","blog\u002F013.migrating-javascript-to-typescript-in-aspnet-mvc-projects",{"title":62,"path":63,"stem":64},"Modernizing Classic ASP.NET MVC with Vue.js","\u002Fblog\u002Fmodernizing-classic-aspnet-mvc-with-vuejs","blog\u002F014.modernizing-classic-aspnet-mvc-with-vuejs",{"title":66,"path":67,"stem":68},"Which UI JavaScript Framework Should You Use?","\u002Fblog\u002Fwhich-ui-javascript-framework-should-you-use","blog\u002F015.which-ui-javascript-framework-should-you-use",{"title":70,"path":71,"stem":72},"Vue + AI Integration Workflows: Enhancing Developer Productivity","\u002Fblog\u002Fvue-ai-integration-workflows-enhancing-developer-productivity","blog\u002F016.vue-ai-integration-workflows-enhancing-developer-productivity",{"title":74,"path":75,"stem":76},"OpenAPI Standards & Scalar Integration for Node.js Apps","\u002Fblog\u002Fopenapi-standards-scalar-integration-for-nodejs-apps","blog\u002F017.openapi-standards-scalar-integration-for-nodejs-apps",{"title":78,"path":79,"stem":80},"Nuxt 3.17 — Data Fetching Improvements","\u002Fblog\u002Fnuxt-317-data-fetching-improvements","blog\u002F019.nuxt-317-data-fetching-improvements",{"title":82,"path":83,"stem":84},"Subdomain-Based Multi-Tenancy in Nuxt","\u002Fblog\u002Fsubdomain-based-multi-tenancy-in-nuxt","blog\u002F020.subdomain-based-multi-tenancy-in-nuxt",{"title":86,"path":87,"stem":88},"Type-Safe Backends with TypeScript: tRPC, Zod, and Drizzle ORM","\u002Fblog\u002Ftype-safe-backends-with-typescript-trpc-zod-and-drizzle-orm","blog\u002F021.type-safe-backends-with-typescript-trpc-zod-and-drizzle-orm",{"title":90,"path":91,"stem":92},"Unit Testing Vue Applications with Vitest and Agentic AI","\u002Fblog\u002Funit-testing-vue-applications-with-vitest-and-agentic-ai","blog\u002F022.unit-testing-vue-applications-with-vitest-and-agentic-ai",{"title":94,"path":95,"stem":96},"Hidden Features & Lesser-Known TypeScript Gems","\u002Fblog\u002Fhidden-features-lesser-known-typescript-gems","blog\u002F023.hidden-features-lesser-known-typescript-gems",{"title":98,"path":99,"stem":100},"Nuxt\u002FVercel Acquisition and Its Impact on NuxtHub Users","\u002Fblog\u002Fnuxtvercel-acquisition-and-its-impact-on-nuxthub-users","blog\u002F024.nuxtvercel-acquisition-and-its-impact-on-nuxthub-users",{"title":102,"path":103,"stem":104},"State of Vue & Nuxt Ecosystem 2025","\u002Fblog\u002Fstate-of-vue-nuxt-ecosystem-2025","blog\u002F025.state-of-vue-nuxt-ecosystem-2025",{"title":106,"path":107,"stem":108},"Feature Adoption in TypeScript Over Time","\u002Fblog\u002Ffeature-adoption-in-typescript-over-time","blog\u002F026.feature-adoption-in-typescript-over-time",{"title":110,"path":111,"stem":112},"Migrating From WordPress to Nuxt Content & Using Nuxt Studio","\u002Fblog\u002Fmigrating-from-wordpress-to-nuxt-content-using-nuxt-studio","blog\u002F027.migrating-from-wordpress-to-nuxt-content-using-nuxt-studio",{"title":114,"path":115,"stem":116},"Strategic Topic: The “Rust-ification” of Tooling (Biome & Rolldown)","\u002Fblog\u002Fstrategic-topic-the-rust-ification-of-tooling-biome-rolldown","blog\u002F028.strategic-topic-the-rust-ification-of-tooling-biome-rolldown",{"title":118,"path":119,"stem":120},"Nuxt 4 and the Evolving Full-Stack Framework Landscape","\u002Fblog\u002Fnuxt-4-and-the-evolving-full-stack-framework-landscape","blog\u002F029.nuxt-4-and-the-evolving-full-stack-framework-landscape",{"title":122,"path":123,"stem":124},"Bun as a JavaScript Runtime: Evaluating Readiness Beyond Node.js","\u002Fblog\u002Fbun-as-a-javascript-runtime-evaluating-readiness-beyond-nodejs","blog\u002F030.bun-as-a-javascript-runtime-evaluating-readiness-beyond-nodejs",{"title":126,"path":127,"stem":128},"Top 10 Nuxt Modules That Supercharge Your App From Day One Introduction","\u002Fblog\u002Ftop-10-nuxt-modules-that-supercharge-your-app-from-day-one-introduction","blog\u002F031.top-10-nuxt-modules-that-supercharge-your-app-from-day-one-introduction",{"title":130,"path":131,"stem":132},"Strategic Topic: Vite+, VoidZero, and the Future of Frontend Tooling","\u002Fblog\u002Fstrategic-topic-vite-voidzero-and-the-future-of-frontend-tooling","blog\u002F032.strategic-topic-vite-voidzero-and-the-future-of-frontend-tooling",{"title":134,"path":135,"stem":136},"The Future of Time in JavaScript: Transitioning to the Native Temporal API","\u002Fblog\u002Fthe-future-of-time-in-javascript-transitioning-to-the-native-temporal-api","blog\u002F033.the-future-of-time-in-javascript-transitioning-to-the-native-temporal-api",{"title":138,"path":139,"stem":140},"Understanding Hydration Issues in Nuxt and How Nuxt Hints Helps","\u002Fblog\u002Funderstanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps","blog\u002F034.understanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps",false,{"id":143,"title":110,"author":144,"body":148,"date":678,"description":679,"extension":680,"image":681,"meta":682,"minRead":683,"navigation":684,"path":111,"seo":685,"stem":112,"__hash__":686},"blog\u002Fblog\u002F027.migrating-from-wordpress-to-nuxt-content-using-nuxt-studio.md",{"name":145,"avatar":146},"Sean Erick C. Ramones",{"src":147,"alt":145},"\u002Favatars\u002Fprofile-image-1.png",{"type":149,"value":150,"toc":642},"minimark",[151,156,160,169,172,175,192,199,202,209,216,219,236,239,246,249,252,258,261,275,281,288,291,309,315,318,321,324,326,332,335,347,351,357,360,374,377,383,386,400,403,409,412,426,429,436,443,445,451,455,475,479,502,504,510,514,528,532,535,555,558,560,566,570,573,576,580,583,587,590,593,595,601,604,639],[152,153,155],"h2",{"id":154},"why-we-moved-away-from-wordpress","Why We Moved Away from WordPress",[157,158,159],"p",{},"WordPress offered a convenient CMS, but it came with trade-offs that were becoming increasingly limiting for our workflow:",[161,162,164,165],"h3",{"id":163},"_1-performance-constraints","1. ",[166,167,168],"strong",{},"Performance Constraints",[157,170,171],{},"Dynamic PHP rendering and plugin-heavy pages introduced unnecessary overhead.",[157,173,174],{},"Static pre-rendering with Nuxt instantly improved:",[176,177,178,182,189],"ul",{},[179,180,181],"li",{},"Page load performance",[179,183,184,185,188],{},"TTFB (Time To First Byte ",[166,186,187],{},"describes the time the web-server needs to deliver the first byte to the client",") and Core Web Vitals",[179,190,191],{},"SEO & AEO ranking potential",[161,193,195,196],{"id":194},"_2-maintenance-plugin-bloat","2. ",[166,197,198],{},"Maintenance & Plugin Bloat",[157,200,201],{},"WordPress updates, plugin compatibility, and security patching created overhead without adding meaningful value.",[157,203,204,205,208],{},"Nuxt Content removes most of this friction since content is stored ",[166,206,207],{},"as files",", not database entries.",[161,210,212,213],{"id":211},"_3-developer-experience","3. ",[166,214,215],{},"Developer Experience",[157,217,218],{},"Nuxt gives us:",[176,220,221,224,227,230,233],{},[179,222,223],{},"Code-driven content management",[179,225,226],{},"Real component-driven design",[179,228,229],{},"Clear version control",[179,231,232],{},"Full flexibility in layout and theming",[179,234,235],{},"A predictable build process",[237,238],"hr",{},[240,241,243],"h1",{"id":242},"nuxt-content-how-our-new-architecture-works",[166,244,245],{},"Nuxt Content: How Our New Architecture Works",[157,247,248],{},"Nuxt Content is a Git-first, file-based CMS. All content (markdown, YAML, JSON) lives directly in the repository.",[157,250,251],{},"This gives us several wins:",[152,253,164,255],{"id":254},"_1-content-is-now-code",[166,256,257],{},"Content Is Now “Code”",[157,259,260],{},"Everything sits in Git:",[176,262,263,266,269,272],{},[179,264,265],{},"Every change is tracked",[179,267,268],{},"Easy to review via pull requests",[179,270,271],{},"Revert, branch, sandbox, or test changes independently",[179,273,274],{},"Versioning comes for free",[152,276,195,278],{"id":277},"_2-faster-rendering-with-mdc-markdown-vue-components",[166,279,280],{},"Faster Rendering with MDC (Markdown + Vue Components)",[157,282,283,284,287],{},"Nuxt Content supports ",[166,285,286],{},"interactive Vue components inside markdown",".",[157,289,290],{},"This lets us:",[176,292,293,296,299,302],{},[179,294,295],{},"Drop in reusable CTA components directly in content pages",[179,297,298],{},"Build flexible visual layouts",[179,300,301],{},"Move common sections into shared templates",[179,303,304,305],{},"Avoid manually wiring pages inside ",[306,307,308],"code",{},"pages\u002F",[152,310,212,312],{"id":311},"_3-security-benefits",[166,313,314],{},"Security Benefits",[157,316,317],{},"No WordPress dashboard = dramatically reduced attack surface.",[157,319,320],{},"No plugins. No PHP runtime.",[157,322,323],{},"Just static HTML served from the Nuxt build output.",[237,325],{},[240,327,329],{"id":328},"nuxt-studio-alpha-what-it-adds-to-the-workflow",[166,330,331],{},"Nuxt Studio (Alpha): What It Adds to the Workflow",[157,333,334],{},"Nuxt Studio gives us a visual editing layer on top of Nuxt Content.",[157,336,337,338,341,342,346],{},"We integrated it directly into ",[306,339,340],{},"millerdevelopment.se"," so content changes are visible ",[343,344,345],"em",{},"as you edit",", while still leveraging Git behind the scenes.",[152,348,350],{"id":349},"nuxt-studios-benefits-for-our-team","Nuxt Studio’s Benefits for Our Team:",[161,352,164,354],{"id":353},"_1-live-editing-on-the-real-site",[166,355,356],{},"Live Editing on the Real Site",[157,358,359],{},"Studio lets us:",[176,361,362,365,368,371],{},[179,363,364],{},"Open a page",[179,366,367],{},"Edit its markdown",[179,369,370],{},"See changes update instantly",[179,372,373],{},"Commit them to the repo directly",[157,375,376],{},"It's the closest experience to a traditional CMS, but still Git-driven.",[161,378,195,380],{"id":379},"_2-non-developers-can-edit-safely",[166,381,382],{},"Non-developers Can Edit Safely",[157,384,385],{},"Studio acts as a guardrail:",[176,387,388,391,394,397],{},[179,389,390],{},"File boundaries are respected",[179,392,393],{},"Components appear as visual blocks",[179,395,396],{},"Configuration cannot be accidentally altered",[179,398,399],{},"No need to open VS Code",[157,401,402],{},"Marketing and content personnel can update the website without developer intervention.",[161,404,212,406],{"id":405},"_3-structured-content-editing",[166,407,408],{},"Structured Content Editing",[157,410,411],{},"Studio reads:",[176,413,414,417,420,423],{},[179,415,416],{},"Front matter",[179,418,419],{},"Content collections",[179,421,422],{},"Component props",[179,424,425],{},"Nested directory structures",[157,427,428],{},"This makes it easy to standardize how content is authored.",[161,430,432,433],{"id":431},"_4-better-previewing","4. ",[166,434,435],{},"Better Previewing",[157,437,438,439,442],{},"Unlike WordPress, where staging environments must be maintained, Nuxt Studio previews ",[343,440,441],{},"exactly"," what production will look like, using the actual Nuxt environment.",[237,444],{},[240,446,448],{"id":447},"how-this-improves-our-internal-workflow",[166,449,450],{},"How This Improves Our Internal Workflow",[161,452,454],{"id":453},"before","Before",[176,456,457,460,463,466,469,472],{},[179,458,459],{},"WordPress admin panel",[179,461,462],{},"Plugins\u002Fplugins\u002Fplugins",[179,464,465],{},"Less predictable content structure",[179,467,468],{},"No Git integration",[179,470,471],{},"Manual deployment steps",[179,473,474],{},"High maintenance burden",[161,476,478],{"id":477},"after","After",[176,480,481,484,487,490,493,496,499],{},[179,482,483],{},"Git-first content",[179,485,486],{},"Zero plugin dependency",[179,488,489],{},"Markdown + Vue components for flexible layouts",[179,491,492],{},"Nuxt Studio for real-time visual editing",[179,494,495],{},"Cleaner deployment pipeline",[179,497,498],{},"Clear ownership: devs manage code; content writers manage markdown",[179,500,501],{},"Smaller attack surface",[237,503],{},[240,505,507],{"id":506},"how-we-use-it-in-our-current-project",[166,508,509],{},"How We Use It in Our Current Project",[161,511,513],{"id":512},"miller-development-ab-website","Miller Development AB website",[176,515,516,519,522,525],{},[179,517,518],{},"Fully migrated to Nuxt Content",[179,520,521],{},"Studio enables fast edits without developer bottleneck",[179,523,524],{},"Reusable components keep content consistent",[179,526,527],{},"Theming is now centrally controlled (Typography, spacing, buttons, sections)",[161,529,531],{"id":530},"future-relevance","Future relevance",[157,533,534],{},"We can use this same architecture for:",[176,536,537,540,543,546,549,552],{},[179,538,539],{},"Landing pages",[179,541,542],{},"Documentation portals",[179,544,545],{},"Knowledge bases",[179,547,548],{},"Content-heavy sites in client projects",[179,550,551],{},"Marketing microsites",[179,553,554],{},"Internal dashboards with hybrid content + dynamic data",[157,556,557],{},"It also blends perfectly with Nuxt’s app capabilities, meaning we can progressively add interactive features without changing the content workflow.",[237,559],{},[240,561,563],{"id":562},"trade-offs-and-considerations",[166,564,565],{},"Trade-offs and Considerations",[161,567,569],{"id":568},"_1-nuxt-studio-is-still-in-alpha-up-until-end-of-december-2025-where-stable-v1-is-released","1. Nuxt Studio is still in Alpha (up until end of December 2025 where Stable v1 is released)",[157,571,572],{},"There are occasional rough edges.",[157,574,575],{},"However, its stability is improving quickly.",[161,577,579],{"id":578},"_2-file-based-editing-means-content-must-follow-a-structure","2. File-based editing means content must follow a structure",[157,581,582],{},"This is a plus for maintainability, but requires thoughtful folder design.",[161,584,586],{"id":585},"_3-not-ideal-for-extremely-large-editorial-teams","3. Not ideal for extremely large editorial teams",[157,588,589],{},"Git-based content is fantastic for small–medium teams.",[157,591,592],{},"For huge content-heavy enterprises, a headless CMS may still be preferable.",[237,594],{},[240,596,598],{"id":597},"conclusion",[166,599,600],{},"Conclusion",[157,602,603],{},"The migration from WordPress to Nuxt Content + Nuxt Studio gives us:",[176,605,606,621,627,633,636],{},[179,607,608,609,612,613,616,617,620],{},"A ",[166,610,611],{},"faster",", ",[166,614,615],{},"lighter",", and ",[166,618,619],{},"more maintainable"," site",[179,622,608,623,626],{},[166,624,625],{},"developer-friendly"," codebase fully integrated with Git",[179,628,608,629,632],{},[166,630,631],{},"non-developer-friendly"," visual editor (Nuxt Studio)",[179,634,635],{},"More architectural control and future-proofing",[179,637,638],{},"Stronger security and fewer moving parts",[157,640,641],{},"For Miller Development, this move positions our site for long-term scalability and gives us a flexible foundation for future content-driven web projects.",{"title":643,"searchDepth":644,"depth":644,"links":645},"",2,[646,655,657,659,661],{"id":154,"depth":644,"text":155,"children":647},[648,651,653],{"id":163,"depth":649,"text":650},3,"1. Performance Constraints",{"id":194,"depth":649,"text":652},"2. Maintenance & Plugin Bloat",{"id":211,"depth":649,"text":654},"3. Developer Experience",{"id":254,"depth":644,"text":656},"1. Content Is Now “Code”",{"id":277,"depth":644,"text":658},"2. Faster Rendering with MDC (Markdown + Vue Components)",{"id":311,"depth":644,"text":660},"3. Security Benefits",{"id":349,"depth":644,"text":350,"children":662},[663,665,667,669,671,672,673,674,675,676,677],{"id":353,"depth":649,"text":664},"1. Live Editing on the Real Site",{"id":379,"depth":649,"text":666},"2. Non-developers Can Edit Safely",{"id":405,"depth":649,"text":668},"3. Structured Content Editing",{"id":431,"depth":649,"text":670},"4. Better Previewing",{"id":453,"depth":649,"text":454},{"id":477,"depth":649,"text":478},{"id":512,"depth":649,"text":513},{"id":530,"depth":649,"text":531},{"id":568,"depth":649,"text":569},{"id":578,"depth":649,"text":579},{"id":585,"depth":649,"text":586},"2025-11-01","*By Sean Erick C. Ramones, Vue SME | JavaScript\u002FTypeScript SME*","md","https:\u002F\u002Fimages.pexels.com\u002Fphotos\u002F6424584\u002Fpexels-photo-6424584.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",{},4,true,{"title":110,"description":679},"WBS4aysbsp3uMQ2ptM0Xu9ws0sTqOPioqrZbehJXm_c",[688,689],{"title":106,"path":107,"stem":108,"description":679,"children":-1},{"title":114,"path":115,"stem":116,"description":679,"children":-1},1779638276028]