[{"data":1,"prerenderedAt":406},["Reactive",2],{"$KyeTl6nybl":3,"page-data":4,"page-tree":385},[],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":8,"body":10,"_type":380,"_id":381,"_source":382,"_file":383,"_extension":384},"/documentation/guides/troubleshooting","guides",false,"","Troubleshooting",{"type":11,"children":12,"toc":377},"root",[13,97,171,210,281],{"type":14,"tag":15,"props":16,"children":18},"element","doc-component-demo",{"title":17},"Understanding the project stack",[19,26,31,36,67,71,76],{"type":14,"tag":20,"props":21,"children":22},"p",{},[23],{"type":24,"value":25},"text","Nuxt is a framework that combines a set of tools and libraries to create applications. It's important to know what tools are used in order to understand how to solve potential issues.",{"type":14,"tag":20,"props":27,"children":28},{},[29],{"type":24,"value":30},"It uses Vite as a development tool, and Rollup to build the production version of your app.",{"type":14,"tag":20,"props":32,"children":33},{},[34],{"type":24,"value":35},"We highly encourage you to both read their troubleshooting guides, as they might be able to help you to solve your issue.",{"type":14,"tag":37,"props":38,"children":39},"ul",{},[40,55],{"type":14,"tag":41,"props":42,"children":43},"li",{},[44,53],{"type":14,"tag":45,"props":46,"children":50},"a",{"href":47,"rel":48},"https://vitejs.dev/guide/troubleshooting.html",[49],"nofollow",[51],{"type":24,"value":52},"Vite's troubleshooting guide",{"type":24,"value":54},": contains common issues with the development server (ex: requests stalled, hot reloading, etc.)",{"type":14,"tag":41,"props":56,"children":57},{},[58,65],{"type":14,"tag":45,"props":59,"children":62},{"href":60,"rel":61},"https://rollupjs.org/troubleshooting/",[49],[63],{"type":24,"value":64},"Rollup's troubleshooting guide",{"type":24,"value":66},": contains common issues with the production build (ex: memory issues, tree-shaking, etc.)",{"type":14,"tag":68,"props":69,"children":70},"hr",{},[],{"type":14,"tag":20,"props":72,"children":73},{},[74],{"type":24,"value":75},"Useful resources:",{"type":14,"tag":37,"props":77,"children":78},{},[79,88],{"type":14,"tag":41,"props":80,"children":81},{},[82],{"type":14,"tag":45,"props":83,"children":85},{"href":47,"rel":84},[49],[86],{"type":24,"value":87},"Read troubleshooting guide on vitejs.dev",{"type":14,"tag":41,"props":89,"children":90},{},[91],{"type":14,"tag":45,"props":92,"children":94},{"href":60,"rel":93},[49],[95],{"type":24,"value":96},"Read troubleshooting guide on rollupjs.org",{"type":14,"tag":15,"props":98,"children":100},{"title":99},"Enable CLI debug",[101,106,124,145,157],{"type":14,"tag":20,"props":102,"children":103},{},[104],{"type":24,"value":105},"If you encounter issues that you can't solve, you can start the project in debug mode. This will enable the verbose mode of Nuxt, which will output more information in the console.",{"type":14,"tag":107,"props":108,"children":109},"code-group",{},[110],{"type":14,"tag":111,"props":112,"children":118},"pre",{"className":113,"code":115,"filename":116,"language":117,"meta":8},[114],"language-bash","# Enable Nuxt debug mode\nDEBUG=1 pnpm dev # or pnpm build\n","Terminal","bash",[119],{"type":14,"tag":120,"props":121,"children":122},"code",{"__ignoreMap":8},[123],{"type":24,"value":115},{"type":14,"tag":20,"props":125,"children":126},{},[127,129,135,137,143],{"type":24,"value":128},"Vite also has a debug mode, which can be enabled by setting the ",{"type":14,"tag":120,"props":130,"children":132},{"className":131},[],[133],{"type":24,"value":134},"DEBUG",{"type":24,"value":136}," environment variable to ",{"type":14,"tag":120,"props":138,"children":140},{"className":139},[],[141],{"type":24,"value":142},"vite:*",{"type":24,"value":144},".",{"type":14,"tag":107,"props":146,"children":147},{},[148],{"type":14,"tag":111,"props":149,"children":152},{"className":150,"code":151,"filename":116,"language":117,"meta":8},[114],"# Enable Nuxt & Vite debug mode\nDEBUG=vite:* pnpm dev # or pnpm build\n",[153],{"type":14,"tag":120,"props":154,"children":155},{"__ignoreMap":8},[156],{"type":24,"value":151},{"type":14,"tag":20,"props":158,"children":159},{},[160,162,169],{"type":24,"value":161},"You can send those logs to us on our ",{"type":14,"tag":45,"props":163,"children":166},{"href":164,"rel":165},"https://cssninja.io/faq/support",[49],[167],{"type":24,"value":168},"support portal",{"type":24,"value":170}," if you need help!",{"type":14,"tag":15,"props":172,"children":174},{"title":173},"Increase the memory limit",[175,198],{"type":14,"tag":20,"props":176,"children":177},{},[178,180,187,189,196],{"type":24,"value":179},"When the documentation layer is enabled, or when building the full demo, you may need to increase the memory limit of Node.js. This is because the documentation layer uses ",{"type":14,"tag":45,"props":181,"children":184},{"href":182,"rel":183},"https://github.com/nuxtlabs/nuxt-component-meta",[49],[185],{"type":24,"value":186},"nuxt-component-meta",{"type":24,"value":188}," to generate the components documentation. When building the demo, Rollup will also ",{"type":14,"tag":45,"props":190,"children":193},{"href":191,"rel":192},"https://rollupjs.org/troubleshooting/#error-javascript-heap-out-of-memory",[49],[194],{"type":24,"value":195},"use a lot of memory",{"type":24,"value":197}," to bundle the project.",{"type":14,"tag":107,"props":199,"children":200},{},[201],{"type":14,"tag":111,"props":202,"children":205},{"className":203,"code":204,"filename":116,"language":117,"meta":8},[114],"# Increase the memory limit to 8GB\nNODE_OPTIONS=--max-old-space-size=8192 pnpm demo:build\n",[206],{"type":14,"tag":120,"props":207,"children":208},{"__ignoreMap":8},[209],{"type":24,"value":204},{"type":14,"tag":15,"props":211,"children":213},{"title":212},"Use step-by-step debugger",[214,228,233,238,251,254,258],{"type":14,"tag":20,"props":215,"children":216},{},[217,219,226],{"type":24,"value":218},"You can use the ",{"type":14,"tag":45,"props":220,"children":223},{"href":221,"rel":222},"https://code.visualstudio.com/docs/editor/debugging#_launch-configurations",[49],[224],{"type":24,"value":225},"VS Code debugger",{"type":24,"value":227}," to debug your application. This is useful when you want to inspect the state of your application at a specific time.",{"type":14,"tag":20,"props":229,"children":230},{},[231],{"type":24,"value":232},"Tairo has a pre-configured launch configuration for VS Code. You can use it by clicking on the \"Run and Debug\" button in the sidebar, and then selecting \"fullstack: nuxt\" in the dropdown.",{"type":14,"tag":20,"props":234,"children":235},{},[236],{"type":24,"value":237},"Then you can define breakpoints in your code, and start the debugger. The debugger will stop at the breakpoints you defined, and you will be able to inspect the state of your application.",{"type":14,"tag":20,"props":239,"children":240},{},[241,243,249],{"type":24,"value":242},"In addition to the breakpoints, you can also use the ",{"type":14,"tag":120,"props":244,"children":246},{"className":245},[],[247],{"type":24,"value":248},"debugger",{"type":24,"value":250}," keyword in your code to stop the execution of your application. This is useful when you want to inspect the state of your application at a specific time.",{"type":14,"tag":68,"props":252,"children":253},{},[],{"type":14,"tag":20,"props":255,"children":256},{},[257],{"type":24,"value":75},{"type":14,"tag":37,"props":259,"children":260},{},[261,271],{"type":14,"tag":41,"props":262,"children":263},{},[264],{"type":14,"tag":45,"props":265,"children":268},{"href":266,"rel":267},"https://nuxt.com/docs/guide/going-further/debugging#debugging-in-your-ide",[49],[269],{"type":24,"value":270},"Read Debugging Guide on nuxt.com",{"type":14,"tag":41,"props":272,"children":273},{},[274],{"type":14,"tag":45,"props":275,"children":278},{"href":276,"rel":277},"https://vuejs.org/guide/extras/reactivity-in-depth.html#reactivity-debugging",[49],[279],{"type":24,"value":280},"Read Reactivity Debugging on vuejs.org",{"type":14,"tag":15,"props":282,"children":284},{"title":283},"Use Nuxt devtools",[285,299,312,324,337,351,354,358],{"type":14,"tag":20,"props":286,"children":287},{},[288,290,297],{"type":24,"value":289},"You can install the ",{"type":14,"tag":45,"props":291,"children":294},{"href":292,"rel":293},"https://devtools.nuxt.com/",[49],[295],{"type":24,"value":296},"Nuxt devtools",{"type":24,"value":298}," which provide a set of tools to inspect your application. This is useful when you want to inspect the state of your application at a specific time, inspect components, pages, etc.",{"type":14,"tag":20,"props":300,"children":301},{},[302,304,310],{"type":24,"value":303},"First you need to install the ",{"type":14,"tag":120,"props":305,"children":307},{"className":306},[],[308],{"type":24,"value":309},"@nuxt/devtools",{"type":24,"value":311}," package in your project:",{"type":14,"tag":107,"props":313,"children":314},{},[315],{"type":14,"tag":111,"props":316,"children":319},{"className":317,"code":318,"filename":116,"language":117,"meta":8},[114],"pnpm --filter=app install --dev @nuxt/devtools\n",[320],{"type":14,"tag":120,"props":321,"children":322},{"__ignoreMap":8},[323],{"type":24,"value":318},{"type":14,"tag":20,"props":325,"children":326},{},[327,329,335],{"type":24,"value":328},"Then simply enable the devtools in your ",{"type":14,"tag":120,"props":330,"children":332},{"className":331},[],[333],{"type":24,"value":334},"\u003Capp>/nuxt.config.ts",{"type":24,"value":336}," file:",{"type":14,"tag":107,"props":338,"children":339},{},[340],{"type":14,"tag":111,"props":341,"children":346},{"className":342,"code":344,"filename":334,"language":345,"meta":8},[343],"language-ts","export default defineNuxtConfig({\n  devtools: { enabled: true },\n})\n","ts",[347],{"type":14,"tag":120,"props":348,"children":349},{"__ignoreMap":8},[350],{"type":24,"value":344},{"type":14,"tag":68,"props":352,"children":353},{},[],{"type":14,"tag":20,"props":355,"children":356},{},[357],{"type":24,"value":75},{"type":14,"tag":37,"props":359,"children":360},{},[361,369],{"type":14,"tag":41,"props":362,"children":363},{},[364],{"type":14,"tag":45,"props":365,"children":367},{"href":266,"rel":366},[49],[368],{"type":24,"value":270},{"type":14,"tag":41,"props":370,"children":371},{},[372],{"type":14,"tag":45,"props":373,"children":375},{"href":276,"rel":374},[49],[376],{"type":24,"value":280},{"title":8,"searchDepth":378,"depth":378,"links":379},2,[],"markdown","content:documentation:50.guides:20.troubleshooting.md","content","documentation/50.guides/20.troubleshooting.md","md",[386,392,399],{"_path":387,"_dir":8,"_draft":7,"_partial":7,"_locale":8,"title":388,"description":8,"toc":389,"_type":380,"_id":390,"_source":382,"_file":391,"_extension":384},"/documentation","مرکز مستندات",true,"content:documentation:1.index.md","documentation/1.index.md",{"_path":393,"_dir":6,"_draft":7,"_partial":389,"_locale":8,"title":394,"_id":395,"_type":396,"_source":382,"_file":397,"_extension":398},"/documentation/guides/_dir","Guides","content:documentation:50.guides:_dir.yml","yaml","documentation/50.guides/_dir.yml","yml",{"_path":400,"_dir":401,"_draft":7,"_partial":7,"_locale":8,"title":8,"description":402,"navigation":7,"redirect":403,"_type":380,"_id":404,"_source":382,"_file":405,"_extension":384},"/documentation/guides","documentation","Redirecting to panels...","/documentation/guides/panels","content:documentation:50.guides:1.index.md","documentation/50.guides/1.index.md",1779173504619]