[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"content:legacy:page:\u002Finterviews\u002Fvue-nuxt":3,"content:legacy:navigation":264,"content:legacy:surround:\u002Finterviews\u002Fvue-nuxt":592},{"id":4,"title":5,"body":6,"description":251,"extension":252,"icon":253,"meta":254,"modifiedAt":255,"navigation":256,"path":257,"publishedAt":258,"seo":259,"sitemap":260,"stem":261,"updatedAt":262,"__hash__":263},"interviews\u002Finterviews\u002Fvue-nuxt.md","Vue and Nuxt",{"type":7,"value":8,"toc":249},"minimark",[9,54,87,108,126,144,173,191,209,227],[10,11,12,36],"collapsible",{},[13,14,16],"template",{"v-slot:title":15},"",[17,18,19],"ol",{},[20,21,22,23,27,28,31,32,35],"li",{},"When should you use ",[24,25,26],"code",{},"ref",", ",[24,29,30],{},"reactive",", and ",[24,33,34],{},"computed","?",[13,37,38,51],{"v-slot:content":15},[39,40,41,42,44,45,47,48,50],"p",{},"Use ",[24,43,26],{}," for a replaceable value, including objects; use ",[24,46,30],{}," when a stable object identity with reactive properties is convenient. Use ",[24,49,34],{}," for derived state that should be cached until its dependencies change.",[39,52,53],{},"Avoid copying derived values into writable state. Be careful when destructuring a reactive object because plain destructuring can lose reactivity unless refs are preserved.",[10,55,56,72],{},[13,57,58],{"v-slot:title":15},[17,59,61],{"start":60},2,[20,62,63,64,67,68,71],{},"How do ",[24,65,66],{},"watch"," and ",[24,69,70],{},"watchEffect"," differ?",[13,73,74,82],{"v-slot:content":15},[39,75,76,78,79,81],{},[24,77,66],{}," tracks explicit sources, gives previous and current values, and runs lazily by default. ",[24,80,70],{}," runs immediately and automatically tracks reactive values read synchronously during the effect.",[39,83,41,84,86],{},[24,85,66],{}," when the dependency contract matters or comparison is needed. Use either API's cleanup mechanism to cancel stale requests, timers, or subscriptions.",[10,88,89,100],{},[13,90,91],{"v-slot:title":15},[17,92,94],{"start":93},3,[20,95,96,97,35],{},"Why are stable keys important in ",[24,98,99],{},"v-for",[13,101,102,105],{"v-slot:content":15},[39,103,104],{},"Keys tell Vue which old vnode corresponds to which new item. A stable identity lets Vue preserve the correct DOM nodes and component state while reordering or inserting items.",[39,106,107],{},"Array indexes are unsafe when order can change because state may follow the position instead of the entity. Use a unique domain identifier whenever possible.",[10,109,110,118],{},[13,111,112],{"v-slot:title":15},[17,113,115],{"start":114},4,[20,116,117],{},"What belongs in a composable?",[13,119,120,123],{"v-slot:content":15},[39,121,122],{},"A composable packages stateful logic using Vue's Composition API: reactive state, lifecycle integration, watchers, and a focused public interface.",[39,124,125],{},"Keep rendering in components, make ownership and cleanup clear, and avoid surprising singleton state. If state must be shared, choose that scope explicitly rather than accidentally creating it at module level.",[10,127,128,136],{},[13,129,130],{"v-slot:title":15},[17,131,133],{"start":132},5,[20,134,135],{},"What causes SSR hydration mismatches?",[13,137,138,141],{"v-slot:content":15},[39,139,140],{},"A mismatch occurs when the server-rendered HTML differs from the client's first render. Common causes include random values, current time, browser-only APIs, client-specific storage, invalid HTML, locale differences, and data changing between renders.",[39,142,143],{},"Make the initial render deterministic, serialize required state, guard browser-only behavior, and defer truly client-only UI until mounting when necessary.",[10,145,146,160],{},[13,147,148],{"v-slot:title":15},[17,149,151],{"start":150},6,[20,152,63,153,67,156,159],{},[24,154,155],{},"useAsyncData",[24,157,158],{},"$fetch"," serve different needs in Nuxt?",[13,161,162,170],{"v-slot:content":15},[39,163,164,166,167,169],{},[24,165,155],{}," integrates asynchronous data with Nuxt's SSR payload, caching keys, reactive refresh, and hydration. ",[24,168,158],{}," is a direct request utility and is appropriate for user-triggered actions or calls that should happen at that moment.",[39,171,172],{},"Using a plain fetch directly during both SSR and client setup can duplicate work if its result is not transferred in the Nuxt payload.",[10,174,175,183],{},[13,176,177],{"v-slot:title":15},[17,178,180],{"start":179},7,[20,181,182],{},"What code should go in server routes rather than the client?",[13,184,185,188],{"v-slot:content":15},[39,186,187],{},"Keep secrets, privileged credentials, trusted validation, authorization, private upstream calls, and database access on the server. The browser can inspect every shipped value and request.",[39,189,190],{},"Treat every client request as untrusted, validate inputs in the server route, and return only the fields the caller is allowed to see.",[10,192,193,201],{},[13,194,195],{"v-slot:title":15},[17,196,198],{"start":197},8,[20,199,200],{},"How do route middleware and server middleware differ?",[13,202,203,206],{"v-slot:content":15},[39,204,205],{},"Route middleware participates in Vue Router navigation and is useful for client-facing redirects or checks based on application state. Server middleware runs for incoming server requests and can attach context, log, or enforce server concerns.",[39,207,208],{},"Client route guards improve UX but do not replace server-side authorization for protected data or mutations.",[10,210,211,219],{},[13,212,213],{"v-slot:title":15},[17,214,216],{"start":215},9,[20,217,218],{},"How would you reduce the JavaScript cost of a Nuxt page?",[13,220,221,224],{"v-slot:content":15},[39,222,223],{},"Measure the bundle, remove unnecessary dependencies, lazy-load route-specific features, prefer server-rendered content when interactivity is not needed, and defer hydration for non-critical components.",[39,225,226],{},"Also optimize images and fonts, avoid shipping large icon collections unintentionally, and confirm improvements with runtime metrics rather than bundle size alone.",[10,228,229,237],{},[13,230,231],{"v-slot:title":15},[17,232,234],{"start":233},10,[20,235,236],{},"What makes a reusable Vue component API maintainable?",[13,238,239,246],{"v-slot:content":15},[39,240,241,242,245],{},"Use focused props for data and configuration, events for meaningful user actions, slots for caller-owned presentation, and ",[24,243,244],{},"v-model"," only for a clear two-way value contract.",[39,247,248],{},"Avoid exposing internal DOM structure, excessive boolean props, or mutation of parent-owned objects. Document defaults, accessibility behavior, and controlled versus uncontrolled state.",{"title":15,"searchDepth":60,"depth":60,"links":250},[],"Vue and Nuxt interview questions covering reactivity, rendering, composables, SSR, hydration, and data fetching.","md","logos:nuxt-icon",{},null,true,"\u002Finterviews\u002Fvue-nuxt","2026-09-21",{"title":5,"description":251},{"loc":257,"lastmod":258},"interviews\u002Fvue-nuxt","2026-09-21T22:49:35+07:00","0wBIwawDxxKBThWh09Tuf-tq6J0mD1pTMTdXKaKheRg",[265,416,524,539],{"title":266,"icon":267,"path":268,"stem":269,"children":270,"page":281},"Posts","fluent-color:data-bar-vertical-ascending-24","\u002Fposts","posts",[271,282,300,326,336,350,360,370,380,406],{"title":272,"icon":273,"redirect":274,"path":275,"stem":276,"children":277,"page":281},"Database","material-icon-theme:database","\u002Fposts\u002Fdatabase\u002Freplication-strategy","\u002Fposts\u002Fdatabase","posts\u002Fdatabase",[278],{"title":279,"path":274,"stem":280,"icon":255},"Database Replication strategy in large systems","posts\u002Fdatabase\u002Freplication-strategy",false,{"title":283,"icon":284,"redirect":285,"path":286,"stem":287,"children":288,"page":281},"Docker","vscode-icons:file-type-docker2","\u002Fposts\u002Fdocker\u002Fdocker-commands","\u002Fposts\u002Fdocker","posts\u002Fdocker",[289,292,296],{"title":290,"path":285,"stem":291,"icon":255},"Docker commands essentials","posts\u002Fdocker\u002Fdocker-commands",{"title":293,"path":294,"stem":295,"icon":255},"Some useful Dockerfile templates","\u002Fposts\u002Fdocker\u002Fdockerfile-templates","posts\u002Fdocker\u002Fdockerfile-templates",{"title":297,"path":298,"stem":299,"icon":255},"Setup Docker environment on Windows","\u002Fposts\u002Fdocker\u002Fsetup-docker-on-window","posts\u002Fdocker\u002Fsetup-docker-on-window",{"title":301,"icon":302,"redirect":303,"path":304,"stem":305,"children":306,"page":281},"Git & GitHub","material-icon-theme:git","\u002Fposts\u002Fgit\u002Fbrightly-decorate-graph","\u002Fposts\u002Fgit","posts\u002Fgit",[307,310,314,318,322],{"title":308,"path":303,"stem":309,"icon":255},"Brightly decorate your GitHub Graph","posts\u002Fgit\u002Fbrightly-decorate-graph",{"title":311,"path":312,"stem":313,"icon":255},"Download a specific folder on GitHub repository","\u002Fposts\u002Fgit\u002Fdownload-specific-folder","posts\u002Fgit\u002Fdownload-specific-folder",{"title":315,"path":316,"stem":317,"icon":255},"Syncing Git Tags across to other repositories","\u002Fposts\u002Fgit\u002Fsyncing-tags-across-repositories","posts\u002Fgit\u002Fsyncing-tags-across-repositories",{"title":319,"path":320,"stem":321,"icon":255},"Unlocking GitHub Achievement badges","\u002Fposts\u002Fgit\u002Funlocking-achievement-badges","posts\u002Fgit\u002Funlocking-achievement-badges",{"title":323,"path":324,"stem":325,"icon":255},"Essential Git commands every developer should master","\u002Fposts\u002Fgit\u002Fuseful-commands-like-pro","posts\u002Fgit\u002Fuseful-commands-like-pro",{"title":327,"icon":328,"redirect":329,"path":330,"stem":331,"children":332,"page":281},"Golang","material-icon-theme:go","\u002Fposts\u002Fgolang\u002Foptimizing-performance-with-pgo","\u002Fposts\u002Fgolang","posts\u002Fgolang",[333],{"title":334,"path":329,"stem":335,"icon":255},"Optimizing Performance in Go Applications with PGO","posts\u002Fgolang\u002Foptimizing-performance-with-pgo",{"title":337,"icon":338,"redirect":339,"path":340,"stem":341,"children":342,"page":281},"JavaScript","vscode-icons:file-type-js","\u002Fposts\u002Fjavascript\u002F9-lines-of-tips","\u002Fposts\u002Fjavascript","posts\u002Fjavascript",[343,346],{"title":344,"path":339,"stem":345,"icon":255},"9 lines of JavaScript replace 50 lines of code","posts\u002Fjavascript\u002F9-lines-of-tips",{"title":347,"path":348,"stem":349,"icon":255},"Javascript Promises - Specific functions and use cases","\u002Fposts\u002Fjavascript\u002Fpromises-cheatsheet","posts\u002Fjavascript\u002Fpromises-cheatsheet",{"title":351,"icon":352,"redirect":353,"path":354,"stem":355,"children":356,"page":281},"Node","material-icon-theme:nodejs-alt","\u002Fposts\u002Fnodejs\u002Fevent-loop","\u002Fposts\u002Fnodejs","posts\u002Fnodejs",[357],{"title":358,"path":353,"stem":359,"icon":255},"Secret about Event Loop flow in Nodejs","posts\u002Fnodejs\u002Fevent-loop",{"title":361,"icon":362,"redirect":363,"path":364,"stem":365,"children":366,"page":281},"Nuxt","vscode-icons:file-type-nuxt","\u002Fposts\u002Fnuxt\u002Fenable-pwa-in-nuxt","\u002Fposts\u002Fnuxt","posts\u002Fnuxt",[367],{"title":368,"path":363,"stem":369,"icon":255},"Enable PWA and Service Worker in Nuxt","posts\u002Fnuxt\u002Fenable-pwa-in-nuxt",{"title":371,"icon":372,"redirect":373,"path":374,"stem":375,"children":376,"page":281},"Performance","emojione:rocket","\u002Fposts\u002Fperformance\u002Fbackground-image-injection-problem","\u002Fposts\u002Fperformance","posts\u002Fperformance",[377],{"title":378,"path":373,"stem":379,"icon":255},"Background-Image injection problem in UX","posts\u002Fperformance\u002Fbackground-image-injection-problem",{"title":381,"icon":382,"redirect":383,"path":384,"stem":385,"children":386,"page":281},"Tutorial","fluent-color:book-open-lightbulb-24","\u002Fposts\u002Ftutorial\u002Fclassification-and-functionality-of-the-servers","\u002Fposts\u002Ftutorial","posts\u002Ftutorial",[387,390,394,398,402],{"title":388,"path":383,"stem":389,"icon":255},"Classification and functionality of the servers","posts\u002Ftutorial\u002Fclassification-and-functionality-of-the-servers",{"title":391,"path":392,"stem":393,"icon":255},"What is the difference between localhost and 127.0.0.1?","\u002Fposts\u002Ftutorial\u002Fdifferent-between-localhost-and-127-0-0-1","posts\u002Ftutorial\u002Fdifferent-between-localhost-and-127-0-0-1",{"title":395,"path":396,"stem":397,"icon":255},"8 essential network protocols every programmer should know","\u002Fposts\u002Ftutorial\u002Fessential-network-protocols","posts\u002Ftutorial\u002Fessential-network-protocols",{"title":399,"path":400,"stem":401,"icon":255},"Pre rels in header link tag - SEO technique enhancement","\u002Fposts\u002Ftutorial\u002Fpre-rels-in-header-link-tag","posts\u002Ftutorial\u002Fpre-rels-in-header-link-tag",{"title":403,"path":404,"stem":405,"icon":255},"Better code with SOLID principles","\u002Fposts\u002Ftutorial\u002Fwhat-is-solid","posts\u002Ftutorial\u002Fwhat-is-solid",{"title":407,"icon":408,"redirect":409,"path":410,"stem":411,"children":412,"page":281},"UI\u002FUX","devicon:figma","\u002Fposts\u002Fuiux\u002Fcommon-button-mistake","\u002Fposts\u002Fuiux","posts\u002Fuiux",[413],{"title":414,"path":409,"stem":415,"icon":255},"Common Button Mistake in UI\u002FUX","posts\u002Fuiux\u002Fcommon-button-mistake",{"title":417,"icon":418,"path":419,"stem":420,"children":421,"page":281},"Cheatsheets","fluent-color:paw-16","\u002Fcheatsheets","cheatsheets",[422,427,432,435,440,443,448,452,457,462,467,472,477,482,486,490,495,500,504,509,514,519],{"title":423,"path":424,"stem":425,"icon":426},"Bash","\u002Fcheatsheets\u002Fbash","cheatsheets\u002Fbash","material-icon-theme:powershell",{"title":428,"path":429,"stem":430,"icon":431},"CSS","\u002Fcheatsheets\u002Fcss","cheatsheets\u002Fcss","vscode-icons:file-type-css2",{"title":283,"path":433,"stem":434,"icon":284},"\u002Fcheatsheets\u002Fdocker","cheatsheets\u002Fdocker",{"title":436,"path":437,"stem":438,"icon":439},"Git","\u002Fcheatsheets\u002Fgit","cheatsheets\u002Fgit","devicon:git",{"title":327,"path":441,"stem":442,"icon":328},"\u002Fcheatsheets\u002Fgo","cheatsheets\u002Fgo",{"title":444,"path":445,"stem":446,"icon":447},"HTML","\u002Fcheatsheets\u002Fhtml","cheatsheets\u002Fhtml","material-icon-theme:html",{"title":337,"path":449,"stem":450,"icon":451},"\u002Fcheatsheets\u002Fjavascript","cheatsheets\u002Fjavascript","material-icon-theme:javascript",{"title":453,"path":454,"stem":455,"icon":456},"Latex","\u002Fcheatsheets\u002Flatex","cheatsheets\u002Flatex","material-icon-theme:latexmk",{"title":458,"path":459,"stem":460,"icon":461},"Linux","\u002Fcheatsheets\u002Flinux","cheatsheets\u002Flinux","devicon:linux",{"title":463,"path":464,"stem":465,"icon":466},"Markdown","\u002Fcheatsheets\u002Fmarkdown","cheatsheets\u002Fmarkdown","material-icon-theme:markdown",{"title":468,"path":469,"stem":470,"icon":471},"Mongo","\u002Fcheatsheets\u002Fmongo","cheatsheets\u002Fmongo","devicon:mongodb",{"title":473,"path":474,"stem":475,"icon":476},"Nest","\u002Fcheatsheets\u002Fnest","cheatsheets\u002Fnest","material-icon-theme:nest",{"title":478,"path":479,"stem":480,"icon":481},"Next","\u002Fcheatsheets\u002Fnext","cheatsheets\u002Fnext","logos:nextjs-icon",{"title":351,"path":483,"stem":484,"icon":485},"\u002Fcheatsheets\u002Fnode","cheatsheets\u002Fnode","material-icon-theme:nodejs",{"title":361,"path":487,"stem":488,"icon":489},"\u002Fcheatsheets\u002Fnuxt","cheatsheets\u002Fnuxt","material-icon-theme:nuxt",{"title":491,"path":492,"stem":493,"icon":494},"React","\u002Fcheatsheets\u002Freact","cheatsheets\u002Freact","material-icon-theme:react",{"title":496,"path":497,"stem":498,"icon":499},"Redis","\u002Fcheatsheets\u002Fredis","cheatsheets\u002Fredis","vscode-icons:folder-type-redis-opened",{"title":501,"path":502,"stem":503,"icon":273},"SQL","\u002Fcheatsheets\u002Fsql","cheatsheets\u002Fsql",{"title":505,"path":506,"stem":507,"icon":508},"Typescript","\u002Fcheatsheets\u002Ftypescript","cheatsheets\u002Ftypescript","material-icon-theme:typescript",{"title":510,"path":511,"stem":512,"icon":513},"Vercel","\u002Fcheatsheets\u002Fvercel","cheatsheets\u002Fvercel","vscode-icons:file-type-light-vercel",{"title":515,"path":516,"stem":517,"icon":518},"Vue","\u002Fcheatsheets\u002Fvue","cheatsheets\u002Fvue","material-icon-theme:vue",{"title":520,"path":521,"stem":522,"icon":523},"Windows","\u002Fcheatsheets\u002Fwindow","cheatsheets\u002Fwindow","material-icon-theme:folder-windows",{"title":525,"icon":526,"path":527,"stem":528,"children":529,"page":281},"Prompts","fluent-color:bot-sparkle-24","\u002Fprompts","prompts",[530],{"title":531,"path":532,"stem":533,"children":534,"page":281},"Image Generation","\u002Fprompts\u002Fimage-generation","prompts\u002Fimage-generation",[535],{"title":536,"path":537,"stem":538,"icon":526},"Futuristic Cloud Workspace","\u002Fprompts\u002Fimage-generation\u002Ffuturistic-cloud-workspace","prompts\u002Fimage-generation\u002Ffuturistic-cloud-workspace",{"title":540,"icon":541,"path":542,"stem":543,"children":544,"page":281},"Interviews","lucide:messages-square","\u002Finterviews","interviews",[545,549,554,557,561,566,571,576,581,586,587],{"title":546,"path":547,"stem":548,"icon":541},"Behavioral Engineering","\u002Finterviews\u002Fbehavioral-engineering","interviews\u002Fbehavioral-engineering",{"title":550,"path":551,"stem":552,"icon":553},"DevOps and Cloud","\u002Finterviews\u002Fdevops-cloud","interviews\u002Fdevops-cloud","logos:docker-icon",{"title":444,"path":555,"stem":556,"icon":447},"\u002Finterviews\u002Fhtml","interviews\u002Fhtml",{"title":337,"path":558,"stem":559,"icon":560},"\u002Finterviews\u002Fjavascript","interviews\u002Fjavascript","logos:javascript",{"title":562,"path":563,"stem":564,"icon":565},"Node.js and API Design","\u002Finterviews\u002Fnodejs-api","interviews\u002Fnodejs-api","logos:nodejs-icon",{"title":567,"path":568,"stem":569,"icon":570},"Software Testing","\u002Finterviews\u002Fsoftware-testing","interviews\u002Fsoftware-testing","lucide:flask-conical",{"title":572,"path":573,"stem":574,"icon":575},"SQL and Databases","\u002Finterviews\u002Fsql-databases","interviews\u002Fsql-databases","lucide:database",{"title":577,"path":578,"stem":579,"icon":580},"System Design","\u002Finterviews\u002Fsystem-design","interviews\u002Fsystem-design","lucide:network",{"title":582,"path":583,"stem":584,"icon":585},"TypeScript","\u002Finterviews\u002Ftypescript","interviews\u002Ftypescript","logos:typescript-icon",{"title":5,"path":257,"stem":261,"icon":253},{"title":588,"path":589,"stem":590,"icon":591},"Web Security","\u002Finterviews\u002Fweb-security","interviews\u002Fweb-security","lucide:shield-check",[593,594],{"title":582,"path":583,"stem":584,"children":-1},{"title":588,"path":589,"stem":590,"children":-1}]