[{"data":1,"prerenderedAt":20885},["ShallowReactive",2],{"category-development-en":3,"category-posts-development-en":22,"author-en-raed-bahri":20862,"category-en-development":20879},{"id":4,"title":5,"description":6,"extension":7,"image":8,"locale":9,"meta":10,"slug":19,"stem":20,"__hash__":21},"categories_en/en/categories/development.md","Development","Technical articles and tutorials for developers.","md","/images/development.avif","en",{"path":11,"body":12},"/en/categories/development",{"type":13,"value":14,"toc":15},"minimark",[],{"title":16,"searchDepth":17,"depth":17,"links":18},"",3,[],"development","en/categories/development","vv9pVu7ow61Y7Dcz8LWUDC39YazUTK-_sSU8t9k52WA",[23,213,4785,5391,8216,16055,16452,20111,20229,20405,20525,20622,20708,20784],{"id":24,"title":25,"author":26,"body":27,"category":19,"description":32,"extension":7,"image":189,"isDraft":190,"isFeatured":190,"locale":9,"meta":191,"navigation":199,"path":200,"publishedAt":201,"readingTime":202,"seo":203,"stem":192,"tags":204,"updatedAt":211,"__hash__":212},"articles_en/best-programming-language-to-learn-in-2023.md","Best Programming Language to Learn in 2023","raed-bahri",{"type":13,"value":28,"toc":176},[29,33,36,41,44,47,50,54,57,60,63,67,70,73,76,80,83,86,89,93,96,99,102,105,109,112,115,118,122,125,128,131,135,138,141,144,148,151,154,157,160,163,167,170,173],[30,31,32],"p",{},"As a beginner programmer, it can be overwhelming to choose which programming language to learn first. With so many options available, it's difficult to know which one will be the most useful and in demand in the coming years.",[30,34,35],{},"If you're trying to decide which programming language to learn in 2023, there are a few key factors to consider. In this article, we'll explore some of the top programming languages and discuss why they might be good choices for those looking to get started in the field.",[37,38,40],"h2",{"id":39},"python","Python",[30,42,43],{},"Python is a popular, high-level programming language known for its simplicity and flexibility. It's often used for web development, data analysis, and scientific computing, and it has a large and active community of developers.",[30,45,46],{},"One of the biggest advantages of Python is its readability. Its syntax is straightforward and easy to understand, making it a great choice for beginners. Python also has a wide range of libraries and frameworks, such as Django and Flask, which make it easy to build web applications and perform data analysis.",[30,48,49],{},"In terms of job demand, Python is one of the most in-demand programming languages. According to the 2020 Stack Overflow Developer Survey, Python is the third most popular language, and it's frequently used in industries such as finance, healthcare, and technology.",[37,51,53],{"id":52},"javascript","JavaScript",[30,55,56],{},"JavaScript is another popular programming language used for web development. It's often used in combination with HTML and CSS to build interactive and dynamic websites.",[30,58,59],{},"One of the benefits of JavaScript is its versatility. In addition to web development, it's also used for mobile development, game development, and data visualization. It has a large and active community of developers, and there are many libraries and frameworks, such as React and Angular, that can make development faster and more efficient.",[30,61,62],{},"JavaScript is also in high demand in the job market. According to the 2020 Stack Overflow Developer Survey, it's the most popular programming language, and it's used in a wide range of industries, including finance, e-commerce, and media.",[37,64,66],{"id":65},"java","Java",[30,68,69],{},"Java is a popular, high-level programming language used for building a variety of applications, including web, mobile, and desktop applications. It's known for its portability, as the same Java code can run on any device that supports the Java Virtual Machine (JVM).",[30,71,72],{},"Java has a large and active community of developers, and it's used in a variety of industries, including finance, healthcare, and retail. It's also a popular choice for Android mobile development, as it's the primary language supported by Android Studio, the official Android development environment.",[30,74,75],{},"In terms of job demand, Java is a solid choice. According to the 2020 Stack Overflow Developer Survey, it's the second most popular programming language, and it's used in a wide range of industries.",[37,77,79],{"id":78},"c","C++",[30,81,82],{},"C++ is a high-performance programming language used for building a variety of applications, including system software, games, and mobile apps. It's known for its efficiency and speed, and it's often used in resource-intensive applications where performance is critical.",[30,84,85],{},"C++ is a more advanced language and may be more difficult for beginners to learn. However, it's a good choice for those who are interested in low-level programming and want to learn more about how computers work under the hood.",[30,87,88],{},"In terms of job demand, C++ is a popular choice in industries such as gaming, finance, and aerospace. It's also used in the development of many popular software programs, such as Photoshop and Chrome.",[37,90,92],{"id":91},"swift","Swift",[30,94,95],{},"Swift is a modern, high-level programming language used for building iOS and macOS applications. It was developed by Apple and is designed to be easy to read and write, while also providing powerful capabilities.",[30,97,98],{},"One of the benefits of Swift is its focus on safety. It has built-in error checking and prevents common programming mistakes, which can save time and reduce the risk of bugs in your code. Swift is also known for its performance, as it's able to run code faster than many other high-level languages.",[30,100,101],{},"In terms of job demand, Swift is a good choice for those interested in mobile development, as it's the primary language used for building iOS and macOS applications. It's also used in industries such as education, healthcare, and finance.",[30,103,104],{},"While Swift is a relatively new language, it's gained popularity quickly and has a large and active community of developers. It's also constantly being updated and improved, making it a good choice for those who want to stay up-to-date with the latest developments in the field.",[37,106,108],{"id":107},"go","Go",[30,110,111],{},"Go (also known as Golang) is a programming language developed by Google. It's a statically-typed language that's known for its simplicity, concurrency, and performance.",[30,113,114],{},"One of the benefits of Go is its simplicity. It has a small, easy-to-learn syntax and a standard library that provides many common programming tasks, making it a good choice for beginners. Go is also designed to be concurrent, meaning it can handle multiple tasks at the same time, which can make it faster and more efficient for certain types of applications.",[30,116,117],{},"In terms of job demand, Go is a popular choice for building server-side applications and microservices, and it's used in industries such as finance, healthcare, and technology. It has a growing community of developers and is constantly being updated and improved.",[37,119,121],{"id":120},"rust","Rust",[30,123,124],{},"Rust is a programming language designed for performance and safety. It's a statically-typed language that's known for its speed, reliability, and concurrency.",[30,126,127],{},"One of the benefits of Rust is its focus on safety. It has a strict type system and includes features such as borrow checking and ownership, which help prevent common programming errors and reduce the risk of bugs in your code. Rust is also designed to be concurrent, meaning it can handle multiple tasks at the same time, which can make it faster and more efficient for certain types of applications.",[30,129,130],{},"In terms of job demand, Rust is a popular choice for building low-level systems, such as operating systems and web browsers, and it's used in industries such as finance, healthcare, and technology. It has a growing community of developers and is constantly being updated and improved.",[37,132,134],{"id":133},"clojure","Clojure",[30,136,137],{},"Clojure is a functional programming language that runs on the Java Virtual Machine (JVM). It's known for its simplicity, concurrency, and flexibility.",[30,139,140],{},"One of the benefits of Clojure is its focus on simplicity. It has a small, easy-to-learn syntax and a standard library that provides many common programming tasks, making it a good choice for beginners. Clojure is also designed to be concurrent, meaning it can handle multiple tasks at the same time, which can make it faster and more efficient for certain types of applications.",[30,142,143],{},"In terms of job demand, Clojure is a popular choice for building server-side applications and is used in industries such as finance, healthcare, and technology. It has a growing community of developers and is constantly being updated and improved.",[37,145,147],{"id":146},"ruby","Ruby",[30,149,150],{},"Ruby is a high-level, dynamically-typed programming language known for its simplicity and flexibility. It's often used for web development, scripting, and data analysis, and it has a large and active community of developers.",[30,152,153],{},"One of the benefits of Ruby is its readability. Its syntax is straightforward and easy to understand, making it a great choice for beginners. Ruby also has a wide range of libraries and frameworks, such as Rails and Sinatra, which make it easy to build web applications and perform data analysis.",[30,155,156],{},"In terms of job demand, Ruby is a popular choice for web development and is frequently used in industries such as finance, healthcare, and technology. It's also a good choice for those interested in building web applications quickly, as the Rails framework makes it easy to build and deploy applications.",[30,158,159],{},"Ruby is known for its friendly and welcoming community, and it has a large number of resources and tutorials available for those learning the language. It's also constantly being updated and improved, making it a good choice for those who want to stay up-to-date with the latest developments in the field.",[30,161,162],{},"Overall, Ruby is a good choice for those interested in web development and looking for a language that's easy to read and write. With its wide range of libraries and frameworks, it's a powerful tool for building web applications and performing data analysis.",[37,164,166],{"id":165},"conclusion","Conclusion",[30,168,169],{},"There are many programming languages to choose from, and it can be difficult to decide which one to learn first. Ultimately, the best programming language for you will depend on your goals and interests.",[30,171,172],{},"If you're just starting out and want to learn a language that's easy to read and write, Python or JavaScript might be good choices. If you're interested in mobile development, Swift or Java might be more suitable. And if you're interested in low-level programming and performance, C++ could be a good option.",[30,174,175],{},"No matter which language you choose, it's important to be consistent and dedicated to your learning. With hard work and persistence, you can master any programming language and achieve your goals as a developer.",{"title":16,"searchDepth":17,"depth":17,"links":177},[178,180,181,182,183,184,185,186,187,188],{"id":39,"depth":179,"text":40},2,{"id":52,"depth":179,"text":53},{"id":65,"depth":179,"text":66},{"id":78,"depth":179,"text":79},{"id":91,"depth":179,"text":92},{"id":107,"depth":179,"text":108},{"id":120,"depth":179,"text":121},{"id":133,"depth":179,"text":134},{"id":146,"depth":179,"text":147},{"id":165,"depth":179,"text":166},"https://images.unsplash.com/photo-1546410531-bb4caa6b424d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDE4fHxwcm9ncmFtbWluZyUyMGxhbmd1YWdlfGVufDB8fHx8MTY3MTE1NDE5OQ&ixlib=rb-4.0.3&q=80&w=2000",false,{"slug":192,"excerpt":193},"best-programming-language-to-learn-in-2023",{"type":13,"value":194},[195,197],[30,196,32],{},[30,198,35],{},true,"/best-programming-language-to-learn-in-2023","2022-12-19T09:42:26.000Z",8,{"title":25,"description":32},[39,52,205,91,146,120,107,206,207,208,209,210],"c++","ui-ux","learning","web-development","career","ai",null,"W8A14yKKWF5htIFvN1GmkvOJcpOCf6OsgJIaYAQTbrQ",{"id":214,"title":215,"author":26,"body":216,"category":19,"description":4766,"extension":7,"image":4767,"isDraft":190,"isFeatured":199,"locale":9,"meta":4768,"navigation":199,"path":4773,"publishedAt":4774,"readingTime":594,"seo":4775,"stem":4776,"tags":4777,"updatedAt":4774,"__hash__":4784},"articles_en/building-multilingual-blogs-nuxt-content.md","Building a Production-Ready Multilingual Blog with Nuxt Content & i18n",{"type":13,"value":217,"toc":4734},[218,221,225,228,257,261,264,281,285,288,332,335,365,369,376,744,748,751,759,766,851,857,931,935,942,1576,1580,1585,2308,2312,2318,2878,2882,2887,3194,3198,3201,3206,3494,3497,3615,3619,3625,3872,3876,3881,3979,3985,4063,4068,4163,4167,4172,4175,4189,4193,4196,4215,4219,4225,4300,4304,4307,4328,4332,4335,4429,4433,4437,4443,4483,4487,4498,4517,4521,4532,4571,4575,4579,4585,4641,4645,4648,4652,4659,4698,4700,4703,4721,4724,4727,4730],[30,219,220],{},"This tutorial will guide you through building a complete multilingual blog system using Nuxt 3, Nuxt Content, and Nuxt i18n. You're actually reading this on a blog built with this exact stack! I'll share the real implementation details, code snippets, and best practices I used.",[37,222,224],{"id":223},"why-build-a-multilingual-blog","Why Build a Multilingual Blog?",[30,226,227],{},"Before diving into the technical implementation, let's understand the benefits:",[229,230,231,239,245,251],"ul",{},[232,233,234,238],"li",{},[235,236,237],"strong",{},"Wider Reach",": Access global audiences in their native languages",[232,240,241,244],{},[235,242,243],{},"Better SEO",": Rank in search results across different language regions",[232,246,247,250],{},[235,248,249],{},"Improved UX",": Users engage more with content in their preferred language",[232,252,253,256],{},[235,254,255],{},"Professional Image",": Shows commitment to serving diverse audiences",[37,258,260],{"id":259},"project-overview","Project Overview",[30,262,263],{},"This blog supports both English and Arabic (with RTL support), featuring:",[229,265,266,269,272,275,278],{},[232,267,268],{},"Locale-based content organization",[232,270,271],{},"Dynamic category and author localization",[232,273,274],{},"SEO optimization with hreflang tags",[232,276,277],{},"Language switcher",[232,279,280],{},"Responsive design with RTL/LTR support",[37,282,284],{"id":283},"step-1-project-setup","Step 1: Project Setup",[30,286,287],{},"First, create a new Nuxt 3 project:",[289,290,294],"pre",{"className":291,"code":292,"language":293,"meta":16,"style":16},"language-bash shiki shiki-themes github-light dark-plus dark-plus","npx nuxi@latest init my-multilingual-blog\ncd my-multilingual-blog\nnpm install\n","bash",[295,296,297,316,324],"code",{"__ignoreMap":16},[298,299,302,306,310,313],"span",{"class":300,"line":301},"line",1,[298,303,305],{"class":304},"svuFb","npx",[298,307,309],{"class":308},"sGDl4"," nuxi@latest",[298,311,312],{"class":308}," init",[298,314,315],{"class":308}," my-multilingual-blog\n",[298,317,318,322],{"class":300,"line":179},[298,319,321],{"class":320},"sNX3-","cd",[298,323,315],{"class":308},[298,325,326,329],{"class":300,"line":17},[298,327,328],{"class":304},"npm",[298,330,331],{"class":308}," install\n",[30,333,334],{},"Install required dependencies:",[289,336,338],{"className":291,"code":337,"language":293,"meta":16,"style":16},"npm install @nuxt/content @nuxtjs/i18n @nuxtjs/tailwindcss\nnpm install dayjs\n",[295,339,340,356],{"__ignoreMap":16},[298,341,342,344,347,350,353],{"class":300,"line":301},[298,343,328],{"class":304},[298,345,346],{"class":308}," install",[298,348,349],{"class":308}," @nuxt/content",[298,351,352],{"class":308}," @nuxtjs/i18n",[298,354,355],{"class":308}," @nuxtjs/tailwindcss\n",[298,357,358,360,362],{"class":300,"line":179},[298,359,328],{"class":304},[298,361,346],{"class":308},[298,363,364],{"class":308}," dayjs\n",[37,366,368],{"id":367},"step-2-configure-nuxt-modules","Step 2: Configure Nuxt Modules",[30,370,371,372,375],{},"Update your ",[295,373,374],{},"nuxt.config.ts",":",[289,377,381],{"className":378,"code":379,"language":380,"meta":16,"style":16},"language-typescript shiki shiki-themes github-light dark-plus dark-plus","// nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: [\n    \"@nuxt/content\",\n    \"@nuxtjs/i18n\",\n    \"@nuxtjs/tailwindcss\"\n  ],\n  \n  i18n: {\n    locales: [\n      {\n        code: \"en\",\n        iso: \"en-US\",\n        name: \"English\",\n        file: \"en.json\",\n        dir: \"ltr\"\n      },\n      {\n        code: \"ar\",\n        iso: \"ar-SA\",\n        name: \"العربية\",\n        file: \"ar.json\",\n        dir: \"rtl\" // Important for Arabic\n      }\n    ],\n    defaultLocale: \"en\",\n    strategy: \"prefix_except_default\", // URLs: /blog, /ar/blog\n    lazy: true,\n    langDir: \"i18n/locales/\",\n    detectBrowserLanguage: {\n      useCookie: true,\n      cookieKey: \"i18n_redirected\",\n      redirectOn: \"root\"\n    }\n  },\n\n  content: {\n    highlight: {\n      theme: \"github-dark\"\n    }\n  }\n});\n","typescript",[295,382,383,389,405,414,423,431,437,443,448,457,465,471,482,493,504,515,524,530,535,545,555,565,575,586,592,598,608,623,635,646,654,664,675,684,690,696,702,710,718,727,732,738],{"__ignoreMap":16},[298,384,385],{"class":300,"line":301},[298,386,388],{"class":387},"s56mj","// nuxt.config.ts\n",[298,390,391,395,398,401],{"class":300,"line":179},[298,392,394],{"class":393},"sEkCa","export",[298,396,397],{"class":393}," default",[298,399,400],{"class":304}," defineNuxtConfig",[298,402,404],{"class":403},"sG4b4","({\n",[298,406,407,411],{"class":300,"line":17},[298,408,410],{"class":409},"sZiGn","  modules:",[298,412,413],{"class":403}," [\n",[298,415,417,420],{"class":300,"line":416},4,[298,418,419],{"class":308},"    \"@nuxt/content\"",[298,421,422],{"class":403},",\n",[298,424,426,429],{"class":300,"line":425},5,[298,427,428],{"class":308},"    \"@nuxtjs/i18n\"",[298,430,422],{"class":403},[298,432,434],{"class":300,"line":433},6,[298,435,436],{"class":308},"    \"@nuxtjs/tailwindcss\"\n",[298,438,440],{"class":300,"line":439},7,[298,441,442],{"class":403},"  ],\n",[298,444,445],{"class":300,"line":202},[298,446,447],{"class":403},"  \n",[298,449,451,454],{"class":300,"line":450},9,[298,452,453],{"class":409},"  i18n:",[298,455,456],{"class":403}," {\n",[298,458,460,463],{"class":300,"line":459},10,[298,461,462],{"class":409},"    locales:",[298,464,413],{"class":403},[298,466,468],{"class":300,"line":467},11,[298,469,470],{"class":403},"      {\n",[298,472,474,477,480],{"class":300,"line":473},12,[298,475,476],{"class":409},"        code:",[298,478,479],{"class":308}," \"en\"",[298,481,422],{"class":403},[298,483,485,488,491],{"class":300,"line":484},13,[298,486,487],{"class":409},"        iso:",[298,489,490],{"class":308}," \"en-US\"",[298,492,422],{"class":403},[298,494,496,499,502],{"class":300,"line":495},14,[298,497,498],{"class":409},"        name:",[298,500,501],{"class":308}," \"English\"",[298,503,422],{"class":403},[298,505,507,510,513],{"class":300,"line":506},15,[298,508,509],{"class":409},"        file:",[298,511,512],{"class":308}," \"en.json\"",[298,514,422],{"class":403},[298,516,518,521],{"class":300,"line":517},16,[298,519,520],{"class":409},"        dir:",[298,522,523],{"class":308}," \"ltr\"\n",[298,525,527],{"class":300,"line":526},17,[298,528,529],{"class":403},"      },\n",[298,531,533],{"class":300,"line":532},18,[298,534,470],{"class":403},[298,536,538,540,543],{"class":300,"line":537},19,[298,539,476],{"class":409},[298,541,542],{"class":308}," \"ar\"",[298,544,422],{"class":403},[298,546,548,550,553],{"class":300,"line":547},20,[298,549,487],{"class":409},[298,551,552],{"class":308}," \"ar-SA\"",[298,554,422],{"class":403},[298,556,558,560,563],{"class":300,"line":557},21,[298,559,498],{"class":409},[298,561,562],{"class":308}," \"العربية\"",[298,564,422],{"class":403},[298,566,568,570,573],{"class":300,"line":567},22,[298,569,509],{"class":409},[298,571,572],{"class":308}," \"ar.json\"",[298,574,422],{"class":403},[298,576,578,580,583],{"class":300,"line":577},23,[298,579,520],{"class":409},[298,581,582],{"class":308}," \"rtl\"",[298,584,585],{"class":387}," // Important for Arabic\n",[298,587,589],{"class":300,"line":588},24,[298,590,591],{"class":403},"      }\n",[298,593,595],{"class":300,"line":594},25,[298,596,597],{"class":403},"    ],\n",[298,599,601,604,606],{"class":300,"line":600},26,[298,602,603],{"class":409},"    defaultLocale:",[298,605,479],{"class":308},[298,607,422],{"class":403},[298,609,611,614,617,620],{"class":300,"line":610},27,[298,612,613],{"class":409},"    strategy:",[298,615,616],{"class":308}," \"prefix_except_default\"",[298,618,619],{"class":403},", ",[298,621,622],{"class":387},"// URLs: /blog, /ar/blog\n",[298,624,626,629,633],{"class":300,"line":625},28,[298,627,628],{"class":409},"    lazy:",[298,630,632],{"class":631},"s7v1m"," true",[298,634,422],{"class":403},[298,636,638,641,644],{"class":300,"line":637},29,[298,639,640],{"class":409},"    langDir:",[298,642,643],{"class":308}," \"i18n/locales/\"",[298,645,422],{"class":403},[298,647,649,652],{"class":300,"line":648},30,[298,650,651],{"class":409},"    detectBrowserLanguage:",[298,653,456],{"class":403},[298,655,657,660,662],{"class":300,"line":656},31,[298,658,659],{"class":409},"      useCookie:",[298,661,632],{"class":631},[298,663,422],{"class":403},[298,665,667,670,673],{"class":300,"line":666},32,[298,668,669],{"class":409},"      cookieKey:",[298,671,672],{"class":308}," \"i18n_redirected\"",[298,674,422],{"class":403},[298,676,678,681],{"class":300,"line":677},33,[298,679,680],{"class":409},"      redirectOn:",[298,682,683],{"class":308}," \"root\"\n",[298,685,687],{"class":300,"line":686},34,[298,688,689],{"class":403},"    }\n",[298,691,693],{"class":300,"line":692},35,[298,694,695],{"class":403},"  },\n",[298,697,699],{"class":300,"line":698},36,[298,700,701],{"emptyLinePlaceholder":199},"\n",[298,703,705,708],{"class":300,"line":704},37,[298,706,707],{"class":409},"  content:",[298,709,456],{"class":403},[298,711,713,716],{"class":300,"line":712},38,[298,714,715],{"class":409},"    highlight:",[298,717,456],{"class":403},[298,719,721,724],{"class":300,"line":720},39,[298,722,723],{"class":409},"      theme:",[298,725,726],{"class":308}," \"github-dark\"\n",[298,728,730],{"class":300,"line":729},40,[298,731,689],{"class":403},[298,733,735],{"class":300,"line":734},41,[298,736,737],{"class":403},"  }\n",[298,739,741],{"class":300,"line":740},42,[298,742,743],{"class":403},"});\n",[37,745,747],{"id":746},"step-3-create-content-structure","Step 3: Create Content Structure",[30,749,750],{},"Organize your content by locale:",[289,752,757],{"className":753,"code":755,"language":756},[754],"language-text","content/\n├── en/\n│   ├── articles/\n│   │   ├── my-first-post.md\n│   │   └── another-post.md\n│   ├── authors/\n│   │   └── raed-bahri.md\n│   └── categories/\n│       └── development.md\n├── ar/\n│   ├── articles/\n│   │   ├── my-first-post.md\n│   │   └── another-post.md\n│   ├── authors/\n│   │   └── رائد-البحري.md\n│   └── categories/\n│       └── التطوير.md\n","text",[295,758,755],{"__ignoreMap":16},[30,760,761,762,765],{},"Example English article (",[295,763,764],{},"content/en/articles/my-first-post.md","):",[289,767,771],{"className":768,"code":769,"language":770,"meta":16,"style":16},"language-markdown shiki shiki-themes github-light dark-plus dark-plus","---\ntitle: \"My First Blog Post\"\ndescription: \"Introduction to my multilingual blog\"\npublishedAt: \"2025-01-10\"\nauthor: \"raed-bahri\"\ncategory: \"development\"\ntags:\n  - nuxt\n  - tutorial\nimage: \"/images/blog/post-1.jpg\"\nisFeatured: true\nreadingTime: 5\nlocale: \"en\"\n---\n\nYour content here...\n","markdown",[295,772,773,778,783,788,793,798,803,808,813,818,823,828,833,838,842,846],{"__ignoreMap":16},[298,774,775],{"class":300,"line":301},[298,776,777],{},"---\n",[298,779,780],{"class":300,"line":179},[298,781,782],{},"title: \"My First Blog Post\"\n",[298,784,785],{"class":300,"line":17},[298,786,787],{},"description: \"Introduction to my multilingual blog\"\n",[298,789,790],{"class":300,"line":416},[298,791,792],{},"publishedAt: \"2025-01-10\"\n",[298,794,795],{"class":300,"line":425},[298,796,797],{},"author: \"raed-bahri\"\n",[298,799,800],{"class":300,"line":433},[298,801,802],{},"category: \"development\"\n",[298,804,805],{"class":300,"line":439},[298,806,807],{},"tags:\n",[298,809,810],{"class":300,"line":202},[298,811,812],{},"  - nuxt\n",[298,814,815],{"class":300,"line":450},[298,816,817],{},"  - tutorial\n",[298,819,820],{"class":300,"line":459},[298,821,822],{},"image: \"/images/blog/post-1.jpg\"\n",[298,824,825],{"class":300,"line":467},[298,826,827],{},"isFeatured: true\n",[298,829,830],{"class":300,"line":473},[298,831,832],{},"readingTime: 5\n",[298,834,835],{"class":300,"line":484},[298,836,837],{},"locale: \"en\"\n",[298,839,840],{"class":300,"line":495},[298,841,777],{},[298,843,844],{"class":300,"line":506},[298,845,701],{"emptyLinePlaceholder":199},[298,847,848],{"class":300,"line":517},[298,849,850],{},"Your content here...\n",[30,852,853,854,765],{},"Example Arabic article (",[295,855,856],{},"content/ar/articles/my-first-post.md",[289,858,860],{"className":768,"code":859,"language":770,"meta":16,"style":16},"---\ntitle: \"مقالتي الأولى\"\ndescription: \"مقدمة إلى مدونتي متعددة اللغات\"\npublishedAt: \"2025-01-10\"\nauthor: \"raed-bahri\"\ncategory: \"development\"\ntags:\n  - nuxt\n  - تعليم\nimage: \"/images/blog/post-1.jpg\"\nisFeatured: true\nreadingTime: 5\nlocale: \"ar\"\n---\n\nالمحتوى هنا...\n",[295,861,862,866,871,876,880,884,888,892,896,901,905,909,913,918,922,926],{"__ignoreMap":16},[298,863,864],{"class":300,"line":301},[298,865,777],{},[298,867,868],{"class":300,"line":179},[298,869,870],{},"title: \"مقالتي الأولى\"\n",[298,872,873],{"class":300,"line":17},[298,874,875],{},"description: \"مقدمة إلى مدونتي متعددة اللغات\"\n",[298,877,878],{"class":300,"line":416},[298,879,792],{},[298,881,882],{"class":300,"line":425},[298,883,797],{},[298,885,886],{"class":300,"line":433},[298,887,802],{},[298,889,890],{"class":300,"line":439},[298,891,807],{},[298,893,894],{"class":300,"line":202},[298,895,812],{},[298,897,898],{"class":300,"line":450},[298,899,900],{},"  - تعليم\n",[298,902,903],{"class":300,"line":459},[298,904,822],{},[298,906,907],{"class":300,"line":467},[298,908,827],{},[298,910,911],{"class":300,"line":473},[298,912,832],{},[298,914,915],{"class":300,"line":484},[298,916,917],{},"locale: \"ar\"\n",[298,919,920],{"class":300,"line":495},[298,921,777],{},[298,923,924],{"class":300,"line":506},[298,925,701],{"emptyLinePlaceholder":199},[298,927,928],{"class":300,"line":517},[298,929,930],{},"المحتوى هنا...\n",[37,932,934],{"id":933},"step-4-create-type-definitions","Step 4: Create Type Definitions",[30,936,937,938,941],{},"Create ",[295,939,940],{},"types/content.ts"," for TypeScript support:",[289,943,945],{"className":378,"code":944,"language":380,"meta":16,"style":16},"// types/content.ts\nimport { z } from \"zod\";\n\nexport const ArticleSchema = z.object({\n  title: z.string(),\n  description: z.string(),\n  publishedAt: z.string(),\n  author: z.string(),\n  category: z.string(),\n  tags: z.array(z.string()).optional(),\n  image: z.string().optional(),\n  isFeatured: z.boolean().optional(),\n  readingTime: z.number().optional(),\n  locale: z.string(),\n});\n\nexport type Article = z.infer\u003Ctypeof ArticleSchema> & {\n  path: string;\n  _path: string;\n};\n\nexport type Category = {\n  title: string;\n  description: string;\n  slug: string;\n  image?: string;\n  locale: string;\n  _path: string;\n};\n\nexport type Author = {\n  name: string;\n  slug: string;\n  bio: string;\n  avatar: string;\n  locale: string;\n};\n\n// Helper functions to get collections\nexport const getArticlesCollection = (locale: string) => {\n  return `${locale}/articles`;\n};\n\nexport const getCategoriesCollection = (locale: string) => {\n  return `${locale}/categories`;\n};\n\nexport const getAuthorsCollection = (locale: string) => {\n  return `${locale}/authors`;\n};\n",[295,946,947,952,975,979,1006,1021,1034,1047,1060,1073,1102,1120,1138,1156,1169,1173,1177,1213,1227,1238,1243,1247,1260,1271,1282,1293,1305,1316,1326,1330,1334,1347,1358,1368,1379,1390,1400,1404,1408,1413,1442,1464,1468,1473,1499,1517,1522,1527,1553,1571],{"__ignoreMap":16},[298,948,949],{"class":300,"line":301},[298,950,951],{"class":387},"// types/content.ts\n",[298,953,954,957,960,963,966,969,972],{"class":300,"line":179},[298,955,956],{"class":393},"import",[298,958,959],{"class":403}," { ",[298,961,962],{"class":409},"z",[298,964,965],{"class":403}," } ",[298,967,968],{"class":393},"from",[298,970,971],{"class":308}," \"zod\"",[298,973,974],{"class":403},";\n",[298,976,977],{"class":300,"line":17},[298,978,701],{"emptyLinePlaceholder":199},[298,980,981,983,987,991,995,998,1001,1004],{"class":300,"line":416},[298,982,394],{"class":393},[298,984,986],{"class":985},"s5uUr"," const",[298,988,990],{"class":989},"sToQf"," ArticleSchema",[298,992,994],{"class":993},"s1p9p"," =",[298,996,997],{"class":409}," z",[298,999,1000],{"class":403},".",[298,1002,1003],{"class":304},"object",[298,1005,404],{"class":403},[298,1007,1008,1011,1013,1015,1018],{"class":300,"line":425},[298,1009,1010],{"class":409},"  title:",[298,1012,997],{"class":409},[298,1014,1000],{"class":403},[298,1016,1017],{"class":304},"string",[298,1019,1020],{"class":403},"(),\n",[298,1022,1023,1026,1028,1030,1032],{"class":300,"line":433},[298,1024,1025],{"class":409},"  description:",[298,1027,997],{"class":409},[298,1029,1000],{"class":403},[298,1031,1017],{"class":304},[298,1033,1020],{"class":403},[298,1035,1036,1039,1041,1043,1045],{"class":300,"line":439},[298,1037,1038],{"class":409},"  publishedAt:",[298,1040,997],{"class":409},[298,1042,1000],{"class":403},[298,1044,1017],{"class":304},[298,1046,1020],{"class":403},[298,1048,1049,1052,1054,1056,1058],{"class":300,"line":202},[298,1050,1051],{"class":409},"  author:",[298,1053,997],{"class":409},[298,1055,1000],{"class":403},[298,1057,1017],{"class":304},[298,1059,1020],{"class":403},[298,1061,1062,1065,1067,1069,1071],{"class":300,"line":450},[298,1063,1064],{"class":409},"  category:",[298,1066,997],{"class":409},[298,1068,1000],{"class":403},[298,1070,1017],{"class":304},[298,1072,1020],{"class":403},[298,1074,1075,1078,1080,1082,1085,1088,1090,1092,1094,1097,1100],{"class":300,"line":459},[298,1076,1077],{"class":409},"  tags:",[298,1079,997],{"class":409},[298,1081,1000],{"class":403},[298,1083,1084],{"class":304},"array",[298,1086,1087],{"class":403},"(",[298,1089,962],{"class":409},[298,1091,1000],{"class":403},[298,1093,1017],{"class":304},[298,1095,1096],{"class":403},"()).",[298,1098,1099],{"class":304},"optional",[298,1101,1020],{"class":403},[298,1103,1104,1107,1109,1111,1113,1116,1118],{"class":300,"line":467},[298,1105,1106],{"class":409},"  image:",[298,1108,997],{"class":409},[298,1110,1000],{"class":403},[298,1112,1017],{"class":304},[298,1114,1115],{"class":403},"().",[298,1117,1099],{"class":304},[298,1119,1020],{"class":403},[298,1121,1122,1125,1127,1129,1132,1134,1136],{"class":300,"line":473},[298,1123,1124],{"class":409},"  isFeatured:",[298,1126,997],{"class":409},[298,1128,1000],{"class":403},[298,1130,1131],{"class":304},"boolean",[298,1133,1115],{"class":403},[298,1135,1099],{"class":304},[298,1137,1020],{"class":403},[298,1139,1140,1143,1145,1147,1150,1152,1154],{"class":300,"line":484},[298,1141,1142],{"class":409},"  readingTime:",[298,1144,997],{"class":409},[298,1146,1000],{"class":403},[298,1148,1149],{"class":304},"number",[298,1151,1115],{"class":403},[298,1153,1099],{"class":304},[298,1155,1020],{"class":403},[298,1157,1158,1161,1163,1165,1167],{"class":300,"line":495},[298,1159,1160],{"class":409},"  locale:",[298,1162,997],{"class":409},[298,1164,1000],{"class":403},[298,1166,1017],{"class":304},[298,1168,1020],{"class":403},[298,1170,1171],{"class":300,"line":506},[298,1172,743],{"class":403},[298,1174,1175],{"class":300,"line":517},[298,1176,701],{"emptyLinePlaceholder":199},[298,1178,1179,1181,1184,1188,1190,1192,1194,1197,1200,1203,1205,1208,1211],{"class":300,"line":526},[298,1180,394],{"class":393},[298,1182,1183],{"class":985}," type",[298,1185,1187],{"class":1186},"su_XB"," Article",[298,1189,994],{"class":993},[298,1191,997],{"class":1186},[298,1193,1000],{"class":403},[298,1195,1196],{"class":1186},"infer",[298,1198,1199],{"class":403},"\u003C",[298,1201,1202],{"class":985},"typeof",[298,1204,990],{"class":409},[298,1206,1207],{"class":403},"> ",[298,1209,1210],{"class":993},"&",[298,1212,456],{"class":403},[298,1214,1215,1219,1221,1225],{"class":300,"line":532},[298,1216,1218],{"class":1217},"s9TRk","  path",[298,1220,375],{"class":993},[298,1222,1224],{"class":1223},"s6-XD"," string",[298,1226,974],{"class":403},[298,1228,1229,1232,1234,1236],{"class":300,"line":537},[298,1230,1231],{"class":1217},"  _path",[298,1233,375],{"class":993},[298,1235,1224],{"class":1223},[298,1237,974],{"class":403},[298,1239,1240],{"class":300,"line":547},[298,1241,1242],{"class":403},"};\n",[298,1244,1245],{"class":300,"line":557},[298,1246,701],{"emptyLinePlaceholder":199},[298,1248,1249,1251,1253,1256,1258],{"class":300,"line":567},[298,1250,394],{"class":393},[298,1252,1183],{"class":985},[298,1254,1255],{"class":1186}," Category",[298,1257,994],{"class":993},[298,1259,456],{"class":403},[298,1261,1262,1265,1267,1269],{"class":300,"line":577},[298,1263,1264],{"class":1217},"  title",[298,1266,375],{"class":993},[298,1268,1224],{"class":1223},[298,1270,974],{"class":403},[298,1272,1273,1276,1278,1280],{"class":300,"line":588},[298,1274,1275],{"class":1217},"  description",[298,1277,375],{"class":993},[298,1279,1224],{"class":1223},[298,1281,974],{"class":403},[298,1283,1284,1287,1289,1291],{"class":300,"line":594},[298,1285,1286],{"class":1217},"  slug",[298,1288,375],{"class":993},[298,1290,1224],{"class":1223},[298,1292,974],{"class":403},[298,1294,1295,1298,1301,1303],{"class":300,"line":600},[298,1296,1297],{"class":1217},"  image",[298,1299,1300],{"class":993},"?:",[298,1302,1224],{"class":1223},[298,1304,974],{"class":403},[298,1306,1307,1310,1312,1314],{"class":300,"line":610},[298,1308,1309],{"class":1217},"  locale",[298,1311,375],{"class":993},[298,1313,1224],{"class":1223},[298,1315,974],{"class":403},[298,1317,1318,1320,1322,1324],{"class":300,"line":625},[298,1319,1231],{"class":1217},[298,1321,375],{"class":993},[298,1323,1224],{"class":1223},[298,1325,974],{"class":403},[298,1327,1328],{"class":300,"line":637},[298,1329,1242],{"class":403},[298,1331,1332],{"class":300,"line":648},[298,1333,701],{"emptyLinePlaceholder":199},[298,1335,1336,1338,1340,1343,1345],{"class":300,"line":656},[298,1337,394],{"class":393},[298,1339,1183],{"class":985},[298,1341,1342],{"class":1186}," Author",[298,1344,994],{"class":993},[298,1346,456],{"class":403},[298,1348,1349,1352,1354,1356],{"class":300,"line":666},[298,1350,1351],{"class":1217},"  name",[298,1353,375],{"class":993},[298,1355,1224],{"class":1223},[298,1357,974],{"class":403},[298,1359,1360,1362,1364,1366],{"class":300,"line":677},[298,1361,1286],{"class":1217},[298,1363,375],{"class":993},[298,1365,1224],{"class":1223},[298,1367,974],{"class":403},[298,1369,1370,1373,1375,1377],{"class":300,"line":686},[298,1371,1372],{"class":1217},"  bio",[298,1374,375],{"class":993},[298,1376,1224],{"class":1223},[298,1378,974],{"class":403},[298,1380,1381,1384,1386,1388],{"class":300,"line":692},[298,1382,1383],{"class":1217},"  avatar",[298,1385,375],{"class":993},[298,1387,1224],{"class":1223},[298,1389,974],{"class":403},[298,1391,1392,1394,1396,1398],{"class":300,"line":698},[298,1393,1309],{"class":1217},[298,1395,375],{"class":993},[298,1397,1224],{"class":1223},[298,1399,974],{"class":403},[298,1401,1402],{"class":300,"line":704},[298,1403,1242],{"class":403},[298,1405,1406],{"class":300,"line":712},[298,1407,701],{"emptyLinePlaceholder":199},[298,1409,1410],{"class":300,"line":720},[298,1411,1412],{"class":387},"// Helper functions to get collections\n",[298,1414,1415,1417,1419,1422,1424,1427,1430,1432,1434,1437,1440],{"class":300,"line":729},[298,1416,394],{"class":393},[298,1418,986],{"class":985},[298,1420,1421],{"class":304}," getArticlesCollection",[298,1423,994],{"class":993},[298,1425,1426],{"class":403}," (",[298,1428,1429],{"class":1217},"locale",[298,1431,375],{"class":993},[298,1433,1224],{"class":1223},[298,1435,1436],{"class":403},") ",[298,1438,1439],{"class":985},"=>",[298,1441,456],{"class":403},[298,1443,1444,1447,1450,1454,1456,1459,1462],{"class":300,"line":734},[298,1445,1446],{"class":393},"  return",[298,1448,1449],{"class":308}," `",[298,1451,1453],{"class":1452},"se2iQ","${",[298,1455,1429],{"class":409},[298,1457,1458],{"class":1452},"}",[298,1460,1461],{"class":308},"/articles`",[298,1463,974],{"class":403},[298,1465,1466],{"class":300,"line":740},[298,1467,1242],{"class":403},[298,1469,1471],{"class":300,"line":1470},43,[298,1472,701],{"emptyLinePlaceholder":199},[298,1474,1476,1478,1480,1483,1485,1487,1489,1491,1493,1495,1497],{"class":300,"line":1475},44,[298,1477,394],{"class":393},[298,1479,986],{"class":985},[298,1481,1482],{"class":304}," getCategoriesCollection",[298,1484,994],{"class":993},[298,1486,1426],{"class":403},[298,1488,1429],{"class":1217},[298,1490,375],{"class":993},[298,1492,1224],{"class":1223},[298,1494,1436],{"class":403},[298,1496,1439],{"class":985},[298,1498,456],{"class":403},[298,1500,1502,1504,1506,1508,1510,1512,1515],{"class":300,"line":1501},45,[298,1503,1446],{"class":393},[298,1505,1449],{"class":308},[298,1507,1453],{"class":1452},[298,1509,1429],{"class":409},[298,1511,1458],{"class":1452},[298,1513,1514],{"class":308},"/categories`",[298,1516,974],{"class":403},[298,1518,1520],{"class":300,"line":1519},46,[298,1521,1242],{"class":403},[298,1523,1525],{"class":300,"line":1524},47,[298,1526,701],{"emptyLinePlaceholder":199},[298,1528,1530,1532,1534,1537,1539,1541,1543,1545,1547,1549,1551],{"class":300,"line":1529},48,[298,1531,394],{"class":393},[298,1533,986],{"class":985},[298,1535,1536],{"class":304}," getAuthorsCollection",[298,1538,994],{"class":993},[298,1540,1426],{"class":403},[298,1542,1429],{"class":1217},[298,1544,375],{"class":993},[298,1546,1224],{"class":1223},[298,1548,1436],{"class":403},[298,1550,1439],{"class":985},[298,1552,456],{"class":403},[298,1554,1556,1558,1560,1562,1564,1566,1569],{"class":300,"line":1555},49,[298,1557,1446],{"class":393},[298,1559,1449],{"class":308},[298,1561,1453],{"class":1452},[298,1563,1429],{"class":409},[298,1565,1458],{"class":1452},[298,1567,1568],{"class":308},"/authors`",[298,1570,974],{"class":403},[298,1572,1574],{"class":300,"line":1573},50,[298,1575,1242],{"class":403},[37,1577,1579],{"id":1578},"step-5-build-the-blog-index-page","Step 5: Build the Blog Index Page",[30,1581,937,1582,375],{},[295,1583,1584],{},"pages/index.vue",[289,1586,1590],{"className":1587,"code":1588,"language":1589,"meta":16,"style":16},"language-vue shiki shiki-themes github-light dark-plus dark-plus","\u003Cscript setup lang=\"ts\">\nimport { getArticlesCollection, type Article } from \"@@/types/content\";\n\nconst { locale } = useI18n();\nconst localePath = useLocalePath();\n\n// Fetch articles for current locale\nconst { data: posts } = await useAsyncData\u003CArticle[]>(\n  `articles-${locale.value}`,\n  async () => {\n    const collection = getArticlesCollection(locale.value);\n    return queryCollection(collection).all();\n  },\n  { watch: [locale] }\n);\n\n// Get featured posts\nconst featuredPosts = computed(() => \n  posts.value?.filter(post => post.isFeatured) || []\n);\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cmain>\n    \u003Csection class=\"container py-12\">\n      \u003Ch1 class=\"text-4xl font-bold mb-8\">\n        {{ $t('blog.title') }}\n      \u003C/h1>\n      \n      \u003C!-- Featured Posts Grid -->\n      \u003Cdiv class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6\">\n        \u003CNuxtLink\n          v-for=\"post in featuredPosts\"\n          :key=\"post.path\"\n          :to=\"localePath(post.path)\"\n          class=\"border rounded-lg overflow-hidden hover:shadow-lg transition\"\n        >\n          \u003Cimg \n            :src=\"post.image\" \n            :alt=\"post.title\"\n            class=\"w-full h-48 object-cover\"\n          />\n          \u003Cdiv class=\"p-4\">\n            \u003Ch2 class=\"text-xl font-bold mb-2\">{{ post.title }}\u003C/h2>\n            \u003Cp class=\"text-gray-600\">{{ post.description }}\u003C/p>\n          \u003C/div>\n        \u003C/NuxtLink>\n      \u003C/div>\n    \u003C/section>\n  \u003C/main>\n\u003C/template>\n","vue",[295,1591,1592,1617,1642,1646,1665,1679,1683,1688,1721,1743,1755,1778,1799,1803,1819,1823,1827,1832,1852,1891,1895,1904,1908,1917,1927,1945,1962,1978,1987,1992,1997,2013,2021,2041,2062,2089,2099,2104,2114,2137,2157,2167,2172,2187,2222,2254,2263,2273,2281,2290,2299],{"__ignoreMap":16},[298,1593,1594,1597,1601,1605,1608,1611,1614],{"class":300,"line":301},[298,1595,1199],{"class":1596},"sffyN",[298,1598,1600],{"class":1599},"ssFZ1","script",[298,1602,1604],{"class":1603},"sFcZJ"," setup",[298,1606,1607],{"class":1603}," lang",[298,1609,1610],{"class":403},"=",[298,1612,1613],{"class":308},"\"ts\"",[298,1615,1616],{"class":1596},">\n",[298,1618,1619,1621,1623,1626,1628,1631,1633,1635,1637,1640],{"class":300,"line":179},[298,1620,956],{"class":393},[298,1622,959],{"class":403},[298,1624,1625],{"class":409},"getArticlesCollection",[298,1627,619],{"class":403},[298,1629,1630],{"class":393},"type",[298,1632,1187],{"class":409},[298,1634,965],{"class":403},[298,1636,968],{"class":393},[298,1638,1639],{"class":308}," \"@@/types/content\"",[298,1641,974],{"class":403},[298,1643,1644],{"class":300,"line":17},[298,1645,701],{"emptyLinePlaceholder":199},[298,1647,1648,1651,1653,1655,1657,1659,1662],{"class":300,"line":416},[298,1649,1650],{"class":985},"const",[298,1652,959],{"class":403},[298,1654,1429],{"class":989},[298,1656,965],{"class":403},[298,1658,1610],{"class":993},[298,1660,1661],{"class":304}," useI18n",[298,1663,1664],{"class":403},"();\n",[298,1666,1667,1669,1672,1674,1677],{"class":300,"line":425},[298,1668,1650],{"class":985},[298,1670,1671],{"class":989}," localePath",[298,1673,994],{"class":993},[298,1675,1676],{"class":304}," useLocalePath",[298,1678,1664],{"class":403},[298,1680,1681],{"class":300,"line":433},[298,1682,701],{"emptyLinePlaceholder":199},[298,1684,1685],{"class":300,"line":439},[298,1686,1687],{"class":387},"// Fetch articles for current locale\n",[298,1689,1690,1692,1694,1697,1700,1703,1705,1707,1710,1713,1715,1718],{"class":300,"line":202},[298,1691,1650],{"class":985},[298,1693,959],{"class":403},[298,1695,1696],{"class":1217},"data",[298,1698,1699],{"class":403},": ",[298,1701,1702],{"class":989},"posts",[298,1704,965],{"class":403},[298,1706,1610],{"class":993},[298,1708,1709],{"class":393}," await",[298,1711,1712],{"class":304}," useAsyncData",[298,1714,1199],{"class":403},[298,1716,1717],{"class":1186},"Article",[298,1719,1720],{"class":403},"[]>(\n",[298,1722,1723,1726,1728,1730,1733,1736,1738,1741],{"class":300,"line":450},[298,1724,1725],{"class":308},"  `articles-",[298,1727,1453],{"class":1452},[298,1729,1429],{"class":409},[298,1731,1000],{"class":1732},"s5T4v",[298,1734,1735],{"class":409},"value",[298,1737,1458],{"class":1452},[298,1739,1740],{"class":308},"`",[298,1742,422],{"class":403},[298,1744,1745,1748,1751,1753],{"class":300,"line":459},[298,1746,1747],{"class":985},"  async",[298,1749,1750],{"class":403}," () ",[298,1752,1439],{"class":985},[298,1754,456],{"class":403},[298,1756,1757,1760,1763,1765,1767,1769,1771,1773,1775],{"class":300,"line":467},[298,1758,1759],{"class":985},"    const",[298,1761,1762],{"class":989}," collection",[298,1764,994],{"class":993},[298,1766,1421],{"class":304},[298,1768,1087],{"class":403},[298,1770,1429],{"class":409},[298,1772,1000],{"class":403},[298,1774,1735],{"class":409},[298,1776,1777],{"class":403},");\n",[298,1779,1780,1783,1786,1788,1791,1794,1797],{"class":300,"line":473},[298,1781,1782],{"class":393},"    return",[298,1784,1785],{"class":304}," queryCollection",[298,1787,1087],{"class":403},[298,1789,1790],{"class":409},"collection",[298,1792,1793],{"class":403},").",[298,1795,1796],{"class":304},"all",[298,1798,1664],{"class":403},[298,1800,1801],{"class":300,"line":484},[298,1802,695],{"class":403},[298,1804,1805,1808,1811,1814,1816],{"class":300,"line":495},[298,1806,1807],{"class":403},"  { ",[298,1809,1810],{"class":409},"watch:",[298,1812,1813],{"class":403}," [",[298,1815,1429],{"class":409},[298,1817,1818],{"class":403},"] }\n",[298,1820,1821],{"class":300,"line":506},[298,1822,1777],{"class":403},[298,1824,1825],{"class":300,"line":517},[298,1826,701],{"emptyLinePlaceholder":199},[298,1828,1829],{"class":300,"line":526},[298,1830,1831],{"class":387},"// Get featured posts\n",[298,1833,1834,1836,1839,1841,1844,1847,1849],{"class":300,"line":532},[298,1835,1650],{"class":985},[298,1837,1838],{"class":989}," featuredPosts",[298,1840,994],{"class":993},[298,1842,1843],{"class":304}," computed",[298,1845,1846],{"class":403},"(() ",[298,1848,1439],{"class":985},[298,1850,1851],{"class":403}," \n",[298,1853,1854,1857,1859,1861,1864,1867,1869,1872,1875,1878,1880,1883,1885,1888],{"class":300,"line":537},[298,1855,1856],{"class":409},"  posts",[298,1858,1000],{"class":403},[298,1860,1735],{"class":409},[298,1862,1863],{"class":403},"?.",[298,1865,1866],{"class":304},"filter",[298,1868,1087],{"class":403},[298,1870,1871],{"class":1217},"post",[298,1873,1874],{"class":985}," =>",[298,1876,1877],{"class":409}," post",[298,1879,1000],{"class":403},[298,1881,1882],{"class":409},"isFeatured",[298,1884,1436],{"class":403},[298,1886,1887],{"class":993},"||",[298,1889,1890],{"class":403}," []\n",[298,1892,1893],{"class":300,"line":547},[298,1894,1777],{"class":403},[298,1896,1897,1900,1902],{"class":300,"line":557},[298,1898,1899],{"class":1596},"\u003C/",[298,1901,1600],{"class":1599},[298,1903,1616],{"class":1596},[298,1905,1906],{"class":300,"line":567},[298,1907,701],{"emptyLinePlaceholder":199},[298,1909,1910,1912,1915],{"class":300,"line":577},[298,1911,1199],{"class":1596},[298,1913,1914],{"class":1599},"template",[298,1916,1616],{"class":1596},[298,1918,1919,1922,1925],{"class":300,"line":588},[298,1920,1921],{"class":1596},"  \u003C",[298,1923,1924],{"class":1599},"main",[298,1926,1616],{"class":1596},[298,1928,1929,1932,1935,1938,1940,1943],{"class":300,"line":594},[298,1930,1931],{"class":1596},"    \u003C",[298,1933,1934],{"class":1599},"section",[298,1936,1937],{"class":1603}," class",[298,1939,1610],{"class":403},[298,1941,1942],{"class":308},"\"container py-12\"",[298,1944,1616],{"class":1596},[298,1946,1947,1950,1953,1955,1957,1960],{"class":300,"line":600},[298,1948,1949],{"class":1596},"      \u003C",[298,1951,1952],{"class":1599},"h1",[298,1954,1937],{"class":1603},[298,1956,1610],{"class":403},[298,1958,1959],{"class":308},"\"text-4xl font-bold mb-8\"",[298,1961,1616],{"class":1596},[298,1963,1964,1967,1970,1972,1975],{"class":300,"line":610},[298,1965,1966],{"class":403},"        {{ ",[298,1968,1969],{"class":304},"$t",[298,1971,1087],{"class":403},[298,1973,1974],{"class":308},"'blog.title'",[298,1976,1977],{"class":403},") }}\n",[298,1979,1980,1983,1985],{"class":300,"line":625},[298,1981,1982],{"class":1596},"      \u003C/",[298,1984,1952],{"class":1599},[298,1986,1616],{"class":1596},[298,1988,1989],{"class":300,"line":637},[298,1990,1991],{"class":403},"      \n",[298,1993,1994],{"class":300,"line":648},[298,1995,1996],{"class":387},"      \u003C!-- Featured Posts Grid -->\n",[298,1998,1999,2001,2004,2006,2008,2011],{"class":300,"line":656},[298,2000,1949],{"class":1596},[298,2002,2003],{"class":1599},"div",[298,2005,1937],{"class":1603},[298,2007,1610],{"class":403},[298,2009,2010],{"class":308},"\"grid md:grid-cols-2 lg:grid-cols-3 gap-6\"",[298,2012,1616],{"class":1596},[298,2014,2015,2018],{"class":300,"line":666},[298,2016,2017],{"class":1596},"        \u003C",[298,2019,2020],{"class":1599},"NuxtLink\n",[298,2022,2023,2026,2028,2031,2033,2036,2038],{"class":300,"line":677},[298,2024,2025],{"class":393},"          v-for",[298,2027,1610],{"class":403},[298,2029,2030],{"class":1732},"\"",[298,2032,1871],{"class":409},[298,2034,2035],{"class":985}," in",[298,2037,1838],{"class":409},[298,2039,2040],{"class":1732},"\"\n",[298,2042,2043,2046,2049,2051,2053,2055,2057,2060],{"class":300,"line":686},[298,2044,2045],{"class":403},"          :",[298,2047,2048],{"class":1603},"key",[298,2050,1610],{"class":403},[298,2052,2030],{"class":1732},[298,2054,1871],{"class":409},[298,2056,1000],{"class":403},[298,2058,2059],{"class":409},"path",[298,2061,2040],{"class":1732},[298,2063,2064,2066,2069,2071,2073,2076,2078,2080,2082,2084,2087],{"class":300,"line":692},[298,2065,2045],{"class":403},[298,2067,2068],{"class":1603},"to",[298,2070,1610],{"class":403},[298,2072,2030],{"class":1732},[298,2074,2075],{"class":304},"localePath",[298,2077,1087],{"class":403},[298,2079,1871],{"class":409},[298,2081,1000],{"class":403},[298,2083,2059],{"class":409},[298,2085,2086],{"class":403},")",[298,2088,2040],{"class":1732},[298,2090,2091,2094,2096],{"class":300,"line":698},[298,2092,2093],{"class":1603},"          class",[298,2095,1610],{"class":403},[298,2097,2098],{"class":308},"\"border rounded-lg overflow-hidden hover:shadow-lg transition\"\n",[298,2100,2101],{"class":300,"line":704},[298,2102,2103],{"class":1596},"        >\n",[298,2105,2106,2109,2112],{"class":300,"line":712},[298,2107,2108],{"class":1596},"          \u003C",[298,2110,2111],{"class":1599},"img",[298,2113,1851],{"class":403},[298,2115,2116,2119,2122,2124,2126,2128,2130,2133,2135],{"class":300,"line":720},[298,2117,2118],{"class":403},"            :",[298,2120,2121],{"class":1603},"src",[298,2123,1610],{"class":403},[298,2125,2030],{"class":1732},[298,2127,1871],{"class":409},[298,2129,1000],{"class":403},[298,2131,2132],{"class":409},"image",[298,2134,2030],{"class":1732},[298,2136,1851],{"class":403},[298,2138,2139,2141,2144,2146,2148,2150,2152,2155],{"class":300,"line":729},[298,2140,2118],{"class":403},[298,2142,2143],{"class":1603},"alt",[298,2145,1610],{"class":403},[298,2147,2030],{"class":1732},[298,2149,1871],{"class":409},[298,2151,1000],{"class":403},[298,2153,2154],{"class":409},"title",[298,2156,2040],{"class":1732},[298,2158,2159,2162,2164],{"class":300,"line":734},[298,2160,2161],{"class":1603},"            class",[298,2163,1610],{"class":403},[298,2165,2166],{"class":308},"\"w-full h-48 object-cover\"\n",[298,2168,2169],{"class":300,"line":740},[298,2170,2171],{"class":1596},"          />\n",[298,2173,2174,2176,2178,2180,2182,2185],{"class":300,"line":1470},[298,2175,2108],{"class":1596},[298,2177,2003],{"class":1599},[298,2179,1937],{"class":1603},[298,2181,1610],{"class":403},[298,2183,2184],{"class":308},"\"p-4\"",[298,2186,1616],{"class":1596},[298,2188,2189,2192,2194,2196,2198,2201,2204,2207,2209,2211,2213,2216,2218,2220],{"class":300,"line":1475},[298,2190,2191],{"class":1596},"            \u003C",[298,2193,37],{"class":1599},[298,2195,1937],{"class":1603},[298,2197,1610],{"class":403},[298,2199,2200],{"class":308},"\"text-xl font-bold mb-2\"",[298,2202,2203],{"class":1596},">",[298,2205,2206],{"class":403},"{{ ",[298,2208,1871],{"class":409},[298,2210,1000],{"class":403},[298,2212,2154],{"class":409},[298,2214,2215],{"class":403}," }}",[298,2217,1899],{"class":1596},[298,2219,37],{"class":1599},[298,2221,1616],{"class":1596},[298,2223,2224,2226,2228,2230,2232,2235,2237,2239,2241,2243,2246,2248,2250,2252],{"class":300,"line":1501},[298,2225,2191],{"class":1596},[298,2227,30],{"class":1599},[298,2229,1937],{"class":1603},[298,2231,1610],{"class":403},[298,2233,2234],{"class":308},"\"text-gray-600\"",[298,2236,2203],{"class":1596},[298,2238,2206],{"class":403},[298,2240,1871],{"class":409},[298,2242,1000],{"class":403},[298,2244,2245],{"class":409},"description",[298,2247,2215],{"class":403},[298,2249,1899],{"class":1596},[298,2251,30],{"class":1599},[298,2253,1616],{"class":1596},[298,2255,2256,2259,2261],{"class":300,"line":1519},[298,2257,2258],{"class":1596},"          \u003C/",[298,2260,2003],{"class":1599},[298,2262,1616],{"class":1596},[298,2264,2265,2268,2271],{"class":300,"line":1524},[298,2266,2267],{"class":1596},"        \u003C/",[298,2269,2270],{"class":1599},"NuxtLink",[298,2272,1616],{"class":1596},[298,2274,2275,2277,2279],{"class":300,"line":1529},[298,2276,1982],{"class":1596},[298,2278,2003],{"class":1599},[298,2280,1616],{"class":1596},[298,2282,2283,2286,2288],{"class":300,"line":1555},[298,2284,2285],{"class":1596},"    \u003C/",[298,2287,1934],{"class":1599},[298,2289,1616],{"class":1596},[298,2291,2292,2295,2297],{"class":300,"line":1573},[298,2293,2294],{"class":1596},"  \u003C/",[298,2296,1924],{"class":1599},[298,2298,1616],{"class":1596},[298,2300,2302,2304,2306],{"class":300,"line":2301},51,[298,2303,1899],{"class":1596},[298,2305,1914],{"class":1599},[298,2307,1616],{"class":1596},[37,2309,2311],{"id":2310},"step-6-create-article-detail-page","Step 6: Create Article Detail Page",[30,2313,937,2314,2317],{},[295,2315,2316],{},"pages/[...slug].vue"," for dynamic article rendering:",[289,2319,2321],{"className":1587,"code":2320,"language":1589,"meta":16,"style":16},"\u003Cscript setup lang=\"ts\">\nconst { locale } = useI18n();\nconst route = useRoute();\n\n// Construct the full path with locale\nconst path = `/${locale.value}/articles/${route.params.slug}`;\n\nconst { data: article } = await useAsyncData(`article-${path}`, () =>\n  queryContent()\n    .where({ _path: path })\n    .findOne()\n);\n\nif (!article.value) {\n  throw createError({ \n    statusCode: 404, \n    statusMessage: \"Article not found\" \n  });\n}\n\n// Set SEO meta\nuseHead({\n  title: article.value.title,\n  meta: [\n    { name: \"description\", content: article.value.description },\n    { property: \"og:title\", content: article.value.title },\n    { property: \"og:description\", content: article.value.description },\n    { property: \"og:image\", content: article.value.image },\n  ],\n});\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Carticle class=\"container prose prose-lg mx-auto py-12\">\n    \u003Ch1>{{ article.title }}\u003C/h1>\n    \u003Cdiv class=\"text-gray-600 mb-8\">\n      {{ article.publishedAt }} • {{ article.readingTime }} min read\n    \u003C/div>\n    \n    \u003CContentRenderer :value=\"article\" />\n  \u003C/article>\n\u003C/template>\n",[295,2322,2323,2339,2355,2369,2373,2378,2424,2428,2468,2476,2495,2504,2508,2512,2531,2542,2554,2564,2569,2574,2578,2583,2590,2607,2614,2643,2669,2694,2719,2723,2727,2735,2739,2747,2762,2786,2801,2826,2834,2839,2862,2870],{"__ignoreMap":16},[298,2324,2325,2327,2329,2331,2333,2335,2337],{"class":300,"line":301},[298,2326,1199],{"class":1596},[298,2328,1600],{"class":1599},[298,2330,1604],{"class":1603},[298,2332,1607],{"class":1603},[298,2334,1610],{"class":403},[298,2336,1613],{"class":308},[298,2338,1616],{"class":1596},[298,2340,2341,2343,2345,2347,2349,2351,2353],{"class":300,"line":179},[298,2342,1650],{"class":985},[298,2344,959],{"class":403},[298,2346,1429],{"class":989},[298,2348,965],{"class":403},[298,2350,1610],{"class":993},[298,2352,1661],{"class":304},[298,2354,1664],{"class":403},[298,2356,2357,2359,2362,2364,2367],{"class":300,"line":17},[298,2358,1650],{"class":985},[298,2360,2361],{"class":989}," route",[298,2363,994],{"class":993},[298,2365,2366],{"class":304}," useRoute",[298,2368,1664],{"class":403},[298,2370,2371],{"class":300,"line":416},[298,2372,701],{"emptyLinePlaceholder":199},[298,2374,2375],{"class":300,"line":425},[298,2376,2377],{"class":387},"// Construct the full path with locale\n",[298,2379,2380,2382,2385,2387,2390,2392,2394,2396,2398,2400,2403,2405,2408,2410,2413,2415,2418,2420,2422],{"class":300,"line":433},[298,2381,1650],{"class":985},[298,2383,2384],{"class":989}," path",[298,2386,994],{"class":993},[298,2388,2389],{"class":308}," `/",[298,2391,1453],{"class":1452},[298,2393,1429],{"class":409},[298,2395,1000],{"class":1732},[298,2397,1735],{"class":409},[298,2399,1458],{"class":1452},[298,2401,2402],{"class":308},"/articles/",[298,2404,1453],{"class":1452},[298,2406,2407],{"class":409},"route",[298,2409,1000],{"class":1732},[298,2411,2412],{"class":409},"params",[298,2414,1000],{"class":1732},[298,2416,2417],{"class":409},"slug",[298,2419,1458],{"class":1452},[298,2421,1740],{"class":308},[298,2423,974],{"class":403},[298,2425,2426],{"class":300,"line":439},[298,2427,701],{"emptyLinePlaceholder":199},[298,2429,2430,2432,2434,2436,2438,2441,2443,2445,2447,2449,2451,2454,2456,2458,2460,2462,2465],{"class":300,"line":202},[298,2431,1650],{"class":985},[298,2433,959],{"class":403},[298,2435,1696],{"class":1217},[298,2437,1699],{"class":403},[298,2439,2440],{"class":989},"article",[298,2442,965],{"class":403},[298,2444,1610],{"class":993},[298,2446,1709],{"class":393},[298,2448,1712],{"class":304},[298,2450,1087],{"class":403},[298,2452,2453],{"class":308},"`article-",[298,2455,1453],{"class":1452},[298,2457,2059],{"class":409},[298,2459,1458],{"class":1452},[298,2461,1740],{"class":308},[298,2463,2464],{"class":403},", () ",[298,2466,2467],{"class":985},"=>\n",[298,2469,2470,2473],{"class":300,"line":450},[298,2471,2472],{"class":304},"  queryContent",[298,2474,2475],{"class":403},"()\n",[298,2477,2478,2481,2484,2487,2490,2492],{"class":300,"line":459},[298,2479,2480],{"class":403},"    .",[298,2482,2483],{"class":304},"where",[298,2485,2486],{"class":403},"({ ",[298,2488,2489],{"class":409},"_path:",[298,2491,2384],{"class":409},[298,2493,2494],{"class":403}," })\n",[298,2496,2497,2499,2502],{"class":300,"line":467},[298,2498,2480],{"class":403},[298,2500,2501],{"class":304},"findOne",[298,2503,2475],{"class":403},[298,2505,2506],{"class":300,"line":473},[298,2507,1777],{"class":403},[298,2509,2510],{"class":300,"line":484},[298,2511,701],{"emptyLinePlaceholder":199},[298,2513,2514,2517,2519,2522,2524,2526,2528],{"class":300,"line":495},[298,2515,2516],{"class":393},"if",[298,2518,1426],{"class":403},[298,2520,2521],{"class":993},"!",[298,2523,2440],{"class":409},[298,2525,1000],{"class":403},[298,2527,1735],{"class":409},[298,2529,2530],{"class":403},") {\n",[298,2532,2533,2536,2539],{"class":300,"line":506},[298,2534,2535],{"class":393},"  throw",[298,2537,2538],{"class":304}," createError",[298,2540,2541],{"class":403},"({ \n",[298,2543,2544,2547,2551],{"class":300,"line":517},[298,2545,2546],{"class":409},"    statusCode:",[298,2548,2550],{"class":2549},"seC34"," 404",[298,2552,2553],{"class":403},", \n",[298,2555,2556,2559,2562],{"class":300,"line":526},[298,2557,2558],{"class":409},"    statusMessage:",[298,2560,2561],{"class":308}," \"Article not found\"",[298,2563,1851],{"class":403},[298,2565,2566],{"class":300,"line":532},[298,2567,2568],{"class":403},"  });\n",[298,2570,2571],{"class":300,"line":537},[298,2572,2573],{"class":403},"}\n",[298,2575,2576],{"class":300,"line":547},[298,2577,701],{"emptyLinePlaceholder":199},[298,2579,2580],{"class":300,"line":557},[298,2581,2582],{"class":387},"// Set SEO meta\n",[298,2584,2585,2588],{"class":300,"line":567},[298,2586,2587],{"class":304},"useHead",[298,2589,404],{"class":403},[298,2591,2592,2594,2597,2599,2601,2603,2605],{"class":300,"line":577},[298,2593,1010],{"class":409},[298,2595,2596],{"class":409}," article",[298,2598,1000],{"class":403},[298,2600,1735],{"class":409},[298,2602,1000],{"class":403},[298,2604,2154],{"class":409},[298,2606,422],{"class":403},[298,2608,2609,2612],{"class":300,"line":588},[298,2610,2611],{"class":409},"  meta:",[298,2613,413],{"class":403},[298,2615,2616,2619,2622,2625,2627,2630,2632,2634,2636,2638,2640],{"class":300,"line":594},[298,2617,2618],{"class":403},"    { ",[298,2620,2621],{"class":409},"name:",[298,2623,2624],{"class":308}," \"description\"",[298,2626,619],{"class":403},[298,2628,2629],{"class":409},"content:",[298,2631,2596],{"class":409},[298,2633,1000],{"class":403},[298,2635,1735],{"class":409},[298,2637,1000],{"class":403},[298,2639,2245],{"class":409},[298,2641,2642],{"class":403}," },\n",[298,2644,2645,2647,2650,2653,2655,2657,2659,2661,2663,2665,2667],{"class":300,"line":600},[298,2646,2618],{"class":403},[298,2648,2649],{"class":409},"property:",[298,2651,2652],{"class":308}," \"og:title\"",[298,2654,619],{"class":403},[298,2656,2629],{"class":409},[298,2658,2596],{"class":409},[298,2660,1000],{"class":403},[298,2662,1735],{"class":409},[298,2664,1000],{"class":403},[298,2666,2154],{"class":409},[298,2668,2642],{"class":403},[298,2670,2671,2673,2675,2678,2680,2682,2684,2686,2688,2690,2692],{"class":300,"line":610},[298,2672,2618],{"class":403},[298,2674,2649],{"class":409},[298,2676,2677],{"class":308}," \"og:description\"",[298,2679,619],{"class":403},[298,2681,2629],{"class":409},[298,2683,2596],{"class":409},[298,2685,1000],{"class":403},[298,2687,1735],{"class":409},[298,2689,1000],{"class":403},[298,2691,2245],{"class":409},[298,2693,2642],{"class":403},[298,2695,2696,2698,2700,2703,2705,2707,2709,2711,2713,2715,2717],{"class":300,"line":625},[298,2697,2618],{"class":403},[298,2699,2649],{"class":409},[298,2701,2702],{"class":308}," \"og:image\"",[298,2704,619],{"class":403},[298,2706,2629],{"class":409},[298,2708,2596],{"class":409},[298,2710,1000],{"class":403},[298,2712,1735],{"class":409},[298,2714,1000],{"class":403},[298,2716,2132],{"class":409},[298,2718,2642],{"class":403},[298,2720,2721],{"class":300,"line":637},[298,2722,442],{"class":403},[298,2724,2725],{"class":300,"line":648},[298,2726,743],{"class":403},[298,2728,2729,2731,2733],{"class":300,"line":656},[298,2730,1899],{"class":1596},[298,2732,1600],{"class":1599},[298,2734,1616],{"class":1596},[298,2736,2737],{"class":300,"line":666},[298,2738,701],{"emptyLinePlaceholder":199},[298,2740,2741,2743,2745],{"class":300,"line":677},[298,2742,1199],{"class":1596},[298,2744,1914],{"class":1599},[298,2746,1616],{"class":1596},[298,2748,2749,2751,2753,2755,2757,2760],{"class":300,"line":686},[298,2750,1921],{"class":1596},[298,2752,2440],{"class":1599},[298,2754,1937],{"class":1603},[298,2756,1610],{"class":403},[298,2758,2759],{"class":308},"\"container prose prose-lg mx-auto py-12\"",[298,2761,1616],{"class":1596},[298,2763,2764,2766,2768,2770,2772,2774,2776,2778,2780,2782,2784],{"class":300,"line":692},[298,2765,1931],{"class":1596},[298,2767,1952],{"class":1599},[298,2769,2203],{"class":1596},[298,2771,2206],{"class":403},[298,2773,2440],{"class":409},[298,2775,1000],{"class":403},[298,2777,2154],{"class":409},[298,2779,2215],{"class":403},[298,2781,1899],{"class":1596},[298,2783,1952],{"class":1599},[298,2785,1616],{"class":1596},[298,2787,2788,2790,2792,2794,2796,2799],{"class":300,"line":698},[298,2789,1931],{"class":1596},[298,2791,2003],{"class":1599},[298,2793,1937],{"class":1603},[298,2795,1610],{"class":403},[298,2797,2798],{"class":308},"\"text-gray-600 mb-8\"",[298,2800,1616],{"class":1596},[298,2802,2803,2806,2808,2810,2813,2816,2818,2820,2823],{"class":300,"line":704},[298,2804,2805],{"class":403},"      {{ ",[298,2807,2440],{"class":409},[298,2809,1000],{"class":403},[298,2811,2812],{"class":409},"publishedAt",[298,2814,2815],{"class":403}," }} • {{ ",[298,2817,2440],{"class":409},[298,2819,1000],{"class":403},[298,2821,2822],{"class":409},"readingTime",[298,2824,2825],{"class":403}," }} min read\n",[298,2827,2828,2830,2832],{"class":300,"line":712},[298,2829,2285],{"class":1596},[298,2831,2003],{"class":1599},[298,2833,1616],{"class":1596},[298,2835,2836],{"class":300,"line":720},[298,2837,2838],{"class":403},"    \n",[298,2840,2841,2843,2846,2849,2851,2853,2855,2857,2859],{"class":300,"line":729},[298,2842,1931],{"class":1596},[298,2844,2845],{"class":1599},"ContentRenderer",[298,2847,2848],{"class":403}," :",[298,2850,1735],{"class":1603},[298,2852,1610],{"class":403},[298,2854,2030],{"class":1732},[298,2856,2440],{"class":409},[298,2858,2030],{"class":1732},[298,2860,2861],{"class":1596}," />\n",[298,2863,2864,2866,2868],{"class":300,"line":734},[298,2865,2294],{"class":1596},[298,2867,2440],{"class":1599},[298,2869,1616],{"class":1596},[298,2871,2872,2874,2876],{"class":300,"line":740},[298,2873,1899],{"class":1596},[298,2875,1914],{"class":1599},[298,2877,1616],{"class":1596},[37,2879,2881],{"id":2880},"step-7-implement-language-switcher","Step 7: Implement Language Switcher",[30,2883,937,2884,375],{},[295,2885,2886],{},"components/LanguageSwitcher.vue",[289,2888,2890],{"className":1587,"code":2889,"language":1589,"meta":16,"style":16},"\u003Cscript setup lang=\"ts\">\nconst { locale, locales } = useI18n();\nconst switchLocalePath = useSwitchLocalePath();\n\nconst availableLocales = computed(() => \n  (locales.value as Array\u003C{code: string, name: string}>)\n    .filter(l => l.code !== locale.value)\n);\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"flex gap-2\">\n    \u003CNuxtLink\n      v-for=\"loc in availableLocales\"\n      :key=\"loc.code\"\n      :to=\"switchLocalePath(loc.code)\"\n      class=\"px-3 py-1 rounded border hover:bg-gray-100\"\n    >\n      {{ loc.name }}\n    \u003C/NuxtLink>\n  \u003C/div>\n\u003C/template>\n",[295,2891,2892,2908,2929,2943,2947,2964,3002,3035,3039,3047,3051,3059,3074,3080,3098,3117,3142,3152,3157,3170,3178,3186],{"__ignoreMap":16},[298,2893,2894,2896,2898,2900,2902,2904,2906],{"class":300,"line":301},[298,2895,1199],{"class":1596},[298,2897,1600],{"class":1599},[298,2899,1604],{"class":1603},[298,2901,1607],{"class":1603},[298,2903,1610],{"class":403},[298,2905,1613],{"class":308},[298,2907,1616],{"class":1596},[298,2909,2910,2912,2914,2916,2918,2921,2923,2925,2927],{"class":300,"line":179},[298,2911,1650],{"class":985},[298,2913,959],{"class":403},[298,2915,1429],{"class":989},[298,2917,619],{"class":403},[298,2919,2920],{"class":989},"locales",[298,2922,965],{"class":403},[298,2924,1610],{"class":993},[298,2926,1661],{"class":304},[298,2928,1664],{"class":403},[298,2930,2931,2933,2936,2938,2941],{"class":300,"line":17},[298,2932,1650],{"class":985},[298,2934,2935],{"class":989}," switchLocalePath",[298,2937,994],{"class":993},[298,2939,2940],{"class":304}," useSwitchLocalePath",[298,2942,1664],{"class":403},[298,2944,2945],{"class":300,"line":416},[298,2946,701],{"emptyLinePlaceholder":199},[298,2948,2949,2951,2954,2956,2958,2960,2962],{"class":300,"line":425},[298,2950,1650],{"class":985},[298,2952,2953],{"class":989}," availableLocales",[298,2955,994],{"class":993},[298,2957,1843],{"class":304},[298,2959,1846],{"class":403},[298,2961,1439],{"class":985},[298,2963,1851],{"class":403},[298,2965,2966,2969,2971,2973,2975,2978,2981,2984,2986,2988,2990,2992,2995,2997,2999],{"class":300,"line":433},[298,2967,2968],{"class":403},"  (",[298,2970,2920],{"class":409},[298,2972,1000],{"class":403},[298,2974,1735],{"class":409},[298,2976,2977],{"class":393}," as",[298,2979,2980],{"class":1186}," Array",[298,2982,2983],{"class":403},"\u003C{",[298,2985,295],{"class":1217},[298,2987,375],{"class":993},[298,2989,1224],{"class":1223},[298,2991,619],{"class":403},[298,2993,2994],{"class":1217},"name",[298,2996,375],{"class":993},[298,2998,1224],{"class":1223},[298,3000,3001],{"class":403},"}>)\n",[298,3003,3004,3006,3008,3010,3013,3015,3018,3020,3022,3025,3028,3030,3032],{"class":300,"line":439},[298,3005,2480],{"class":403},[298,3007,1866],{"class":304},[298,3009,1087],{"class":403},[298,3011,3012],{"class":1217},"l",[298,3014,1874],{"class":985},[298,3016,3017],{"class":409}," l",[298,3019,1000],{"class":403},[298,3021,295],{"class":409},[298,3023,3024],{"class":993}," !==",[298,3026,3027],{"class":409}," locale",[298,3029,1000],{"class":403},[298,3031,1735],{"class":409},[298,3033,3034],{"class":403},")\n",[298,3036,3037],{"class":300,"line":202},[298,3038,1777],{"class":403},[298,3040,3041,3043,3045],{"class":300,"line":450},[298,3042,1899],{"class":1596},[298,3044,1600],{"class":1599},[298,3046,1616],{"class":1596},[298,3048,3049],{"class":300,"line":459},[298,3050,701],{"emptyLinePlaceholder":199},[298,3052,3053,3055,3057],{"class":300,"line":467},[298,3054,1199],{"class":1596},[298,3056,1914],{"class":1599},[298,3058,1616],{"class":1596},[298,3060,3061,3063,3065,3067,3069,3072],{"class":300,"line":473},[298,3062,1921],{"class":1596},[298,3064,2003],{"class":1599},[298,3066,1937],{"class":1603},[298,3068,1610],{"class":403},[298,3070,3071],{"class":308},"\"flex gap-2\"",[298,3073,1616],{"class":1596},[298,3075,3076,3078],{"class":300,"line":484},[298,3077,1931],{"class":1596},[298,3079,2020],{"class":1599},[298,3081,3082,3085,3087,3089,3092,3094,3096],{"class":300,"line":495},[298,3083,3084],{"class":393},"      v-for",[298,3086,1610],{"class":403},[298,3088,2030],{"class":1732},[298,3090,3091],{"class":409},"loc",[298,3093,2035],{"class":985},[298,3095,2953],{"class":409},[298,3097,2040],{"class":1732},[298,3099,3100,3103,3105,3107,3109,3111,3113,3115],{"class":300,"line":506},[298,3101,3102],{"class":403},"      :",[298,3104,2048],{"class":1603},[298,3106,1610],{"class":403},[298,3108,2030],{"class":1732},[298,3110,3091],{"class":409},[298,3112,1000],{"class":403},[298,3114,295],{"class":409},[298,3116,2040],{"class":1732},[298,3118,3119,3121,3123,3125,3127,3130,3132,3134,3136,3138,3140],{"class":300,"line":517},[298,3120,3102],{"class":403},[298,3122,2068],{"class":1603},[298,3124,1610],{"class":403},[298,3126,2030],{"class":1732},[298,3128,3129],{"class":304},"switchLocalePath",[298,3131,1087],{"class":403},[298,3133,3091],{"class":409},[298,3135,1000],{"class":403},[298,3137,295],{"class":409},[298,3139,2086],{"class":403},[298,3141,2040],{"class":1732},[298,3143,3144,3147,3149],{"class":300,"line":526},[298,3145,3146],{"class":1603},"      class",[298,3148,1610],{"class":403},[298,3150,3151],{"class":308},"\"px-3 py-1 rounded border hover:bg-gray-100\"\n",[298,3153,3154],{"class":300,"line":532},[298,3155,3156],{"class":1596},"    >\n",[298,3158,3159,3161,3163,3165,3167],{"class":300,"line":537},[298,3160,2805],{"class":403},[298,3162,3091],{"class":409},[298,3164,1000],{"class":403},[298,3166,2994],{"class":409},[298,3168,3169],{"class":403}," }}\n",[298,3171,3172,3174,3176],{"class":300,"line":547},[298,3173,2285],{"class":1596},[298,3175,2270],{"class":1599},[298,3177,1616],{"class":1596},[298,3179,3180,3182,3184],{"class":300,"line":557},[298,3181,2294],{"class":1596},[298,3183,2003],{"class":1599},[298,3185,1616],{"class":1596},[298,3187,3188,3190,3192],{"class":300,"line":567},[298,3189,1899],{"class":1596},[298,3191,1914],{"class":1599},[298,3193,1616],{"class":1596},[37,3195,3197],{"id":3196},"step-8-localized-category-display","Step 8: Localized Category Display",[30,3199,3200],{},"Create a composable to fetch category titles in the current locale.",[30,3202,937,3203,375],{},[295,3204,3205],{},"composables/useCategoryTitle.ts",[289,3207,3209],{"className":378,"code":3208,"language":380,"meta":16,"style":16},"import { getCategoriesCollection, type Category } from \"@@/types/content\";\n\nexport const useCategoryTitle = async (categorySlug: string) => {\n  const { locale } = useI18n();\n  \n  const { data: category } = await useAsyncData\u003CCategory | null>(\n    `category-${locale.value}-${categorySlug}`,\n    async () => {\n      const collection = getCategoriesCollection(locale.value);\n      const foundCategory = await queryCollection(collection)\n        .where(\"slug\", \"=\", categorySlug)\n        .first();\n      return foundCategory ?? null;\n    }\n  );\n\n  return computed(() => category.value?.title || categorySlug);\n};\n",[295,3210,3211,3234,3238,3267,3284,3288,3323,3351,3362,3383,3402,3425,3434,3448,3452,3457,3461,3490],{"__ignoreMap":16},[298,3212,3213,3215,3217,3220,3222,3224,3226,3228,3230,3232],{"class":300,"line":301},[298,3214,956],{"class":393},[298,3216,959],{"class":403},[298,3218,3219],{"class":409},"getCategoriesCollection",[298,3221,619],{"class":403},[298,3223,1630],{"class":393},[298,3225,1255],{"class":409},[298,3227,965],{"class":403},[298,3229,968],{"class":393},[298,3231,1639],{"class":308},[298,3233,974],{"class":403},[298,3235,3236],{"class":300,"line":179},[298,3237,701],{"emptyLinePlaceholder":199},[298,3239,3240,3242,3244,3247,3249,3252,3254,3257,3259,3261,3263,3265],{"class":300,"line":17},[298,3241,394],{"class":393},[298,3243,986],{"class":985},[298,3245,3246],{"class":304}," useCategoryTitle",[298,3248,994],{"class":993},[298,3250,3251],{"class":985}," async",[298,3253,1426],{"class":403},[298,3255,3256],{"class":1217},"categorySlug",[298,3258,375],{"class":993},[298,3260,1224],{"class":1223},[298,3262,1436],{"class":403},[298,3264,1439],{"class":985},[298,3266,456],{"class":403},[298,3268,3269,3272,3274,3276,3278,3280,3282],{"class":300,"line":416},[298,3270,3271],{"class":985},"  const",[298,3273,959],{"class":403},[298,3275,1429],{"class":989},[298,3277,965],{"class":403},[298,3279,1610],{"class":993},[298,3281,1661],{"class":304},[298,3283,1664],{"class":403},[298,3285,3286],{"class":300,"line":425},[298,3287,447],{"class":403},[298,3289,3290,3292,3294,3296,3298,3301,3303,3305,3307,3309,3311,3314,3317,3320],{"class":300,"line":433},[298,3291,3271],{"class":985},[298,3293,959],{"class":403},[298,3295,1696],{"class":1217},[298,3297,1699],{"class":403},[298,3299,3300],{"class":989},"category",[298,3302,965],{"class":403},[298,3304,1610],{"class":993},[298,3306,1709],{"class":393},[298,3308,1712],{"class":304},[298,3310,1199],{"class":403},[298,3312,3313],{"class":1186},"Category",[298,3315,3316],{"class":993}," |",[298,3318,3319],{"class":1223}," null",[298,3321,3322],{"class":403},">(\n",[298,3324,3325,3328,3330,3332,3334,3336,3338,3341,3343,3345,3347,3349],{"class":300,"line":439},[298,3326,3327],{"class":308},"    `category-",[298,3329,1453],{"class":1452},[298,3331,1429],{"class":409},[298,3333,1000],{"class":1732},[298,3335,1735],{"class":409},[298,3337,1458],{"class":1452},[298,3339,3340],{"class":308},"-",[298,3342,1453],{"class":1452},[298,3344,3256],{"class":409},[298,3346,1458],{"class":1452},[298,3348,1740],{"class":308},[298,3350,422],{"class":403},[298,3352,3353,3356,3358,3360],{"class":300,"line":202},[298,3354,3355],{"class":985},"    async",[298,3357,1750],{"class":403},[298,3359,1439],{"class":985},[298,3361,456],{"class":403},[298,3363,3364,3367,3369,3371,3373,3375,3377,3379,3381],{"class":300,"line":450},[298,3365,3366],{"class":985},"      const",[298,3368,1762],{"class":989},[298,3370,994],{"class":993},[298,3372,1482],{"class":304},[298,3374,1087],{"class":403},[298,3376,1429],{"class":409},[298,3378,1000],{"class":403},[298,3380,1735],{"class":409},[298,3382,1777],{"class":403},[298,3384,3385,3387,3390,3392,3394,3396,3398,3400],{"class":300,"line":459},[298,3386,3366],{"class":985},[298,3388,3389],{"class":989}," foundCategory",[298,3391,994],{"class":993},[298,3393,1709],{"class":393},[298,3395,1785],{"class":304},[298,3397,1087],{"class":403},[298,3399,1790],{"class":409},[298,3401,3034],{"class":403},[298,3403,3404,3407,3409,3411,3414,3416,3419,3421,3423],{"class":300,"line":467},[298,3405,3406],{"class":403},"        .",[298,3408,2483],{"class":304},[298,3410,1087],{"class":403},[298,3412,3413],{"class":308},"\"slug\"",[298,3415,619],{"class":403},[298,3417,3418],{"class":308},"\"=\"",[298,3420,619],{"class":403},[298,3422,3256],{"class":409},[298,3424,3034],{"class":403},[298,3426,3427,3429,3432],{"class":300,"line":473},[298,3428,3406],{"class":403},[298,3430,3431],{"class":304},"first",[298,3433,1664],{"class":403},[298,3435,3436,3439,3441,3444,3446],{"class":300,"line":484},[298,3437,3438],{"class":393},"      return",[298,3440,3389],{"class":409},[298,3442,3443],{"class":993}," ??",[298,3445,3319],{"class":631},[298,3447,974],{"class":403},[298,3449,3450],{"class":300,"line":495},[298,3451,689],{"class":403},[298,3453,3454],{"class":300,"line":506},[298,3455,3456],{"class":403},"  );\n",[298,3458,3459],{"class":300,"line":517},[298,3460,701],{"emptyLinePlaceholder":199},[298,3462,3463,3465,3467,3469,3471,3474,3476,3478,3480,3482,3485,3488],{"class":300,"line":526},[298,3464,1446],{"class":393},[298,3466,1843],{"class":304},[298,3468,1846],{"class":403},[298,3470,1439],{"class":985},[298,3472,3473],{"class":409}," category",[298,3475,1000],{"class":403},[298,3477,1735],{"class":409},[298,3479,1863],{"class":403},[298,3481,2154],{"class":409},[298,3483,3484],{"class":993}," ||",[298,3486,3487],{"class":409}," categorySlug",[298,3489,1777],{"class":403},[298,3491,3492],{"class":300,"line":532},[298,3493,1242],{"class":403},[30,3495,3496],{},"Use it in your components:",[289,3498,3500],{"className":1587,"code":3499,"language":1589,"meta":16,"style":16},"\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{ categorySlug: string }>();\nconst categoryTitle = await useCategoryTitle(props.categorySlug);\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cspan>{{ categoryTitle }}\u003C/span>\n\u003C/template>\n",[295,3501,3502,3518,3542,3566,3574,3578,3586,3607],{"__ignoreMap":16},[298,3503,3504,3506,3508,3510,3512,3514,3516],{"class":300,"line":301},[298,3505,1199],{"class":1596},[298,3507,1600],{"class":1599},[298,3509,1604],{"class":1603},[298,3511,1607],{"class":1603},[298,3513,1610],{"class":403},[298,3515,1613],{"class":308},[298,3517,1616],{"class":1596},[298,3519,3520,3522,3525,3527,3530,3533,3535,3537,3539],{"class":300,"line":179},[298,3521,1650],{"class":985},[298,3523,3524],{"class":989}," props",[298,3526,994],{"class":993},[298,3528,3529],{"class":304}," defineProps",[298,3531,3532],{"class":403},"\u003C{ ",[298,3534,3256],{"class":1217},[298,3536,375],{"class":993},[298,3538,1224],{"class":1223},[298,3540,3541],{"class":403}," }>();\n",[298,3543,3544,3546,3549,3551,3553,3555,3557,3560,3562,3564],{"class":300,"line":17},[298,3545,1650],{"class":985},[298,3547,3548],{"class":989}," categoryTitle",[298,3550,994],{"class":993},[298,3552,1709],{"class":393},[298,3554,3246],{"class":304},[298,3556,1087],{"class":403},[298,3558,3559],{"class":409},"props",[298,3561,1000],{"class":403},[298,3563,3256],{"class":409},[298,3565,1777],{"class":403},[298,3567,3568,3570,3572],{"class":300,"line":416},[298,3569,1899],{"class":1596},[298,3571,1600],{"class":1599},[298,3573,1616],{"class":1596},[298,3575,3576],{"class":300,"line":425},[298,3577,701],{"emptyLinePlaceholder":199},[298,3579,3580,3582,3584],{"class":300,"line":433},[298,3581,1199],{"class":1596},[298,3583,1914],{"class":1599},[298,3585,1616],{"class":1596},[298,3587,3588,3590,3592,3594,3596,3599,3601,3603,3605],{"class":300,"line":439},[298,3589,1921],{"class":1596},[298,3591,298],{"class":1599},[298,3593,2203],{"class":1596},[298,3595,2206],{"class":403},[298,3597,3598],{"class":409},"categoryTitle",[298,3600,2215],{"class":403},[298,3602,1899],{"class":1596},[298,3604,298],{"class":1599},[298,3606,1616],{"class":1596},[298,3608,3609,3611,3613],{"class":300,"line":202},[298,3610,1899],{"class":1596},[298,3612,1914],{"class":1599},[298,3614,1616],{"class":1596},[37,3616,3618],{"id":3617},"step-9-seo-optimization","Step 9: SEO Optimization",[30,3620,3621,3622,765],{},"Add hreflang tags in your layouts (",[295,3623,3624],{},"layouts/default.vue",[289,3626,3628],{"className":1587,"code":3627,"language":1589,"meta":16,"style":16},"\u003Cscript setup lang=\"ts\">\nconst { locale } = useI18n();\nconst route = useRoute();\n\nconst i18nHead = useLocaleHead({\n  addDirAttribute: true,\n  identifierAttribute: \"id\",\n  addSeoAttributes: true,\n});\n\nuseHead(() => ({\n  htmlAttrs: {\n    lang: i18nHead.value.htmlAttrs!.lang,\n    dir: locale.value === 'ar' ? 'rtl' : 'ltr',\n  },\n  link: [...(i18nHead.value.link || [])],\n  meta: [...(i18nHead.value.meta || [])],\n}));\n\u003C/script>\n",[295,3629,3630,3646,3662,3674,3678,3692,3701,3711,3720,3724,3728,3739,3746,3771,3801,3805,3834,3859,3864],{"__ignoreMap":16},[298,3631,3632,3634,3636,3638,3640,3642,3644],{"class":300,"line":301},[298,3633,1199],{"class":1596},[298,3635,1600],{"class":1599},[298,3637,1604],{"class":1603},[298,3639,1607],{"class":1603},[298,3641,1610],{"class":403},[298,3643,1613],{"class":308},[298,3645,1616],{"class":1596},[298,3647,3648,3650,3652,3654,3656,3658,3660],{"class":300,"line":179},[298,3649,1650],{"class":985},[298,3651,959],{"class":403},[298,3653,1429],{"class":989},[298,3655,965],{"class":403},[298,3657,1610],{"class":993},[298,3659,1661],{"class":304},[298,3661,1664],{"class":403},[298,3663,3664,3666,3668,3670,3672],{"class":300,"line":17},[298,3665,1650],{"class":985},[298,3667,2361],{"class":989},[298,3669,994],{"class":993},[298,3671,2366],{"class":304},[298,3673,1664],{"class":403},[298,3675,3676],{"class":300,"line":416},[298,3677,701],{"emptyLinePlaceholder":199},[298,3679,3680,3682,3685,3687,3690],{"class":300,"line":425},[298,3681,1650],{"class":985},[298,3683,3684],{"class":989}," i18nHead",[298,3686,994],{"class":993},[298,3688,3689],{"class":304}," useLocaleHead",[298,3691,404],{"class":403},[298,3693,3694,3697,3699],{"class":300,"line":433},[298,3695,3696],{"class":409},"  addDirAttribute:",[298,3698,632],{"class":631},[298,3700,422],{"class":403},[298,3702,3703,3706,3709],{"class":300,"line":439},[298,3704,3705],{"class":409},"  identifierAttribute:",[298,3707,3708],{"class":308}," \"id\"",[298,3710,422],{"class":403},[298,3712,3713,3716,3718],{"class":300,"line":202},[298,3714,3715],{"class":409},"  addSeoAttributes:",[298,3717,632],{"class":631},[298,3719,422],{"class":403},[298,3721,3722],{"class":300,"line":450},[298,3723,743],{"class":403},[298,3725,3726],{"class":300,"line":459},[298,3727,701],{"emptyLinePlaceholder":199},[298,3729,3730,3732,3734,3736],{"class":300,"line":467},[298,3731,2587],{"class":304},[298,3733,1846],{"class":403},[298,3735,1439],{"class":985},[298,3737,3738],{"class":403}," ({\n",[298,3740,3741,3744],{"class":300,"line":473},[298,3742,3743],{"class":409},"  htmlAttrs:",[298,3745,456],{"class":403},[298,3747,3748,3751,3753,3755,3757,3759,3762,3764,3766,3769],{"class":300,"line":484},[298,3749,3750],{"class":409},"    lang:",[298,3752,3684],{"class":409},[298,3754,1000],{"class":403},[298,3756,1735],{"class":409},[298,3758,1000],{"class":403},[298,3760,3761],{"class":409},"htmlAttrs",[298,3763,2521],{"class":993},[298,3765,1000],{"class":403},[298,3767,3768],{"class":409},"lang",[298,3770,422],{"class":403},[298,3772,3773,3776,3778,3780,3782,3785,3788,3791,3794,3796,3799],{"class":300,"line":495},[298,3774,3775],{"class":409},"    dir:",[298,3777,3027],{"class":409},[298,3779,1000],{"class":403},[298,3781,1735],{"class":409},[298,3783,3784],{"class":993}," ===",[298,3786,3787],{"class":308}," 'ar'",[298,3789,3790],{"class":993}," ?",[298,3792,3793],{"class":308}," 'rtl'",[298,3795,2848],{"class":993},[298,3797,3798],{"class":308}," 'ltr'",[298,3800,422],{"class":403},[298,3802,3803],{"class":300,"line":506},[298,3804,695],{"class":403},[298,3806,3807,3810,3812,3815,3817,3820,3822,3824,3826,3829,3831],{"class":300,"line":517},[298,3808,3809],{"class":409},"  link:",[298,3811,1813],{"class":403},[298,3813,3814],{"class":993},"...",[298,3816,1087],{"class":403},[298,3818,3819],{"class":409},"i18nHead",[298,3821,1000],{"class":403},[298,3823,1735],{"class":409},[298,3825,1000],{"class":403},[298,3827,3828],{"class":409},"link",[298,3830,3484],{"class":993},[298,3832,3833],{"class":403}," [])],\n",[298,3835,3836,3838,3840,3842,3844,3846,3848,3850,3852,3855,3857],{"class":300,"line":526},[298,3837,2611],{"class":409},[298,3839,1813],{"class":403},[298,3841,3814],{"class":993},[298,3843,1087],{"class":403},[298,3845,3819],{"class":409},[298,3847,1000],{"class":403},[298,3849,1735],{"class":409},[298,3851,1000],{"class":403},[298,3853,3854],{"class":409},"meta",[298,3856,3484],{"class":993},[298,3858,3833],{"class":403},[298,3860,3861],{"class":300,"line":532},[298,3862,3863],{"class":403},"}));\n",[298,3865,3866,3868,3870],{"class":300,"line":537},[298,3867,1899],{"class":1596},[298,3869,1600],{"class":1599},[298,3871,1616],{"class":1596},[37,3873,3875],{"id":3874},"step-10-rtl-support-with-tailwind","Step 10: RTL Support with Tailwind",[30,3877,371,3878,375],{},[295,3879,3880],{},"tailwind.config.ts",[289,3882,3884],{"className":378,"code":3883,"language":380,"meta":16,"style":16},"export default {\n  content: [\n    \"./components/**/*.{js,vue,ts}\",\n    \"./layouts/**/*.vue\",\n    \"./pages/**/*.vue\",\n    \"./app.vue\",\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [\n    require(\"@tailwindcss/typography\"),\n  ],\n};\n",[295,3885,3886,3894,3900,3907,3914,3921,3928,3932,3939,3947,3951,3958,3971,3975],{"__ignoreMap":16},[298,3887,3888,3890,3892],{"class":300,"line":301},[298,3889,394],{"class":393},[298,3891,397],{"class":393},[298,3893,456],{"class":403},[298,3895,3896,3898],{"class":300,"line":179},[298,3897,707],{"class":409},[298,3899,413],{"class":403},[298,3901,3902,3905],{"class":300,"line":17},[298,3903,3904],{"class":308},"    \"./components/**/*.{js,vue,ts}\"",[298,3906,422],{"class":403},[298,3908,3909,3912],{"class":300,"line":416},[298,3910,3911],{"class":308},"    \"./layouts/**/*.vue\"",[298,3913,422],{"class":403},[298,3915,3916,3919],{"class":300,"line":425},[298,3917,3918],{"class":308},"    \"./pages/**/*.vue\"",[298,3920,422],{"class":403},[298,3922,3923,3926],{"class":300,"line":433},[298,3924,3925],{"class":308},"    \"./app.vue\"",[298,3927,422],{"class":403},[298,3929,3930],{"class":300,"line":439},[298,3931,442],{"class":403},[298,3933,3934,3937],{"class":300,"line":202},[298,3935,3936],{"class":409},"  theme:",[298,3938,456],{"class":403},[298,3940,3941,3944],{"class":300,"line":450},[298,3942,3943],{"class":409},"    extend:",[298,3945,3946],{"class":403}," {},\n",[298,3948,3949],{"class":300,"line":459},[298,3950,695],{"class":403},[298,3952,3953,3956],{"class":300,"line":467},[298,3954,3955],{"class":409},"  plugins:",[298,3957,413],{"class":403},[298,3959,3960,3963,3965,3968],{"class":300,"line":473},[298,3961,3962],{"class":304},"    require",[298,3964,1087],{"class":403},[298,3966,3967],{"class":308},"\"@tailwindcss/typography\"",[298,3969,3970],{"class":403},"),\n",[298,3972,3973],{"class":300,"line":484},[298,3974,442],{"class":403},[298,3976,3977],{"class":300,"line":495},[298,3978,1242],{"class":403},[30,3980,3981,3982,375],{},"Add RTL utility classes in ",[295,3983,3984],{},"assets/css/tailwind.css",[289,3986,3990],{"className":3987,"code":3988,"language":3989,"meta":16,"style":16},"language-css shiki shiki-themes github-light dark-plus dark-plus","@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  * {\n    @apply rtl:font-arabic ltr:font-latin;\n  }\n}\n","css",[295,3991,3992,4000,4007,4014,4018,4026,4033,4055,4059],{"__ignoreMap":16},[298,3993,3994,3997],{"class":300,"line":301},[298,3995,3996],{"class":393},"@tailwind",[298,3998,3999],{"class":403}," base;\n",[298,4001,4002,4004],{"class":300,"line":179},[298,4003,3996],{"class":393},[298,4005,4006],{"class":403}," components;\n",[298,4008,4009,4011],{"class":300,"line":17},[298,4010,3996],{"class":393},[298,4012,4013],{"class":403}," utilities;\n",[298,4015,4016],{"class":300,"line":416},[298,4017,701],{"emptyLinePlaceholder":199},[298,4019,4020,4023],{"class":300,"line":425},[298,4021,4022],{"class":393},"@layer",[298,4024,4025],{"class":403}," base {\n",[298,4027,4028,4031],{"class":300,"line":433},[298,4029,4030],{"class":1599},"  *",[298,4032,456],{"class":403},[298,4034,4035,4038,4042,4045,4048,4052],{"class":300,"line":439},[298,4036,4037],{"class":403},"    @",[298,4039,4041],{"class":4040},"se0Tf","apply",[298,4043,4044],{"class":4040}," rtl",[298,4046,4047],{"class":403},":font-arabic ",[298,4049,4051],{"class":4050},"sqBZk","ltr",[298,4053,4054],{"class":403},":font-latin;\n",[298,4056,4057],{"class":300,"line":202},[298,4058,737],{"class":403},[298,4060,4061],{"class":300,"line":450},[298,4062,2573],{"class":403},[30,4064,4065,4066,375],{},"Configure fonts in ",[295,4067,374],{},[289,4069,4071],{"className":378,"code":4070,"language":380,"meta":16,"style":16},"app: {\n  head: {\n    link: [\n      {\n        rel: 'stylesheet',\n        href: 'https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&display=swap',\n      },\n      {\n        rel: 'stylesheet',\n        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap',\n      },\n    ],\n  },\n},\n",[295,4072,4073,4082,4089,4097,4101,4111,4121,4125,4129,4137,4146,4150,4154,4158],{"__ignoreMap":16},[298,4074,4075,4079],{"class":300,"line":301},[298,4076,4078],{"class":4077},"sGRYn","app",[298,4080,4081],{"class":403},": {\n",[298,4083,4084,4087],{"class":300,"line":179},[298,4085,4086],{"class":4077},"  head",[298,4088,4081],{"class":403},[298,4090,4091,4094],{"class":300,"line":17},[298,4092,4093],{"class":4077},"    link",[298,4095,4096],{"class":403},": [\n",[298,4098,4099],{"class":300,"line":416},[298,4100,470],{"class":403},[298,4102,4103,4106,4109],{"class":300,"line":425},[298,4104,4105],{"class":409},"        rel:",[298,4107,4108],{"class":308}," 'stylesheet'",[298,4110,422],{"class":403},[298,4112,4113,4116,4119],{"class":300,"line":433},[298,4114,4115],{"class":409},"        href:",[298,4117,4118],{"class":308}," 'https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&display=swap'",[298,4120,422],{"class":403},[298,4122,4123],{"class":300,"line":439},[298,4124,529],{"class":403},[298,4126,4127],{"class":300,"line":202},[298,4128,470],{"class":403},[298,4130,4131,4133,4135],{"class":300,"line":450},[298,4132,4105],{"class":409},[298,4134,4108],{"class":308},[298,4136,422],{"class":403},[298,4138,4139,4141,4144],{"class":300,"line":459},[298,4140,4115],{"class":409},[298,4142,4143],{"class":308}," 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap'",[298,4145,422],{"class":403},[298,4147,4148],{"class":300,"line":467},[298,4149,529],{"class":403},[298,4151,4152],{"class":300,"line":473},[298,4153,597],{"class":403},[298,4155,4156],{"class":300,"line":484},[298,4157,695],{"class":403},[298,4159,4160],{"class":300,"line":495},[298,4161,4162],{"class":403},"},\n",[37,4164,4166],{"id":4165},"best-practices-tips","Best Practices & Tips",[4168,4169,4171],"h3",{"id":4170},"_1-use-consistent-slugs","1. Use Consistent Slugs",[30,4173,4174],{},"Keep the same slug across languages for easier cross-referencing:",[229,4176,4177,4183],{},[232,4178,4179,4180],{},"EN: ",[295,4181,4182],{},"content/en/articles/my-post.md",[232,4184,4185,4186],{},"AR: ",[295,4187,4188],{},"content/ar/articles/my-post.md",[4168,4190,4192],{"id":4191},"_2-implement-fallback-content","2. Implement Fallback Content",[30,4194,4195],{},"Always provide fallback values when content might be missing:",[289,4197,4199],{"className":1587,"code":4198,"language":1589,"meta":16,"style":16},"const categoryTitle = computed(() => \n  category.value?.title || post.category || 'Uncategorized'\n);\n",[295,4200,4201,4206,4211],{"__ignoreMap":16},[298,4202,4203],{"class":300,"line":301},[298,4204,4205],{"class":403},"const categoryTitle = computed(() => \n",[298,4207,4208],{"class":300,"line":179},[298,4209,4210],{"class":403},"  category.value?.title || post.category || 'Uncategorized'\n",[298,4212,4213],{"class":300,"line":17},[298,4214,1777],{"class":403},[4168,4216,4218],{"id":4217},"_3-watch-for-locale-changes","3. Watch for Locale Changes",[30,4220,4221,4222,375],{},"Make sure to watch locale changes in ",[295,4223,4224],{},"useAsyncData",[289,4226,4228],{"className":378,"code":4227,"language":380,"meta":16,"style":16},"const { data } = await useAsyncData(\n  `key-${locale.value}`,\n  () => fetchData(),\n  { watch: [locale] }  // Important!\n);\n",[295,4229,4230,4249,4268,4280,4296],{"__ignoreMap":16},[298,4231,4232,4234,4236,4238,4240,4242,4244,4246],{"class":300,"line":301},[298,4233,1650],{"class":985},[298,4235,959],{"class":403},[298,4237,1696],{"class":989},[298,4239,965],{"class":403},[298,4241,1610],{"class":993},[298,4243,1709],{"class":393},[298,4245,1712],{"class":304},[298,4247,4248],{"class":403},"(\n",[298,4250,4251,4254,4256,4258,4260,4262,4264,4266],{"class":300,"line":179},[298,4252,4253],{"class":308},"  `key-",[298,4255,1453],{"class":1452},[298,4257,1429],{"class":409},[298,4259,1000],{"class":1732},[298,4261,1735],{"class":409},[298,4263,1458],{"class":1452},[298,4265,1740],{"class":308},[298,4267,422],{"class":403},[298,4269,4270,4273,4275,4278],{"class":300,"line":17},[298,4271,4272],{"class":403},"  () ",[298,4274,1439],{"class":985},[298,4276,4277],{"class":304}," fetchData",[298,4279,1020],{"class":403},[298,4281,4282,4284,4286,4288,4290,4293],{"class":300,"line":416},[298,4283,1807],{"class":403},[298,4285,1810],{"class":409},[298,4287,1813],{"class":403},[298,4289,1429],{"class":409},[298,4291,4292],{"class":403},"] }  ",[298,4294,4295],{"class":387},"// Important!\n",[298,4297,4298],{"class":300,"line":425},[298,4299,1777],{"class":403},[4168,4301,4303],{"id":4302},"_4-test-both-ltr-and-rtl","4. Test Both LTR and RTL",[30,4305,4306],{},"Always test your layouts in both directions:",[229,4308,4309,4319,4322,4325],{},[232,4310,4311,4312,4315,4316,2086],{},"Check margins and paddings (",[295,4313,4314],{},"ms-4"," instead of ",[295,4317,4318],{},"ml-4",[232,4320,4321],{},"Verify icon positions",[232,4323,4324],{},"Test form layouts",[232,4326,4327],{},"Check navigation menus",[4168,4329,4331],{"id":4330},"_5-optimize-images","5. Optimize Images",[30,4333,4334],{},"Use Nuxt Image for automatic optimization:",[289,4336,4338],{"className":1587,"code":4337,"language":1589,"meta":16,"style":16},"\u003CNuxtImg\n  :src=\"post.image\"\n  :alt=\"post.title\"\n  width=\"800\"\n  height=\"400\"\n  format=\"webp\"\n  loading=\"lazy\"\n/>\n",[295,4339,4340,4347,4366,4384,4394,4404,4414,4424],{"__ignoreMap":16},[298,4341,4342,4344],{"class":300,"line":301},[298,4343,1199],{"class":1596},[298,4345,4346],{"class":1599},"NuxtImg\n",[298,4348,4349,4352,4354,4356,4358,4360,4362,4364],{"class":300,"line":179},[298,4350,4351],{"class":403},"  :",[298,4353,2121],{"class":1603},[298,4355,1610],{"class":403},[298,4357,2030],{"class":1732},[298,4359,1871],{"class":409},[298,4361,1000],{"class":403},[298,4363,2132],{"class":409},[298,4365,2040],{"class":1732},[298,4367,4368,4370,4372,4374,4376,4378,4380,4382],{"class":300,"line":17},[298,4369,4351],{"class":403},[298,4371,2143],{"class":1603},[298,4373,1610],{"class":403},[298,4375,2030],{"class":1732},[298,4377,1871],{"class":409},[298,4379,1000],{"class":403},[298,4381,2154],{"class":409},[298,4383,2040],{"class":1732},[298,4385,4386,4389,4391],{"class":300,"line":416},[298,4387,4388],{"class":1603},"  width",[298,4390,1610],{"class":403},[298,4392,4393],{"class":308},"\"800\"\n",[298,4395,4396,4399,4401],{"class":300,"line":425},[298,4397,4398],{"class":1603},"  height",[298,4400,1610],{"class":403},[298,4402,4403],{"class":308},"\"400\"\n",[298,4405,4406,4409,4411],{"class":300,"line":433},[298,4407,4408],{"class":1603},"  format",[298,4410,1610],{"class":403},[298,4412,4413],{"class":308},"\"webp\"\n",[298,4415,4416,4419,4421],{"class":300,"line":439},[298,4417,4418],{"class":1603},"  loading",[298,4420,1610],{"class":403},[298,4422,4423],{"class":308},"\"lazy\"\n",[298,4425,4426],{"class":300,"line":202},[298,4427,4428],{"class":403},"/>\n",[37,4430,4432],{"id":4431},"common-issues-solutions","Common Issues & Solutions",[4168,4434,4436],{"id":4435},"issue-locale-not-persisting","Issue: Locale not persisting",[30,4438,4439,4442],{},[235,4440,4441],{},"Solution",": Ensure cookie detection is enabled in i18n config:",[289,4444,4446],{"className":378,"code":4445,"language":380,"meta":16,"style":16},"detectBrowserLanguage: {\n  useCookie: true,\n  cookieKey: \"i18n_redirected\",\n}\n",[295,4447,4448,4455,4467,4479],{"__ignoreMap":16},[298,4449,4450,4453],{"class":300,"line":301},[298,4451,4452],{"class":4077},"detectBrowserLanguage",[298,4454,4081],{"class":403},[298,4456,4457,4460,4462,4465],{"class":300,"line":179},[298,4458,4459],{"class":4077},"  useCookie",[298,4461,1699],{"class":403},[298,4463,4464],{"class":631},"true",[298,4466,422],{"class":403},[298,4468,4469,4472,4474,4477],{"class":300,"line":17},[298,4470,4471],{"class":4077},"  cookieKey",[298,4473,1699],{"class":403},[298,4475,4476],{"class":308},"\"i18n_redirected\"",[298,4478,422],{"class":403},[298,4480,4481],{"class":300,"line":416},[298,4482,2573],{"class":403},[4168,4484,4486],{"id":4485},"issue-content-not-updating-when-switching-language","Issue: Content not updating when switching language",[30,4488,4489,4491,4492,4495,4496,375],{},[235,4490,4441],{},": Use the ",[295,4493,4494],{},"watch"," option in ",[295,4497,4224],{},[289,4499,4501],{"className":378,"code":4500,"language":380,"meta":16,"style":16},"{ watch: [locale] }\n",[295,4502,4503],{"__ignoreMap":16},[298,4504,4505,4508,4510,4513,4515],{"class":300,"line":301},[298,4506,4507],{"class":403},"{ ",[298,4509,4494],{"class":4077},[298,4511,4512],{"class":403},": [",[298,4514,1429],{"class":409},[298,4516,1818],{"class":403},[4168,4518,4520],{"id":4519},"issue-rtl-layout-breaking","Issue: RTL layout breaking",[30,4522,4523,4525,4526,4315,4529,765],{},[235,4524,4441],{},": Use logical properties (",[295,4527,4528],{},"start/end",[295,4530,4531],{},"left/right",[289,4533,4535],{"className":1587,"code":4534,"language":1589,"meta":16,"style":16},"\u003C!-- Bad -->\n\u003Cdiv class=\"ml-4\">\n\n\u003C!-- Good -->\n\u003Cdiv class=\"ms-4\">\n",[295,4536,4537,4542,4557,4561,4566],{"__ignoreMap":16},[298,4538,4539],{"class":300,"line":301},[298,4540,4541],{"class":387},"\u003C!-- Bad -->\n",[298,4543,4544,4546,4548,4550,4552,4555],{"class":300,"line":179},[298,4545,1199],{"class":1596},[298,4547,2003],{"class":1599},[298,4549,1937],{"class":1603},[298,4551,1610],{"class":403},[298,4553,4554],{"class":308},"\"ml-4\"",[298,4556,1616],{"class":1596},[298,4558,4559],{"class":300,"line":17},[298,4560,701],{"emptyLinePlaceholder":199},[298,4562,4563],{"class":300,"line":416},[298,4564,4565],{"class":403},"\u003C!-- Good -->\n",[298,4567,4568],{"class":300,"line":425},[298,4569,4570],{"class":403},"\u003Cdiv class=\"ms-4\">\n",[37,4572,4574],{"id":4573},"deployment-considerations","Deployment Considerations",[4168,4576,4578],{"id":4577},"_1-generate-static-routes","1. Generate Static Routes",[30,4580,4581,4582,4584],{},"Add this to ",[295,4583,374],{}," for static generation:",[289,4586,4588],{"className":378,"code":4587,"language":380,"meta":16,"style":16},"nitro: {\n  prerender: {\n    routes: [\"/\", \"/ar\"],\n    crawlLinks: true,\n  },\n},\n",[295,4589,4590,4597,4604,4622,4633,4637],{"__ignoreMap":16},[298,4591,4592,4595],{"class":300,"line":301},[298,4593,4594],{"class":4077},"nitro",[298,4596,4081],{"class":403},[298,4598,4599,4602],{"class":300,"line":179},[298,4600,4601],{"class":4077},"  prerender",[298,4603,4081],{"class":403},[298,4605,4606,4609,4611,4614,4616,4619],{"class":300,"line":17},[298,4607,4608],{"class":4077},"    routes",[298,4610,4512],{"class":403},[298,4612,4613],{"class":308},"\"/\"",[298,4615,619],{"class":403},[298,4617,4618],{"class":308},"\"/ar\"",[298,4620,4621],{"class":403},"],\n",[298,4623,4624,4627,4629,4631],{"class":300,"line":416},[298,4625,4626],{"class":4077},"    crawlLinks",[298,4628,1699],{"class":403},[298,4630,4464],{"class":631},[298,4632,422],{"class":403},[298,4634,4635],{"class":300,"line":425},[298,4636,695],{"class":403},[298,4638,4639],{"class":300,"line":433},[298,4640,4162],{"class":403},[4168,4642,4644],{"id":4643},"_2-configure-server-routes","2. Configure Server Routes",[30,4646,4647],{},"Make sure your server handles locale prefixes correctly.",[4168,4649,4651],{"id":4650},"_3-add-sitemap","3. Add Sitemap",[30,4653,4654,4655,4658],{},"Install ",[295,4656,4657],{},"@nuxtjs/sitemap"," and configure for multiple locales:",[289,4660,4662],{"className":378,"code":4661,"language":380,"meta":16,"style":16},"sitemap: {\n  hostname: 'https://yourdomain.com',\n  i18n: true,\n}\n",[295,4663,4664,4671,4683,4694],{"__ignoreMap":16},[298,4665,4666,4669],{"class":300,"line":301},[298,4667,4668],{"class":4077},"sitemap",[298,4670,4081],{"class":403},[298,4672,4673,4676,4678,4681],{"class":300,"line":179},[298,4674,4675],{"class":4077},"  hostname",[298,4677,1699],{"class":403},[298,4679,4680],{"class":308},"'https://yourdomain.com'",[298,4682,422],{"class":403},[298,4684,4685,4688,4690,4692],{"class":300,"line":17},[298,4686,4687],{"class":4077},"  i18n",[298,4689,1699],{"class":403},[298,4691,4464],{"class":631},[298,4693,422],{"class":403},[298,4695,4696],{"class":300,"line":416},[298,4697,2573],{"class":403},[37,4699,166],{"id":165},[30,4701,4702],{},"Building a multilingual blog with Nuxt 3, Nuxt Content, and Nuxt i18n is straightforward once you understand the core concepts. The key is:",[4704,4705,4706,4709,4712,4715,4718],"ol",{},[232,4707,4708],{},"Organize content by locale from the start",[232,4710,4711],{},"Use proper type definitions for better DX",[232,4713,4714],{},"Implement consistent composables for common tasks",[232,4716,4717],{},"Test thoroughly in all supported languages",[232,4719,4720],{},"Optimize for SEO with proper meta tags and hreflang",[30,4722,4723],{},"This approach scales well - you can add new languages by simply creating new content directories and updating your i18n config.",[30,4725,4726],{},"The blog you're reading right now uses this exact architecture, handling English and Arabic with full RTL support, localized categories, and optimized SEO. You can explore the source code and adapt it for your own projects.",[30,4728,4729],{},"Happy coding! 🚀",[4731,4732,4733],"style",{},"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 .svuFb, html code.shiki .svuFb{--shiki-light:#6F42C1;--shiki-default:#DCDCAA;--shiki-dark:#DCDCAA}html pre.shiki code .sGDl4, html code.shiki .sGDl4{--shiki-light:#032F62;--shiki-default:#CE9178;--shiki-dark:#CE9178}html pre.shiki code .sNX3-, html code.shiki .sNX3-{--shiki-light:#005CC5;--shiki-default:#DCDCAA;--shiki-dark:#DCDCAA}html pre.shiki code .s56mj, html code.shiki .s56mj{--shiki-light:#6A737D;--shiki-default:#6A9955;--shiki-dark:#6A9955}html pre.shiki code .sEkCa, html code.shiki .sEkCa{--shiki-light:#D73A49;--shiki-default:#C586C0;--shiki-dark:#C586C0}html pre.shiki code .sG4b4, html code.shiki .sG4b4{--shiki-light:#24292E;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}html pre.shiki code .sZiGn, html code.shiki .sZiGn{--shiki-light:#24292E;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .s7v1m, html code.shiki .s7v1m{--shiki-light:#005CC5;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .s5uUr, html code.shiki .s5uUr{--shiki-light:#D73A49;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .sToQf, html code.shiki .sToQf{--shiki-light:#005CC5;--shiki-default:#4FC1FF;--shiki-dark:#4FC1FF}html pre.shiki code .s1p9p, html code.shiki .s1p9p{--shiki-light:#D73A49;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}html pre.shiki code .su_XB, html code.shiki .su_XB{--shiki-light:#6F42C1;--shiki-default:#4EC9B0;--shiki-dark:#4EC9B0}html pre.shiki code .s9TRk, html code.shiki .s9TRk{--shiki-light:#E36209;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .s6-XD, html code.shiki .s6-XD{--shiki-light:#005CC5;--shiki-default:#4EC9B0;--shiki-dark:#4EC9B0}html pre.shiki code .se2iQ, html code.shiki .se2iQ{--shiki-light:#032F62;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .sffyN, html code.shiki .sffyN{--shiki-light:#24292E;--shiki-default:#808080;--shiki-dark:#808080}html pre.shiki code .ssFZ1, html code.shiki .ssFZ1{--shiki-light:#22863A;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .sFcZJ, html code.shiki .sFcZJ{--shiki-light:#6F42C1;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .s5T4v, html code.shiki .s5T4v{--shiki-light:#032F62;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}html pre.shiki code .seC34, html code.shiki .seC34{--shiki-light:#005CC5;--shiki-default:#B5CEA8;--shiki-dark:#B5CEA8}html pre.shiki code .se0Tf, html code.shiki .se0Tf{--shiki-light:#005CC5;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}html pre.shiki code .sqBZk, html code.shiki .sqBZk{--shiki-light:#005CC5;--shiki-default:#CE9178;--shiki-dark:#CE9178}html pre.shiki code .sGRYn, html code.shiki .sGRYn{--shiki-light:#6F42C1;--shiki-default:#C8C8C8;--shiki-dark:#C8C8C8}",{"title":16,"searchDepth":17,"depth":17,"links":4735},[4736,4737,4738,4739,4740,4741,4742,4743,4744,4745,4746,4747,4748,4755,4760,4765],{"id":223,"depth":179,"text":224},{"id":259,"depth":179,"text":260},{"id":283,"depth":179,"text":284},{"id":367,"depth":179,"text":368},{"id":746,"depth":179,"text":747},{"id":933,"depth":179,"text":934},{"id":1578,"depth":179,"text":1579},{"id":2310,"depth":179,"text":2311},{"id":2880,"depth":179,"text":2881},{"id":3196,"depth":179,"text":3197},{"id":3617,"depth":179,"text":3618},{"id":3874,"depth":179,"text":3875},{"id":4165,"depth":179,"text":4166,"children":4749},[4750,4751,4752,4753,4754],{"id":4170,"depth":17,"text":4171},{"id":4191,"depth":17,"text":4192},{"id":4217,"depth":17,"text":4218},{"id":4302,"depth":17,"text":4303},{"id":4330,"depth":17,"text":4331},{"id":4431,"depth":179,"text":4432,"children":4756},[4757,4758,4759],{"id":4435,"depth":17,"text":4436},{"id":4485,"depth":17,"text":4486},{"id":4519,"depth":17,"text":4520},{"id":4573,"depth":179,"text":4574,"children":4761},[4762,4763,4764],{"id":4577,"depth":17,"text":4578},{"id":4643,"depth":17,"text":4644},{"id":4650,"depth":17,"text":4651},{"id":165,"depth":179,"text":166},"Learn how to build a complete multilingual blog from scratch using Nuxt 3, Nuxt Content, and Nuxt i18n. This comprehensive tutorial covers everything from setup to deployment with real-world examples from this blog.","https://images.unsplash.com/photo-1523961131990-5ea7c61b2107?q=80&w=1200&auto=format&fit=crop",{"excerpt":4769},{"type":13,"value":4770},[4771],[30,4772,220],{},"/building-multilingual-blogs-nuxt-content","2025-01-10",{"title":215,"description":4766},"building-multilingual-blogs-nuxt-content",[4778,4779,4780,4781,4782,1589,380,4783],"nuxt","nuxt-content","nuxt-i18n","multilingual","tutorial","i18n","zd2QbuHRGBreJCajiQoo6YnCV8ziMyTXM_uyYrc4xlU",{"id":4786,"title":4787,"author":26,"body":4788,"category":19,"description":5376,"extension":7,"image":5377,"isDraft":190,"isFeatured":190,"locale":9,"meta":5378,"navigation":199,"path":5386,"publishedAt":5387,"readingTime":433,"seo":5388,"stem":5379,"tags":5389,"updatedAt":211,"__hash__":5390},"articles_en/css-units.md","CSS Units",{"type":13,"value":4789,"toc":5365},[4790,4793,4797,4800,4837,4872,4876,4879,4913,4947,4951,4954,4987,5020,5024,5027,5057,5089,5093,5096,5126,5130,5133,5168,5172,5179,5212,5216,5219,5247,5250,5259,5298,5302,5309,5312,5315,5318,5321,5324,5327,5330,5333,5335,5338,5341,5344,5359,5362],[30,4791,4792],{},"CSS (Cascading Style Sheets) is a language used to style and layout web pages. One of the most important concepts in CSS is the use of units to specify measurements such as length, width, and font size. In this article, we will discuss the different types of units available in CSS and how they are used to create a consistent and visually appealing design.",[37,4794,4796],{"id":4795},"absolute-units","Absolute Units",[30,4798,4799],{},"Absolute units are fixed units of measurement that do not change based on the user's device or screen size. The most common absolute units used in CSS are pixels (px), inches (in), centimeters (cm), and millimeters (mm).",[289,4801,4803],{"className":3987,"code":4802,"language":3989,"meta":16,"style":16},"/* Setting the width of an element to 200 pixels */\ndiv {\n  width: 200px;\n}\n",[295,4804,4805,4810,4817,4833],{"__ignoreMap":16},[298,4806,4807],{"class":300,"line":301},[298,4808,4809],{"class":387},"/* Setting the width of an element to 200 pixels */\n",[298,4811,4812,4815],{"class":300,"line":179},[298,4813,2003],{"class":4814},"se49E",[298,4816,456],{"class":403},[298,4818,4819,4822,4824,4827,4831],{"class":300,"line":17},[298,4820,4388],{"class":4821},"sps74",[298,4823,1699],{"class":403},[298,4825,4826],{"class":2549},"200",[298,4828,4830],{"class":4829},"sDy_c","px",[298,4832,974],{"class":403},[298,4834,4835],{"class":300,"line":416},[298,4836,2573],{"class":403},[289,4838,4840],{"className":3987,"code":4839,"language":3989,"meta":16,"style":16},"/* Setting the font size of text to 12 points */\np {\n  font-size: 12pt;\n}\n",[295,4841,4842,4847,4853,4868],{"__ignoreMap":16},[298,4843,4844],{"class":300,"line":301},[298,4845,4846],{"class":387},"/* Setting the font size of text to 12 points */\n",[298,4848,4849,4851],{"class":300,"line":179},[298,4850,30],{"class":4814},[298,4852,456],{"class":403},[298,4854,4855,4858,4860,4863,4866],{"class":300,"line":17},[298,4856,4857],{"class":4821},"  font-size",[298,4859,1699],{"class":403},[298,4861,4862],{"class":2549},"12",[298,4864,4865],{"class":4829},"pt",[298,4867,974],{"class":403},[298,4869,4870],{"class":300,"line":416},[298,4871,2573],{"class":403},[37,4873,4875],{"id":4874},"relative-units","Relative Units",[30,4877,4878],{},"Relative units are units of measurement that are relative to the user's device or screen size. The most common relative units used in CSS are em, rem, and vh/vw.",[289,4880,4882],{"className":3987,"code":4881,"language":3989,"meta":16,"style":16},"/* Setting the font size of text to 1.5 times the parent element's font size */\np {\n  font-size: 1.5em;\n}\n",[295,4883,4884,4889,4895,4909],{"__ignoreMap":16},[298,4885,4886],{"class":300,"line":301},[298,4887,4888],{"class":387},"/* Setting the font size of text to 1.5 times the parent element's font size */\n",[298,4890,4891,4893],{"class":300,"line":179},[298,4892,30],{"class":4814},[298,4894,456],{"class":403},[298,4896,4897,4899,4901,4904,4907],{"class":300,"line":17},[298,4898,4857],{"class":4821},[298,4900,1699],{"class":403},[298,4902,4903],{"class":2549},"1.5",[298,4905,4906],{"class":4829},"em",[298,4908,974],{"class":403},[298,4910,4911],{"class":300,"line":416},[298,4912,2573],{"class":403},[289,4914,4916],{"className":3987,"code":4915,"language":3989,"meta":16,"style":16},"/* Setting the height of an element to 50% of the viewport height */\ndiv {\n  height: 50vh;\n}\n",[295,4917,4918,4923,4929,4943],{"__ignoreMap":16},[298,4919,4920],{"class":300,"line":301},[298,4921,4922],{"class":387},"/* Setting the height of an element to 50% of the viewport height */\n",[298,4924,4925,4927],{"class":300,"line":179},[298,4926,2003],{"class":4814},[298,4928,456],{"class":403},[298,4930,4931,4933,4935,4938,4941],{"class":300,"line":17},[298,4932,4398],{"class":4821},[298,4934,1699],{"class":403},[298,4936,4937],{"class":2549},"50",[298,4939,4940],{"class":4829},"vh",[298,4942,974],{"class":403},[298,4944,4945],{"class":300,"line":416},[298,4946,2573],{"class":403},[37,4948,4950],{"id":4949},"viewport-units","Viewport Units",[30,4952,4953],{},"Viewport units are a special type of relative unit that is based on the size of the user's viewport (the visible area of the browser window). The most common viewport units used in CSS are vh (viewport height) and vw (viewport width).",[289,4955,4957],{"className":3987,"code":4956,"language":3989,"meta":16,"style":16},"/* Setting the width of an element to 50% of the viewport width */\ndiv {\n  width: 50vw;\n}\n",[295,4958,4959,4964,4970,4983],{"__ignoreMap":16},[298,4960,4961],{"class":300,"line":301},[298,4962,4963],{"class":387},"/* Setting the width of an element to 50% of the viewport width */\n",[298,4965,4966,4968],{"class":300,"line":179},[298,4967,2003],{"class":4814},[298,4969,456],{"class":403},[298,4971,4972,4974,4976,4978,4981],{"class":300,"line":17},[298,4973,4388],{"class":4821},[298,4975,1699],{"class":403},[298,4977,4937],{"class":2549},[298,4979,4980],{"class":4829},"vw",[298,4982,974],{"class":403},[298,4984,4985],{"class":300,"line":416},[298,4986,2573],{"class":403},[289,4988,4990],{"className":3987,"code":4989,"language":3989,"meta":16,"style":16},"/* Setting the height of an element to 100vh */\ndiv {\n  height: 100vh;\n}\n",[295,4991,4992,4997,5003,5016],{"__ignoreMap":16},[298,4993,4994],{"class":300,"line":301},[298,4995,4996],{"class":387},"/* Setting the height of an element to 100vh */\n",[298,4998,4999,5001],{"class":300,"line":179},[298,5000,2003],{"class":4814},[298,5002,456],{"class":403},[298,5004,5005,5007,5009,5012,5014],{"class":300,"line":17},[298,5006,4398],{"class":4821},[298,5008,1699],{"class":403},[298,5010,5011],{"class":2549},"100",[298,5013,4940],{"class":4829},[298,5015,974],{"class":403},[298,5017,5018],{"class":300,"line":416},[298,5019,2573],{"class":403},[37,5021,5023],{"id":5022},"pixels-px","Pixels (px)",[30,5025,5026],{},"Pixels are the most common unit of measurement used in web design. One pixel is equal to one dot on the user's screen. Pixels are a fixed unit of measurement and do not change based on the user's device or screen size.",[289,5028,5029],{"className":3987,"code":4802,"language":3989,"meta":16,"style":16},[295,5030,5031,5035,5041,5053],{"__ignoreMap":16},[298,5032,5033],{"class":300,"line":301},[298,5034,4809],{"class":387},[298,5036,5037,5039],{"class":300,"line":179},[298,5038,2003],{"class":4814},[298,5040,456],{"class":403},[298,5042,5043,5045,5047,5049,5051],{"class":300,"line":17},[298,5044,4388],{"class":4821},[298,5046,1699],{"class":403},[298,5048,4826],{"class":2549},[298,5050,4830],{"class":4829},[298,5052,974],{"class":403},[298,5054,5055],{"class":300,"line":416},[298,5056,2573],{"class":403},[289,5058,5060],{"className":3987,"code":5059,"language":3989,"meta":16,"style":16},"/* Setting the font size of text to 12 pixels */\np {\n  font-size: 12px;\n}\n",[295,5061,5062,5067,5073,5085],{"__ignoreMap":16},[298,5063,5064],{"class":300,"line":301},[298,5065,5066],{"class":387},"/* Setting the font size of text to 12 pixels */\n",[298,5068,5069,5071],{"class":300,"line":179},[298,5070,30],{"class":4814},[298,5072,456],{"class":403},[298,5074,5075,5077,5079,5081,5083],{"class":300,"line":17},[298,5076,4857],{"class":4821},[298,5078,1699],{"class":403},[298,5080,4862],{"class":2549},[298,5082,4830],{"class":4829},[298,5084,974],{"class":403},[298,5086,5087],{"class":300,"line":416},[298,5088,2573],{"class":403},[37,5090,5092],{"id":5091},"em-units","EM units",[30,5094,5095],{},"EM units are a relative unit of measurement that is based on the font size of the parent element. One em is equal to the font size of the parent element. For example, if the parent element's font size is 16 pixels, then 1 em is equal to 16 pixels.",[289,5097,5098],{"className":3987,"code":4881,"language":3989,"meta":16,"style":16},[295,5099,5100,5104,5110,5122],{"__ignoreMap":16},[298,5101,5102],{"class":300,"line":301},[298,5103,4888],{"class":387},[298,5105,5106,5108],{"class":300,"line":179},[298,5107,30],{"class":4814},[298,5109,456],{"class":403},[298,5111,5112,5114,5116,5118,5120],{"class":300,"line":17},[298,5113,4857],{"class":4821},[298,5115,1699],{"class":403},[298,5117,4903],{"class":2549},[298,5119,4906],{"class":4829},[298,5121,974],{"class":403},[298,5123,5124],{"class":300,"line":416},[298,5125,2573],{"class":403},[37,5127,5129],{"id":5128},"rem-units","REM units",[30,5131,5132],{},"REM units are similar to EM units but are based on the font size of the root element (usually the HTML element) instead of the parent element. This makes it easier to create a consistent design across a website or application.",[289,5134,5136],{"className":3987,"code":5135,"language":3989,"meta":16,"style":16},"/* Setting the font size of text to 1.2 times the root element's font size */\np {\nfont-size: 1.2rem;\n}\n",[295,5137,5138,5143,5149,5164],{"__ignoreMap":16},[298,5139,5140],{"class":300,"line":301},[298,5141,5142],{"class":387},"/* Setting the font size of text to 1.2 times the root element's font size */\n",[298,5144,5145,5147],{"class":300,"line":179},[298,5146,30],{"class":4814},[298,5148,456],{"class":403},[298,5150,5151,5154,5156,5159,5162],{"class":300,"line":17},[298,5152,5153],{"class":4821},"font-size",[298,5155,1699],{"class":403},[298,5157,5158],{"class":2549},"1.2",[298,5160,5161],{"class":4829},"rem",[298,5163,974],{"class":403},[298,5165,5166],{"class":300,"line":416},[298,5167,2573],{"class":403},[37,5169,5171],{"id":5170},"percent","Percent",[30,5173,5174,5175,5178],{},"Another common unit in CSS is percent (%). This unit is used to specify a measurement as a percentage of the parent element's width or height. For example, if you want an element to take up 50% of the width of its parent element, you would use ",[295,5176,5177],{},"width: 50%",". It's important to note that using percent for height may not always work as expected, as it depends on the parent element having an explicitly defined height.",[289,5180,5182],{"className":3987,"code":5181,"language":3989,"meta":16,"style":16},"/* Setting the width element to 1/2 of their parent */\ndiv {\n  width: 50%;\n}\n",[295,5183,5184,5189,5195,5208],{"__ignoreMap":16},[298,5185,5186],{"class":300,"line":301},[298,5187,5188],{"class":387},"/* Setting the width element to 1/2 of their parent */\n",[298,5190,5191,5193],{"class":300,"line":179},[298,5192,2003],{"class":4814},[298,5194,456],{"class":403},[298,5196,5197,5199,5201,5203,5206],{"class":300,"line":17},[298,5198,4388],{"class":4821},[298,5200,1699],{"class":403},[298,5202,4937],{"class":2549},[298,5204,5205],{"class":4829},"%",[298,5207,974],{"class":403},[298,5209,5210],{"class":300,"line":416},[298,5211,2573],{"class":403},[37,5213,5215],{"id":5214},"ch","Ch",[30,5217,5218],{},"The ch unit is a relatively new CSS unit that is used to set the font size relative to the width of the character \"0\" in the current font. This unit is particularly useful when working with monospace fonts, as it ensures that all characters in a monospace font are the same width.",[289,5220,5222],{"className":3987,"code":5221,"language":3989,"meta":16,"style":16},"p {\n  font-size: 2ch;\n}\n",[295,5223,5224,5230,5243],{"__ignoreMap":16},[298,5225,5226,5228],{"class":300,"line":301},[298,5227,30],{"class":4814},[298,5229,456],{"class":403},[298,5231,5232,5234,5236,5239,5241],{"class":300,"line":179},[298,5233,4857],{"class":4821},[298,5235,1699],{"class":403},[298,5237,5238],{"class":2549},"2",[298,5240,5214],{"class":4829},[298,5242,974],{"class":403},[298,5244,5245],{"class":300,"line":17},[298,5246,2573],{"class":403},[30,5248,5249],{},"⚠️",[30,5251,5252,5253,5255,5256,5258],{},"It's important to note that the ch unit is not widely supported by all browsers yet, so it's recommended to use it in combination with other units such as ",[295,5254,4906],{}," or ",[295,5257,5161],{}," as a fallback.",[289,5260,5262],{"className":3987,"code":5261,"language":3989,"meta":16,"style":16},"p {\n  font-size: 2ch;\n  font-size: 2rem;\n}\n",[295,5263,5264,5270,5282,5294],{"__ignoreMap":16},[298,5265,5266,5268],{"class":300,"line":301},[298,5267,30],{"class":4814},[298,5269,456],{"class":403},[298,5271,5272,5274,5276,5278,5280],{"class":300,"line":179},[298,5273,4857],{"class":4821},[298,5275,1699],{"class":403},[298,5277,5238],{"class":2549},[298,5279,5214],{"class":4829},[298,5281,974],{"class":403},[298,5283,5284,5286,5288,5290,5292],{"class":300,"line":17},[298,5285,4857],{"class":4821},[298,5287,1699],{"class":403},[298,5289,5238],{"class":2549},[298,5291,5161],{"class":4829},[298,5293,974],{"class":403},[298,5295,5296],{"class":300,"line":416},[298,5297,2573],{"class":403},[37,5299,5301],{"id":5300},"traditional-units","Traditional Units",[30,5303,5304,5305,5308],{},"We can also use more traditional units on web pages such as ",[235,5306,5307],{},"centimeters",". Note, I would not recommend using these for web designs, but rather perhaps for prints or non-web design-related CSS. That is because browsers and devices determine the definitions of these based on their own definitions of pixel density, which makes things very complicated.",[30,5310,5311],{},"Unit",[30,5313,5314],{},"Description",[30,5316,5317],{},"cm",[30,5319,5320],{},"Centimeter - a traditional unit of measurement based on physical measurements. Not recommended for web design as it is not responsive.",[30,5322,5323],{},"mm",[30,5325,5326],{},"Millimeter - a traditional unit of measurement based on physical measurements. Not recommended for web design as it is not responsive.",[30,5328,5329],{},"in",[30,5331,5332],{},"Inch - a traditional unit of measurement based on physical measurements. Not recommended for web design as it is not responsive.",[30,5334,4865],{},[30,5336,5337],{},"Point - a traditional unit of measurement used in print design. Not recommended for web design as it is not responsive.",[30,5339,5340],{},"pc",[30,5342,5343],{},"Pica - a traditional unit of measurement used in print design. Not recommended for web design as it is not responsive.",[30,5345,5346,5347,619,5349,619,5351,619,5353,5355,5356,5358],{},"Please note that these units are not widely used in web design as they are based on physical measurements and do not take into account the variations in pixel density across different devices and screens. It is recommended to use relative units such as ",[295,5348,4906],{},[295,5350,5161],{},[295,5352,4940],{},[295,5354,4980],{},", and ",[295,5357,5205],{}," for web design as they are based on the size of the viewport and adapt to different screen sizes.",[30,5360,5361],{},"In conclusion, understanding and utilizing the different types of units available in CSS is essential for creating a visually appealing and responsive design. By using a combination of absolute and relative units, and utilizing media queries, you can ensure that your website or application looks great on any device and screen size. Additionally, using REM units for font size allows for greater consistency and ease of maintenance across your entire website or application. It is always important to test your design on different devices and screen sizes to ensure that it looks great and functions well for all users.",[4731,5363,5364],{},"html pre.shiki code .s56mj, html code.shiki .s56mj{--shiki-light:#6A737D;--shiki-default:#6A9955;--shiki-dark:#6A9955}html pre.shiki code .se49E, html code.shiki .se49E{--shiki-light:#22863A;--shiki-default:#D7BA7D;--shiki-dark:#D7BA7D}html pre.shiki code .sG4b4, html code.shiki .sG4b4{--shiki-light:#24292E;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}html pre.shiki code .sps74, html code.shiki .sps74{--shiki-light:#005CC5;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .seC34, html code.shiki .seC34{--shiki-light:#005CC5;--shiki-default:#B5CEA8;--shiki-dark:#B5CEA8}html pre.shiki code .sDy_c, html code.shiki .sDy_c{--shiki-light:#D73A49;--shiki-default:#B5CEA8;--shiki-dark:#B5CEA8}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":16,"searchDepth":17,"depth":17,"links":5366},[5367,5368,5369,5370,5371,5372,5373,5374,5375],{"id":4795,"depth":179,"text":4796},{"id":4874,"depth":179,"text":4875},{"id":4949,"depth":179,"text":4950},{"id":5022,"depth":179,"text":5023},{"id":5091,"depth":179,"text":5092},{"id":5128,"depth":179,"text":5129},{"id":5170,"depth":179,"text":5171},{"id":5214,"depth":179,"text":5215},{"id":5300,"depth":179,"text":5301},"CSS (Cascading Style Sheets) is a language used to style and layout web pages. One of the most important concepts in CSS is the use of units to specify measurements such as length, width, and font size. In this article.","https://images.unsplash.com/photo-1505685296765-3a2736de412f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDV8fGNzc3xlbnwwfHx8fDE2NzQxMzg3ODQ&ixlib=rb-4.0.3&q=80&w=2000",{"slug":5379,"excerpt":5380},"css-units",{"type":13,"value":5381},[5382,5384],[30,5383,4792],{},[37,5385,4796],{"id":4795},"/css-units","2023-01-21T14:39:04.000Z",{"title":4787,"description":5376},[206,210],"BHp7PFzndEcPygt5RwvHuxPxwXiaSjhSyPmUn5FQ1DQ",{"id":5392,"title":5393,"author":26,"body":5394,"category":19,"description":8193,"extension":7,"image":8194,"isDraft":190,"isFeatured":199,"locale":9,"meta":8195,"navigation":199,"path":8202,"publishedAt":8203,"readingTime":547,"seo":8204,"stem":8205,"tags":8206,"updatedAt":8214,"__hash__":8215},"articles_en/developer-productivity.md","The Ultimate Developer Productivity Guide for 2025: Tools, Techniques, and Habits",{"type":13,"value":5395,"toc":8141},[5396,5399,5402,5406,5410,5415,5418,5458,5463,5469,5473,5479,5490,5496,5510,5515,5532,5537,5548,5552,5557,5724,5730,5839,5843,5848,5868,5873,5893,5897,5902,6030,6035,6074,6078,6084,6095,6101,6112,6116,6120,6126,6130,6136,6140,6143,6149,6154,6160,6164,6170,6174,6178,6183,6194,6199,6210,6215,6235,6239,6244,6264,6269,6326,6331,6337,6341,6344,6376,6381,6395,6399,6403,6408,6612,6617,6714,6718,6881,6885,7056,7060,7064,7067,7087,7091,7096,7128,7133,7159,7163,7168,7234,7238,7242,7247,7264,7269,7286,7290,7295,7312,7317,7349,7353,7358,7390,7395,7421,7425,7429,7434,7548,7553,7605,7609,7614,7620,7625,7696,7700,7705,7719,7724,7738,7742,7762,7766,7770,7775,7890,7894,7899,7913,7918,7932,7936,7940,7977,7981,8014,8018,8051,8055,8088,8090,8093,8098,8130,8133,8138],[30,5397,5398],{},"In the fast-paced world of software development, productivity isn't just about working longer hours—it's about working smarter with the right tools, techniques, and habits. As developers in 2025, we have access to AI-powered assistants, advanced automation tools, and proven methodologies that can transform our workflow.",[30,5400,5401],{},"This comprehensive guide covers everything you need to know to maximize your productivity: from modern development tools to deep work techniques, from AI assistants to health habits. Whether you're a junior developer or a seasoned engineer, you'll find actionable strategies that work.",[37,5403,5405],{"id":5404},"the-modern-developer-toolkit-2025","The Modern Developer Toolkit (2025)",[4168,5407,5409],{"id":5408},"essential-development-tools","Essential Development Tools",[30,5411,5412],{},[235,5413,5414],{},"Code Editors & IDEs",[30,5416,5417],{},"The right editor can make a massive difference in your daily workflow:",[229,5419,5420,5446,5452],{},[232,5421,5422,5425,5426],{},[235,5423,5424],{},"Visual Studio Code"," (Free) - Still the king in 2025. Essential extensions:",[229,5427,5428,5431,5434,5437,5440,5443],{},[232,5429,5430],{},"GitHub Copilot ($10/month) - AI pair programmer",[232,5432,5433],{},"Prettier - Code formatting",[232,5435,5436],{},"ESLint - Linting and code quality",[232,5438,5439],{},"GitLens - Enhanced Git visualization",[232,5441,5442],{},"Thunder Client - REST API testing",[232,5444,5445],{},"Error Lens - Inline error highlighting",[232,5447,5448,5451],{},[235,5449,5450],{},"Cursor"," ($20/month) - VS Code fork with integrated AI chat and codebase understanding. Best for AI-first development.",[232,5453,5454,5457],{},[235,5455,5456],{},"JetBrains IDEs"," ($149/year) - IntelliJ IDEA, WebStorm, PyCharm. Superior refactoring tools and debugging capabilities.",[30,5459,5460],{},[235,5461,5462],{},"Key Shortcuts to Master (VS Code)",[289,5464,5467],{"className":5465,"code":5466,"language":756},[754],"Ctrl+P              Quick file open\nCtrl+Shift+F        Search across files\nCtrl+D              Select next occurrence\nAlt+Up/Down         Move line up/down\nCtrl+/              Toggle comment\nCtrl+`              Toggle terminal\nCtrl+Shift+L        Select all occurrences\nF2                  Rename symbol\nCtrl+Space          Trigger suggestions\n",[295,5468,5466],{"__ignoreMap":16},[4168,5470,5472],{"id":5471},"ai-powered-development-tools","AI-Powered Development Tools",[30,5474,5475,5478],{},[235,5476,5477],{},"GitHub Copilot"," ($10/month or $100/year)",[229,5480,5481,5484,5487],{},[232,5482,5483],{},"Best for: Code completion, boilerplate generation, documentation",[232,5485,5486],{},"Works in all major IDEs",[232,5488,5489],{},"Trained on billions of lines of public code",[30,5491,5492,5495],{},[235,5493,5494],{},"ChatGPT Plus"," ($20/month)",[229,5497,5498,5501,5504,5507],{},[232,5499,5500],{},"GPT-4o for complex problem-solving",[232,5502,5503],{},"Code reviews and optimization suggestions",[232,5505,5506],{},"Architecture planning",[232,5508,5509],{},"Learning new concepts",[30,5511,5512,5495],{},[235,5513,5514],{},"Cursor IDE",[229,5516,5517,5520,5526,5529],{},[232,5518,5519],{},"AI that understands your entire codebase",[232,5521,5522,5525],{},[295,5523,5524],{},"Ctrl+K"," to edit code with AI",[232,5527,5528],{},"Chat with your project context",[232,5530,5531],{},"Best for refactoring and large changes",[30,5533,5534,5495],{},[235,5535,5536],{},"Claude Pro",[229,5538,5539,5542,5545],{},[232,5540,5541],{},"200K token context window (entire codebases)",[232,5543,5544],{},"Excellent for code analysis and documentation",[232,5546,5547],{},"Better reasoning for complex logic",[4168,5549,5551],{"id":5550},"version-control-collaboration","Version Control & Collaboration",[30,5553,5554],{},[235,5555,5556],{},"Git Power User Commands",[289,5558,5560],{"className":291,"code":5559,"language":293,"meta":16,"style":16},"# Interactive staging\ngit add -p\n\n# Beautiful commit history\ngit log --oneline --graph --all --decorate\n\n# Squash last 3 commits\ngit rebase -i HEAD~3\n\n# Create and switch to new branch\ngit switch -c feature-name\n\n# Stash with message\ngit stash push -m \"WIP: working on auth\"\n\n# Cherry-pick a commit\ngit cherry-pick \u003Ccommit-hash>\n\n# Amend last commit without editing message\ngit commit --amend --no-edit\n",[295,5561,5562,5567,5578,5582,5587,5606,5610,5615,5628,5632,5637,5650,5654,5659,5675,5679,5684,5702,5706,5711],{"__ignoreMap":16},[298,5563,5564],{"class":300,"line":301},[298,5565,5566],{"class":387},"# Interactive staging\n",[298,5568,5569,5572,5575],{"class":300,"line":179},[298,5570,5571],{"class":304},"git",[298,5573,5574],{"class":308}," add",[298,5576,5577],{"class":631}," -p\n",[298,5579,5580],{"class":300,"line":17},[298,5581,701],{"emptyLinePlaceholder":199},[298,5583,5584],{"class":300,"line":416},[298,5585,5586],{"class":387},"# Beautiful commit history\n",[298,5588,5589,5591,5594,5597,5600,5603],{"class":300,"line":425},[298,5590,5571],{"class":304},[298,5592,5593],{"class":308}," log",[298,5595,5596],{"class":631}," --oneline",[298,5598,5599],{"class":631}," --graph",[298,5601,5602],{"class":631}," --all",[298,5604,5605],{"class":631}," --decorate\n",[298,5607,5608],{"class":300,"line":433},[298,5609,701],{"emptyLinePlaceholder":199},[298,5611,5612],{"class":300,"line":439},[298,5613,5614],{"class":387},"# Squash last 3 commits\n",[298,5616,5617,5619,5622,5625],{"class":300,"line":202},[298,5618,5571],{"class":304},[298,5620,5621],{"class":308}," rebase",[298,5623,5624],{"class":631}," -i",[298,5626,5627],{"class":308}," HEAD~3\n",[298,5629,5630],{"class":300,"line":450},[298,5631,701],{"emptyLinePlaceholder":199},[298,5633,5634],{"class":300,"line":459},[298,5635,5636],{"class":387},"# Create and switch to new branch\n",[298,5638,5639,5641,5644,5647],{"class":300,"line":467},[298,5640,5571],{"class":304},[298,5642,5643],{"class":308}," switch",[298,5645,5646],{"class":631}," -c",[298,5648,5649],{"class":308}," feature-name\n",[298,5651,5652],{"class":300,"line":473},[298,5653,701],{"emptyLinePlaceholder":199},[298,5655,5656],{"class":300,"line":484},[298,5657,5658],{"class":387},"# Stash with message\n",[298,5660,5661,5663,5666,5669,5672],{"class":300,"line":495},[298,5662,5571],{"class":304},[298,5664,5665],{"class":308}," stash",[298,5667,5668],{"class":308}," push",[298,5670,5671],{"class":631}," -m",[298,5673,5674],{"class":308}," \"WIP: working on auth\"\n",[298,5676,5677],{"class":300,"line":506},[298,5678,701],{"emptyLinePlaceholder":199},[298,5680,5681],{"class":300,"line":517},[298,5682,5683],{"class":387},"# Cherry-pick a commit\n",[298,5685,5686,5688,5691,5694,5697,5700],{"class":300,"line":526},[298,5687,5571],{"class":304},[298,5689,5690],{"class":308}," cherry-pick",[298,5692,5693],{"class":993}," \u003C",[298,5695,5696],{"class":308},"commit-has",[298,5698,5699],{"class":403},"h",[298,5701,1616],{"class":993},[298,5703,5704],{"class":300,"line":532},[298,5705,701],{"emptyLinePlaceholder":199},[298,5707,5708],{"class":300,"line":537},[298,5709,5710],{"class":387},"# Amend last commit without editing message\n",[298,5712,5713,5715,5718,5721],{"class":300,"line":547},[298,5714,5571],{"class":304},[298,5716,5717],{"class":308}," commit",[298,5719,5720],{"class":631}," --amend",[298,5722,5723],{"class":631}," --no-edit\n",[30,5725,5726,5729],{},[235,5727,5728],{},"GitHub CLI"," (Free)",[289,5731,5733],{"className":291,"code":5732,"language":293,"meta":16,"style":16},"# Create PR from terminal\ngh pr create --fill\n\n# View PR status\ngh pr status\n\n# Checkout a PR\ngh pr checkout 123\n\n# Create issue\ngh issue create --title \"Bug: Login fails\"\n\n# Open repo in browser\ngh repo view --web\n",[295,5734,5735,5740,5754,5758,5763,5772,5776,5781,5793,5797,5802,5817,5821,5826],{"__ignoreMap":16},[298,5736,5737],{"class":300,"line":301},[298,5738,5739],{"class":387},"# Create PR from terminal\n",[298,5741,5742,5745,5748,5751],{"class":300,"line":179},[298,5743,5744],{"class":304},"gh",[298,5746,5747],{"class":308}," pr",[298,5749,5750],{"class":308}," create",[298,5752,5753],{"class":631}," --fill\n",[298,5755,5756],{"class":300,"line":17},[298,5757,701],{"emptyLinePlaceholder":199},[298,5759,5760],{"class":300,"line":416},[298,5761,5762],{"class":387},"# View PR status\n",[298,5764,5765,5767,5769],{"class":300,"line":425},[298,5766,5744],{"class":304},[298,5768,5747],{"class":308},[298,5770,5771],{"class":308}," status\n",[298,5773,5774],{"class":300,"line":433},[298,5775,701],{"emptyLinePlaceholder":199},[298,5777,5778],{"class":300,"line":439},[298,5779,5780],{"class":387},"# Checkout a PR\n",[298,5782,5783,5785,5787,5790],{"class":300,"line":202},[298,5784,5744],{"class":304},[298,5786,5747],{"class":308},[298,5788,5789],{"class":308}," checkout",[298,5791,5792],{"class":2549}," 123\n",[298,5794,5795],{"class":300,"line":450},[298,5796,701],{"emptyLinePlaceholder":199},[298,5798,5799],{"class":300,"line":459},[298,5800,5801],{"class":387},"# Create issue\n",[298,5803,5804,5806,5809,5811,5814],{"class":300,"line":467},[298,5805,5744],{"class":304},[298,5807,5808],{"class":308}," issue",[298,5810,5750],{"class":308},[298,5812,5813],{"class":631}," --title",[298,5815,5816],{"class":308}," \"Bug: Login fails\"\n",[298,5818,5819],{"class":300,"line":473},[298,5820,701],{"emptyLinePlaceholder":199},[298,5822,5823],{"class":300,"line":484},[298,5824,5825],{"class":387},"# Open repo in browser\n",[298,5827,5828,5830,5833,5836],{"class":300,"line":495},[298,5829,5744],{"class":304},[298,5831,5832],{"class":308}," repo",[298,5834,5835],{"class":308}," view",[298,5837,5838],{"class":631}," --web\n",[4168,5840,5842],{"id":5841},"task-project-management","Task & Project Management",[30,5844,5845],{},[235,5846,5847],{},"For Personal Use:",[229,5849,5850,5856,5862],{},[232,5851,5852,5855],{},[235,5853,5854],{},"Notion"," (Free/Paid) - All-in-one workspace for docs, tasks, and databases",[232,5857,5858,5861],{},[235,5859,5860],{},"Obsidian"," (Free) - Markdown-based knowledge management",[232,5863,5864,5867],{},[235,5865,5866],{},"Linear"," ($8/month per user) - Modern issue tracking",[30,5869,5870],{},[235,5871,5872],{},"For Teams:",[229,5874,5875,5881,5887],{},[232,5876,5877,5880],{},[235,5878,5879],{},"Jira"," - Enterprise project management",[232,5882,5883,5886],{},[235,5884,5885],{},"ClickUp"," - Flexible workflow management",[232,5888,5889,5892],{},[235,5890,5891],{},"Monday.dev"," - Visual project boards",[4168,5894,5896],{"id":5895},"terminal-cli-enhancements","Terminal & CLI Enhancements",[30,5898,5899],{},[235,5900,5901],{},"Modern Shell Setup",[289,5903,5905],{"className":291,"code":5904,"language":293,"meta":16,"style":16},"# Starship - Beautiful terminal prompt\n# Shows git status, Node version, etc.\ncurl -sS https://starship.rs/install.sh | sh\n\n# zsh with Oh My Zsh\nsh -c \"$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)\"\n\n# Useful aliases\nalias gs='git status'\nalias gp='git push'\nalias gc='git commit -m'\nalias nrd='npm run dev'\nalias cls='clear'\n",[295,5906,5907,5912,5917,5933,5937,5942,5960,5964,5969,5982,5994,6006,6018],{"__ignoreMap":16},[298,5908,5909],{"class":300,"line":301},[298,5910,5911],{"class":387},"# Starship - Beautiful terminal prompt\n",[298,5913,5914],{"class":300,"line":179},[298,5915,5916],{"class":387},"# Shows git status, Node version, etc.\n",[298,5918,5919,5922,5925,5928,5930],{"class":300,"line":17},[298,5920,5921],{"class":304},"curl",[298,5923,5924],{"class":631}," -sS",[298,5926,5927],{"class":308}," https://starship.rs/install.sh",[298,5929,3316],{"class":993},[298,5931,5932],{"class":304}," sh\n",[298,5934,5935],{"class":300,"line":416},[298,5936,701],{"emptyLinePlaceholder":199},[298,5938,5939],{"class":300,"line":425},[298,5940,5941],{"class":387},"# zsh with Oh My Zsh\n",[298,5943,5944,5947,5949,5952,5954,5957],{"class":300,"line":433},[298,5945,5946],{"class":304},"sh",[298,5948,5646],{"class":631},[298,5950,5951],{"class":308}," \"$(",[298,5953,5921],{"class":304},[298,5955,5956],{"class":631}," -fsSL",[298,5958,5959],{"class":308}," https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)\"\n",[298,5961,5962],{"class":300,"line":439},[298,5963,701],{"emptyLinePlaceholder":199},[298,5965,5966],{"class":300,"line":202},[298,5967,5968],{"class":387},"# Useful aliases\n",[298,5970,5971,5974,5977,5979],{"class":300,"line":450},[298,5972,5973],{"class":985},"alias",[298,5975,5976],{"class":409}," gs",[298,5978,1610],{"class":993},[298,5980,5981],{"class":308},"'git status'\n",[298,5983,5984,5986,5989,5991],{"class":300,"line":459},[298,5985,5973],{"class":985},[298,5987,5988],{"class":409}," gp",[298,5990,1610],{"class":993},[298,5992,5993],{"class":308},"'git push'\n",[298,5995,5996,5998,6001,6003],{"class":300,"line":467},[298,5997,5973],{"class":985},[298,5999,6000],{"class":409}," gc",[298,6002,1610],{"class":993},[298,6004,6005],{"class":308},"'git commit -m'\n",[298,6007,6008,6010,6013,6015],{"class":300,"line":473},[298,6009,5973],{"class":985},[298,6011,6012],{"class":409}," nrd",[298,6014,1610],{"class":993},[298,6016,6017],{"class":308},"'npm run dev'\n",[298,6019,6020,6022,6025,6027],{"class":300,"line":484},[298,6021,5973],{"class":985},[298,6023,6024],{"class":409}," cls",[298,6026,1610],{"class":993},[298,6028,6029],{"class":308},"'clear'\n",[30,6031,6032],{},[235,6033,6034],{},"Essential CLI Tools:",[229,6036,6037,6043,6049,6059,6068],{},[232,6038,6039,6042],{},[235,6040,6041],{},"fzf"," - Fuzzy finder for files and command history",[232,6044,6045,6048],{},[235,6046,6047],{},"ripgrep (rg)"," - Faster than grep, searches files recursively",[232,6050,6051,6054,6055,6058],{},[235,6052,6053],{},"bat"," - Better ",[295,6056,6057],{},"cat"," with syntax highlighting",[232,6060,6061,6064,6065],{},[235,6062,6063],{},"exa/eza"," - Modern replacement for ",[295,6066,6067],{},"ls",[232,6069,6070,6073],{},[235,6071,6072],{},"tldr"," - Simplified man pages with examples",[4168,6075,6077],{"id":6076},"time-tracking-analytics","Time Tracking & Analytics",[30,6079,6080,6083],{},[235,6081,6082],{},"WakaTime"," (Free/Paid)",[229,6085,6086,6089,6092],{},[232,6087,6088],{},"Automatic time tracking in your editor",[232,6090,6091],{},"Detailed stats on languages, projects, files",[232,6093,6094],{},"Helps identify where your time goes",[30,6096,6097,6100],{},[235,6098,6099],{},"RescueTime"," ($12/month)",[229,6102,6103,6106,6109],{},[232,6104,6105],{},"Tracks all computer activity",[232,6107,6108],{},"Shows productivity patterns",[232,6110,6111],{},"Blocks distracting websites",[37,6113,6115],{"id":6114},"planning-task-management-techniques","Planning & Task Management Techniques",[4168,6117,6119],{"id":6118},"the-morning-planning-ritual-15-minutes","The Morning Planning Ritual (15 minutes)",[289,6121,6124],{"className":6122,"code":6123,"language":756},[754],"1. Review yesterday's progress (3 min)\n   - What got done?\n   - What got blocked?\n\n2. Check priorities (5 min)\n   - Urgent deadlines?\n   - Important long-term work?\n\n3. Plan today (7 min)\n   - 1 Big Task (2-4 hours)\n   - 2-3 Medium Tasks (30-60 min each)\n   - Small tasks/meetings/admin\n",[295,6125,6123],{"__ignoreMap":16},[4168,6127,6129],{"id":6128},"the-eisenhower-matrix","The Eisenhower Matrix",[289,6131,6134],{"className":6132,"code":6133,"language":756},[754],"Urgent | Not Urgent\n--------------------|-------------------\nImportant | DO NOW          | SCHEDULE\n          | - Production bugs| - Learning\n          | - Deadlines      | - Refactoring\n          | - Emergencies    | - Planning\n--------------------|-------------------\nNot       | DELEGATE        | ELIMINATE\nImportant | - Interruptions | - Busy work\n          | - Some meetings | - Time wasters\n          | - Quick questions| - Distractions\n",[295,6135,6133],{"__ignoreMap":16},[4168,6137,6139],{"id":6138},"task-breakdown-strategy","Task Breakdown Strategy",[30,6141,6142],{},"Large tasks are overwhelming. Break them down:",[30,6144,6145,6148],{},[235,6146,6147],{},"Bad:"," \"Build authentication system\"",[30,6150,6151],{},[235,6152,6153],{},"Good:",[289,6155,6158],{"className":6156,"code":6157,"language":756},[754],"1. Design database schema for users (1h)\n2. Create user model and migrations (1h)\n3. Implement registration endpoint (2h)\n4. Implement login endpoint (2h)\n5. Add JWT token generation (1h)\n6. Write tests for auth flow (2h)\n7. Add password reset feature (3h)\n",[295,6159,6157],{"__ignoreMap":16},[4168,6161,6163],{"id":6162},"time-blocking-example","Time Blocking Example",[289,6165,6168],{"className":6166,"code":6167,"language":756},[754],"08:00-09:00  Morning review + planning\n09:00-12:00  Deep work block (big task)\n12:00-13:00  Lunch break\n13:00-14:30  Meetings & collaboration\n14:30-15:00  Break + quick tasks\n15:00-17:00  Deep work block (coding)\n17:00-17:30  Review day + plan tomorrow\n",[295,6169,6167],{"__ignoreMap":16},[37,6171,6173],{"id":6172},"deep-work-and-focus-techniques","Deep Work and Focus Techniques",[4168,6175,6177],{"id":6176},"the-pomodoro-technique-modified-for-developers","The Pomodoro Technique (Modified for Developers)",[30,6179,6180],{},[235,6181,6182],{},"Classic Pomodoro:",[229,6184,6185,6188,6191],{},[232,6186,6187],{},"25 minutes work",[232,6189,6190],{},"5 minutes break",[232,6192,6193],{},"After 4 pomodoros, take 15-30 minute break",[30,6195,6196],{},[235,6197,6198],{},"Extended Pomodoro (for deep coding):",[229,6200,6201,6204,6207],{},[232,6202,6203],{},"50 minutes work",[232,6205,6206],{},"10 minutes break",[232,6208,6209],{},"After 2 sessions, take 30 minute break",[30,6211,6212],{},[235,6213,6214],{},"Tools:",[229,6216,6217,6223,6229],{},[232,6218,6219,6222],{},[235,6220,6221],{},"Flow"," (macOS) - Beautiful pomodoro timer",[232,6224,6225,6228],{},[235,6226,6227],{},"Be Focused"," (iOS/macOS) - Task-based pomodoro",[232,6230,6231,6234],{},[235,6232,6233],{},"Pomofocus"," (Web, Free) - Simple browser-based timer",[4168,6236,6238],{"id":6237},"minimizing-distractions","Minimizing Distractions",[30,6240,6241],{},[235,6242,6243],{},"Browser Extensions:",[229,6245,6246,6252,6258],{},[232,6247,6248,6251],{},[235,6249,6250],{},"uBlock Origin"," - Block ads and trackers",[232,6253,6254,6257],{},[235,6255,6256],{},"LeechBlock"," - Block time-wasting sites during work hours",[232,6259,6260,6263],{},[235,6261,6262],{},"News Feed Eradicator"," - Remove social media feeds",[30,6265,6266],{},[235,6267,6268],{},"Focus Modes:",[289,6270,6273],{"className":6271,"code":6272,"language":52,"meta":16,"style":16},"language-javascript shiki shiki-themes github-light dark-plus dark-plus","// VS Code settings.json\n{\n  \"workbench.activityBar.visible\": false,  // Hide sidebar icons\n  \"workbench.statusBar.visible\": false,     // Hide status bar\n  \"editor.minimap.enabled\": false,          // Hide minimap\n  \"breadcrumbs.enabled\": false              // Hide breadcrumbs\n}\n// Toggle with Zen Mode: Ctrl+K Z\n",[295,6274,6275,6280,6285,6293,6301,6309,6317,6321],{"__ignoreMap":16},[298,6276,6277],{"class":300,"line":301},[298,6278,6279],{},"// VS Code settings.json\n",[298,6281,6282],{"class":300,"line":179},[298,6283,6284],{},"{\n",[298,6286,6287,6290],{"class":300,"line":17},[298,6288,6289],{},"  \"workbench.activityBar.visible\": false,",[298,6291,6292],{},"  // Hide sidebar icons\n",[298,6294,6295,6298],{"class":300,"line":416},[298,6296,6297],{},"  \"workbench.statusBar.visible\": false,",[298,6299,6300],{},"     // Hide status bar\n",[298,6302,6303,6306],{"class":300,"line":425},[298,6304,6305],{},"  \"editor.minimap.enabled\": false,",[298,6307,6308],{},"          // Hide minimap\n",[298,6310,6311,6314],{"class":300,"line":433},[298,6312,6313],{},"  \"breadcrumbs.enabled\": false",[298,6315,6316],{},"              // Hide breadcrumbs\n",[298,6318,6319],{"class":300,"line":439},[298,6320,2573],{},[298,6322,6323],{"class":300,"line":202},[298,6324,6325],{},"// Toggle with Zen Mode: Ctrl+K Z\n",[30,6327,6328],{},[235,6329,6330],{},"Communication Boundaries:",[289,6332,6335],{"className":6333,"code":6334,"language":756},[754],"Slack Status:\n🎯 Deep Work - No interruptions (9am-12pm)\n💬 Available for quick questions (2pm-4pm)\n🏃 Stepping away - back in 15 mins\n",[295,6336,6334],{"__ignoreMap":16},[4168,6338,6340],{"id":6339},"flow-state-triggers","Flow State Triggers",[30,6342,6343],{},"To achieve flow (that state where you're fully immersed):",[4704,6345,6346,6352,6358,6364,6370],{},[232,6347,6348,6351],{},[235,6349,6350],{},"Clear goals"," - Know exactly what you're building",[232,6353,6354,6357],{},[235,6355,6356],{},"Challenge/skill balance"," - Task is hard but achievable",[232,6359,6360,6363],{},[235,6361,6362],{},"Immediate feedback"," - Tests pass/fail, code runs/errors",[232,6365,6366,6369],{},[235,6367,6368],{},"No distractions"," - Phone away, notifications off",[232,6371,6372,6375],{},[235,6373,6374],{},"Time pressure"," - Deadline or time block creates urgency",[30,6377,6378],{},[235,6379,6380],{},"How to get into flow:",[229,6382,6383,6386,6389,6392],{},[232,6384,6385],{},"Start with warm-up tasks (review code, plan approach)",[232,6387,6388],{},"Use music or white noise to block external sounds",[232,6390,6391],{},"Work on one thing at a time",[232,6393,6394],{},"Build momentum with small wins first",[37,6396,6398],{"id":6397},"automation-efficiency-hacks","Automation & Efficiency Hacks",[4168,6400,6402],{"id":6401},"automate-your-development-environment","Automate Your Development Environment",[30,6404,6405],{},[235,6406,6407],{},"Project Setup Script",[289,6409,6411],{"className":291,"code":6410,"language":293,"meta":16,"style":16},"#!/bin/bash\n# setup-project.sh - Quick project initialization\n\nPROJECT_NAME=$1\n\nmkdir $PROJECT_NAME\ncd $PROJECT_NAME\n\n# Initialize Git\ngit init\necho \"node_modules\" > .gitignore\necho \".env\" >> .gitignore\n\n# Initialize package.json\nnpm init -y\n\n# Install common dependencies\nnpm install -D typescript @types/node eslint prettier\n\n# Create basic structure\nmkdir src tests\ntouch src/index.ts\ntouch README.md\n\n# Open in VS Code\ncode .\n\necho \"✅ Project $PROJECT_NAME ready!\"\n",[295,6412,6413,6418,6423,6427,6437,6441,6449,6455,6459,6464,6471,6485,6497,6501,6506,6515,6519,6524,6545,6549,6554,6564,6572,6579,6583,6588,6595,6599],{"__ignoreMap":16},[298,6414,6415],{"class":300,"line":301},[298,6416,6417],{"class":387},"#!/bin/bash\n",[298,6419,6420],{"class":300,"line":179},[298,6421,6422],{"class":387},"# setup-project.sh - Quick project initialization\n",[298,6424,6425],{"class":300,"line":17},[298,6426,701],{"emptyLinePlaceholder":199},[298,6428,6429,6432,6434],{"class":300,"line":416},[298,6430,6431],{"class":409},"PROJECT_NAME",[298,6433,1610],{"class":993},[298,6435,6436],{"class":1217},"$1\n",[298,6438,6439],{"class":300,"line":425},[298,6440,701],{"emptyLinePlaceholder":199},[298,6442,6443,6446],{"class":300,"line":433},[298,6444,6445],{"class":304},"mkdir",[298,6447,6448],{"class":409}," $PROJECT_NAME\n",[298,6450,6451,6453],{"class":300,"line":439},[298,6452,321],{"class":320},[298,6454,6448],{"class":409},[298,6456,6457],{"class":300,"line":202},[298,6458,701],{"emptyLinePlaceholder":199},[298,6460,6461],{"class":300,"line":450},[298,6462,6463],{"class":387},"# Initialize Git\n",[298,6465,6466,6468],{"class":300,"line":459},[298,6467,5571],{"class":304},[298,6469,6470],{"class":308}," init\n",[298,6472,6473,6476,6479,6482],{"class":300,"line":467},[298,6474,6475],{"class":320},"echo",[298,6477,6478],{"class":308}," \"node_modules\"",[298,6480,6481],{"class":993}," >",[298,6483,6484],{"class":308}," .gitignore\n",[298,6486,6487,6489,6492,6495],{"class":300,"line":473},[298,6488,6475],{"class":320},[298,6490,6491],{"class":308}," \".env\"",[298,6493,6494],{"class":993}," >>",[298,6496,6484],{"class":308},[298,6498,6499],{"class":300,"line":484},[298,6500,701],{"emptyLinePlaceholder":199},[298,6502,6503],{"class":300,"line":495},[298,6504,6505],{"class":387},"# Initialize package.json\n",[298,6507,6508,6510,6512],{"class":300,"line":506},[298,6509,328],{"class":304},[298,6511,312],{"class":308},[298,6513,6514],{"class":631}," -y\n",[298,6516,6517],{"class":300,"line":517},[298,6518,701],{"emptyLinePlaceholder":199},[298,6520,6521],{"class":300,"line":526},[298,6522,6523],{"class":387},"# Install common dependencies\n",[298,6525,6526,6528,6530,6533,6536,6539,6542],{"class":300,"line":532},[298,6527,328],{"class":304},[298,6529,346],{"class":308},[298,6531,6532],{"class":631}," -D",[298,6534,6535],{"class":308}," typescript",[298,6537,6538],{"class":308}," @types/node",[298,6540,6541],{"class":308}," eslint",[298,6543,6544],{"class":308}," prettier\n",[298,6546,6547],{"class":300,"line":537},[298,6548,701],{"emptyLinePlaceholder":199},[298,6550,6551],{"class":300,"line":547},[298,6552,6553],{"class":387},"# Create basic structure\n",[298,6555,6556,6558,6561],{"class":300,"line":557},[298,6557,6445],{"class":304},[298,6559,6560],{"class":308}," src",[298,6562,6563],{"class":308}," tests\n",[298,6565,6566,6569],{"class":300,"line":567},[298,6567,6568],{"class":304},"touch",[298,6570,6571],{"class":308}," src/index.ts\n",[298,6573,6574,6576],{"class":300,"line":577},[298,6575,6568],{"class":304},[298,6577,6578],{"class":308}," README.md\n",[298,6580,6581],{"class":300,"line":588},[298,6582,701],{"emptyLinePlaceholder":199},[298,6584,6585],{"class":300,"line":594},[298,6586,6587],{"class":387},"# Open in VS Code\n",[298,6589,6590,6592],{"class":300,"line":600},[298,6591,295],{"class":304},[298,6593,6594],{"class":308}," .\n",[298,6596,6597],{"class":300,"line":610},[298,6598,701],{"emptyLinePlaceholder":199},[298,6600,6601,6603,6606,6609],{"class":300,"line":625},[298,6602,6475],{"class":320},[298,6604,6605],{"class":308}," \"✅ Project ",[298,6607,6608],{"class":409},"$PROJECT_NAME",[298,6610,6611],{"class":308}," ready!\"\n",[30,6613,6614],{},[235,6615,6616],{},"Daily Standup Generator",[289,6618,6620],{"className":291,"code":6619,"language":293,"meta":16,"style":16},"#!/bin/bash\n# standup.sh - Generate standup report\n\necho \"📊 Standup Report for $(date +%Y-%m-%d)\"\necho \"\"\necho \"Yesterday's commits:\"\ngit log --since=\"yesterday\" --author=\"$(git config user.name)\" --oneline\necho \"\"\necho \"Files changed:\"\ngit diff --stat HEAD@{1day}\n",[295,6621,6622,6626,6631,6635,6648,6655,6662,6688,6694,6701],{"__ignoreMap":16},[298,6623,6624],{"class":300,"line":301},[298,6625,6417],{"class":387},[298,6627,6628],{"class":300,"line":179},[298,6629,6630],{"class":387},"# standup.sh - Generate standup report\n",[298,6632,6633],{"class":300,"line":17},[298,6634,701],{"emptyLinePlaceholder":199},[298,6636,6637,6639,6642,6645],{"class":300,"line":416},[298,6638,6475],{"class":320},[298,6640,6641],{"class":308}," \"📊 Standup Report for $(",[298,6643,6644],{"class":304},"date",[298,6646,6647],{"class":308}," +%Y-%m-%d)\"\n",[298,6649,6650,6652],{"class":300,"line":425},[298,6651,6475],{"class":320},[298,6653,6654],{"class":308}," \"\"\n",[298,6656,6657,6659],{"class":300,"line":433},[298,6658,6475],{"class":320},[298,6660,6661],{"class":308}," \"Yesterday's commits:\"\n",[298,6663,6664,6666,6668,6671,6674,6677,6680,6682,6685],{"class":300,"line":439},[298,6665,5571],{"class":304},[298,6667,5593],{"class":308},[298,6669,6670],{"class":631}," --since=",[298,6672,6673],{"class":308},"\"yesterday\"",[298,6675,6676],{"class":631}," --author=",[298,6678,6679],{"class":308},"\"$(",[298,6681,5571],{"class":304},[298,6683,6684],{"class":308}," config user.name)\"",[298,6686,6687],{"class":631}," --oneline\n",[298,6689,6690,6692],{"class":300,"line":202},[298,6691,6475],{"class":320},[298,6693,6654],{"class":308},[298,6695,6696,6698],{"class":300,"line":450},[298,6697,6475],{"class":320},[298,6699,6700],{"class":308}," \"Files changed:\"\n",[298,6702,6703,6705,6708,6711],{"class":300,"line":459},[298,6704,5571],{"class":304},[298,6706,6707],{"class":308}," diff",[298,6709,6710],{"class":631}," --stat",[298,6712,6713],{"class":308}," HEAD@{1day}\n",[4168,6715,6717],{"id":6716},"git-aliases-for-speed","Git Aliases for Speed",[289,6719,6721],{"className":291,"code":6720,"language":293,"meta":16,"style":16},"# Add to ~/.gitconfig\n\n[alias]\n  # Quick status\n  s = status -s\n  \n  # Pretty log\n  lg = log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)\u003C%an>%Creset' --abbrev-commit\n  \n  # Undo last commit but keep changes\n  undo = reset HEAD~1 --soft\n  \n  # Quick commit all changes\n  ca = commit -am\n  \n  # Current branch name\n  current = rev-parse --abbrev-ref HEAD\n  \n  # Delete merged branches\n  cleanup = \"!git branch --merged | grep -v '\\\\*' | xargs -n 1 git branch -d\"\n",[295,6722,6723,6728,6732,6737,6742,6755,6759,6764,6784,6788,6793,6809,6813,6818,6830,6834,6839,6855,6859,6864],{"__ignoreMap":16},[298,6724,6725],{"class":300,"line":301},[298,6726,6727],{"class":387},"# Add to ~/.gitconfig\n",[298,6729,6730],{"class":300,"line":179},[298,6731,701],{"emptyLinePlaceholder":199},[298,6733,6734],{"class":300,"line":17},[298,6735,6736],{"class":403},"[alias]\n",[298,6738,6739],{"class":300,"line":416},[298,6740,6741],{"class":387},"  # Quick status\n",[298,6743,6744,6747,6749,6752],{"class":300,"line":425},[298,6745,6746],{"class":304},"  s",[298,6748,994],{"class":308},[298,6750,6751],{"class":308}," status",[298,6753,6754],{"class":631}," -s\n",[298,6756,6757],{"class":300,"line":433},[298,6758,447],{"class":403},[298,6760,6761],{"class":300,"line":439},[298,6762,6763],{"class":387},"  # Pretty log\n",[298,6765,6766,6769,6771,6773,6775,6778,6781],{"class":300,"line":202},[298,6767,6768],{"class":304},"  lg",[298,6770,994],{"class":308},[298,6772,5593],{"class":308},[298,6774,5599],{"class":631},[298,6776,6777],{"class":631}," --pretty=format:",[298,6779,6780],{"class":308},"'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)\u003C%an>%Creset'",[298,6782,6783],{"class":631}," --abbrev-commit\n",[298,6785,6786],{"class":300,"line":450},[298,6787,447],{"class":403},[298,6789,6790],{"class":300,"line":459},[298,6791,6792],{"class":387},"  # Undo last commit but keep changes\n",[298,6794,6795,6798,6800,6803,6806],{"class":300,"line":467},[298,6796,6797],{"class":304},"  undo",[298,6799,994],{"class":308},[298,6801,6802],{"class":308}," reset",[298,6804,6805],{"class":308}," HEAD~1",[298,6807,6808],{"class":631}," --soft\n",[298,6810,6811],{"class":300,"line":473},[298,6812,447],{"class":403},[298,6814,6815],{"class":300,"line":484},[298,6816,6817],{"class":387},"  # Quick commit all changes\n",[298,6819,6820,6823,6825,6827],{"class":300,"line":495},[298,6821,6822],{"class":304},"  ca",[298,6824,994],{"class":308},[298,6826,5717],{"class":308},[298,6828,6829],{"class":631}," -am\n",[298,6831,6832],{"class":300,"line":506},[298,6833,447],{"class":403},[298,6835,6836],{"class":300,"line":517},[298,6837,6838],{"class":387},"  # Current branch name\n",[298,6840,6841,6844,6846,6849,6852],{"class":300,"line":526},[298,6842,6843],{"class":304},"  current",[298,6845,994],{"class":308},[298,6847,6848],{"class":308}," rev-parse",[298,6850,6851],{"class":631}," --abbrev-ref",[298,6853,6854],{"class":308}," HEAD\n",[298,6856,6857],{"class":300,"line":532},[298,6858,447],{"class":403},[298,6860,6861],{"class":300,"line":537},[298,6862,6863],{"class":387},"  # Delete merged branches\n",[298,6865,6866,6869,6871,6874,6878],{"class":300,"line":547},[298,6867,6868],{"class":304},"  cleanup",[298,6870,994],{"class":308},[298,6872,6873],{"class":308}," \"!git branch --merged | grep -v '",[298,6875,6877],{"class":6876},"sYpgL","\\\\",[298,6879,6880],{"class":308},"*' | xargs -n 1 git branch -d\"\n",[4168,6882,6884],{"id":6883},"npmpnpm-scripts","npm/pnpm Scripts",[289,6886,6890],{"className":6887,"code":6888,"language":6889,"meta":16,"style":16},"language-json shiki shiki-themes github-light dark-plus dark-plus","// package.json\n{\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"tsc && vite build\",\n    \"test\": \"vitest\",\n    \"test:ui\": \"vitest --ui\",\n    \"lint\": \"eslint . --ext .ts,.tsx\",\n    \"lint:fix\": \"eslint . --ext .ts,.tsx --fix\",\n    \"format\": \"prettier --write \\\"src/**/*.{ts,tsx,json}\\\"\",\n    \"type-check\": \"tsc --noEmit\",\n    \"pre-commit\": \"npm run lint && npm run type-check && npm test\",\n    \"clean\": \"rm -rf node_modules dist .cache\",\n    \"fresh\": \"npm run clean && npm install\"\n  }\n}\n","json",[295,6891,6892,6897,6901,6908,6920,6932,6944,6956,6968,6980,7002,7014,7026,7038,7048,7052],{"__ignoreMap":16},[298,6893,6894],{"class":300,"line":301},[298,6895,6896],{"class":387},"// package.json\n",[298,6898,6899],{"class":300,"line":179},[298,6900,6284],{"class":403},[298,6902,6903,6906],{"class":300,"line":17},[298,6904,6905],{"class":4821},"  \"scripts\"",[298,6907,4081],{"class":403},[298,6909,6910,6913,6915,6918],{"class":300,"line":416},[298,6911,6912],{"class":4821},"    \"dev\"",[298,6914,1699],{"class":403},[298,6916,6917],{"class":308},"\"vite\"",[298,6919,422],{"class":403},[298,6921,6922,6925,6927,6930],{"class":300,"line":425},[298,6923,6924],{"class":4821},"    \"build\"",[298,6926,1699],{"class":403},[298,6928,6929],{"class":308},"\"tsc && vite build\"",[298,6931,422],{"class":403},[298,6933,6934,6937,6939,6942],{"class":300,"line":433},[298,6935,6936],{"class":4821},"    \"test\"",[298,6938,1699],{"class":403},[298,6940,6941],{"class":308},"\"vitest\"",[298,6943,422],{"class":403},[298,6945,6946,6949,6951,6954],{"class":300,"line":439},[298,6947,6948],{"class":4821},"    \"test:ui\"",[298,6950,1699],{"class":403},[298,6952,6953],{"class":308},"\"vitest --ui\"",[298,6955,422],{"class":403},[298,6957,6958,6961,6963,6966],{"class":300,"line":202},[298,6959,6960],{"class":4821},"    \"lint\"",[298,6962,1699],{"class":403},[298,6964,6965],{"class":308},"\"eslint . --ext .ts,.tsx\"",[298,6967,422],{"class":403},[298,6969,6970,6973,6975,6978],{"class":300,"line":450},[298,6971,6972],{"class":4821},"    \"lint:fix\"",[298,6974,1699],{"class":403},[298,6976,6977],{"class":308},"\"eslint . --ext .ts,.tsx --fix\"",[298,6979,422],{"class":403},[298,6981,6982,6985,6987,6990,6993,6996,6998,7000],{"class":300,"line":459},[298,6983,6984],{"class":4821},"    \"format\"",[298,6986,1699],{"class":403},[298,6988,6989],{"class":308},"\"prettier --write ",[298,6991,6992],{"class":6876},"\\\"",[298,6994,6995],{"class":308},"src/**/*.{ts,tsx,json}",[298,6997,6992],{"class":6876},[298,6999,2030],{"class":308},[298,7001,422],{"class":403},[298,7003,7004,7007,7009,7012],{"class":300,"line":467},[298,7005,7006],{"class":4821},"    \"type-check\"",[298,7008,1699],{"class":403},[298,7010,7011],{"class":308},"\"tsc --noEmit\"",[298,7013,422],{"class":403},[298,7015,7016,7019,7021,7024],{"class":300,"line":473},[298,7017,7018],{"class":4821},"    \"pre-commit\"",[298,7020,1699],{"class":403},[298,7022,7023],{"class":308},"\"npm run lint && npm run type-check && npm test\"",[298,7025,422],{"class":403},[298,7027,7028,7031,7033,7036],{"class":300,"line":484},[298,7029,7030],{"class":4821},"    \"clean\"",[298,7032,1699],{"class":403},[298,7034,7035],{"class":308},"\"rm -rf node_modules dist .cache\"",[298,7037,422],{"class":403},[298,7039,7040,7043,7045],{"class":300,"line":495},[298,7041,7042],{"class":4821},"    \"fresh\"",[298,7044,1699],{"class":403},[298,7046,7047],{"class":308},"\"npm run clean && npm install\"\n",[298,7049,7050],{"class":300,"line":506},[298,7051,737],{"class":403},[298,7053,7054],{"class":300,"line":517},[298,7055,2573],{"class":403},[37,7057,7059],{"id":7058},"continuous-learning-strategies","Continuous Learning Strategies",[4168,7061,7063],{"id":7062},"the-1-rule","The 1% Rule",[30,7065,7066],{},"Improve just 1% every day:",[229,7068,7069,7075,7078,7081,7084],{},[232,7070,7071,7074],{},[235,7072,7073],{},"20 minutes daily learning"," = 121 hours/year",[232,7076,7077],{},"Read 10 pages of a tech book",[232,7079,7080],{},"Complete one coding challenge",[232,7082,7083],{},"Watch one conference talk",[232,7085,7086],{},"Refactor one piece of old code",[4168,7088,7090],{"id":7089},"learning-resources-2025","Learning Resources (2025)",[30,7092,7093],{},[235,7094,7095],{},"Free Resources:",[229,7097,7098,7104,7110,7116,7122],{},[232,7099,7100,7103],{},[235,7101,7102],{},"MDN Web Docs"," - Web standards documentation",[232,7105,7106,7109],{},[235,7107,7108],{},"freeCodeCamp"," - Interactive coding lessons",[232,7111,7112,7115],{},[235,7113,7114],{},"YouTube"," (Fireship, ThePrimeagen, Web Dev Simplified)",[232,7117,7118,7121],{},[235,7119,7120],{},"Dev.to"," - Community articles",[232,7123,7124,7127],{},[235,7125,7126],{},"GitHub"," - Read popular repositories' code",[30,7129,7130],{},[235,7131,7132],{},"Paid (Worth It):",[229,7134,7135,7141,7147,7153],{},[232,7136,7137,7140],{},[235,7138,7139],{},"Frontend Masters"," ($39/month) - In-depth courses",[232,7142,7143,7146],{},[235,7144,7145],{},"Egghead.io"," ($40/month) - Short, focused lessons",[232,7148,7149,7152],{},[235,7150,7151],{},"Udemy"," (Sales ~$15/course) - Huge course library",[232,7154,7155,7158],{},[235,7156,7157],{},"Pluralsight"," ($29/month) - Enterprise-focused",[4168,7160,7162],{"id":7161},"effective-code-reading","Effective Code Reading",[30,7164,7165],{},[235,7166,7167],{},"How to learn from reading code:",[4704,7169,7170,7189,7205,7221],{},[232,7171,7172,7175],{},[235,7173,7174],{},"Choose quality codebases:",[229,7176,7177,7180,7183,7186],{},[232,7178,7179],{},"Next.js",[232,7181,7182],{},"Nuxt",[232,7184,7185],{},"Vue/React source code",[232,7187,7188],{},"Popular npm packages",[232,7190,7191,7194],{},[235,7192,7193],{},"Start small:",[229,7195,7196,7199,7202],{},[232,7197,7198],{},"Don't read the whole thing",[232,7200,7201],{},"Pick one feature",[232,7203,7204],{},"Trace execution flow",[232,7206,7207,7210],{},[235,7208,7209],{},"Ask questions:",[229,7211,7212,7215,7218],{},[232,7213,7214],{},"Why this pattern?",[232,7216,7217],{},"What problem does this solve?",[232,7219,7220],{},"How could I use this?",[232,7222,7223,7226],{},[235,7224,7225],{},"Take notes:",[229,7227,7228,7231],{},[232,7229,7230],{},"Document interesting patterns",[232,7232,7233],{},"Create a \"patterns library\"",[37,7235,7237],{"id":7236},"health-sustainability","Health & Sustainability",[4168,7239,7241],{"id":7240},"the-developers-health-checklist","The Developer's Health Checklist",[30,7243,7244],{},[235,7245,7246],{},"Physical Health:",[229,7248,7249,7252,7255,7258,7261],{},[232,7250,7251],{},"✅ 20-20-20 rule: Every 20 minutes, look at something 20 feet away for 20 seconds",[232,7253,7254],{},"✅ Stand up and stretch every hour",[232,7256,7257],{},"✅ Ergonomic setup (monitor at eye level, feet flat on floor)",[232,7259,7260],{},"✅ 7-8 hours sleep (non-negotiable for cognitive function)",[232,7262,7263],{},"✅ Exercise 30 minutes daily (walk, gym, yoga)",[30,7265,7266],{},[235,7267,7268],{},"Mental Health:",[229,7270,7271,7274,7277,7280,7283],{},[232,7272,7273],{},"✅ Set clear work boundaries (no coding after 7pm)",[232,7275,7276],{},"✅ Take real lunch breaks away from computer",[232,7278,7279],{},"✅ Weekend detox from work (no Slack, no email)",[232,7281,7282],{},"✅ Hobbies unrelated to coding",[232,7284,7285],{},"✅ Social connections (don't isolate)",[4168,7287,7289],{"id":7288},"preventing-burnout","Preventing Burnout",[30,7291,7292],{},[235,7293,7294],{},"Warning Signs:",[229,7296,7297,7300,7303,7306,7309],{},[232,7298,7299],{},"Cynicism about work",[232,7301,7302],{},"Procrastination increases",[232,7304,7305],{},"Quality of work declines",[232,7307,7308],{},"Physical exhaustion",[232,7310,7311],{},"Irritability",[30,7313,7314],{},[235,7315,7316],{},"Prevention:",[229,7318,7319,7325,7331,7337,7343],{},[232,7320,7321,7324],{},[235,7322,7323],{},"Say no more often"," - Don't overcommit",[232,7326,7327,7330],{},[235,7328,7329],{},"Take vacations"," - Minimum 2 weeks/year",[232,7332,7333,7336],{},[235,7334,7335],{},"Set boundaries"," - Work hours are work hours",[232,7338,7339,7342],{},[235,7340,7341],{},"Celebrate wins"," - Acknowledge completed projects",[232,7344,7345,7348],{},[235,7346,7347],{},"Switch contexts"," - Work on different types of tasks",[4168,7350,7352],{"id":7351},"ergonomic-setup-investment","Ergonomic Setup Investment",[30,7354,7355],{},[235,7356,7357],{},"Essential:",[229,7359,7360,7366,7372,7378,7384],{},[232,7361,7362,7365],{},[235,7363,7364],{},"Adjustable chair"," ($200-500) - Herman Miller Aeron or similar",[232,7367,7368,7371],{},[235,7369,7370],{},"Monitor arm"," ($100-200) - Ergotron LX",[232,7373,7374,7377],{},[235,7375,7376],{},"Ergonomic keyboard"," ($150-300) - Kinesis, Moonlander, or ZSA",[232,7379,7380,7383],{},[235,7381,7382],{},"External mouse"," ($50-100) - Logitech MX Master 3S",[232,7385,7386,7389],{},[235,7387,7388],{},"Good lighting"," ($30-100) - Reduce eye strain",[30,7391,7392],{},[235,7393,7394],{},"Nice to Have:",[229,7396,7397,7403,7409,7415],{},[232,7398,7399,7402],{},[235,7400,7401],{},"Standing desk"," ($300-800) - Fully Jarvis or Uplift",[232,7404,7405,7408],{},[235,7406,7407],{},"Footrest"," ($30-50)",[232,7410,7411,7414],{},[235,7412,7413],{},"Blue light glasses"," ($30-100)",[232,7416,7417,7420],{},[235,7418,7419],{},"Noise-cancelling headphones"," ($200-400) - Sony WH-1000XM5",[37,7422,7424],{"id":7423},"collaboration-communication","Collaboration & Communication",[4168,7426,7428],{"id":7427},"effective-code-reviews","Effective Code Reviews",[30,7430,7431],{},[235,7432,7433],{},"As Author:",[289,7435,7437],{"className":768,"code":7436,"language":770,"meta":16,"style":16},"## PR Description Template\n\n### What\nBrief description of changes\n\n### Why\nProblem this solves or feature it adds\n\n### How\nTechnical approach used\n\n### Testing\n- [ ] Unit tests added\n- [ ] Manual testing completed\n- [ ] Edge cases considered\n\n### Screenshots (if UI changes)\n[Add screenshots]\n\n### Checklist\n- [ ] Code follows style guide\n- [ ] No console.logs left\n- [ ] Documentation updated\n",[295,7438,7439,7444,7448,7453,7458,7462,7467,7472,7476,7481,7486,7490,7495,7500,7505,7510,7514,7519,7524,7528,7533,7538,7543],{"__ignoreMap":16},[298,7440,7441],{"class":300,"line":301},[298,7442,7443],{},"## PR Description Template\n",[298,7445,7446],{"class":300,"line":179},[298,7447,701],{"emptyLinePlaceholder":199},[298,7449,7450],{"class":300,"line":17},[298,7451,7452],{},"### What\n",[298,7454,7455],{"class":300,"line":416},[298,7456,7457],{},"Brief description of changes\n",[298,7459,7460],{"class":300,"line":425},[298,7461,701],{"emptyLinePlaceholder":199},[298,7463,7464],{"class":300,"line":433},[298,7465,7466],{},"### Why\n",[298,7468,7469],{"class":300,"line":439},[298,7470,7471],{},"Problem this solves or feature it adds\n",[298,7473,7474],{"class":300,"line":202},[298,7475,701],{"emptyLinePlaceholder":199},[298,7477,7478],{"class":300,"line":450},[298,7479,7480],{},"### How\n",[298,7482,7483],{"class":300,"line":459},[298,7484,7485],{},"Technical approach used\n",[298,7487,7488],{"class":300,"line":467},[298,7489,701],{"emptyLinePlaceholder":199},[298,7491,7492],{"class":300,"line":473},[298,7493,7494],{},"### Testing\n",[298,7496,7497],{"class":300,"line":484},[298,7498,7499],{},"- [ ] Unit tests added\n",[298,7501,7502],{"class":300,"line":495},[298,7503,7504],{},"- [ ] Manual testing completed\n",[298,7506,7507],{"class":300,"line":506},[298,7508,7509],{},"- [ ] Edge cases considered\n",[298,7511,7512],{"class":300,"line":517},[298,7513,701],{"emptyLinePlaceholder":199},[298,7515,7516],{"class":300,"line":526},[298,7517,7518],{},"### Screenshots (if UI changes)\n",[298,7520,7521],{"class":300,"line":532},[298,7522,7523],{},"[Add screenshots]\n",[298,7525,7526],{"class":300,"line":537},[298,7527,701],{"emptyLinePlaceholder":199},[298,7529,7530],{"class":300,"line":547},[298,7531,7532],{},"### Checklist\n",[298,7534,7535],{"class":300,"line":557},[298,7536,7537],{},"- [ ] Code follows style guide\n",[298,7539,7540],{"class":300,"line":567},[298,7541,7542],{},"- [ ] No console.logs left\n",[298,7544,7545],{"class":300,"line":577},[298,7546,7547],{},"- [ ] Documentation updated\n",[30,7549,7550],{},[235,7551,7552],{},"As Reviewer:",[229,7554,7555,7561,7567,7573,7579],{},[232,7556,7557,7560],{},[235,7558,7559],{},"Be kind"," - Assume good intent",[232,7562,7563,7566],{},[235,7564,7565],{},"Be specific"," - Not \"this is bad\" but \"consider using X because Y\"",[232,7568,7569,7572],{},[235,7570,7571],{},"Ask questions"," - \"Why did you choose this approach?\"",[232,7574,7575,7578],{},[235,7576,7577],{},"Approve fast"," - Don't block on nitpicks",[232,7580,7581,7584,7585],{},[235,7582,7583],{},"Use prefixes",":\n",[229,7586,7587,7593,7599],{},[232,7588,7589,7592],{},[295,7590,7591],{},"nit:"," - Minor suggestion, not blocking",[232,7594,7595,7598],{},[295,7596,7597],{},"question:"," - Seeking clarification",[232,7600,7601,7604],{},[295,7602,7603],{},"blocking:"," - Must fix before merge",[4168,7606,7608],{"id":7607},"async-communication-best-practices","Async Communication Best Practices",[30,7610,7611],{},[235,7612,7613],{},"Slack/Discord:",[289,7615,7618],{"className":7616,"code":7617,"language":756},[754],"❌ \"hey\"\n❌ \"are you there?\"\n❌ \"can I ask you something?\"\n\n✅ \"Hey! Working on the auth feature. Getting a 401 error \n   when calling /api/login. Here's the error: [paste]. \n   I've tried X and Y. Any ideas?\"\n",[295,7619,7617],{"__ignoreMap":16},[30,7621,7622],{},[235,7623,7624],{},"Writing Good Commit Messages:",[289,7626,7628],{"className":291,"code":7627,"language":293,"meta":16,"style":16},"# Bad\ngit commit -m \"fixed bug\"\ngit commit -m \"updates\"\n\n# Good\ngit commit -m \"fix(auth): prevent session timeout on mobile browsers\n\n- Add keepalive ping every 5 minutes\n- Store session in localStorage as backup\n- Fixes #234\"\n",[295,7629,7630,7635,7646,7657,7661,7666,7677,7681,7686,7691],{"__ignoreMap":16},[298,7631,7632],{"class":300,"line":301},[298,7633,7634],{"class":387},"# Bad\n",[298,7636,7637,7639,7641,7643],{"class":300,"line":179},[298,7638,5571],{"class":304},[298,7640,5717],{"class":308},[298,7642,5671],{"class":631},[298,7644,7645],{"class":308}," \"fixed bug\"\n",[298,7647,7648,7650,7652,7654],{"class":300,"line":17},[298,7649,5571],{"class":304},[298,7651,5717],{"class":308},[298,7653,5671],{"class":631},[298,7655,7656],{"class":308}," \"updates\"\n",[298,7658,7659],{"class":300,"line":416},[298,7660,701],{"emptyLinePlaceholder":199},[298,7662,7663],{"class":300,"line":425},[298,7664,7665],{"class":387},"# Good\n",[298,7667,7668,7670,7672,7674],{"class":300,"line":433},[298,7669,5571],{"class":304},[298,7671,5717],{"class":308},[298,7673,5671],{"class":631},[298,7675,7676],{"class":308}," \"fix(auth): prevent session timeout on mobile browsers\n",[298,7678,7679],{"class":300,"line":439},[298,7680,701],{"emptyLinePlaceholder":199},[298,7682,7683],{"class":300,"line":202},[298,7684,7685],{"class":308},"- Add keepalive ping every 5 minutes\n",[298,7687,7688],{"class":300,"line":450},[298,7689,7690],{"class":308},"- Store session in localStorage as backup\n",[298,7692,7693],{"class":300,"line":459},[298,7694,7695],{"class":308},"- Fixes #234\"\n",[4168,7697,7699],{"id":7698},"pair-programming-mentoring","Pair Programming & Mentoring",[30,7701,7702],{},[235,7703,7704],{},"When to pair program:",[229,7706,7707,7710,7713,7716],{},[232,7708,7709],{},"Complex problems",[232,7711,7712],{},"Onboarding new team members",[232,7714,7715],{},"Knowledge sharing",[232,7717,7718],{},"Debugging tricky bugs",[30,7720,7721],{},[235,7722,7723],{},"Roles:",[229,7725,7726,7732],{},[232,7727,7728,7731],{},[235,7729,7730],{},"Driver",": Types and implements",[232,7733,7734,7737],{},[235,7735,7736],{},"Navigator",": Thinks ahead, suggests, reviews",[30,7739,7740],{},[235,7741,6214],{},[229,7743,7744,7750,7756],{},[232,7745,7746,7749],{},[235,7747,7748],{},"VS Code Live Share"," - Real-time collaboration",[232,7751,7752,7755],{},[235,7753,7754],{},"Tuple"," - Remote pair programming",[232,7757,7758,7761],{},[235,7759,7760],{},"Pop"," - Instant screen sharing",[37,7763,7765],{"id":7764},"measuring-improving","Measuring & Improving",[4168,7767,7769],{"id":7768},"track-your-progress","Track Your Progress",[30,7771,7772],{},[235,7773,7774],{},"Weekly Review Template:",[289,7776,7778],{"className":768,"code":7777,"language":770,"meta":16,"style":16},"## Week of [Date]\n\n### Completed\n- [x] Feature: User authentication\n- [x] Fixed: Memory leak in dashboard\n- [x] Learning: Completed TypeScript course section 3\n\n### Blocked/Challenges\n- Waiting for API documentation\n- Struggling with WebSocket implementation\n\n### Next Week Goals\n1. Complete auth feature\n2. Research WebSocket best practices\n3. Refactor user service\n\n### What Went Well\n- Good focus during morning sessions\n- Pair programming session was productive\n\n### What to Improve\n- Too many meetings (reduce or batch them)\n- Need to take more breaks\n",[295,7779,7780,7785,7789,7794,7799,7804,7809,7813,7818,7823,7828,7832,7837,7842,7847,7852,7856,7861,7866,7871,7875,7880,7885],{"__ignoreMap":16},[298,7781,7782],{"class":300,"line":301},[298,7783,7784],{},"## Week of [Date]\n",[298,7786,7787],{"class":300,"line":179},[298,7788,701],{"emptyLinePlaceholder":199},[298,7790,7791],{"class":300,"line":17},[298,7792,7793],{},"### Completed\n",[298,7795,7796],{"class":300,"line":416},[298,7797,7798],{},"- [x] Feature: User authentication\n",[298,7800,7801],{"class":300,"line":425},[298,7802,7803],{},"- [x] Fixed: Memory leak in dashboard\n",[298,7805,7806],{"class":300,"line":433},[298,7807,7808],{},"- [x] Learning: Completed TypeScript course section 3\n",[298,7810,7811],{"class":300,"line":439},[298,7812,701],{"emptyLinePlaceholder":199},[298,7814,7815],{"class":300,"line":202},[298,7816,7817],{},"### Blocked/Challenges\n",[298,7819,7820],{"class":300,"line":450},[298,7821,7822],{},"- Waiting for API documentation\n",[298,7824,7825],{"class":300,"line":459},[298,7826,7827],{},"- Struggling with WebSocket implementation\n",[298,7829,7830],{"class":300,"line":467},[298,7831,701],{"emptyLinePlaceholder":199},[298,7833,7834],{"class":300,"line":473},[298,7835,7836],{},"### Next Week Goals\n",[298,7838,7839],{"class":300,"line":484},[298,7840,7841],{},"1. Complete auth feature\n",[298,7843,7844],{"class":300,"line":495},[298,7845,7846],{},"2. Research WebSocket best practices\n",[298,7848,7849],{"class":300,"line":506},[298,7850,7851],{},"3. Refactor user service\n",[298,7853,7854],{"class":300,"line":517},[298,7855,701],{"emptyLinePlaceholder":199},[298,7857,7858],{"class":300,"line":526},[298,7859,7860],{},"### What Went Well\n",[298,7862,7863],{"class":300,"line":532},[298,7864,7865],{},"- Good focus during morning sessions\n",[298,7867,7868],{"class":300,"line":537},[298,7869,7870],{},"- Pair programming session was productive\n",[298,7872,7873],{"class":300,"line":547},[298,7874,701],{"emptyLinePlaceholder":199},[298,7876,7877],{"class":300,"line":557},[298,7878,7879],{},"### What to Improve\n",[298,7881,7882],{"class":300,"line":567},[298,7883,7884],{},"- Too many meetings (reduce or batch them)\n",[298,7886,7887],{"class":300,"line":577},[298,7888,7889],{},"- Need to take more breaks\n",[4168,7891,7893],{"id":7892},"productivity-metrics-use-sparingly","Productivity Metrics (Use Sparingly)",[30,7895,7896],{},[235,7897,7898],{},"Good Metrics:",[229,7900,7901,7904,7907,7910],{},[232,7902,7903],{},"Story points completed",[232,7905,7906],{},"Code review turnaround time",[232,7908,7909],{},"Deployment frequency",[232,7911,7912],{},"Time to recovery from failures",[30,7914,7915],{},[235,7916,7917],{},"Bad Metrics (Don't optimize for these):",[229,7919,7920,7923,7926,7929],{},[232,7921,7922],{},"Lines of code written",[232,7924,7925],{},"Hours worked",[232,7927,7928],{},"Number of commits",[232,7930,7931],{},"Speed of code writing",[37,7933,7935],{"id":7934},"your-30-day-productivity-transformation","Your 30-Day Productivity Transformation",[4168,7937,7939],{"id":7938},"week-1-foundation","Week 1: Foundation",[229,7941,7944,7953,7959,7965,7971],{"className":7942},[7943],"contains-task-list",[232,7945,7948,7952],{"className":7946},[7947],"task-list-item",[7949,7950],"input",{"disabled":199,"type":7951},"checkbox"," Set up modern terminal (Starship, zsh, useful aliases)",[232,7954,7956,7958],{"className":7955},[7947],[7949,7957],{"disabled":199,"type":7951}," Install essential VS Code extensions",[232,7960,7962,7964],{"className":7961},[7947],[7949,7963],{"disabled":199,"type":7951}," Configure GitHub Copilot or try Cursor",[232,7966,7968,7970],{"className":7967},[7947],[7949,7969],{"disabled":199,"type":7951}," Create morning planning ritual (15 min daily)",[232,7972,7974,7976],{"className":7973},[7947],[7949,7975],{"disabled":199,"type":7951}," Try Pomodoro technique for one week",[4168,7978,7980],{"id":7979},"week-2-deep-work","Week 2: Deep Work",[229,7982,7984,7990,7996,8002,8008],{"className":7983},[7943],[232,7985,7987,7989],{"className":7986},[7947],[7949,7988],{"disabled":199,"type":7951}," Identify your peak focus hours",[232,7991,7993,7995],{"className":7992},[7947],[7949,7994],{"disabled":199,"type":7951}," Block 2-hour deep work sessions daily",[232,7997,7999,8001],{"className":7998},[7947],[7949,8000],{"disabled":199,"type":7951}," Turn off all notifications during focus time",[232,8003,8005,8007],{"className":8004},[7947],[7949,8006],{"disabled":199,"type":7951}," Install website blocker for distractions",[232,8009,8011,8013],{"className":8010},[7947],[7949,8012],{"disabled":199,"type":7951}," Practice getting into flow state",[4168,8015,8017],{"id":8016},"week-3-automation","Week 3: Automation",[229,8019,8021,8027,8033,8039,8045],{"className":8020},[7943],[232,8022,8024,8026],{"className":8023},[7947],[7949,8025],{"disabled":199,"type":7951}," Create 3 Git aliases you'll actually use",[232,8028,8030,8032],{"className":8029},[7947],[7949,8031],{"disabled":199,"type":7951}," Write one automation script for repetitive task",[232,8034,8036,8038],{"className":8035},[7947],[7949,8037],{"disabled":199,"type":7951}," Set up WakaTime to track coding time",[232,8040,8042,8044],{"className":8041},[7947],[7949,8043],{"disabled":199,"type":7951}," Organize your TODO system (Notion/Linear)",[232,8046,8048,8050],{"className":8047},[7947],[7949,8049],{"disabled":199,"type":7951}," Automate your development environment setup",[4168,8052,8054],{"id":8053},"week-4-sustainability","Week 4: Sustainability",[229,8056,8058,8064,8070,8076,8082],{"className":8057},[7943],[232,8059,8061,8063],{"className":8060},[7947],[7949,8062],{"disabled":199,"type":7951}," Establish clear work boundaries",[232,8065,8067,8069],{"className":8066},[7947],[7949,8068],{"disabled":199,"type":7951}," Set up ergonomic workspace",[232,8071,8073,8075],{"className":8072},[7947],[7949,8074],{"disabled":199,"type":7951}," Schedule 20 min daily learning",[232,8077,8079,8081],{"className":8078},[7947],[7949,8080],{"disabled":199,"type":7951}," Start weekly review habit",[232,8083,8085,8087],{"className":8084},[7947],[7949,8086],{"disabled":199,"type":7951}," Plan next month's learning goals",[37,8089,166],{"id":165},[30,8091,8092],{},"Productivity isn't about cramming more work into your day—it's about doing the right work effectively, sustainably, and enjoyably. The tools and techniques in this guide are battle-tested by thousands of developers in 2025.",[30,8094,8095],{},[235,8096,8097],{},"Key Takeaways:",[4704,8099,8100,8106,8112,8118,8124],{},[232,8101,8102,8105],{},[235,8103,8104],{},"Invest in your tools"," - The right setup pays for itself in hours saved",[232,8107,8108,8111],{},[235,8109,8110],{},"Protect your focus"," - Deep work is your superpower",[232,8113,8114,8117],{},[235,8115,8116],{},"Automate ruthlessly"," - Never do manually what can be scripted",[232,8119,8120,8123],{},[235,8121,8122],{},"Learn continuously"," - 20 minutes daily compounds over time",[232,8125,8126,8129],{},[235,8127,8128],{},"Take care of yourself"," - Burnout destroys productivity",[30,8131,8132],{},"Start small. Pick 2-3 changes from this guide and implement them this week. Once they become habits, add more. In 30 days, you'll be amazed at the difference.",[30,8134,8135],{},[235,8136,8137],{},"Your productivity journey starts now. What will you implement first?",[4731,8139,8140],{},"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 .s56mj, html code.shiki .s56mj{--shiki-light:#6A737D;--shiki-default:#6A9955;--shiki-dark:#6A9955}html pre.shiki code .svuFb, html code.shiki .svuFb{--shiki-light:#6F42C1;--shiki-default:#DCDCAA;--shiki-dark:#DCDCAA}html pre.shiki code .sGDl4, html code.shiki .sGDl4{--shiki-light:#032F62;--shiki-default:#CE9178;--shiki-dark:#CE9178}html pre.shiki code .s7v1m, html code.shiki .s7v1m{--shiki-light:#005CC5;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .s1p9p, html code.shiki .s1p9p{--shiki-light:#D73A49;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}html pre.shiki code .sG4b4, html code.shiki .sG4b4{--shiki-light:#24292E;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}html pre.shiki code .seC34, html code.shiki .seC34{--shiki-light:#005CC5;--shiki-default:#B5CEA8;--shiki-dark:#B5CEA8}html pre.shiki code .s5uUr, html code.shiki .s5uUr{--shiki-light:#D73A49;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .sZiGn, html code.shiki .sZiGn{--shiki-light:#24292E;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .s9TRk, html code.shiki .s9TRk{--shiki-light:#E36209;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .sNX3-, html code.shiki .sNX3-{--shiki-light:#005CC5;--shiki-default:#DCDCAA;--shiki-dark:#DCDCAA}html pre.shiki code .sYpgL, html code.shiki .sYpgL{--shiki-light:#005CC5;--shiki-default:#D7BA7D;--shiki-dark:#D7BA7D}html pre.shiki code .sps74, html code.shiki .sps74{--shiki-light:#005CC5;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}",{"title":16,"searchDepth":17,"depth":17,"links":8142},[8143,8151,8157,8162,8167,8172,8177,8182,8186,8192],{"id":5404,"depth":179,"text":5405,"children":8144},[8145,8146,8147,8148,8149,8150],{"id":5408,"depth":17,"text":5409},{"id":5471,"depth":17,"text":5472},{"id":5550,"depth":17,"text":5551},{"id":5841,"depth":17,"text":5842},{"id":5895,"depth":17,"text":5896},{"id":6076,"depth":17,"text":6077},{"id":6114,"depth":179,"text":6115,"children":8152},[8153,8154,8155,8156],{"id":6118,"depth":17,"text":6119},{"id":6128,"depth":17,"text":6129},{"id":6138,"depth":17,"text":6139},{"id":6162,"depth":17,"text":6163},{"id":6172,"depth":179,"text":6173,"children":8158},[8159,8160,8161],{"id":6176,"depth":17,"text":6177},{"id":6237,"depth":17,"text":6238},{"id":6339,"depth":17,"text":6340},{"id":6397,"depth":179,"text":6398,"children":8163},[8164,8165,8166],{"id":6401,"depth":17,"text":6402},{"id":6716,"depth":17,"text":6717},{"id":6883,"depth":17,"text":6884},{"id":7058,"depth":179,"text":7059,"children":8168},[8169,8170,8171],{"id":7062,"depth":17,"text":7063},{"id":7089,"depth":17,"text":7090},{"id":7161,"depth":17,"text":7162},{"id":7236,"depth":179,"text":7237,"children":8173},[8174,8175,8176],{"id":7240,"depth":17,"text":7241},{"id":7288,"depth":17,"text":7289},{"id":7351,"depth":17,"text":7352},{"id":7423,"depth":179,"text":7424,"children":8178},[8179,8180,8181],{"id":7427,"depth":17,"text":7428},{"id":7607,"depth":17,"text":7608},{"id":7698,"depth":17,"text":7699},{"id":7764,"depth":179,"text":7765,"children":8183},[8184,8185],{"id":7768,"depth":17,"text":7769},{"id":7892,"depth":17,"text":7893},{"id":7934,"depth":179,"text":7935,"children":8187},[8188,8189,8190,8191],{"id":7938,"depth":17,"text":7939},{"id":7979,"depth":17,"text":7980},{"id":8016,"depth":17,"text":8017},{"id":8053,"depth":17,"text":8054},{"id":165,"depth":179,"text":166},"A comprehensive guide to maximizing your productivity as a developer in 2025 with modern tools, proven techniques, and sustainable habits that actually work.","https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=1200",{"excerpt":8196},{"type":13,"value":8197},[8198,8200],[30,8199,5398],{},[30,8201,5401],{},"/developer-productivity","2025-05-05",{"title":5393,"description":8193},"developer-productivity",[19,8207,8208,8209,8210,8211,8212,8213],"productivity","workflow","efficiency","developer-tips","ai-tools","vscode","automation","2025-10-10","adbgKyGELHrHGLLDr_yG6LCQxYDZwnI_XeHwOniEN98",{"id":8217,"title":8218,"author":26,"body":8219,"category":19,"description":16035,"extension":7,"image":16036,"isDraft":190,"isFeatured":199,"locale":9,"meta":16037,"navigation":199,"path":16042,"publishedAt":16043,"readingTime":532,"seo":16044,"stem":16045,"tags":16046,"updatedAt":8214,"__hash__":16054},"articles_en/essential-vue3-patterns.md","Essential Vue 3 Patterns for Building Modern, Scalable Applications in 2025",{"type":13,"value":8220,"toc":16003},[8221,8224,8228,8231,8301,8616,8620,8623,8647,8655,8829,8834,8914,8918,8921,8925,9388,9392,9755,9759,9762,10051,10058,10064,10091,10095,10098,10122,10307,10311,10317,10542,10546,10549,10553,10834,10838,11276,11280,11284,11287,11548,11552,11957,11960,12032,12036,13028,13031,13932,13936,13940,14102,14106,14960,14964,15267,15271,15275,15654,15658,15992,15994,16000],[30,8222,8223],{},"Vue 3 has revolutionized how developers build interactive and performant user interfaces. Its Composition API, improved TypeScript support, and new features like Teleport and Suspense have paved the way for more scalable, maintainable, and efficient application development. Mastering essential Vue 3 patterns is crucial for any developer looking to build modern web applications. This guide delves into key patterns and best practices.",[37,8225,8227],{"id":8226},"_1-mastering-the-composition-api","1. Mastering the Composition API",[30,8229,8230],{},"The Composition API is the cornerstone of modern Vue 3 development, offering a flexible way to organize and reuse logic.",[229,8232,8233,8242,8268,8277],{},[232,8234,8235,8241],{},[235,8236,8237,8240],{},[295,8238,8239],{},"setup()"," function:"," The entry point for using the Composition API within components. It's where you declare reactive state, computed properties, watchers, and lifecycle hooks.",[232,8243,8244,8254],{},[235,8245,8246,8247,8250,8251,375],{},"Reactivity with ",[295,8248,8249],{},"ref"," and ",[295,8252,8253],{},"reactive",[229,8255,8256,8262],{},[232,8257,8258,8261],{},[295,8259,8260],{},"ref()",": Used for creating reactive references for primitive values (String, Number, Boolean) or single objects.",[232,8263,8264,8267],{},[295,8265,8266],{},"reactive()",": Used for creating reactive proxies for objects. Changes to the object's properties are tracked.",[232,8269,8270,8276],{},[235,8271,8272,8273,2086],{},"Computed Properties (",[295,8274,8275],{},"computed",": For deriving state based on other reactive sources. They are cached and only re-evaluate when their dependencies change.",[232,8278,8279,7584,8287],{},[235,8280,8281,8282,8250,8284,2086],{},"Watchers (",[295,8283,4494],{},[295,8285,8286],{},"watchEffect",[229,8288,8289,8295],{},[232,8290,8291,8294],{},[295,8292,8293],{},"watch()",": Explicitly watch a specific reactive source and run a callback when it changes. Offers more control over dependencies and timing.",[232,8296,8297,8300],{},[295,8298,8299],{},"watchEffect()",": Runs a function immediately and re-runs it whenever any of its reactive dependencies change. Simpler for straightforward side effects.",[289,8302,8304],{"className":1587,"code":8303,"language":1589,"meta":16,"style":16},"\u003Cscript setup lang=\"ts\">\nimport { ref, reactive, computed, watch, watchEffect } from \"vue\";\n\n// Reactive state\nconst count = ref(0);\nconst user = reactive({ name: \"John Doe\", age: 30 });\n\n// Computed property\nconst doubledCount = computed(() => count.value * 2);\n\n// Watcher\nwatch(count, (newVal, oldVal) => {\n  console.log(`Count changed from ${oldVal} to ${newVal}`);\n});\n\n// watchEffect\nwatchEffect(() => {\n  console.log(`Current user name: ${user.name}`);\n});\n\nfunction increment() {\n  count.value++;\n}\n\u003C/script>\n",[295,8305,8306,8322,8355,8359,8364,8383,8413,8417,8422,8451,8455,8460,8486,8520,8524,8528,8533,8543,8571,8575,8579,8590,8604,8608],{"__ignoreMap":16},[298,8307,8308,8310,8312,8314,8316,8318,8320],{"class":300,"line":301},[298,8309,1199],{"class":1596},[298,8311,1600],{"class":1599},[298,8313,1604],{"class":1603},[298,8315,1607],{"class":1603},[298,8317,1610],{"class":403},[298,8319,1613],{"class":308},[298,8321,1616],{"class":1596},[298,8323,8324,8326,8328,8330,8332,8334,8336,8338,8340,8342,8344,8346,8348,8350,8353],{"class":300,"line":179},[298,8325,956],{"class":393},[298,8327,959],{"class":403},[298,8329,8249],{"class":409},[298,8331,619],{"class":403},[298,8333,8253],{"class":409},[298,8335,619],{"class":403},[298,8337,8275],{"class":409},[298,8339,619],{"class":403},[298,8341,4494],{"class":409},[298,8343,619],{"class":403},[298,8345,8286],{"class":409},[298,8347,965],{"class":403},[298,8349,968],{"class":393},[298,8351,8352],{"class":308}," \"vue\"",[298,8354,974],{"class":403},[298,8356,8357],{"class":300,"line":17},[298,8358,701],{"emptyLinePlaceholder":199},[298,8360,8361],{"class":300,"line":416},[298,8362,8363],{"class":387},"// Reactive state\n",[298,8365,8366,8368,8371,8373,8376,8378,8381],{"class":300,"line":425},[298,8367,1650],{"class":985},[298,8369,8370],{"class":989}," count",[298,8372,994],{"class":993},[298,8374,8375],{"class":304}," ref",[298,8377,1087],{"class":403},[298,8379,8380],{"class":2549},"0",[298,8382,1777],{"class":403},[298,8384,8385,8387,8390,8392,8395,8397,8399,8402,8404,8407,8410],{"class":300,"line":433},[298,8386,1650],{"class":985},[298,8388,8389],{"class":989}," user",[298,8391,994],{"class":993},[298,8393,8394],{"class":304}," reactive",[298,8396,2486],{"class":403},[298,8398,2621],{"class":409},[298,8400,8401],{"class":308}," \"John Doe\"",[298,8403,619],{"class":403},[298,8405,8406],{"class":409},"age:",[298,8408,8409],{"class":2549}," 30",[298,8411,8412],{"class":403}," });\n",[298,8414,8415],{"class":300,"line":439},[298,8416,701],{"emptyLinePlaceholder":199},[298,8418,8419],{"class":300,"line":202},[298,8420,8421],{"class":387},"// Computed property\n",[298,8423,8424,8426,8429,8431,8433,8435,8437,8439,8441,8443,8446,8449],{"class":300,"line":450},[298,8425,1650],{"class":985},[298,8427,8428],{"class":989}," doubledCount",[298,8430,994],{"class":993},[298,8432,1843],{"class":304},[298,8434,1846],{"class":403},[298,8436,1439],{"class":985},[298,8438,8370],{"class":409},[298,8440,1000],{"class":403},[298,8442,1735],{"class":409},[298,8444,8445],{"class":993}," *",[298,8447,8448],{"class":2549}," 2",[298,8450,1777],{"class":403},[298,8452,8453],{"class":300,"line":459},[298,8454,701],{"emptyLinePlaceholder":199},[298,8456,8457],{"class":300,"line":467},[298,8458,8459],{"class":387},"// Watcher\n",[298,8461,8462,8464,8466,8469,8472,8475,8477,8480,8482,8484],{"class":300,"line":473},[298,8463,4494],{"class":304},[298,8465,1087],{"class":403},[298,8467,8468],{"class":409},"count",[298,8470,8471],{"class":403},", (",[298,8473,8474],{"class":1217},"newVal",[298,8476,619],{"class":403},[298,8478,8479],{"class":1217},"oldVal",[298,8481,1436],{"class":403},[298,8483,1439],{"class":985},[298,8485,456],{"class":403},[298,8487,8488,8491,8493,8496,8498,8501,8503,8505,8507,8510,8512,8514,8516,8518],{"class":300,"line":484},[298,8489,8490],{"class":409},"  console",[298,8492,1000],{"class":403},[298,8494,8495],{"class":304},"log",[298,8497,1087],{"class":403},[298,8499,8500],{"class":308},"`Count changed from ",[298,8502,1453],{"class":1452},[298,8504,8479],{"class":409},[298,8506,1458],{"class":1452},[298,8508,8509],{"class":308}," to ",[298,8511,1453],{"class":1452},[298,8513,8474],{"class":409},[298,8515,1458],{"class":1452},[298,8517,1740],{"class":308},[298,8519,1777],{"class":403},[298,8521,8522],{"class":300,"line":495},[298,8523,743],{"class":403},[298,8525,8526],{"class":300,"line":506},[298,8527,701],{"emptyLinePlaceholder":199},[298,8529,8530],{"class":300,"line":517},[298,8531,8532],{"class":387},"// watchEffect\n",[298,8534,8535,8537,8539,8541],{"class":300,"line":526},[298,8536,8286],{"class":304},[298,8538,1846],{"class":403},[298,8540,1439],{"class":985},[298,8542,456],{"class":403},[298,8544,8545,8547,8549,8551,8553,8556,8558,8561,8563,8565,8567,8569],{"class":300,"line":532},[298,8546,8490],{"class":409},[298,8548,1000],{"class":403},[298,8550,8495],{"class":304},[298,8552,1087],{"class":403},[298,8554,8555],{"class":308},"`Current user name: ",[298,8557,1453],{"class":1452},[298,8559,8560],{"class":409},"user",[298,8562,1000],{"class":1732},[298,8564,2994],{"class":409},[298,8566,1458],{"class":1452},[298,8568,1740],{"class":308},[298,8570,1777],{"class":403},[298,8572,8573],{"class":300,"line":537},[298,8574,743],{"class":403},[298,8576,8577],{"class":300,"line":547},[298,8578,701],{"emptyLinePlaceholder":199},[298,8580,8581,8584,8587],{"class":300,"line":557},[298,8582,8583],{"class":985},"function",[298,8585,8586],{"class":304}," increment",[298,8588,8589],{"class":403},"() {\n",[298,8591,8592,8595,8597,8599,8602],{"class":300,"line":567},[298,8593,8594],{"class":409},"  count",[298,8596,1000],{"class":403},[298,8598,1735],{"class":409},[298,8600,8601],{"class":993},"++",[298,8603,974],{"class":403},[298,8605,8606],{"class":300,"line":577},[298,8607,2573],{"class":403},[298,8609,8610,8612,8614],{"class":300,"line":588},[298,8611,1899],{"class":1596},[298,8613,1600],{"class":1599},[298,8615,1616],{"class":1596},[37,8617,8619],{"id":8618},"_2-creating-reusable-logic-with-composables","2. Creating Reusable Logic with Composables",[30,8621,8622],{},"Composables are functions that encapsulate and reuse stateful logic using the Composition API. They are a powerful pattern for keeping your components lean and your logic organized and testable.",[229,8624,8625,8641],{},[232,8626,8627,8630,8631,8634,8635,619,8638,1793],{},[235,8628,8629],{},"Structure:"," A composable is typically a function named with the ",[295,8632,8633],{},"use"," prefix (e.g., ",[295,8636,8637],{},"useMousePosition",[295,8639,8640],{},"useAuth",[232,8642,8643,8646],{},[235,8644,8645],{},"Benefits:"," Promotes code reuse, improves readability, and simplifies testing of reactive logic in isolation.",[30,8648,8649],{},[235,8650,8651,8652,765],{},"Example (",[295,8653,8654],{},"composables/useCounter.ts",[289,8656,8658],{"className":378,"code":8657,"language":380,"meta":16,"style":16},"import { ref, computed } from \"vue\";\n\nexport function useCounter(initialValue = 0) {\n  const count = ref(initialValue);\n  const increment = () => count.value++;\n  const decrement = () => count.value--;\n  const double = computed(() => count.value * 2);\n\n  return { count, increment, decrement, double };\n}\n",[295,8659,8660,8680,8684,8706,8722,8744,8768,8795,8799,8825],{"__ignoreMap":16},[298,8661,8662,8664,8666,8668,8670,8672,8674,8676,8678],{"class":300,"line":301},[298,8663,956],{"class":393},[298,8665,959],{"class":403},[298,8667,8249],{"class":409},[298,8669,619],{"class":403},[298,8671,8275],{"class":409},[298,8673,965],{"class":403},[298,8675,968],{"class":393},[298,8677,8352],{"class":308},[298,8679,974],{"class":403},[298,8681,8682],{"class":300,"line":179},[298,8683,701],{"emptyLinePlaceholder":199},[298,8685,8686,8688,8691,8694,8696,8699,8701,8704],{"class":300,"line":17},[298,8687,394],{"class":393},[298,8689,8690],{"class":985}," function",[298,8692,8693],{"class":304}," useCounter",[298,8695,1087],{"class":403},[298,8697,8698],{"class":1217},"initialValue",[298,8700,994],{"class":993},[298,8702,8703],{"class":2549}," 0",[298,8705,2530],{"class":403},[298,8707,8708,8710,8712,8714,8716,8718,8720],{"class":300,"line":416},[298,8709,3271],{"class":985},[298,8711,8370],{"class":989},[298,8713,994],{"class":993},[298,8715,8375],{"class":304},[298,8717,1087],{"class":403},[298,8719,8698],{"class":409},[298,8721,1777],{"class":403},[298,8723,8724,8726,8728,8730,8732,8734,8736,8738,8740,8742],{"class":300,"line":425},[298,8725,3271],{"class":985},[298,8727,8586],{"class":304},[298,8729,994],{"class":993},[298,8731,1750],{"class":403},[298,8733,1439],{"class":985},[298,8735,8370],{"class":409},[298,8737,1000],{"class":403},[298,8739,1735],{"class":409},[298,8741,8601],{"class":993},[298,8743,974],{"class":403},[298,8745,8746,8748,8751,8753,8755,8757,8759,8761,8763,8766],{"class":300,"line":433},[298,8747,3271],{"class":985},[298,8749,8750],{"class":304}," decrement",[298,8752,994],{"class":993},[298,8754,1750],{"class":403},[298,8756,1439],{"class":985},[298,8758,8370],{"class":409},[298,8760,1000],{"class":403},[298,8762,1735],{"class":409},[298,8764,8765],{"class":993},"--",[298,8767,974],{"class":403},[298,8769,8770,8772,8775,8777,8779,8781,8783,8785,8787,8789,8791,8793],{"class":300,"line":439},[298,8771,3271],{"class":985},[298,8773,8774],{"class":989}," double",[298,8776,994],{"class":993},[298,8778,1843],{"class":304},[298,8780,1846],{"class":403},[298,8782,1439],{"class":985},[298,8784,8370],{"class":409},[298,8786,1000],{"class":403},[298,8788,1735],{"class":409},[298,8790,8445],{"class":993},[298,8792,8448],{"class":2549},[298,8794,1777],{"class":403},[298,8796,8797],{"class":300,"line":202},[298,8798,701],{"emptyLinePlaceholder":199},[298,8800,8801,8803,8805,8807,8809,8812,8814,8817,8819,8822],{"class":300,"line":450},[298,8802,1446],{"class":393},[298,8804,959],{"class":403},[298,8806,8468],{"class":409},[298,8808,619],{"class":403},[298,8810,8811],{"class":409},"increment",[298,8813,619],{"class":403},[298,8815,8816],{"class":409},"decrement",[298,8818,619],{"class":403},[298,8820,8821],{"class":409},"double",[298,8823,8824],{"class":403}," };\n",[298,8826,8827],{"class":300,"line":459},[298,8828,2573],{"class":403},[30,8830,8831],{},[235,8832,8833],{},"Usage in a component:",[289,8835,8837],{"className":1587,"code":8836,"language":1589,"meta":16,"style":16},"\u003Cscript setup lang=\"ts\">\nimport { useCounter } from \"@/composables/useCounter\";\n\nconst { count, increment, double } = useCounter(10);\n\u003C/script>\n",[295,8838,8839,8855,8873,8877,8906],{"__ignoreMap":16},[298,8840,8841,8843,8845,8847,8849,8851,8853],{"class":300,"line":301},[298,8842,1199],{"class":1596},[298,8844,1600],{"class":1599},[298,8846,1604],{"class":1603},[298,8848,1607],{"class":1603},[298,8850,1610],{"class":403},[298,8852,1613],{"class":308},[298,8854,1616],{"class":1596},[298,8856,8857,8859,8861,8864,8866,8868,8871],{"class":300,"line":179},[298,8858,956],{"class":393},[298,8860,959],{"class":403},[298,8862,8863],{"class":409},"useCounter",[298,8865,965],{"class":403},[298,8867,968],{"class":393},[298,8869,8870],{"class":308}," \"@/composables/useCounter\"",[298,8872,974],{"class":403},[298,8874,8875],{"class":300,"line":17},[298,8876,701],{"emptyLinePlaceholder":199},[298,8878,8879,8881,8883,8885,8887,8889,8891,8893,8895,8897,8899,8901,8904],{"class":300,"line":416},[298,8880,1650],{"class":985},[298,8882,959],{"class":403},[298,8884,8468],{"class":989},[298,8886,619],{"class":403},[298,8888,8811],{"class":989},[298,8890,619],{"class":403},[298,8892,8821],{"class":989},[298,8894,965],{"class":403},[298,8896,1610],{"class":993},[298,8898,8693],{"class":304},[298,8900,1087],{"class":403},[298,8902,8903],{"class":2549},"10",[298,8905,1777],{"class":403},[298,8907,8908,8910,8912],{"class":300,"line":425},[298,8909,1899],{"class":1596},[298,8911,1600],{"class":1599},[298,8913,1616],{"class":1596},[37,8915,8917],{"id":8916},"_3-effective-state-management-with-pinia","3. Effective State Management with Pinia",[30,8919,8920],{},"Pinia is the official state management library for Vue 3, offering a simpler and more intuitive API than Vuex.",[4168,8922,8924],{"id":8923},"setting-up-a-pinia-store","Setting Up a Pinia Store",[289,8926,8928],{"className":378,"code":8927,"language":380,"meta":16,"style":16},"// stores/user.ts\nimport { defineStore } from 'pinia'\nimport { ref, computed } from 'vue'\n\nexport const useUserStore = defineStore('user', () => {\n  // State\n  const user = ref\u003CUser | null>(null)\n  const isLoading = ref(false)\n  \n  // Getters (computed)\n  const isAuthenticated = computed(() => !!user.value)\n  const userName = computed(() => user.value?.name ?? 'Guest')\n  \n  // Actions\n  async function login(credentials: LoginCredentials) {\n    isLoading.value = true\n    try {\n      const response = await api.login(credentials)\n      user.value = response.user\n    } catch (error) {\n      console.error('Login failed:', error)\n      throw error\n    } finally {\n      isLoading.value = false\n    }\n  }\n  \n  function logout() {\n    user.value = null\n  }\n  \n  return {\n    // State\n    user,\n    isLoading,\n    // Getters\n    isAuthenticated,\n    userName,\n    // Actions\n    login,\n    logout\n  }\n})\n",[295,8929,8930,8935,8951,8970,8974,8999,9004,9031,9049,9053,9058,9084,9116,9120,9125,9146,9160,9167,9192,9210,9225,9245,9253,9262,9276,9280,9284,9288,9298,9312,9316,9320,9326,9331,9337,9343,9348,9355,9362,9367,9374,9379,9383],{"__ignoreMap":16},[298,8931,8932],{"class":300,"line":301},[298,8933,8934],{"class":387},"// stores/user.ts\n",[298,8936,8937,8939,8941,8944,8946,8948],{"class":300,"line":179},[298,8938,956],{"class":393},[298,8940,959],{"class":403},[298,8942,8943],{"class":409},"defineStore",[298,8945,965],{"class":403},[298,8947,968],{"class":393},[298,8949,8950],{"class":308}," 'pinia'\n",[298,8952,8953,8955,8957,8959,8961,8963,8965,8967],{"class":300,"line":17},[298,8954,956],{"class":393},[298,8956,959],{"class":403},[298,8958,8249],{"class":409},[298,8960,619],{"class":403},[298,8962,8275],{"class":409},[298,8964,965],{"class":403},[298,8966,968],{"class":393},[298,8968,8969],{"class":308}," 'vue'\n",[298,8971,8972],{"class":300,"line":416},[298,8973,701],{"emptyLinePlaceholder":199},[298,8975,8976,8978,8980,8983,8985,8988,8990,8993,8995,8997],{"class":300,"line":425},[298,8977,394],{"class":393},[298,8979,986],{"class":985},[298,8981,8982],{"class":989}," useUserStore",[298,8984,994],{"class":993},[298,8986,8987],{"class":304}," defineStore",[298,8989,1087],{"class":403},[298,8991,8992],{"class":308},"'user'",[298,8994,2464],{"class":403},[298,8996,1439],{"class":985},[298,8998,456],{"class":403},[298,9000,9001],{"class":300,"line":433},[298,9002,9003],{"class":387},"  // State\n",[298,9005,9006,9008,9010,9012,9014,9016,9019,9021,9023,9026,9029],{"class":300,"line":439},[298,9007,3271],{"class":985},[298,9009,8389],{"class":989},[298,9011,994],{"class":993},[298,9013,8375],{"class":304},[298,9015,1199],{"class":403},[298,9017,9018],{"class":1186},"User",[298,9020,3316],{"class":993},[298,9022,3319],{"class":1223},[298,9024,9025],{"class":403},">(",[298,9027,9028],{"class":631},"null",[298,9030,3034],{"class":403},[298,9032,9033,9035,9038,9040,9042,9044,9047],{"class":300,"line":202},[298,9034,3271],{"class":985},[298,9036,9037],{"class":989}," isLoading",[298,9039,994],{"class":993},[298,9041,8375],{"class":304},[298,9043,1087],{"class":403},[298,9045,9046],{"class":631},"false",[298,9048,3034],{"class":403},[298,9050,9051],{"class":300,"line":450},[298,9052,447],{"class":403},[298,9054,9055],{"class":300,"line":459},[298,9056,9057],{"class":387},"  // Getters (computed)\n",[298,9059,9060,9062,9065,9067,9069,9071,9073,9076,9078,9080,9082],{"class":300,"line":467},[298,9061,3271],{"class":985},[298,9063,9064],{"class":989}," isAuthenticated",[298,9066,994],{"class":993},[298,9068,1843],{"class":304},[298,9070,1846],{"class":403},[298,9072,1439],{"class":985},[298,9074,9075],{"class":993}," !!",[298,9077,8560],{"class":409},[298,9079,1000],{"class":403},[298,9081,1735],{"class":409},[298,9083,3034],{"class":403},[298,9085,9086,9088,9091,9093,9095,9097,9099,9101,9103,9105,9107,9109,9111,9114],{"class":300,"line":473},[298,9087,3271],{"class":985},[298,9089,9090],{"class":989}," userName",[298,9092,994],{"class":993},[298,9094,1843],{"class":304},[298,9096,1846],{"class":403},[298,9098,1439],{"class":985},[298,9100,8389],{"class":409},[298,9102,1000],{"class":403},[298,9104,1735],{"class":409},[298,9106,1863],{"class":403},[298,9108,2994],{"class":409},[298,9110,3443],{"class":993},[298,9112,9113],{"class":308}," 'Guest'",[298,9115,3034],{"class":403},[298,9117,9118],{"class":300,"line":484},[298,9119,447],{"class":403},[298,9121,9122],{"class":300,"line":495},[298,9123,9124],{"class":387},"  // Actions\n",[298,9126,9127,9129,9131,9134,9136,9139,9141,9144],{"class":300,"line":506},[298,9128,1747],{"class":985},[298,9130,8690],{"class":985},[298,9132,9133],{"class":304}," login",[298,9135,1087],{"class":403},[298,9137,9138],{"class":1217},"credentials",[298,9140,375],{"class":993},[298,9142,9143],{"class":1186}," LoginCredentials",[298,9145,2530],{"class":403},[298,9147,9148,9151,9153,9155,9157],{"class":300,"line":517},[298,9149,9150],{"class":409},"    isLoading",[298,9152,1000],{"class":403},[298,9154,1735],{"class":409},[298,9156,994],{"class":993},[298,9158,9159],{"class":631}," true\n",[298,9161,9162,9165],{"class":300,"line":526},[298,9163,9164],{"class":393},"    try",[298,9166,456],{"class":403},[298,9168,9169,9171,9174,9176,9178,9181,9183,9186,9188,9190],{"class":300,"line":532},[298,9170,3366],{"class":985},[298,9172,9173],{"class":989}," response",[298,9175,994],{"class":993},[298,9177,1709],{"class":393},[298,9179,9180],{"class":409}," api",[298,9182,1000],{"class":403},[298,9184,9185],{"class":304},"login",[298,9187,1087],{"class":403},[298,9189,9138],{"class":409},[298,9191,3034],{"class":403},[298,9193,9194,9197,9199,9201,9203,9205,9207],{"class":300,"line":537},[298,9195,9196],{"class":409},"      user",[298,9198,1000],{"class":403},[298,9200,1735],{"class":409},[298,9202,994],{"class":993},[298,9204,9173],{"class":409},[298,9206,1000],{"class":403},[298,9208,9209],{"class":409},"user\n",[298,9211,9212,9215,9218,9220,9223],{"class":300,"line":547},[298,9213,9214],{"class":403},"    } ",[298,9216,9217],{"class":393},"catch",[298,9219,1426],{"class":403},[298,9221,9222],{"class":409},"error",[298,9224,2530],{"class":403},[298,9226,9227,9230,9232,9234,9236,9239,9241,9243],{"class":300,"line":557},[298,9228,9229],{"class":409},"      console",[298,9231,1000],{"class":403},[298,9233,9222],{"class":304},[298,9235,1087],{"class":403},[298,9237,9238],{"class":308},"'Login failed:'",[298,9240,619],{"class":403},[298,9242,9222],{"class":409},[298,9244,3034],{"class":403},[298,9246,9247,9250],{"class":300,"line":567},[298,9248,9249],{"class":393},"      throw",[298,9251,9252],{"class":409}," error\n",[298,9254,9255,9257,9260],{"class":300,"line":577},[298,9256,9214],{"class":403},[298,9258,9259],{"class":393},"finally",[298,9261,456],{"class":403},[298,9263,9264,9267,9269,9271,9273],{"class":300,"line":588},[298,9265,9266],{"class":409},"      isLoading",[298,9268,1000],{"class":403},[298,9270,1735],{"class":409},[298,9272,994],{"class":993},[298,9274,9275],{"class":631}," false\n",[298,9277,9278],{"class":300,"line":594},[298,9279,689],{"class":403},[298,9281,9282],{"class":300,"line":600},[298,9283,737],{"class":403},[298,9285,9286],{"class":300,"line":610},[298,9287,447],{"class":403},[298,9289,9290,9293,9296],{"class":300,"line":625},[298,9291,9292],{"class":985},"  function",[298,9294,9295],{"class":304}," logout",[298,9297,8589],{"class":403},[298,9299,9300,9303,9305,9307,9309],{"class":300,"line":637},[298,9301,9302],{"class":409},"    user",[298,9304,1000],{"class":403},[298,9306,1735],{"class":409},[298,9308,994],{"class":993},[298,9310,9311],{"class":631}," null\n",[298,9313,9314],{"class":300,"line":648},[298,9315,737],{"class":403},[298,9317,9318],{"class":300,"line":656},[298,9319,447],{"class":403},[298,9321,9322,9324],{"class":300,"line":666},[298,9323,1446],{"class":393},[298,9325,456],{"class":403},[298,9327,9328],{"class":300,"line":677},[298,9329,9330],{"class":387},"    // State\n",[298,9332,9333,9335],{"class":300,"line":686},[298,9334,9302],{"class":409},[298,9336,422],{"class":403},[298,9338,9339,9341],{"class":300,"line":692},[298,9340,9150],{"class":409},[298,9342,422],{"class":403},[298,9344,9345],{"class":300,"line":698},[298,9346,9347],{"class":387},"    // Getters\n",[298,9349,9350,9353],{"class":300,"line":704},[298,9351,9352],{"class":409},"    isAuthenticated",[298,9354,422],{"class":403},[298,9356,9357,9360],{"class":300,"line":712},[298,9358,9359],{"class":409},"    userName",[298,9361,422],{"class":403},[298,9363,9364],{"class":300,"line":720},[298,9365,9366],{"class":387},"    // Actions\n",[298,9368,9369,9372],{"class":300,"line":729},[298,9370,9371],{"class":409},"    login",[298,9373,422],{"class":403},[298,9375,9376],{"class":300,"line":734},[298,9377,9378],{"class":409},"    logout\n",[298,9380,9381],{"class":300,"line":740},[298,9382,737],{"class":403},[298,9384,9385],{"class":300,"line":1470},[298,9386,9387],{"class":403},"})\n",[4168,9389,9391],{"id":9390},"using-pinia-in-components","Using Pinia in Components",[289,9393,9395],{"className":1587,"code":9394,"language":1589,"meta":16,"style":16},"\u003Cscript setup lang=\"ts\">\nimport { useUserStore } from '@/stores/user'\nimport { storeToRefs } from 'pinia'\n\nconst userStore = useUserStore()\n// Extract reactive state using storeToRefs\nconst { user, isAuthenticated, userName } = storeToRefs(userStore)\n// Actions can be destructured directly\nconst { login, logout } = userStore\n\nasync function handleLogin() {\n  try {\n    await login({ email: 'user@example.com', password: 'password' })\n  } catch (error) {\n    // Handle error\n  }\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv v-if=\"isAuthenticated\">\n    \u003Cp>Welcome, {{ userName }}!\u003C/p>\n    \u003Cbutton @click=\"logout\">Logout\u003C/button>\n  \u003C/div>\n  \u003Cdiv v-else>\n    \u003Cbutton @click=\"handleLogin\">Login\u003C/button>\n  \u003C/div>\n\u003C/template>\n",[295,9396,9397,9413,9429,9444,9448,9461,9466,9498,9503,9523,9527,9539,9546,9571,9584,9589,9593,9597,9605,9609,9617,9636,9658,9690,9698,9709,9739,9747],{"__ignoreMap":16},[298,9398,9399,9401,9403,9405,9407,9409,9411],{"class":300,"line":301},[298,9400,1199],{"class":1596},[298,9402,1600],{"class":1599},[298,9404,1604],{"class":1603},[298,9406,1607],{"class":1603},[298,9408,1610],{"class":403},[298,9410,1613],{"class":308},[298,9412,1616],{"class":1596},[298,9414,9415,9417,9419,9422,9424,9426],{"class":300,"line":179},[298,9416,956],{"class":393},[298,9418,959],{"class":403},[298,9420,9421],{"class":409},"useUserStore",[298,9423,965],{"class":403},[298,9425,968],{"class":393},[298,9427,9428],{"class":308}," '@/stores/user'\n",[298,9430,9431,9433,9435,9438,9440,9442],{"class":300,"line":17},[298,9432,956],{"class":393},[298,9434,959],{"class":403},[298,9436,9437],{"class":409},"storeToRefs",[298,9439,965],{"class":403},[298,9441,968],{"class":393},[298,9443,8950],{"class":308},[298,9445,9446],{"class":300,"line":416},[298,9447,701],{"emptyLinePlaceholder":199},[298,9449,9450,9452,9455,9457,9459],{"class":300,"line":425},[298,9451,1650],{"class":985},[298,9453,9454],{"class":989}," userStore",[298,9456,994],{"class":993},[298,9458,8982],{"class":304},[298,9460,2475],{"class":403},[298,9462,9463],{"class":300,"line":433},[298,9464,9465],{"class":387},"// Extract reactive state using storeToRefs\n",[298,9467,9468,9470,9472,9474,9476,9479,9481,9484,9486,9488,9491,9493,9496],{"class":300,"line":439},[298,9469,1650],{"class":985},[298,9471,959],{"class":403},[298,9473,8560],{"class":989},[298,9475,619],{"class":403},[298,9477,9478],{"class":989},"isAuthenticated",[298,9480,619],{"class":403},[298,9482,9483],{"class":989},"userName",[298,9485,965],{"class":403},[298,9487,1610],{"class":993},[298,9489,9490],{"class":304}," storeToRefs",[298,9492,1087],{"class":403},[298,9494,9495],{"class":409},"userStore",[298,9497,3034],{"class":403},[298,9499,9500],{"class":300,"line":202},[298,9501,9502],{"class":387},"// Actions can be destructured directly\n",[298,9504,9505,9507,9509,9511,9513,9516,9518,9520],{"class":300,"line":450},[298,9506,1650],{"class":985},[298,9508,959],{"class":403},[298,9510,9185],{"class":989},[298,9512,619],{"class":403},[298,9514,9515],{"class":989},"logout",[298,9517,965],{"class":403},[298,9519,1610],{"class":993},[298,9521,9522],{"class":409}," userStore\n",[298,9524,9525],{"class":300,"line":459},[298,9526,701],{"emptyLinePlaceholder":199},[298,9528,9529,9532,9534,9537],{"class":300,"line":467},[298,9530,9531],{"class":985},"async",[298,9533,8690],{"class":985},[298,9535,9536],{"class":304}," handleLogin",[298,9538,8589],{"class":403},[298,9540,9541,9544],{"class":300,"line":473},[298,9542,9543],{"class":393},"  try",[298,9545,456],{"class":403},[298,9547,9548,9551,9553,9555,9558,9561,9563,9566,9569],{"class":300,"line":484},[298,9549,9550],{"class":393},"    await",[298,9552,9133],{"class":304},[298,9554,2486],{"class":403},[298,9556,9557],{"class":409},"email:",[298,9559,9560],{"class":308}," 'user@example.com'",[298,9562,619],{"class":403},[298,9564,9565],{"class":409},"password:",[298,9567,9568],{"class":308}," 'password'",[298,9570,2494],{"class":403},[298,9572,9573,9576,9578,9580,9582],{"class":300,"line":495},[298,9574,9575],{"class":403},"  } ",[298,9577,9217],{"class":393},[298,9579,1426],{"class":403},[298,9581,9222],{"class":409},[298,9583,2530],{"class":403},[298,9585,9586],{"class":300,"line":506},[298,9587,9588],{"class":387},"    // Handle error\n",[298,9590,9591],{"class":300,"line":517},[298,9592,737],{"class":403},[298,9594,9595],{"class":300,"line":526},[298,9596,2573],{"class":403},[298,9598,9599,9601,9603],{"class":300,"line":532},[298,9600,1899],{"class":1596},[298,9602,1600],{"class":1599},[298,9604,1616],{"class":1596},[298,9606,9607],{"class":300,"line":537},[298,9608,701],{"emptyLinePlaceholder":199},[298,9610,9611,9613,9615],{"class":300,"line":547},[298,9612,1199],{"class":1596},[298,9614,1914],{"class":1599},[298,9616,1616],{"class":1596},[298,9618,9619,9621,9623,9626,9628,9630,9632,9634],{"class":300,"line":557},[298,9620,1921],{"class":1596},[298,9622,2003],{"class":1599},[298,9624,9625],{"class":393}," v-if",[298,9627,1610],{"class":403},[298,9629,2030],{"class":1732},[298,9631,9478],{"class":409},[298,9633,2030],{"class":1732},[298,9635,1616],{"class":1596},[298,9637,9638,9640,9642,9644,9647,9649,9652,9654,9656],{"class":300,"line":567},[298,9639,1931],{"class":1596},[298,9641,30],{"class":1599},[298,9643,2203],{"class":1596},[298,9645,9646],{"class":403},"Welcome, {{ ",[298,9648,9483],{"class":409},[298,9650,9651],{"class":403}," }}!",[298,9653,1899],{"class":1596},[298,9655,30],{"class":1599},[298,9657,1616],{"class":1596},[298,9659,9660,9662,9665,9668,9671,9673,9675,9677,9679,9681,9684,9686,9688],{"class":300,"line":577},[298,9661,1931],{"class":1596},[298,9663,9664],{"class":1599},"button",[298,9666,9667],{"class":403}," @",[298,9669,9670],{"class":1603},"click",[298,9672,1610],{"class":403},[298,9674,2030],{"class":1732},[298,9676,9515],{"class":409},[298,9678,2030],{"class":1732},[298,9680,2203],{"class":1596},[298,9682,9683],{"class":403},"Logout",[298,9685,1899],{"class":1596},[298,9687,9664],{"class":1599},[298,9689,1616],{"class":1596},[298,9691,9692,9694,9696],{"class":300,"line":588},[298,9693,2294],{"class":1596},[298,9695,2003],{"class":1599},[298,9697,1616],{"class":1596},[298,9699,9700,9702,9704,9707],{"class":300,"line":594},[298,9701,1921],{"class":1596},[298,9703,2003],{"class":1599},[298,9705,9706],{"class":393}," v-else",[298,9708,1616],{"class":1596},[298,9710,9711,9713,9715,9717,9719,9721,9723,9726,9728,9730,9733,9735,9737],{"class":300,"line":600},[298,9712,1931],{"class":1596},[298,9714,9664],{"class":1599},[298,9716,9667],{"class":403},[298,9718,9670],{"class":1603},[298,9720,1610],{"class":403},[298,9722,2030],{"class":1732},[298,9724,9725],{"class":409},"handleLogin",[298,9727,2030],{"class":1732},[298,9729,2203],{"class":1596},[298,9731,9732],{"class":403},"Login",[298,9734,1899],{"class":1596},[298,9736,9664],{"class":1599},[298,9738,1616],{"class":1596},[298,9740,9741,9743,9745],{"class":300,"line":610},[298,9742,2294],{"class":1596},[298,9744,2003],{"class":1599},[298,9746,1616],{"class":1596},[298,9748,9749,9751,9753],{"class":300,"line":625},[298,9750,1899],{"class":1596},[298,9752,1914],{"class":1599},[298,9754,1616],{"class":1596},[4168,9756,9758],{"id":9757},"provideinject-for-localized-state","Provide/Inject for Localized State",[30,9760,9761],{},"For component-tree-specific state, use provide/inject:",[289,9763,9765],{"className":1587,"code":9764,"language":1589,"meta":16,"style":16},"\u003C!-- Parent Component -->\n\u003Cscript setup lang=\"ts\">\nimport { provide, ref } from 'vue'\n\nconst theme = ref('dark')\nprovide('theme', theme)\n\nfunction toggleTheme() {\n  theme.value = theme.value === 'dark' ? 'light' : 'dark'\n}\n\u003C/script>\n\n\u003C!-- Child Component (any depth) -->\n\u003Cscript setup lang=\"ts\">\nimport { inject, type Ref } from 'vue'\n\nconst theme = inject\u003CRef\u003Cstring>>('theme')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv :class=\"`theme-${theme}`\">\n    Content with injected theme\n  \u003C/div>\n\u003C/template>\n",[295,9766,9767,9772,9788,9807,9811,9829,9845,9849,9858,9890,9894,9902,9906,9911,9927,9949,9953,9980,9988,9992,10000,10030,10035,10043],{"__ignoreMap":16},[298,9768,9769],{"class":300,"line":301},[298,9770,9771],{"class":387},"\u003C!-- Parent Component -->\n",[298,9773,9774,9776,9778,9780,9782,9784,9786],{"class":300,"line":179},[298,9775,1199],{"class":1596},[298,9777,1600],{"class":1599},[298,9779,1604],{"class":1603},[298,9781,1607],{"class":1603},[298,9783,1610],{"class":403},[298,9785,1613],{"class":308},[298,9787,1616],{"class":1596},[298,9789,9790,9792,9794,9797,9799,9801,9803,9805],{"class":300,"line":17},[298,9791,956],{"class":393},[298,9793,959],{"class":403},[298,9795,9796],{"class":409},"provide",[298,9798,619],{"class":403},[298,9800,8249],{"class":409},[298,9802,965],{"class":403},[298,9804,968],{"class":393},[298,9806,8969],{"class":308},[298,9808,9809],{"class":300,"line":416},[298,9810,701],{"emptyLinePlaceholder":199},[298,9812,9813,9815,9818,9820,9822,9824,9827],{"class":300,"line":425},[298,9814,1650],{"class":985},[298,9816,9817],{"class":989}," theme",[298,9819,994],{"class":993},[298,9821,8375],{"class":304},[298,9823,1087],{"class":403},[298,9825,9826],{"class":308},"'dark'",[298,9828,3034],{"class":403},[298,9830,9831,9833,9835,9838,9840,9843],{"class":300,"line":433},[298,9832,9796],{"class":304},[298,9834,1087],{"class":403},[298,9836,9837],{"class":308},"'theme'",[298,9839,619],{"class":403},[298,9841,9842],{"class":409},"theme",[298,9844,3034],{"class":403},[298,9846,9847],{"class":300,"line":439},[298,9848,701],{"emptyLinePlaceholder":199},[298,9850,9851,9853,9856],{"class":300,"line":202},[298,9852,8583],{"class":985},[298,9854,9855],{"class":304}," toggleTheme",[298,9857,8589],{"class":403},[298,9859,9860,9863,9865,9867,9869,9871,9873,9875,9877,9880,9882,9885,9887],{"class":300,"line":450},[298,9861,9862],{"class":409},"  theme",[298,9864,1000],{"class":403},[298,9866,1735],{"class":409},[298,9868,994],{"class":993},[298,9870,9817],{"class":409},[298,9872,1000],{"class":403},[298,9874,1735],{"class":409},[298,9876,3784],{"class":993},[298,9878,9879],{"class":308}," 'dark'",[298,9881,3790],{"class":993},[298,9883,9884],{"class":308}," 'light'",[298,9886,2848],{"class":993},[298,9888,9889],{"class":308}," 'dark'\n",[298,9891,9892],{"class":300,"line":459},[298,9893,2573],{"class":403},[298,9895,9896,9898,9900],{"class":300,"line":467},[298,9897,1899],{"class":1596},[298,9899,1600],{"class":1599},[298,9901,1616],{"class":1596},[298,9903,9904],{"class":300,"line":473},[298,9905,701],{"emptyLinePlaceholder":199},[298,9907,9908],{"class":300,"line":484},[298,9909,9910],{"class":387},"\u003C!-- Child Component (any depth) -->\n",[298,9912,9913,9915,9917,9919,9921,9923,9925],{"class":300,"line":495},[298,9914,1199],{"class":1596},[298,9916,1600],{"class":1599},[298,9918,1604],{"class":1603},[298,9920,1607],{"class":1603},[298,9922,1610],{"class":403},[298,9924,1613],{"class":308},[298,9926,1616],{"class":1596},[298,9928,9929,9931,9933,9936,9938,9940,9943,9945,9947],{"class":300,"line":506},[298,9930,956],{"class":393},[298,9932,959],{"class":403},[298,9934,9935],{"class":409},"inject",[298,9937,619],{"class":403},[298,9939,1630],{"class":393},[298,9941,9942],{"class":409}," Ref",[298,9944,965],{"class":403},[298,9946,968],{"class":393},[298,9948,8969],{"class":308},[298,9950,9951],{"class":300,"line":517},[298,9952,701],{"emptyLinePlaceholder":199},[298,9954,9955,9957,9959,9961,9964,9966,9969,9971,9973,9976,9978],{"class":300,"line":526},[298,9956,1650],{"class":985},[298,9958,9817],{"class":989},[298,9960,994],{"class":993},[298,9962,9963],{"class":304}," inject",[298,9965,1199],{"class":403},[298,9967,9968],{"class":1186},"Ref",[298,9970,1199],{"class":403},[298,9972,1017],{"class":1223},[298,9974,9975],{"class":403},">>(",[298,9977,9837],{"class":308},[298,9979,3034],{"class":403},[298,9981,9982,9984,9986],{"class":300,"line":532},[298,9983,1899],{"class":1596},[298,9985,1600],{"class":1599},[298,9987,1616],{"class":1596},[298,9989,9990],{"class":300,"line":537},[298,9991,701],{"emptyLinePlaceholder":199},[298,9993,9994,9996,9998],{"class":300,"line":547},[298,9995,1199],{"class":1596},[298,9997,1914],{"class":1599},[298,9999,1616],{"class":1596},[298,10001,10002,10004,10006,10008,10011,10013,10015,10018,10020,10022,10024,10026,10028],{"class":300,"line":557},[298,10003,1921],{"class":1596},[298,10005,2003],{"class":1599},[298,10007,2848],{"class":403},[298,10009,10010],{"class":1603},"class",[298,10012,1610],{"class":403},[298,10014,2030],{"class":1732},[298,10016,10017],{"class":308},"`theme-",[298,10019,1453],{"class":1452},[298,10021,9842],{"class":409},[298,10023,1458],{"class":1452},[298,10025,1740],{"class":308},[298,10027,2030],{"class":1732},[298,10029,1616],{"class":1596},[298,10031,10032],{"class":300,"line":567},[298,10033,10034],{"class":403},"    Content with injected theme\n",[298,10036,10037,10039,10041],{"class":300,"line":577},[298,10038,2294],{"class":1596},[298,10040,2003],{"class":1599},[298,10042,1616],{"class":1596},[298,10044,10045,10047,10049],{"class":300,"line":588},[298,10046,1899],{"class":1596},[298,10048,1914],{"class":1599},[298,10050,1616],{"class":1596},[37,10052,10054,10055],{"id":10053},"_4-leveraging-script-setup","4. Leveraging ",[295,10056,10057],{},"\u003Cscript setup>",[30,10059,10060,10061,10063],{},"The ",[295,10062,10057],{}," syntax is a compile-time syntactic sugar that significantly simplifies component writing with the Composition API.",[229,10065,10066,10078],{},[232,10067,10068,10070,10071,619,10073,10075,10076,1000],{},[235,10069,8645],{}," More concise code, auto-import of components and composables (in Nuxt), direct use of ",[295,10072,8249],{},[295,10074,8253],{},", etc., without returning them from ",[295,10077,8239],{},[232,10079,10080,10083,10084,8250,10087,10090],{},[235,10081,10082],{},"Defining Props and Emits:"," Use ",[295,10085,10086],{},"defineProps",[295,10088,10089],{},"defineEmits"," macros.",[37,10092,10094],{"id":10093},"_5-asynchronous-operations-and-suspense","5. Asynchronous Operations and Suspense",[30,10096,10097],{},"Vue 3 provides better ways to handle asynchronous operations and loading states.",[229,10099,10100,10109],{},[232,10101,10102,10083,10105,10108],{},[235,10103,10104],{},"Async Components:",[295,10106,10107],{},"defineAsyncComponent"," to lazy-load components, improving initial page load time.",[232,10110,10111,10114,10115,10118,10119,10121],{},[235,10112,10113],{},"Suspense:"," The ",[295,10116,10117],{},"\u003CSuspense>"," component allows you to display fallback content while waiting for an async component or an async ",[295,10120,8239],{}," function to resolve. This simplifies managing loading states for nested async dependencies.",[289,10123,10125],{"className":1587,"code":10124,"language":1589,"meta":16,"style":16},"\u003Ctemplate>\n  \u003CSuspense>\n    \u003Ctemplate #default>\n      \u003CAsyncUserProfile />\n    \u003C/template>\n    \u003Ctemplate #fallback>\n      \u003Cdiv>Loading profile...\u003C/div>\n    \u003C/template>\n  \u003C/Suspense>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { defineAsyncComponent } from \"vue\";\nconst AsyncUserProfile = defineAsyncComponent(\n  () => import(\"./UserProfile.vue\")\n);\n\u003C/script>\n",[295,10126,10127,10135,10144,10158,10167,10175,10188,10205,10213,10221,10229,10233,10249,10265,10279,10295,10299],{"__ignoreMap":16},[298,10128,10129,10131,10133],{"class":300,"line":301},[298,10130,1199],{"class":1596},[298,10132,1914],{"class":1599},[298,10134,1616],{"class":1596},[298,10136,10137,10139,10142],{"class":300,"line":179},[298,10138,1921],{"class":1596},[298,10140,10141],{"class":1599},"Suspense",[298,10143,1616],{"class":1596},[298,10145,10146,10148,10150,10153,10156],{"class":300,"line":17},[298,10147,1931],{"class":1596},[298,10149,1914],{"class":1599},[298,10151,10152],{"class":403}," #",[298,10154,10155],{"class":1603},"default",[298,10157,1616],{"class":1596},[298,10159,10160,10162,10165],{"class":300,"line":416},[298,10161,1949],{"class":1596},[298,10163,10164],{"class":1599},"AsyncUserProfile",[298,10166,2861],{"class":1596},[298,10168,10169,10171,10173],{"class":300,"line":425},[298,10170,2285],{"class":1596},[298,10172,1914],{"class":1599},[298,10174,1616],{"class":1596},[298,10176,10177,10179,10181,10183,10186],{"class":300,"line":433},[298,10178,1931],{"class":1596},[298,10180,1914],{"class":1599},[298,10182,10152],{"class":403},[298,10184,10185],{"class":1603},"fallback",[298,10187,1616],{"class":1596},[298,10189,10190,10192,10194,10196,10199,10201,10203],{"class":300,"line":439},[298,10191,1949],{"class":1596},[298,10193,2003],{"class":1599},[298,10195,2203],{"class":1596},[298,10197,10198],{"class":403},"Loading profile...",[298,10200,1899],{"class":1596},[298,10202,2003],{"class":1599},[298,10204,1616],{"class":1596},[298,10206,10207,10209,10211],{"class":300,"line":202},[298,10208,2285],{"class":1596},[298,10210,1914],{"class":1599},[298,10212,1616],{"class":1596},[298,10214,10215,10217,10219],{"class":300,"line":450},[298,10216,2294],{"class":1596},[298,10218,10141],{"class":1599},[298,10220,1616],{"class":1596},[298,10222,10223,10225,10227],{"class":300,"line":459},[298,10224,1899],{"class":1596},[298,10226,1914],{"class":1599},[298,10228,1616],{"class":1596},[298,10230,10231],{"class":300,"line":467},[298,10232,701],{"emptyLinePlaceholder":199},[298,10234,10235,10237,10239,10241,10243,10245,10247],{"class":300,"line":473},[298,10236,1199],{"class":1596},[298,10238,1600],{"class":1599},[298,10240,1604],{"class":1603},[298,10242,1607],{"class":1603},[298,10244,1610],{"class":403},[298,10246,1613],{"class":308},[298,10248,1616],{"class":1596},[298,10250,10251,10253,10255,10257,10259,10261,10263],{"class":300,"line":484},[298,10252,956],{"class":393},[298,10254,959],{"class":403},[298,10256,10107],{"class":409},[298,10258,965],{"class":403},[298,10260,968],{"class":393},[298,10262,8352],{"class":308},[298,10264,974],{"class":403},[298,10266,10267,10269,10272,10274,10277],{"class":300,"line":495},[298,10268,1650],{"class":985},[298,10270,10271],{"class":989}," AsyncUserProfile",[298,10273,994],{"class":993},[298,10275,10276],{"class":304}," defineAsyncComponent",[298,10278,4248],{"class":403},[298,10280,10281,10283,10285,10288,10290,10293],{"class":300,"line":506},[298,10282,4272],{"class":403},[298,10284,1439],{"class":985},[298,10286,10287],{"class":985}," import",[298,10289,1087],{"class":403},[298,10291,10292],{"class":308},"\"./UserProfile.vue\"",[298,10294,3034],{"class":403},[298,10296,10297],{"class":300,"line":517},[298,10298,1777],{"class":403},[298,10300,10301,10303,10305],{"class":300,"line":526},[298,10302,1899],{"class":1596},[298,10304,1600],{"class":1599},[298,10306,1616],{"class":1596},[37,10308,10310],{"id":10309},"_6-graceful-dom-manipulation-with-teleport","6. Graceful DOM Manipulation with Teleport",[30,10312,10060,10313,10316],{},[295,10314,10315],{},"\u003CTeleport>"," component allows you to render a part of a component's template into a different DOM location, outside of the component's own DOM hierarchy. This is extremely useful for modals, notifications, tooltips, or any element that needs to break out of its parent's styling context or stacking order.",[289,10318,10320],{"className":1587,"code":10319,"language":1589,"meta":16,"style":16},"\u003Ctemplate>\n  \u003Cbutton @click=\"showModal = true\">Show Modal\u003C/button>\n  \u003CTeleport to=\"body\">\n    \u003Cdiv v-if=\"showModal\" class=\"modal\">\n      \u003Cp>This is a modal!\u003C/p>\n      \u003Cbutton @click=\"showModal = false\">Close\u003C/button>\n    \u003C/div>\n  \u003C/Teleport>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nconst showModal = ref(false);\n\u003C/script>\n",[295,10321,10322,10330,10364,10381,10406,10423,10457,10465,10473,10481,10485,10501,10517,10534],{"__ignoreMap":16},[298,10323,10324,10326,10328],{"class":300,"line":301},[298,10325,1199],{"class":1596},[298,10327,1914],{"class":1599},[298,10329,1616],{"class":1596},[298,10331,10332,10334,10336,10338,10340,10342,10344,10347,10349,10351,10353,10355,10358,10360,10362],{"class":300,"line":179},[298,10333,1921],{"class":1596},[298,10335,9664],{"class":1599},[298,10337,9667],{"class":403},[298,10339,9670],{"class":1603},[298,10341,1610],{"class":403},[298,10343,2030],{"class":1732},[298,10345,10346],{"class":409},"showModal",[298,10348,994],{"class":993},[298,10350,632],{"class":631},[298,10352,2030],{"class":1732},[298,10354,2203],{"class":1596},[298,10356,10357],{"class":403},"Show Modal",[298,10359,1899],{"class":1596},[298,10361,9664],{"class":1599},[298,10363,1616],{"class":1596},[298,10365,10366,10368,10371,10374,10376,10379],{"class":300,"line":17},[298,10367,1921],{"class":1596},[298,10369,10370],{"class":1599},"Teleport",[298,10372,10373],{"class":1603}," to",[298,10375,1610],{"class":403},[298,10377,10378],{"class":308},"\"body\"",[298,10380,1616],{"class":1596},[298,10382,10383,10385,10387,10389,10391,10393,10395,10397,10399,10401,10404],{"class":300,"line":416},[298,10384,1931],{"class":1596},[298,10386,2003],{"class":1599},[298,10388,9625],{"class":393},[298,10390,1610],{"class":403},[298,10392,2030],{"class":1732},[298,10394,10346],{"class":409},[298,10396,2030],{"class":1732},[298,10398,1937],{"class":1603},[298,10400,1610],{"class":403},[298,10402,10403],{"class":308},"\"modal\"",[298,10405,1616],{"class":1596},[298,10407,10408,10410,10412,10414,10417,10419,10421],{"class":300,"line":425},[298,10409,1949],{"class":1596},[298,10411,30],{"class":1599},[298,10413,2203],{"class":1596},[298,10415,10416],{"class":403},"This is a modal!",[298,10418,1899],{"class":1596},[298,10420,30],{"class":1599},[298,10422,1616],{"class":1596},[298,10424,10425,10427,10429,10431,10433,10435,10437,10439,10441,10444,10446,10448,10451,10453,10455],{"class":300,"line":433},[298,10426,1949],{"class":1596},[298,10428,9664],{"class":1599},[298,10430,9667],{"class":403},[298,10432,9670],{"class":1603},[298,10434,1610],{"class":403},[298,10436,2030],{"class":1732},[298,10438,10346],{"class":409},[298,10440,994],{"class":993},[298,10442,10443],{"class":631}," false",[298,10445,2030],{"class":1732},[298,10447,2203],{"class":1596},[298,10449,10450],{"class":403},"Close",[298,10452,1899],{"class":1596},[298,10454,9664],{"class":1599},[298,10456,1616],{"class":1596},[298,10458,10459,10461,10463],{"class":300,"line":439},[298,10460,2285],{"class":1596},[298,10462,2003],{"class":1599},[298,10464,1616],{"class":1596},[298,10466,10467,10469,10471],{"class":300,"line":202},[298,10468,2294],{"class":1596},[298,10470,10370],{"class":1599},[298,10472,1616],{"class":1596},[298,10474,10475,10477,10479],{"class":300,"line":450},[298,10476,1899],{"class":1596},[298,10478,1914],{"class":1599},[298,10480,1616],{"class":1596},[298,10482,10483],{"class":300,"line":459},[298,10484,701],{"emptyLinePlaceholder":199},[298,10486,10487,10489,10491,10493,10495,10497,10499],{"class":300,"line":467},[298,10488,1199],{"class":1596},[298,10490,1600],{"class":1599},[298,10492,1604],{"class":1603},[298,10494,1607],{"class":1603},[298,10496,1610],{"class":403},[298,10498,1613],{"class":308},[298,10500,1616],{"class":1596},[298,10502,10503,10505,10507,10509,10511,10513,10515],{"class":300,"line":473},[298,10504,956],{"class":393},[298,10506,959],{"class":403},[298,10508,8249],{"class":409},[298,10510,965],{"class":403},[298,10512,968],{"class":393},[298,10514,8352],{"class":308},[298,10516,974],{"class":403},[298,10518,10519,10521,10524,10526,10528,10530,10532],{"class":300,"line":484},[298,10520,1650],{"class":985},[298,10522,10523],{"class":989}," showModal",[298,10525,994],{"class":993},[298,10527,8375],{"class":304},[298,10529,1087],{"class":403},[298,10531,9046],{"class":631},[298,10533,1777],{"class":403},[298,10535,10536,10538,10540],{"class":300,"line":495},[298,10537,1899],{"class":1596},[298,10539,1600],{"class":1599},[298,10541,1616],{"class":1596},[37,10543,10545],{"id":10544},"_7-typescript-integration-for-robustness","7. TypeScript Integration for Robustness",[30,10547,10548],{},"Vue 3 is written in TypeScript and provides excellent support for it. Using TypeScript enhances type safety, improves code maintainability, and provides better autocompletion and refactoring capabilities in IDEs.",[4168,10550,10552],{"id":10551},"typing-props-and-emits","Typing Props and Emits",[289,10554,10556],{"className":1587,"code":10555,"language":1589,"meta":16,"style":16},"\u003Cscript setup lang=\"ts\">\ninterface Props {\n  title: string\n  count?: number\n  items: string[]\n  user: {\n    name: string\n    email: string\n  }\n}\n\ninterface Emits {\n  (e: 'update', value: number): void\n  (e: 'delete', id: string): void\n}\n\nconst props = withDefaults(defineProps\u003CProps>(), {\n  count: 0\n})\n\nconst emit = defineEmits\u003CEmits>()\n\nfunction handleUpdate() {\n  emit('update', props.count + 1)\n}\n\u003C/script>\n",[295,10557,10558,10574,10584,10593,10602,10614,10623,10632,10641,10645,10649,10653,10662,10690,10716,10720,10724,10747,10755,10759,10763,10783,10787,10796,10822,10826],{"__ignoreMap":16},[298,10559,10560,10562,10564,10566,10568,10570,10572],{"class":300,"line":301},[298,10561,1199],{"class":1596},[298,10563,1600],{"class":1599},[298,10565,1604],{"class":1603},[298,10567,1607],{"class":1603},[298,10569,1610],{"class":403},[298,10571,1613],{"class":308},[298,10573,1616],{"class":1596},[298,10575,10576,10579,10582],{"class":300,"line":179},[298,10577,10578],{"class":985},"interface",[298,10580,10581],{"class":1186}," Props",[298,10583,456],{"class":403},[298,10585,10586,10588,10590],{"class":300,"line":17},[298,10587,1264],{"class":1217},[298,10589,375],{"class":993},[298,10591,10592],{"class":1223}," string\n",[298,10594,10595,10597,10599],{"class":300,"line":416},[298,10596,8594],{"class":1217},[298,10598,1300],{"class":993},[298,10600,10601],{"class":1223}," number\n",[298,10603,10604,10607,10609,10611],{"class":300,"line":425},[298,10605,10606],{"class":1217},"  items",[298,10608,375],{"class":993},[298,10610,1224],{"class":1223},[298,10612,10613],{"class":403},"[]\n",[298,10615,10616,10619,10621],{"class":300,"line":433},[298,10617,10618],{"class":1217},"  user",[298,10620,375],{"class":993},[298,10622,456],{"class":403},[298,10624,10625,10628,10630],{"class":300,"line":439},[298,10626,10627],{"class":1217},"    name",[298,10629,375],{"class":993},[298,10631,10592],{"class":1223},[298,10633,10634,10637,10639],{"class":300,"line":202},[298,10635,10636],{"class":1217},"    email",[298,10638,375],{"class":993},[298,10640,10592],{"class":1223},[298,10642,10643],{"class":300,"line":450},[298,10644,737],{"class":403},[298,10646,10647],{"class":300,"line":459},[298,10648,2573],{"class":403},[298,10650,10651],{"class":300,"line":467},[298,10652,701],{"emptyLinePlaceholder":199},[298,10654,10655,10657,10660],{"class":300,"line":473},[298,10656,10578],{"class":985},[298,10658,10659],{"class":1186}," Emits",[298,10661,456],{"class":403},[298,10663,10664,10666,10669,10671,10674,10676,10678,10680,10683,10685,10687],{"class":300,"line":484},[298,10665,2968],{"class":403},[298,10667,10668],{"class":1217},"e",[298,10670,375],{"class":993},[298,10672,10673],{"class":308}," 'update'",[298,10675,619],{"class":403},[298,10677,1735],{"class":1217},[298,10679,375],{"class":993},[298,10681,10682],{"class":1223}," number",[298,10684,2086],{"class":403},[298,10686,375],{"class":993},[298,10688,10689],{"class":1223}," void\n",[298,10691,10692,10694,10696,10698,10701,10703,10706,10708,10710,10712,10714],{"class":300,"line":495},[298,10693,2968],{"class":403},[298,10695,10668],{"class":1217},[298,10697,375],{"class":993},[298,10699,10700],{"class":308}," 'delete'",[298,10702,619],{"class":403},[298,10704,10705],{"class":1217},"id",[298,10707,375],{"class":993},[298,10709,1224],{"class":1223},[298,10711,2086],{"class":403},[298,10713,375],{"class":993},[298,10715,10689],{"class":1223},[298,10717,10718],{"class":300,"line":506},[298,10719,2573],{"class":403},[298,10721,10722],{"class":300,"line":517},[298,10723,701],{"emptyLinePlaceholder":199},[298,10725,10726,10728,10730,10732,10735,10737,10739,10741,10744],{"class":300,"line":526},[298,10727,1650],{"class":985},[298,10729,3524],{"class":989},[298,10731,994],{"class":993},[298,10733,10734],{"class":304}," withDefaults",[298,10736,1087],{"class":403},[298,10738,10086],{"class":304},[298,10740,1199],{"class":403},[298,10742,10743],{"class":1186},"Props",[298,10745,10746],{"class":403},">(), {\n",[298,10748,10749,10752],{"class":300,"line":532},[298,10750,10751],{"class":409},"  count:",[298,10753,10754],{"class":2549}," 0\n",[298,10756,10757],{"class":300,"line":537},[298,10758,9387],{"class":403},[298,10760,10761],{"class":300,"line":547},[298,10762,701],{"emptyLinePlaceholder":199},[298,10764,10765,10767,10770,10772,10775,10777,10780],{"class":300,"line":557},[298,10766,1650],{"class":985},[298,10768,10769],{"class":989}," emit",[298,10771,994],{"class":993},[298,10773,10774],{"class":304}," defineEmits",[298,10776,1199],{"class":403},[298,10778,10779],{"class":1186},"Emits",[298,10781,10782],{"class":403},">()\n",[298,10784,10785],{"class":300,"line":567},[298,10786,701],{"emptyLinePlaceholder":199},[298,10788,10789,10791,10794],{"class":300,"line":577},[298,10790,8583],{"class":985},[298,10792,10793],{"class":304}," handleUpdate",[298,10795,8589],{"class":403},[298,10797,10798,10801,10803,10806,10808,10810,10812,10814,10817,10820],{"class":300,"line":588},[298,10799,10800],{"class":304},"  emit",[298,10802,1087],{"class":403},[298,10804,10805],{"class":308},"'update'",[298,10807,619],{"class":403},[298,10809,3559],{"class":409},[298,10811,1000],{"class":403},[298,10813,8468],{"class":409},[298,10815,10816],{"class":993}," +",[298,10818,10819],{"class":2549}," 1",[298,10821,3034],{"class":403},[298,10823,10824],{"class":300,"line":594},[298,10825,2573],{"class":403},[298,10827,10828,10830,10832],{"class":300,"line":600},[298,10829,1899],{"class":1596},[298,10831,1600],{"class":1599},[298,10833,1616],{"class":1596},[4168,10835,10837],{"id":10836},"typing-composables","Typing Composables",[289,10839,10841],{"className":378,"code":10840,"language":380,"meta":16,"style":16},"// composables/useFetch.ts\nimport { ref, type Ref } from 'vue'\n\ninterface UseFetchReturn\u003CT> {\n  data: Ref\u003CT | null>\n  error: Ref\u003CError | null>\n  loading: Ref\u003Cboolean>\n  refetch: () => Promise\u003Cvoid>\n}\n\nexport function useFetch\u003CT>(url: string): UseFetchReturn\u003CT> {\n  const data = ref\u003CT | null>(null)\n  const error = ref\u003CError | null>(null)\n  const loading = ref(false)\n  \n  async function fetchData() {\n    loading.value = true\n    error.value = null\n    \n    try {\n      const response = await fetch(url)\n      data.value = await response.json()\n    } catch (e) {\n      error.value = e as Error\n    } finally {\n      loading.value = false\n    }\n  }\n  \n  fetchData()\n  \n  return {\n    data,\n    error,\n    loading,\n    refetch: fetchData\n  }\n}\n",[295,10842,10843,10848,10868,10872,10887,10906,10926,10940,10961,10965,10969,11003,11028,11053,11070,11074,11084,11097,11110,11114,11120,11139,11160,11172,11191,11199,11212,11216,11220,11224,11231,11235,11241,11248,11254,11260,11268,11272],{"__ignoreMap":16},[298,10844,10845],{"class":300,"line":301},[298,10846,10847],{"class":387},"// composables/useFetch.ts\n",[298,10849,10850,10852,10854,10856,10858,10860,10862,10864,10866],{"class":300,"line":179},[298,10851,956],{"class":393},[298,10853,959],{"class":403},[298,10855,8249],{"class":409},[298,10857,619],{"class":403},[298,10859,1630],{"class":393},[298,10861,9942],{"class":409},[298,10863,965],{"class":403},[298,10865,968],{"class":393},[298,10867,8969],{"class":308},[298,10869,10870],{"class":300,"line":17},[298,10871,701],{"emptyLinePlaceholder":199},[298,10873,10874,10876,10879,10881,10884],{"class":300,"line":416},[298,10875,10578],{"class":985},[298,10877,10878],{"class":1186}," UseFetchReturn",[298,10880,1199],{"class":403},[298,10882,10883],{"class":1186},"T",[298,10885,10886],{"class":403},"> {\n",[298,10888,10889,10892,10894,10896,10898,10900,10902,10904],{"class":300,"line":425},[298,10890,10891],{"class":1217},"  data",[298,10893,375],{"class":993},[298,10895,9942],{"class":1186},[298,10897,1199],{"class":403},[298,10899,10883],{"class":1186},[298,10901,3316],{"class":993},[298,10903,3319],{"class":1223},[298,10905,1616],{"class":403},[298,10907,10908,10911,10913,10915,10917,10920,10922,10924],{"class":300,"line":433},[298,10909,10910],{"class":1217},"  error",[298,10912,375],{"class":993},[298,10914,9942],{"class":1186},[298,10916,1199],{"class":403},[298,10918,10919],{"class":1186},"Error",[298,10921,3316],{"class":993},[298,10923,3319],{"class":1223},[298,10925,1616],{"class":403},[298,10927,10928,10930,10932,10934,10936,10938],{"class":300,"line":439},[298,10929,4418],{"class":1217},[298,10931,375],{"class":993},[298,10933,9942],{"class":1186},[298,10935,1199],{"class":403},[298,10937,1131],{"class":1223},[298,10939,1616],{"class":403},[298,10941,10942,10945,10947,10949,10951,10954,10956,10959],{"class":300,"line":202},[298,10943,10944],{"class":304},"  refetch",[298,10946,375],{"class":993},[298,10948,1750],{"class":403},[298,10950,1439],{"class":985},[298,10952,10953],{"class":1186}," Promise",[298,10955,1199],{"class":403},[298,10957,10958],{"class":1223},"void",[298,10960,1616],{"class":403},[298,10962,10963],{"class":300,"line":450},[298,10964,2573],{"class":403},[298,10966,10967],{"class":300,"line":459},[298,10968,701],{"emptyLinePlaceholder":199},[298,10970,10971,10973,10975,10978,10980,10982,10984,10987,10989,10991,10993,10995,10997,10999,11001],{"class":300,"line":467},[298,10972,394],{"class":393},[298,10974,8690],{"class":985},[298,10976,10977],{"class":304}," useFetch",[298,10979,1199],{"class":403},[298,10981,10883],{"class":1186},[298,10983,9025],{"class":403},[298,10985,10986],{"class":1217},"url",[298,10988,375],{"class":993},[298,10990,1224],{"class":1223},[298,10992,2086],{"class":403},[298,10994,375],{"class":993},[298,10996,10878],{"class":1186},[298,10998,1199],{"class":403},[298,11000,10883],{"class":1186},[298,11002,10886],{"class":403},[298,11004,11005,11007,11010,11012,11014,11016,11018,11020,11022,11024,11026],{"class":300,"line":473},[298,11006,3271],{"class":985},[298,11008,11009],{"class":989}," data",[298,11011,994],{"class":993},[298,11013,8375],{"class":304},[298,11015,1199],{"class":403},[298,11017,10883],{"class":1186},[298,11019,3316],{"class":993},[298,11021,3319],{"class":1223},[298,11023,9025],{"class":403},[298,11025,9028],{"class":631},[298,11027,3034],{"class":403},[298,11029,11030,11032,11035,11037,11039,11041,11043,11045,11047,11049,11051],{"class":300,"line":484},[298,11031,3271],{"class":985},[298,11033,11034],{"class":989}," error",[298,11036,994],{"class":993},[298,11038,8375],{"class":304},[298,11040,1199],{"class":403},[298,11042,10919],{"class":1186},[298,11044,3316],{"class":993},[298,11046,3319],{"class":1223},[298,11048,9025],{"class":403},[298,11050,9028],{"class":631},[298,11052,3034],{"class":403},[298,11054,11055,11057,11060,11062,11064,11066,11068],{"class":300,"line":495},[298,11056,3271],{"class":985},[298,11058,11059],{"class":989}," loading",[298,11061,994],{"class":993},[298,11063,8375],{"class":304},[298,11065,1087],{"class":403},[298,11067,9046],{"class":631},[298,11069,3034],{"class":403},[298,11071,11072],{"class":300,"line":506},[298,11073,447],{"class":403},[298,11075,11076,11078,11080,11082],{"class":300,"line":517},[298,11077,1747],{"class":985},[298,11079,8690],{"class":985},[298,11081,4277],{"class":304},[298,11083,8589],{"class":403},[298,11085,11086,11089,11091,11093,11095],{"class":300,"line":526},[298,11087,11088],{"class":409},"    loading",[298,11090,1000],{"class":403},[298,11092,1735],{"class":409},[298,11094,994],{"class":993},[298,11096,9159],{"class":631},[298,11098,11099,11102,11104,11106,11108],{"class":300,"line":532},[298,11100,11101],{"class":409},"    error",[298,11103,1000],{"class":403},[298,11105,1735],{"class":409},[298,11107,994],{"class":993},[298,11109,9311],{"class":631},[298,11111,11112],{"class":300,"line":537},[298,11113,2838],{"class":403},[298,11115,11116,11118],{"class":300,"line":547},[298,11117,9164],{"class":393},[298,11119,456],{"class":403},[298,11121,11122,11124,11126,11128,11130,11133,11135,11137],{"class":300,"line":557},[298,11123,3366],{"class":985},[298,11125,9173],{"class":989},[298,11127,994],{"class":993},[298,11129,1709],{"class":393},[298,11131,11132],{"class":304}," fetch",[298,11134,1087],{"class":403},[298,11136,10986],{"class":409},[298,11138,3034],{"class":403},[298,11140,11141,11144,11146,11148,11150,11152,11154,11156,11158],{"class":300,"line":567},[298,11142,11143],{"class":409},"      data",[298,11145,1000],{"class":403},[298,11147,1735],{"class":409},[298,11149,994],{"class":993},[298,11151,1709],{"class":393},[298,11153,9173],{"class":409},[298,11155,1000],{"class":403},[298,11157,6889],{"class":304},[298,11159,2475],{"class":403},[298,11161,11162,11164,11166,11168,11170],{"class":300,"line":577},[298,11163,9214],{"class":403},[298,11165,9217],{"class":393},[298,11167,1426],{"class":403},[298,11169,10668],{"class":409},[298,11171,2530],{"class":403},[298,11173,11174,11177,11179,11181,11183,11186,11188],{"class":300,"line":588},[298,11175,11176],{"class":409},"      error",[298,11178,1000],{"class":403},[298,11180,1735],{"class":409},[298,11182,994],{"class":993},[298,11184,11185],{"class":409}," e",[298,11187,2977],{"class":393},[298,11189,11190],{"class":1186}," Error\n",[298,11192,11193,11195,11197],{"class":300,"line":594},[298,11194,9214],{"class":403},[298,11196,9259],{"class":393},[298,11198,456],{"class":403},[298,11200,11201,11204,11206,11208,11210],{"class":300,"line":600},[298,11202,11203],{"class":409},"      loading",[298,11205,1000],{"class":403},[298,11207,1735],{"class":409},[298,11209,994],{"class":993},[298,11211,9275],{"class":631},[298,11213,11214],{"class":300,"line":610},[298,11215,689],{"class":403},[298,11217,11218],{"class":300,"line":625},[298,11219,737],{"class":403},[298,11221,11222],{"class":300,"line":637},[298,11223,447],{"class":403},[298,11225,11226,11229],{"class":300,"line":648},[298,11227,11228],{"class":304},"  fetchData",[298,11230,2475],{"class":403},[298,11232,11233],{"class":300,"line":656},[298,11234,447],{"class":403},[298,11236,11237,11239],{"class":300,"line":666},[298,11238,1446],{"class":393},[298,11240,456],{"class":403},[298,11242,11243,11246],{"class":300,"line":677},[298,11244,11245],{"class":409},"    data",[298,11247,422],{"class":403},[298,11249,11250,11252],{"class":300,"line":686},[298,11251,11101],{"class":409},[298,11253,422],{"class":403},[298,11255,11256,11258],{"class":300,"line":692},[298,11257,11088],{"class":409},[298,11259,422],{"class":403},[298,11261,11262,11265],{"class":300,"line":698},[298,11263,11264],{"class":409},"    refetch:",[298,11266,11267],{"class":409}," fetchData\n",[298,11269,11270],{"class":300,"line":704},[298,11271,737],{"class":403},[298,11273,11274],{"class":300,"line":712},[298,11275,2573],{"class":403},[37,11277,11279],{"id":11278},"_8-advanced-patterns-and-techniques","8. Advanced Patterns and Techniques",[4168,11281,11283],{"id":11282},"render-functions-for-dynamic-content","Render Functions for Dynamic Content",[30,11285,11286],{},"When templates aren't flexible enough, use render functions:",[289,11288,11290],{"className":1587,"code":11289,"language":1589,"meta":16,"style":16},"\u003Cscript setup lang=\"ts\">\nimport { h, type VNode } from 'vue'\n\ninterface DynamicComponentProps {\n  type: 'button' | 'link' | 'text'\n  content: string\n}\n\nfunction renderDynamic(props: DynamicComponentProps): VNode {\n  switch (props.type) {\n    case 'button':\n      return h('button', { class: 'btn' }, props.content)\n    case 'link':\n      return h('a', { href: '#', class: 'link' }, props.content)\n    case 'text':\n      return h('span', props.content)\n  }\n}\n\u003C/script>\n",[295,11291,11292,11308,11329,11333,11342,11362,11371,11375,11379,11402,11417,11426,11459,11467,11502,11511,11532,11536,11540],{"__ignoreMap":16},[298,11293,11294,11296,11298,11300,11302,11304,11306],{"class":300,"line":301},[298,11295,1199],{"class":1596},[298,11297,1600],{"class":1599},[298,11299,1604],{"class":1603},[298,11301,1607],{"class":1603},[298,11303,1610],{"class":403},[298,11305,1613],{"class":308},[298,11307,1616],{"class":1596},[298,11309,11310,11312,11314,11316,11318,11320,11323,11325,11327],{"class":300,"line":179},[298,11311,956],{"class":393},[298,11313,959],{"class":403},[298,11315,5699],{"class":409},[298,11317,619],{"class":403},[298,11319,1630],{"class":393},[298,11321,11322],{"class":409}," VNode",[298,11324,965],{"class":403},[298,11326,968],{"class":393},[298,11328,8969],{"class":308},[298,11330,11331],{"class":300,"line":17},[298,11332,701],{"emptyLinePlaceholder":199},[298,11334,11335,11337,11340],{"class":300,"line":416},[298,11336,10578],{"class":985},[298,11338,11339],{"class":1186}," DynamicComponentProps",[298,11341,456],{"class":403},[298,11343,11344,11347,11349,11352,11354,11357,11359],{"class":300,"line":425},[298,11345,11346],{"class":1217},"  type",[298,11348,375],{"class":993},[298,11350,11351],{"class":308}," 'button'",[298,11353,3316],{"class":993},[298,11355,11356],{"class":308}," 'link'",[298,11358,3316],{"class":993},[298,11360,11361],{"class":308}," 'text'\n",[298,11363,11364,11367,11369],{"class":300,"line":433},[298,11365,11366],{"class":1217},"  content",[298,11368,375],{"class":993},[298,11370,10592],{"class":1223},[298,11372,11373],{"class":300,"line":439},[298,11374,2573],{"class":403},[298,11376,11377],{"class":300,"line":202},[298,11378,701],{"emptyLinePlaceholder":199},[298,11380,11381,11383,11386,11388,11390,11392,11394,11396,11398,11400],{"class":300,"line":450},[298,11382,8583],{"class":985},[298,11384,11385],{"class":304}," renderDynamic",[298,11387,1087],{"class":403},[298,11389,3559],{"class":1217},[298,11391,375],{"class":993},[298,11393,11339],{"class":1186},[298,11395,2086],{"class":403},[298,11397,375],{"class":993},[298,11399,11322],{"class":1186},[298,11401,456],{"class":403},[298,11403,11404,11407,11409,11411,11413,11415],{"class":300,"line":459},[298,11405,11406],{"class":393},"  switch",[298,11408,1426],{"class":403},[298,11410,3559],{"class":409},[298,11412,1000],{"class":403},[298,11414,1630],{"class":409},[298,11416,2530],{"class":403},[298,11418,11419,11422,11424],{"class":300,"line":467},[298,11420,11421],{"class":393},"    case",[298,11423,11351],{"class":308},[298,11425,7584],{"class":403},[298,11427,11428,11430,11433,11435,11438,11441,11444,11447,11450,11452,11454,11457],{"class":300,"line":473},[298,11429,3438],{"class":393},[298,11431,11432],{"class":304}," h",[298,11434,1087],{"class":403},[298,11436,11437],{"class":308},"'button'",[298,11439,11440],{"class":403},", { ",[298,11442,11443],{"class":409},"class:",[298,11445,11446],{"class":308}," 'btn'",[298,11448,11449],{"class":403}," }, ",[298,11451,3559],{"class":409},[298,11453,1000],{"class":403},[298,11455,11456],{"class":409},"content",[298,11458,3034],{"class":403},[298,11460,11461,11463,11465],{"class":300,"line":484},[298,11462,11421],{"class":393},[298,11464,11356],{"class":308},[298,11466,7584],{"class":403},[298,11468,11469,11471,11473,11475,11478,11480,11483,11486,11488,11490,11492,11494,11496,11498,11500],{"class":300,"line":495},[298,11470,3438],{"class":393},[298,11472,11432],{"class":304},[298,11474,1087],{"class":403},[298,11476,11477],{"class":308},"'a'",[298,11479,11440],{"class":403},[298,11481,11482],{"class":409},"href:",[298,11484,11485],{"class":308}," '#'",[298,11487,619],{"class":403},[298,11489,11443],{"class":409},[298,11491,11356],{"class":308},[298,11493,11449],{"class":403},[298,11495,3559],{"class":409},[298,11497,1000],{"class":403},[298,11499,11456],{"class":409},[298,11501,3034],{"class":403},[298,11503,11504,11506,11509],{"class":300,"line":506},[298,11505,11421],{"class":393},[298,11507,11508],{"class":308}," 'text'",[298,11510,7584],{"class":403},[298,11512,11513,11515,11517,11519,11522,11524,11526,11528,11530],{"class":300,"line":517},[298,11514,3438],{"class":393},[298,11516,11432],{"class":304},[298,11518,1087],{"class":403},[298,11520,11521],{"class":308},"'span'",[298,11523,619],{"class":403},[298,11525,3559],{"class":409},[298,11527,1000],{"class":403},[298,11529,11456],{"class":409},[298,11531,3034],{"class":403},[298,11533,11534],{"class":300,"line":526},[298,11535,737],{"class":403},[298,11537,11538],{"class":300,"line":532},[298,11539,2573],{"class":403},[298,11541,11542,11544,11546],{"class":300,"line":537},[298,11543,1899],{"class":1596},[298,11545,1600],{"class":1599},[298,11547,1616],{"class":1596},[4168,11549,11551],{"id":11550},"slot-patterns-for-maximum-flexibility","Slot Patterns for Maximum Flexibility",[289,11553,11555],{"className":1587,"code":11554,"language":1589,"meta":16,"style":16},"\u003C!-- FlexibleCard.vue -->\n\u003Cscript setup lang=\"ts\">\ninterface Props {\n  title?: string\n  variant?: 'default' | 'highlighted'\n}\n\nconst props = withDefaults(defineProps\u003CProps>(), {\n  variant: 'default'\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv :class=\"`card card--${variant}`\">\n    \u003C!-- Named slot with fallback -->\n    \u003Cheader v-if=\"$slots.header || title\" class=\"card__header\">\n      \u003Cslot name=\"header\">\n        \u003Ch2>{{ title }}\u003C/h2>\n      \u003C/slot>\n    \u003C/header>\n    \n    \u003C!-- Default slot -->\n    \u003Cdiv class=\"card__body\">\n      \u003Cslot>\n        \u003C!-- Fallback content -->\n        \u003Cp>No content provided\u003C/p>\n      \u003C/slot>\n    \u003C/div>\n    \n    \u003C!-- Scoped slot for passing data to parent -->\n    \u003Cfooter v-if=\"$slots.footer\" class=\"card__footer\">\n      \u003Cslot name=\"footer\" :variant=\"variant\" />\n    \u003C/footer>\n  \u003C/div>\n\u003C/template>\n",[295,11556,11557,11562,11578,11586,11594,11609,11613,11617,11637,11645,11649,11657,11661,11669,11699,11704,11740,11757,11777,11785,11793,11797,11802,11817,11825,11830,11847,11855,11863,11867,11872,11902,11933,11941,11949],{"__ignoreMap":16},[298,11558,11559],{"class":300,"line":301},[298,11560,11561],{"class":387},"\u003C!-- FlexibleCard.vue -->\n",[298,11563,11564,11566,11568,11570,11572,11574,11576],{"class":300,"line":179},[298,11565,1199],{"class":1596},[298,11567,1600],{"class":1599},[298,11569,1604],{"class":1603},[298,11571,1607],{"class":1603},[298,11573,1610],{"class":403},[298,11575,1613],{"class":308},[298,11577,1616],{"class":1596},[298,11579,11580,11582,11584],{"class":300,"line":17},[298,11581,10578],{"class":985},[298,11583,10581],{"class":1186},[298,11585,456],{"class":403},[298,11587,11588,11590,11592],{"class":300,"line":416},[298,11589,1264],{"class":1217},[298,11591,1300],{"class":993},[298,11593,10592],{"class":1223},[298,11595,11596,11599,11601,11604,11606],{"class":300,"line":425},[298,11597,11598],{"class":1217},"  variant",[298,11600,1300],{"class":993},[298,11602,11603],{"class":308}," 'default'",[298,11605,3316],{"class":993},[298,11607,11608],{"class":308}," 'highlighted'\n",[298,11610,11611],{"class":300,"line":433},[298,11612,2573],{"class":403},[298,11614,11615],{"class":300,"line":439},[298,11616,701],{"emptyLinePlaceholder":199},[298,11618,11619,11621,11623,11625,11627,11629,11631,11633,11635],{"class":300,"line":202},[298,11620,1650],{"class":985},[298,11622,3524],{"class":989},[298,11624,994],{"class":993},[298,11626,10734],{"class":304},[298,11628,1087],{"class":403},[298,11630,10086],{"class":304},[298,11632,1199],{"class":403},[298,11634,10743],{"class":1186},[298,11636,10746],{"class":403},[298,11638,11639,11642],{"class":300,"line":450},[298,11640,11641],{"class":409},"  variant:",[298,11643,11644],{"class":308}," 'default'\n",[298,11646,11647],{"class":300,"line":459},[298,11648,9387],{"class":403},[298,11650,11651,11653,11655],{"class":300,"line":467},[298,11652,1899],{"class":1596},[298,11654,1600],{"class":1599},[298,11656,1616],{"class":1596},[298,11658,11659],{"class":300,"line":473},[298,11660,701],{"emptyLinePlaceholder":199},[298,11662,11663,11665,11667],{"class":300,"line":484},[298,11664,1199],{"class":1596},[298,11666,1914],{"class":1599},[298,11668,1616],{"class":1596},[298,11670,11671,11673,11675,11677,11679,11681,11683,11686,11688,11691,11693,11695,11697],{"class":300,"line":495},[298,11672,1921],{"class":1596},[298,11674,2003],{"class":1599},[298,11676,2848],{"class":403},[298,11678,10010],{"class":1603},[298,11680,1610],{"class":403},[298,11682,2030],{"class":1732},[298,11684,11685],{"class":308},"`card card--",[298,11687,1453],{"class":1452},[298,11689,11690],{"class":409},"variant",[298,11692,1458],{"class":1452},[298,11694,1740],{"class":308},[298,11696,2030],{"class":1732},[298,11698,1616],{"class":1596},[298,11700,11701],{"class":300,"line":506},[298,11702,11703],{"class":387},"    \u003C!-- Named slot with fallback -->\n",[298,11705,11706,11708,11711,11713,11715,11717,11720,11722,11724,11726,11729,11731,11733,11735,11738],{"class":300,"line":517},[298,11707,1931],{"class":1596},[298,11709,11710],{"class":1599},"header",[298,11712,9625],{"class":393},[298,11714,1610],{"class":403},[298,11716,2030],{"class":1732},[298,11718,11719],{"class":409},"$slots",[298,11721,1000],{"class":403},[298,11723,11710],{"class":409},[298,11725,3484],{"class":993},[298,11727,11728],{"class":409}," title",[298,11730,2030],{"class":1732},[298,11732,1937],{"class":1603},[298,11734,1610],{"class":403},[298,11736,11737],{"class":308},"\"card__header\"",[298,11739,1616],{"class":1596},[298,11741,11742,11744,11747,11750,11752,11755],{"class":300,"line":526},[298,11743,1949],{"class":1596},[298,11745,11746],{"class":1599},"slot",[298,11748,11749],{"class":1603}," name",[298,11751,1610],{"class":403},[298,11753,11754],{"class":308},"\"header\"",[298,11756,1616],{"class":1596},[298,11758,11759,11761,11763,11765,11767,11769,11771,11773,11775],{"class":300,"line":532},[298,11760,2017],{"class":1596},[298,11762,37],{"class":1599},[298,11764,2203],{"class":1596},[298,11766,2206],{"class":403},[298,11768,2154],{"class":409},[298,11770,2215],{"class":403},[298,11772,1899],{"class":1596},[298,11774,37],{"class":1599},[298,11776,1616],{"class":1596},[298,11778,11779,11781,11783],{"class":300,"line":537},[298,11780,1982],{"class":1596},[298,11782,11746],{"class":1599},[298,11784,1616],{"class":1596},[298,11786,11787,11789,11791],{"class":300,"line":547},[298,11788,2285],{"class":1596},[298,11790,11710],{"class":1599},[298,11792,1616],{"class":1596},[298,11794,11795],{"class":300,"line":557},[298,11796,2838],{"class":403},[298,11798,11799],{"class":300,"line":567},[298,11800,11801],{"class":387},"    \u003C!-- Default slot -->\n",[298,11803,11804,11806,11808,11810,11812,11815],{"class":300,"line":577},[298,11805,1931],{"class":1596},[298,11807,2003],{"class":1599},[298,11809,1937],{"class":1603},[298,11811,1610],{"class":403},[298,11813,11814],{"class":308},"\"card__body\"",[298,11816,1616],{"class":1596},[298,11818,11819,11821,11823],{"class":300,"line":588},[298,11820,1949],{"class":1596},[298,11822,11746],{"class":1599},[298,11824,1616],{"class":1596},[298,11826,11827],{"class":300,"line":594},[298,11828,11829],{"class":387},"        \u003C!-- Fallback content -->\n",[298,11831,11832,11834,11836,11838,11841,11843,11845],{"class":300,"line":600},[298,11833,2017],{"class":1596},[298,11835,30],{"class":1599},[298,11837,2203],{"class":1596},[298,11839,11840],{"class":403},"No content provided",[298,11842,1899],{"class":1596},[298,11844,30],{"class":1599},[298,11846,1616],{"class":1596},[298,11848,11849,11851,11853],{"class":300,"line":610},[298,11850,1982],{"class":1596},[298,11852,11746],{"class":1599},[298,11854,1616],{"class":1596},[298,11856,11857,11859,11861],{"class":300,"line":625},[298,11858,2285],{"class":1596},[298,11860,2003],{"class":1599},[298,11862,1616],{"class":1596},[298,11864,11865],{"class":300,"line":637},[298,11866,2838],{"class":403},[298,11868,11869],{"class":300,"line":648},[298,11870,11871],{"class":387},"    \u003C!-- Scoped slot for passing data to parent -->\n",[298,11873,11874,11876,11879,11881,11883,11885,11887,11889,11891,11893,11895,11897,11900],{"class":300,"line":656},[298,11875,1931],{"class":1596},[298,11877,11878],{"class":1599},"footer",[298,11880,9625],{"class":393},[298,11882,1610],{"class":403},[298,11884,2030],{"class":1732},[298,11886,11719],{"class":409},[298,11888,1000],{"class":403},[298,11890,11878],{"class":409},[298,11892,2030],{"class":1732},[298,11894,1937],{"class":1603},[298,11896,1610],{"class":403},[298,11898,11899],{"class":308},"\"card__footer\"",[298,11901,1616],{"class":1596},[298,11903,11904,11906,11908,11910,11912,11915,11917,11919,11921,11923,11925,11927,11931],{"class":300,"line":666},[298,11905,1949],{"class":1596},[298,11907,11746],{"class":1599},[298,11909,11749],{"class":1603},[298,11911,1610],{"class":403},[298,11913,11914],{"class":308},"\"footer\"",[298,11916,2848],{"class":403},[298,11918,11690],{"class":1603},[298,11920,1610],{"class":403},[298,11922,2030],{"class":1732},[298,11924,11690],{"class":409},[298,11926,2030],{"class":1732},[298,11928,11930],{"class":11929},"sUwQ0"," /",[298,11932,1616],{"class":1596},[298,11934,11935,11937,11939],{"class":300,"line":677},[298,11936,2285],{"class":1596},[298,11938,11878],{"class":1599},[298,11940,1616],{"class":1596},[298,11942,11943,11945,11947],{"class":300,"line":686},[298,11944,2294],{"class":1596},[298,11946,2003],{"class":1599},[298,11948,1616],{"class":1596},[298,11950,11951,11953,11955],{"class":300,"line":692},[298,11952,1899],{"class":1596},[298,11954,1914],{"class":1599},[298,11956,1616],{"class":1596},[30,11958,11959],{},"Usage:",[289,11961,11963],{"className":1587,"code":11962,"language":1589,"meta":16,"style":16},"\u003CFlexibleCard variant=\"highlighted\">\n  \u003Ctemplate #header>\n    \u003Ch2>Custom Header\u003C/h2>\n  \u003C/template>\n  \n  \u003Cp>Card content goes here\u003C/p>\n  \n  \u003Ctemplate #footer=\"{ variant }\">\n    \u003Cbutton :class=\"`btn-${variant}`\">Action\u003C/button>\n  \u003C/template>\n\u003C/FlexibleCard>\n",[295,11964,11965,11982,11987,11992,11997,12001,12006,12010,12015,12020,12024],{"__ignoreMap":16},[298,11966,11967,11969,11972,11975,11977,11980],{"class":300,"line":301},[298,11968,1199],{"class":1596},[298,11970,11971],{"class":1599},"FlexibleCard",[298,11973,11974],{"class":1603}," variant",[298,11976,1610],{"class":403},[298,11978,11979],{"class":308},"\"highlighted\"",[298,11981,1616],{"class":1596},[298,11983,11984],{"class":300,"line":179},[298,11985,11986],{"class":403},"  \u003Ctemplate #header>\n",[298,11988,11989],{"class":300,"line":17},[298,11990,11991],{"class":403},"    \u003Ch2>Custom Header\u003C/h2>\n",[298,11993,11994],{"class":300,"line":416},[298,11995,11996],{"class":403},"  \u003C/template>\n",[298,11998,11999],{"class":300,"line":425},[298,12000,447],{"class":403},[298,12002,12003],{"class":300,"line":433},[298,12004,12005],{"class":403},"  \u003Cp>Card content goes here\u003C/p>\n",[298,12007,12008],{"class":300,"line":439},[298,12009,447],{"class":403},[298,12011,12012],{"class":300,"line":202},[298,12013,12014],{"class":403},"  \u003Ctemplate #footer=\"{ variant }\">\n",[298,12016,12017],{"class":300,"line":450},[298,12018,12019],{"class":403},"    \u003Cbutton :class=\"`btn-${variant}`\">Action\u003C/button>\n",[298,12021,12022],{"class":300,"line":459},[298,12023,11996],{"class":403},[298,12025,12026,12028,12030],{"class":300,"line":467},[298,12027,1899],{"class":1596},[298,12029,11971],{"class":1599},[298,12031,1616],{"class":1596},[4168,12033,12035],{"id":12034},"composable-patterns-for-complex-logic","Composable Patterns for Complex Logic",[289,12037,12039],{"className":378,"code":12038,"language":380,"meta":16,"style":16},"// composables/useForm.ts\nimport { reactive, computed } from 'vue'\n\ninterface ValidationRule\u003CT> {\n  validator: (value: T) => boolean\n  message: string\n}\n\nexport function useForm\u003CT extends Record\u003Cstring, any>>(\n  initialValues: T,\n  validationRules: Partial\u003CRecord\u003Ckeyof T, ValidationRule\u003Cany>[]>>\n) {\n  const values = reactive({ ...initialValues })\n  const errors = reactive\u003CPartial\u003CRecord\u003Ckeyof T, string>>>({})\n  const touched = reactive\u003CPartial\u003CRecord\u003Ckeyof T, boolean>>>({})\n  \n  function validate(field: keyof T): boolean {\n    const rules = validationRules[field]\n    if (!rules) return true\n    \n    for (const rule of rules) {\n      if (!rule.validator(values[field])) {\n        errors[field] = rule.message\n        return false\n      }\n    }\n    \n    delete errors[field]\n    return true\n  }\n  \n  function validateAll(): boolean {\n    let isValid = true\n    for (const field in validationRules) {\n      if (!validate(field as keyof T)) {\n        isValid = false\n      }\n    }\n    return isValid\n  }\n  \n  function handleBlur(field: keyof T) {\n    touched[field] = true\n    validate(field)\n  }\n  \n  function handleChange(field: keyof T, value: any) {\n    values[field] = value\n    if (touched[field]) {\n      validate(field)\n    }\n  }\n  \n  function reset() {\n    Object.assign(values, initialValues)\n    Object.keys(errors).forEach(key => delete errors[key as keyof T])\n    Object.keys(touched).forEach(key => delete touched[key as keyof T])\n  }\n  \n  const isValid = computed(() => Object.keys(errors).length === 0)\n  const isDirty = computed(() => \n    JSON.stringify(values) !== JSON.stringify(initialValues)\n  )\n  \n  return {\n    values,\n    errors,\n    touched,\n    isValid,\n    isDirty,\n    validate,\n    validateAll,\n    handleBlur,\n    handleChange,\n    reset\n  }\n}\n",[295,12040,12041,12046,12064,12068,12081,12104,12113,12117,12121,12152,12163,12197,12201,12221,12254,12285,12289,12317,12337,12356,12360,12379,12408,12429,12436,12440,12444,12448,12461,12467,12471,12475,12491,12503,12520,12544,12553,12557,12561,12568,12572,12576,12595,12610,12621,12625,12629,12657,12673,12689,12700,12704,12709,12714,12723,12744,12788,12827,12832,12837,12874,12892,12925,12931,12936,12943,12950,12958,12965,12973,12981,12988,12996,13004,13012,13018,13023],{"__ignoreMap":16},[298,12042,12043],{"class":300,"line":301},[298,12044,12045],{"class":387},"// composables/useForm.ts\n",[298,12047,12048,12050,12052,12054,12056,12058,12060,12062],{"class":300,"line":179},[298,12049,956],{"class":393},[298,12051,959],{"class":403},[298,12053,8253],{"class":409},[298,12055,619],{"class":403},[298,12057,8275],{"class":409},[298,12059,965],{"class":403},[298,12061,968],{"class":393},[298,12063,8969],{"class":308},[298,12065,12066],{"class":300,"line":17},[298,12067,701],{"emptyLinePlaceholder":199},[298,12069,12070,12072,12075,12077,12079],{"class":300,"line":416},[298,12071,10578],{"class":985},[298,12073,12074],{"class":1186}," ValidationRule",[298,12076,1199],{"class":403},[298,12078,10883],{"class":1186},[298,12080,10886],{"class":403},[298,12082,12083,12086,12088,12090,12092,12094,12097,12099,12101],{"class":300,"line":425},[298,12084,12085],{"class":304},"  validator",[298,12087,375],{"class":993},[298,12089,1426],{"class":403},[298,12091,1735],{"class":1217},[298,12093,375],{"class":993},[298,12095,12096],{"class":1186}," T",[298,12098,1436],{"class":403},[298,12100,1439],{"class":985},[298,12102,12103],{"class":1223}," boolean\n",[298,12105,12106,12109,12111],{"class":300,"line":433},[298,12107,12108],{"class":1217},"  message",[298,12110,375],{"class":993},[298,12112,10592],{"class":1223},[298,12114,12115],{"class":300,"line":439},[298,12116,2573],{"class":403},[298,12118,12119],{"class":300,"line":202},[298,12120,701],{"emptyLinePlaceholder":199},[298,12122,12123,12125,12127,12130,12132,12134,12137,12140,12142,12144,12146,12149],{"class":300,"line":450},[298,12124,394],{"class":393},[298,12126,8690],{"class":985},[298,12128,12129],{"class":304}," useForm",[298,12131,1199],{"class":403},[298,12133,10883],{"class":1186},[298,12135,12136],{"class":985}," extends",[298,12138,12139],{"class":1186}," Record",[298,12141,1199],{"class":403},[298,12143,1017],{"class":1223},[298,12145,619],{"class":403},[298,12147,12148],{"class":1223},"any",[298,12150,12151],{"class":403},">>(\n",[298,12153,12154,12157,12159,12161],{"class":300,"line":459},[298,12155,12156],{"class":1217},"  initialValues",[298,12158,375],{"class":993},[298,12160,12096],{"class":1186},[298,12162,422],{"class":403},[298,12164,12165,12168,12170,12173,12175,12178,12180,12183,12185,12187,12190,12192,12194],{"class":300,"line":467},[298,12166,12167],{"class":1217},"  validationRules",[298,12169,375],{"class":993},[298,12171,12172],{"class":1186}," Partial",[298,12174,1199],{"class":403},[298,12176,12177],{"class":1186},"Record",[298,12179,1199],{"class":403},[298,12181,12182],{"class":985},"keyof",[298,12184,12096],{"class":1186},[298,12186,619],{"class":403},[298,12188,12189],{"class":1186},"ValidationRule",[298,12191,1199],{"class":403},[298,12193,12148],{"class":1223},[298,12195,12196],{"class":403},">[]>>\n",[298,12198,12199],{"class":300,"line":473},[298,12200,2530],{"class":403},[298,12202,12203,12205,12208,12210,12212,12214,12216,12219],{"class":300,"line":484},[298,12204,3271],{"class":985},[298,12206,12207],{"class":989}," values",[298,12209,994],{"class":993},[298,12211,8394],{"class":304},[298,12213,2486],{"class":403},[298,12215,3814],{"class":993},[298,12217,12218],{"class":409},"initialValues",[298,12220,2494],{"class":403},[298,12222,12223,12225,12228,12230,12232,12234,12237,12239,12241,12243,12245,12247,12249,12251],{"class":300,"line":495},[298,12224,3271],{"class":985},[298,12226,12227],{"class":989}," errors",[298,12229,994],{"class":993},[298,12231,8394],{"class":304},[298,12233,1199],{"class":403},[298,12235,12236],{"class":1186},"Partial",[298,12238,1199],{"class":403},[298,12240,12177],{"class":1186},[298,12242,1199],{"class":403},[298,12244,12182],{"class":985},[298,12246,12096],{"class":1186},[298,12248,619],{"class":403},[298,12250,1017],{"class":1223},[298,12252,12253],{"class":403},">>>({})\n",[298,12255,12256,12258,12261,12263,12265,12267,12269,12271,12273,12275,12277,12279,12281,12283],{"class":300,"line":506},[298,12257,3271],{"class":985},[298,12259,12260],{"class":989}," touched",[298,12262,994],{"class":993},[298,12264,8394],{"class":304},[298,12266,1199],{"class":403},[298,12268,12236],{"class":1186},[298,12270,1199],{"class":403},[298,12272,12177],{"class":1186},[298,12274,1199],{"class":403},[298,12276,12182],{"class":985},[298,12278,12096],{"class":1186},[298,12280,619],{"class":403},[298,12282,1131],{"class":1223},[298,12284,12253],{"class":403},[298,12286,12287],{"class":300,"line":517},[298,12288,447],{"class":403},[298,12290,12291,12293,12296,12298,12301,12303,12306,12308,12310,12312,12315],{"class":300,"line":526},[298,12292,9292],{"class":985},[298,12294,12295],{"class":304}," validate",[298,12297,1087],{"class":403},[298,12299,12300],{"class":1217},"field",[298,12302,375],{"class":993},[298,12304,12305],{"class":985}," keyof",[298,12307,12096],{"class":1186},[298,12309,2086],{"class":403},[298,12311,375],{"class":993},[298,12313,12314],{"class":1223}," boolean",[298,12316,456],{"class":403},[298,12318,12319,12321,12324,12326,12329,12332,12334],{"class":300,"line":532},[298,12320,1759],{"class":985},[298,12322,12323],{"class":989}," rules",[298,12325,994],{"class":993},[298,12327,12328],{"class":409}," validationRules",[298,12330,12331],{"class":403},"[",[298,12333,12300],{"class":409},[298,12335,12336],{"class":403},"]\n",[298,12338,12339,12342,12344,12346,12349,12351,12354],{"class":300,"line":537},[298,12340,12341],{"class":393},"    if",[298,12343,1426],{"class":403},[298,12345,2521],{"class":993},[298,12347,12348],{"class":409},"rules",[298,12350,1436],{"class":403},[298,12352,12353],{"class":393},"return",[298,12355,9159],{"class":631},[298,12357,12358],{"class":300,"line":547},[298,12359,2838],{"class":403},[298,12361,12362,12365,12367,12369,12372,12375,12377],{"class":300,"line":557},[298,12363,12364],{"class":393},"    for",[298,12366,1426],{"class":403},[298,12368,1650],{"class":985},[298,12370,12371],{"class":989}," rule",[298,12373,12374],{"class":985}," of",[298,12376,12323],{"class":409},[298,12378,2530],{"class":403},[298,12380,12381,12384,12386,12388,12391,12393,12396,12398,12401,12403,12405],{"class":300,"line":567},[298,12382,12383],{"class":393},"      if",[298,12385,1426],{"class":403},[298,12387,2521],{"class":993},[298,12389,12390],{"class":409},"rule",[298,12392,1000],{"class":403},[298,12394,12395],{"class":304},"validator",[298,12397,1087],{"class":403},[298,12399,12400],{"class":409},"values",[298,12402,12331],{"class":403},[298,12404,12300],{"class":409},[298,12406,12407],{"class":403},"])) {\n",[298,12409,12410,12413,12415,12417,12420,12422,12424,12426],{"class":300,"line":577},[298,12411,12412],{"class":409},"        errors",[298,12414,12331],{"class":403},[298,12416,12300],{"class":409},[298,12418,12419],{"class":403},"] ",[298,12421,1610],{"class":993},[298,12423,12371],{"class":409},[298,12425,1000],{"class":403},[298,12427,12428],{"class":409},"message\n",[298,12430,12431,12434],{"class":300,"line":588},[298,12432,12433],{"class":393},"        return",[298,12435,9275],{"class":631},[298,12437,12438],{"class":300,"line":594},[298,12439,591],{"class":403},[298,12441,12442],{"class":300,"line":600},[298,12443,689],{"class":403},[298,12445,12446],{"class":300,"line":610},[298,12447,2838],{"class":403},[298,12449,12450,12453,12455,12457,12459],{"class":300,"line":625},[298,12451,12452],{"class":985},"    delete",[298,12454,12227],{"class":409},[298,12456,12331],{"class":403},[298,12458,12300],{"class":409},[298,12460,12336],{"class":403},[298,12462,12463,12465],{"class":300,"line":637},[298,12464,1782],{"class":393},[298,12466,9159],{"class":631},[298,12468,12469],{"class":300,"line":648},[298,12470,737],{"class":403},[298,12472,12473],{"class":300,"line":656},[298,12474,447],{"class":403},[298,12476,12477,12479,12482,12485,12487,12489],{"class":300,"line":666},[298,12478,9292],{"class":985},[298,12480,12481],{"class":304}," validateAll",[298,12483,12484],{"class":403},"()",[298,12486,375],{"class":993},[298,12488,12314],{"class":1223},[298,12490,456],{"class":403},[298,12492,12493,12496,12499,12501],{"class":300,"line":677},[298,12494,12495],{"class":985},"    let",[298,12497,12498],{"class":409}," isValid",[298,12500,994],{"class":993},[298,12502,9159],{"class":631},[298,12504,12505,12507,12509,12511,12514,12516,12518],{"class":300,"line":686},[298,12506,12364],{"class":393},[298,12508,1426],{"class":403},[298,12510,1650],{"class":985},[298,12512,12513],{"class":989}," field",[298,12515,2035],{"class":985},[298,12517,12328],{"class":409},[298,12519,2530],{"class":403},[298,12521,12522,12524,12526,12528,12531,12533,12535,12537,12539,12541],{"class":300,"line":692},[298,12523,12383],{"class":393},[298,12525,1426],{"class":403},[298,12527,2521],{"class":993},[298,12529,12530],{"class":304},"validate",[298,12532,1087],{"class":403},[298,12534,12300],{"class":409},[298,12536,2977],{"class":393},[298,12538,12305],{"class":985},[298,12540,12096],{"class":1186},[298,12542,12543],{"class":403},")) {\n",[298,12545,12546,12549,12551],{"class":300,"line":698},[298,12547,12548],{"class":409},"        isValid",[298,12550,994],{"class":993},[298,12552,9275],{"class":631},[298,12554,12555],{"class":300,"line":704},[298,12556,591],{"class":403},[298,12558,12559],{"class":300,"line":712},[298,12560,689],{"class":403},[298,12562,12563,12565],{"class":300,"line":720},[298,12564,1782],{"class":393},[298,12566,12567],{"class":409}," isValid\n",[298,12569,12570],{"class":300,"line":729},[298,12571,737],{"class":403},[298,12573,12574],{"class":300,"line":734},[298,12575,447],{"class":403},[298,12577,12578,12580,12583,12585,12587,12589,12591,12593],{"class":300,"line":740},[298,12579,9292],{"class":985},[298,12581,12582],{"class":304}," handleBlur",[298,12584,1087],{"class":403},[298,12586,12300],{"class":1217},[298,12588,375],{"class":993},[298,12590,12305],{"class":985},[298,12592,12096],{"class":1186},[298,12594,2530],{"class":403},[298,12596,12597,12600,12602,12604,12606,12608],{"class":300,"line":1470},[298,12598,12599],{"class":409},"    touched",[298,12601,12331],{"class":403},[298,12603,12300],{"class":409},[298,12605,12419],{"class":403},[298,12607,1610],{"class":993},[298,12609,9159],{"class":631},[298,12611,12612,12615,12617,12619],{"class":300,"line":1475},[298,12613,12614],{"class":304},"    validate",[298,12616,1087],{"class":403},[298,12618,12300],{"class":409},[298,12620,3034],{"class":403},[298,12622,12623],{"class":300,"line":1501},[298,12624,737],{"class":403},[298,12626,12627],{"class":300,"line":1519},[298,12628,447],{"class":403},[298,12630,12631,12633,12636,12638,12640,12642,12644,12646,12648,12650,12652,12655],{"class":300,"line":1524},[298,12632,9292],{"class":985},[298,12634,12635],{"class":304}," handleChange",[298,12637,1087],{"class":403},[298,12639,12300],{"class":1217},[298,12641,375],{"class":993},[298,12643,12305],{"class":985},[298,12645,12096],{"class":1186},[298,12647,619],{"class":403},[298,12649,1735],{"class":1217},[298,12651,375],{"class":993},[298,12653,12654],{"class":1223}," any",[298,12656,2530],{"class":403},[298,12658,12659,12662,12664,12666,12668,12670],{"class":300,"line":1529},[298,12660,12661],{"class":409},"    values",[298,12663,12331],{"class":403},[298,12665,12300],{"class":409},[298,12667,12419],{"class":403},[298,12669,1610],{"class":993},[298,12671,12672],{"class":409}," value\n",[298,12674,12675,12677,12679,12682,12684,12686],{"class":300,"line":1555},[298,12676,12341],{"class":393},[298,12678,1426],{"class":403},[298,12680,12681],{"class":409},"touched",[298,12683,12331],{"class":403},[298,12685,12300],{"class":409},[298,12687,12688],{"class":403},"]) {\n",[298,12690,12691,12694,12696,12698],{"class":300,"line":1573},[298,12692,12693],{"class":304},"      validate",[298,12695,1087],{"class":403},[298,12697,12300],{"class":409},[298,12699,3034],{"class":403},[298,12701,12702],{"class":300,"line":2301},[298,12703,689],{"class":403},[298,12705,12707],{"class":300,"line":12706},52,[298,12708,737],{"class":403},[298,12710,12712],{"class":300,"line":12711},53,[298,12713,447],{"class":403},[298,12715,12717,12719,12721],{"class":300,"line":12716},54,[298,12718,9292],{"class":985},[298,12720,6802],{"class":304},[298,12722,8589],{"class":403},[298,12724,12726,12729,12731,12734,12736,12738,12740,12742],{"class":300,"line":12725},55,[298,12727,12728],{"class":409},"    Object",[298,12730,1000],{"class":403},[298,12732,12733],{"class":304},"assign",[298,12735,1087],{"class":403},[298,12737,12400],{"class":409},[298,12739,619],{"class":403},[298,12741,12218],{"class":409},[298,12743,3034],{"class":403},[298,12745,12747,12749,12751,12754,12756,12759,12761,12764,12766,12768,12770,12773,12775,12777,12779,12781,12783,12785],{"class":300,"line":12746},56,[298,12748,12728],{"class":409},[298,12750,1000],{"class":403},[298,12752,12753],{"class":304},"keys",[298,12755,1087],{"class":403},[298,12757,12758],{"class":409},"errors",[298,12760,1793],{"class":403},[298,12762,12763],{"class":304},"forEach",[298,12765,1087],{"class":403},[298,12767,2048],{"class":1217},[298,12769,1874],{"class":985},[298,12771,12772],{"class":985}," delete",[298,12774,12227],{"class":409},[298,12776,12331],{"class":403},[298,12778,2048],{"class":409},[298,12780,2977],{"class":393},[298,12782,12305],{"class":985},[298,12784,12096],{"class":1186},[298,12786,12787],{"class":403},"])\n",[298,12789,12791,12793,12795,12797,12799,12801,12803,12805,12807,12809,12811,12813,12815,12817,12819,12821,12823,12825],{"class":300,"line":12790},57,[298,12792,12728],{"class":409},[298,12794,1000],{"class":403},[298,12796,12753],{"class":304},[298,12798,1087],{"class":403},[298,12800,12681],{"class":409},[298,12802,1793],{"class":403},[298,12804,12763],{"class":304},[298,12806,1087],{"class":403},[298,12808,2048],{"class":1217},[298,12810,1874],{"class":985},[298,12812,12772],{"class":985},[298,12814,12260],{"class":409},[298,12816,12331],{"class":403},[298,12818,2048],{"class":409},[298,12820,2977],{"class":393},[298,12822,12305],{"class":985},[298,12824,12096],{"class":1186},[298,12826,12787],{"class":403},[298,12828,12830],{"class":300,"line":12829},58,[298,12831,737],{"class":403},[298,12833,12835],{"class":300,"line":12834},59,[298,12836,447],{"class":403},[298,12838,12840,12842,12844,12846,12848,12850,12852,12855,12857,12859,12861,12863,12865,12868,12870,12872],{"class":300,"line":12839},60,[298,12841,3271],{"class":985},[298,12843,12498],{"class":989},[298,12845,994],{"class":993},[298,12847,1843],{"class":304},[298,12849,1846],{"class":403},[298,12851,1439],{"class":985},[298,12853,12854],{"class":409}," Object",[298,12856,1000],{"class":403},[298,12858,12753],{"class":304},[298,12860,1087],{"class":403},[298,12862,12758],{"class":409},[298,12864,1793],{"class":403},[298,12866,12867],{"class":4821},"length",[298,12869,3784],{"class":993},[298,12871,8703],{"class":2549},[298,12873,3034],{"class":403},[298,12875,12877,12879,12882,12884,12886,12888,12890],{"class":300,"line":12876},61,[298,12878,3271],{"class":985},[298,12880,12881],{"class":989}," isDirty",[298,12883,994],{"class":993},[298,12885,1843],{"class":304},[298,12887,1846],{"class":403},[298,12889,1439],{"class":985},[298,12891,1851],{"class":403},[298,12893,12895,12898,12900,12903,12905,12907,12909,12912,12915,12917,12919,12921,12923],{"class":300,"line":12894},62,[298,12896,12897],{"class":989},"    JSON",[298,12899,1000],{"class":403},[298,12901,12902],{"class":304},"stringify",[298,12904,1087],{"class":403},[298,12906,12400],{"class":409},[298,12908,1436],{"class":403},[298,12910,12911],{"class":993},"!==",[298,12913,12914],{"class":989}," JSON",[298,12916,1000],{"class":403},[298,12918,12902],{"class":304},[298,12920,1087],{"class":403},[298,12922,12218],{"class":409},[298,12924,3034],{"class":403},[298,12926,12928],{"class":300,"line":12927},63,[298,12929,12930],{"class":403},"  )\n",[298,12932,12934],{"class":300,"line":12933},64,[298,12935,447],{"class":403},[298,12937,12939,12941],{"class":300,"line":12938},65,[298,12940,1446],{"class":393},[298,12942,456],{"class":403},[298,12944,12946,12948],{"class":300,"line":12945},66,[298,12947,12661],{"class":409},[298,12949,422],{"class":403},[298,12951,12953,12956],{"class":300,"line":12952},67,[298,12954,12955],{"class":409},"    errors",[298,12957,422],{"class":403},[298,12959,12961,12963],{"class":300,"line":12960},68,[298,12962,12599],{"class":409},[298,12964,422],{"class":403},[298,12966,12968,12971],{"class":300,"line":12967},69,[298,12969,12970],{"class":409},"    isValid",[298,12972,422],{"class":403},[298,12974,12976,12979],{"class":300,"line":12975},70,[298,12977,12978],{"class":409},"    isDirty",[298,12980,422],{"class":403},[298,12982,12984,12986],{"class":300,"line":12983},71,[298,12985,12614],{"class":409},[298,12987,422],{"class":403},[298,12989,12991,12994],{"class":300,"line":12990},72,[298,12992,12993],{"class":409},"    validateAll",[298,12995,422],{"class":403},[298,12997,12999,13002],{"class":300,"line":12998},73,[298,13000,13001],{"class":409},"    handleBlur",[298,13003,422],{"class":403},[298,13005,13007,13010],{"class":300,"line":13006},74,[298,13008,13009],{"class":409},"    handleChange",[298,13011,422],{"class":403},[298,13013,13015],{"class":300,"line":13014},75,[298,13016,13017],{"class":409},"    reset\n",[298,13019,13021],{"class":300,"line":13020},76,[298,13022,737],{"class":403},[298,13024,13026],{"class":300,"line":13025},77,[298,13027,2573],{"class":403},[30,13029,13030],{},"Usage in component:",[289,13032,13034],{"className":1587,"code":13033,"language":1589,"meta":16,"style":16},"\u003Cscript setup lang=\"ts\">\nimport { useForm } from '@/composables/useForm'\n\ninterface LoginForm {\n  email: string\n  password: string\n}\n\nconst { values, errors, touched, isValid, handleChange, handleBlur, validateAll } = useForm\u003CLoginForm>(\n  {\n    email: '',\n    password: ''\n  },\n  {\n    email: [\n      {\n        validator: (v) => !!v,\n        message: 'Email is required'\n      },\n      {\n        validator: (v) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(v),\n        message: 'Invalid email format'\n      }\n    ],\n    password: [\n      {\n        validator: (v) => v.length >= 8,\n        message: 'Password must be at least 8 characters'\n      }\n    ]\n  }\n)\n\nasync function handleSubmit() {\n  if (!validateAll()) return\n  \n  // Submit form\n  console.log('Submitting:', values)\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cform @submit.prevent=\"handleSubmit\">\n    \u003Cdiv>\n      \u003Cinput\n        :value=\"values.email\"\n        @input=\"handleChange('email', ($event.target as HTMLInputElement).value)\"\n        @blur=\"handleBlur('email')\"\n        type=\"email\"\n        placeholder=\"Email\"\n      />\n      \u003Cspan v-if=\"touched.email && errors.email\" class=\"error\">\n        {{ errors.email }}\n      \u003C/span>\n    \u003C/div>\n    \n    \u003Cdiv>\n      \u003Cinput\n        :value=\"values.password\"\n        @input=\"handleChange('password', ($event.target as HTMLInputElement).value)\"\n        @blur=\"handleBlur('password')\"\n        type=\"password\"\n        placeholder=\"Password\"\n      />\n      \u003Cspan v-if=\"touched.password && errors.password\" class=\"error\">\n        {{ errors.password }}\n      \u003C/span>\n    \u003C/div>\n    \n    \u003Cbutton type=\"submit\" :disabled=\"!isValid\">Login\u003C/button>\n  \u003C/form>\n\u003C/template>\n",[295,13035,13036,13052,13068,13072,13081,13090,13099,13103,13107,13156,13161,13171,13179,13183,13187,13193,13197,13219,13227,13231,13235,13316,13323,13327,13331,13337,13341,13370,13377,13381,13386,13390,13394,13398,13409,13426,13430,13435,13454,13458,13466,13470,13478,13506,13514,13521,13541,13582,13603,13613,13623,13628,13666,13678,13686,13694,13698,13706,13712,13731,13768,13788,13797,13806,13810,13846,13858,13866,13874,13878,13916,13924],{"__ignoreMap":16},[298,13037,13038,13040,13042,13044,13046,13048,13050],{"class":300,"line":301},[298,13039,1199],{"class":1596},[298,13041,1600],{"class":1599},[298,13043,1604],{"class":1603},[298,13045,1607],{"class":1603},[298,13047,1610],{"class":403},[298,13049,1613],{"class":308},[298,13051,1616],{"class":1596},[298,13053,13054,13056,13058,13061,13063,13065],{"class":300,"line":179},[298,13055,956],{"class":393},[298,13057,959],{"class":403},[298,13059,13060],{"class":409},"useForm",[298,13062,965],{"class":403},[298,13064,968],{"class":393},[298,13066,13067],{"class":308}," '@/composables/useForm'\n",[298,13069,13070],{"class":300,"line":17},[298,13071,701],{"emptyLinePlaceholder":199},[298,13073,13074,13076,13079],{"class":300,"line":416},[298,13075,10578],{"class":985},[298,13077,13078],{"class":1186}," LoginForm",[298,13080,456],{"class":403},[298,13082,13083,13086,13088],{"class":300,"line":425},[298,13084,13085],{"class":1217},"  email",[298,13087,375],{"class":993},[298,13089,10592],{"class":1223},[298,13091,13092,13095,13097],{"class":300,"line":433},[298,13093,13094],{"class":1217},"  password",[298,13096,375],{"class":993},[298,13098,10592],{"class":1223},[298,13100,13101],{"class":300,"line":439},[298,13102,2573],{"class":403},[298,13104,13105],{"class":300,"line":202},[298,13106,701],{"emptyLinePlaceholder":199},[298,13108,13109,13111,13113,13115,13117,13119,13121,13123,13125,13128,13130,13133,13135,13138,13140,13143,13145,13147,13149,13151,13154],{"class":300,"line":450},[298,13110,1650],{"class":985},[298,13112,959],{"class":403},[298,13114,12400],{"class":989},[298,13116,619],{"class":403},[298,13118,12758],{"class":989},[298,13120,619],{"class":403},[298,13122,12681],{"class":989},[298,13124,619],{"class":403},[298,13126,13127],{"class":989},"isValid",[298,13129,619],{"class":403},[298,13131,13132],{"class":989},"handleChange",[298,13134,619],{"class":403},[298,13136,13137],{"class":989},"handleBlur",[298,13139,619],{"class":403},[298,13141,13142],{"class":989},"validateAll",[298,13144,965],{"class":403},[298,13146,1610],{"class":993},[298,13148,12129],{"class":304},[298,13150,1199],{"class":403},[298,13152,13153],{"class":1186},"LoginForm",[298,13155,3322],{"class":403},[298,13157,13158],{"class":300,"line":459},[298,13159,13160],{"class":403},"  {\n",[298,13162,13163,13166,13169],{"class":300,"line":467},[298,13164,13165],{"class":409},"    email:",[298,13167,13168],{"class":308}," ''",[298,13170,422],{"class":403},[298,13172,13173,13176],{"class":300,"line":473},[298,13174,13175],{"class":409},"    password:",[298,13177,13178],{"class":308}," ''\n",[298,13180,13181],{"class":300,"line":484},[298,13182,695],{"class":403},[298,13184,13185],{"class":300,"line":495},[298,13186,13160],{"class":403},[298,13188,13189,13191],{"class":300,"line":506},[298,13190,13165],{"class":409},[298,13192,413],{"class":403},[298,13194,13195],{"class":300,"line":517},[298,13196,470],{"class":403},[298,13198,13199,13202,13204,13206,13209,13211,13213,13215,13217],{"class":300,"line":526},[298,13200,13201],{"class":304},"        validator",[298,13203,375],{"class":409},[298,13205,1426],{"class":403},[298,13207,13208],{"class":1217},"v",[298,13210,1436],{"class":403},[298,13212,1439],{"class":985},[298,13214,9075],{"class":993},[298,13216,13208],{"class":409},[298,13218,422],{"class":403},[298,13220,13221,13224],{"class":300,"line":532},[298,13222,13223],{"class":409},"        message:",[298,13225,13226],{"class":308}," 'Email is required'\n",[298,13228,13229],{"class":300,"line":537},[298,13230,529],{"class":403},[298,13232,13233],{"class":300,"line":547},[298,13234,470],{"class":403},[298,13236,13237,13239,13241,13243,13245,13247,13249,13252,13256,13258,13261,13265,13268,13272,13275,13277,13279,13281,13283,13285,13289,13291,13293,13295,13297,13299,13302,13305,13307,13310,13312,13314],{"class":300,"line":557},[298,13238,13201],{"class":304},[298,13240,375],{"class":409},[298,13242,1426],{"class":403},[298,13244,13208],{"class":1217},[298,13246,1436],{"class":403},[298,13248,1439],{"class":985},[298,13250,11930],{"class":13251},"s4XyT",[298,13253,13255],{"class":13254},"s2gen","^",[298,13257,12331],{"class":4050},[298,13259,13255],{"class":13260},"smwCX",[298,13262,13264],{"class":13263},"suOk-","\\s@",[298,13266,13267],{"class":4050},"]",[298,13269,13271],{"class":13270},"sR-fR","+",[298,13273,13274],{"class":13251},"@",[298,13276,12331],{"class":4050},[298,13278,13255],{"class":13260},[298,13280,13264],{"class":13263},[298,13282,13267],{"class":4050},[298,13284,13271],{"class":13270},[298,13286,13288],{"class":13287},"sSxZ1","\\.",[298,13290,12331],{"class":4050},[298,13292,13255],{"class":13260},[298,13294,13264],{"class":13263},[298,13296,13267],{"class":4050},[298,13298,13271],{"class":13270},[298,13300,13301],{"class":13254},"$",[298,13303,13304],{"class":13251},"/",[298,13306,1000],{"class":403},[298,13308,13309],{"class":304},"test",[298,13311,1087],{"class":403},[298,13313,13208],{"class":409},[298,13315,3970],{"class":403},[298,13317,13318,13320],{"class":300,"line":567},[298,13319,13223],{"class":409},[298,13321,13322],{"class":308}," 'Invalid email format'\n",[298,13324,13325],{"class":300,"line":577},[298,13326,591],{"class":403},[298,13328,13329],{"class":300,"line":588},[298,13330,597],{"class":403},[298,13332,13333,13335],{"class":300,"line":594},[298,13334,13175],{"class":409},[298,13336,413],{"class":403},[298,13338,13339],{"class":300,"line":600},[298,13340,470],{"class":403},[298,13342,13343,13345,13347,13349,13351,13353,13355,13358,13360,13362,13365,13368],{"class":300,"line":610},[298,13344,13201],{"class":304},[298,13346,375],{"class":409},[298,13348,1426],{"class":403},[298,13350,13208],{"class":1217},[298,13352,1436],{"class":403},[298,13354,1439],{"class":985},[298,13356,13357],{"class":409}," v",[298,13359,1000],{"class":403},[298,13361,12867],{"class":4821},[298,13363,13364],{"class":993}," >=",[298,13366,13367],{"class":2549}," 8",[298,13369,422],{"class":403},[298,13371,13372,13374],{"class":300,"line":625},[298,13373,13223],{"class":409},[298,13375,13376],{"class":308}," 'Password must be at least 8 characters'\n",[298,13378,13379],{"class":300,"line":637},[298,13380,591],{"class":403},[298,13382,13383],{"class":300,"line":648},[298,13384,13385],{"class":403},"    ]\n",[298,13387,13388],{"class":300,"line":656},[298,13389,737],{"class":403},[298,13391,13392],{"class":300,"line":666},[298,13393,3034],{"class":403},[298,13395,13396],{"class":300,"line":677},[298,13397,701],{"emptyLinePlaceholder":199},[298,13399,13400,13402,13404,13407],{"class":300,"line":686},[298,13401,9531],{"class":985},[298,13403,8690],{"class":985},[298,13405,13406],{"class":304}," handleSubmit",[298,13408,8589],{"class":403},[298,13410,13411,13414,13416,13418,13420,13423],{"class":300,"line":692},[298,13412,13413],{"class":393},"  if",[298,13415,1426],{"class":403},[298,13417,2521],{"class":993},[298,13419,13142],{"class":304},[298,13421,13422],{"class":403},"()) ",[298,13424,13425],{"class":393},"return\n",[298,13427,13428],{"class":300,"line":698},[298,13429,447],{"class":403},[298,13431,13432],{"class":300,"line":704},[298,13433,13434],{"class":387},"  // Submit form\n",[298,13436,13437,13439,13441,13443,13445,13448,13450,13452],{"class":300,"line":712},[298,13438,8490],{"class":409},[298,13440,1000],{"class":403},[298,13442,8495],{"class":304},[298,13444,1087],{"class":403},[298,13446,13447],{"class":308},"'Submitting:'",[298,13449,619],{"class":403},[298,13451,12400],{"class":409},[298,13453,3034],{"class":403},[298,13455,13456],{"class":300,"line":720},[298,13457,2573],{"class":403},[298,13459,13460,13462,13464],{"class":300,"line":729},[298,13461,1899],{"class":1596},[298,13463,1600],{"class":1599},[298,13465,1616],{"class":1596},[298,13467,13468],{"class":300,"line":734},[298,13469,701],{"emptyLinePlaceholder":199},[298,13471,13472,13474,13476],{"class":300,"line":740},[298,13473,1199],{"class":1596},[298,13475,1914],{"class":1599},[298,13477,1616],{"class":1596},[298,13479,13480,13482,13485,13487,13490,13492,13495,13497,13499,13502,13504],{"class":300,"line":1470},[298,13481,1921],{"class":1596},[298,13483,13484],{"class":1599},"form",[298,13486,9667],{"class":403},[298,13488,13489],{"class":1603},"submit",[298,13491,1000],{"class":403},[298,13493,13494],{"class":1603},"prevent",[298,13496,1610],{"class":403},[298,13498,2030],{"class":1732},[298,13500,13501],{"class":409},"handleSubmit",[298,13503,2030],{"class":1732},[298,13505,1616],{"class":1596},[298,13507,13508,13510,13512],{"class":300,"line":1475},[298,13509,1931],{"class":1596},[298,13511,2003],{"class":1599},[298,13513,1616],{"class":1596},[298,13515,13516,13518],{"class":300,"line":1501},[298,13517,1949],{"class":1596},[298,13519,13520],{"class":1599},"input\n",[298,13522,13523,13526,13528,13530,13532,13534,13536,13539],{"class":300,"line":1519},[298,13524,13525],{"class":403},"        :",[298,13527,1735],{"class":1603},[298,13529,1610],{"class":403},[298,13531,2030],{"class":1732},[298,13533,12400],{"class":409},[298,13535,1000],{"class":403},[298,13537,13538],{"class":409},"email",[298,13540,2040],{"class":1732},[298,13542,13543,13546,13548,13550,13552,13554,13556,13559,13561,13564,13566,13569,13571,13574,13576,13578,13580],{"class":300,"line":1524},[298,13544,13545],{"class":403},"        @",[298,13547,7949],{"class":1603},[298,13549,1610],{"class":403},[298,13551,2030],{"class":1732},[298,13553,13132],{"class":304},[298,13555,1087],{"class":403},[298,13557,13558],{"class":308},"'email'",[298,13560,8471],{"class":403},[298,13562,13563],{"class":409},"$event",[298,13565,1000],{"class":403},[298,13567,13568],{"class":409},"target",[298,13570,2977],{"class":393},[298,13572,13573],{"class":1186}," HTMLInputElement",[298,13575,1793],{"class":403},[298,13577,1735],{"class":409},[298,13579,2086],{"class":403},[298,13581,2040],{"class":1732},[298,13583,13584,13586,13589,13591,13593,13595,13597,13599,13601],{"class":300,"line":1529},[298,13585,13545],{"class":403},[298,13587,13588],{"class":1603},"blur",[298,13590,1610],{"class":403},[298,13592,2030],{"class":1732},[298,13594,13137],{"class":304},[298,13596,1087],{"class":403},[298,13598,13558],{"class":308},[298,13600,2086],{"class":403},[298,13602,2040],{"class":1732},[298,13604,13605,13608,13610],{"class":300,"line":1555},[298,13606,13607],{"class":1603},"        type",[298,13609,1610],{"class":403},[298,13611,13612],{"class":308},"\"email\"\n",[298,13614,13615,13618,13620],{"class":300,"line":1573},[298,13616,13617],{"class":1603},"        placeholder",[298,13619,1610],{"class":403},[298,13621,13622],{"class":308},"\"Email\"\n",[298,13624,13625],{"class":300,"line":2301},[298,13626,13627],{"class":1596},"      />\n",[298,13629,13630,13632,13634,13636,13638,13640,13642,13644,13646,13649,13651,13653,13655,13657,13659,13661,13664],{"class":300,"line":12706},[298,13631,1949],{"class":1596},[298,13633,298],{"class":1599},[298,13635,9625],{"class":393},[298,13637,1610],{"class":403},[298,13639,2030],{"class":1732},[298,13641,12681],{"class":409},[298,13643,1000],{"class":403},[298,13645,13538],{"class":409},[298,13647,13648],{"class":993}," &&",[298,13650,12227],{"class":409},[298,13652,1000],{"class":403},[298,13654,13538],{"class":409},[298,13656,2030],{"class":1732},[298,13658,1937],{"class":1603},[298,13660,1610],{"class":403},[298,13662,13663],{"class":308},"\"error\"",[298,13665,1616],{"class":1596},[298,13667,13668,13670,13672,13674,13676],{"class":300,"line":12711},[298,13669,1966],{"class":403},[298,13671,12758],{"class":409},[298,13673,1000],{"class":403},[298,13675,13538],{"class":409},[298,13677,3169],{"class":403},[298,13679,13680,13682,13684],{"class":300,"line":12716},[298,13681,1982],{"class":1596},[298,13683,298],{"class":1599},[298,13685,1616],{"class":1596},[298,13687,13688,13690,13692],{"class":300,"line":12725},[298,13689,2285],{"class":1596},[298,13691,2003],{"class":1599},[298,13693,1616],{"class":1596},[298,13695,13696],{"class":300,"line":12746},[298,13697,2838],{"class":403},[298,13699,13700,13702,13704],{"class":300,"line":12790},[298,13701,1931],{"class":1596},[298,13703,2003],{"class":1599},[298,13705,1616],{"class":1596},[298,13707,13708,13710],{"class":300,"line":12829},[298,13709,1949],{"class":1596},[298,13711,13520],{"class":1599},[298,13713,13714,13716,13718,13720,13722,13724,13726,13729],{"class":300,"line":12834},[298,13715,13525],{"class":403},[298,13717,1735],{"class":1603},[298,13719,1610],{"class":403},[298,13721,2030],{"class":1732},[298,13723,12400],{"class":409},[298,13725,1000],{"class":403},[298,13727,13728],{"class":409},"password",[298,13730,2040],{"class":1732},[298,13732,13733,13735,13737,13739,13741,13743,13745,13748,13750,13752,13754,13756,13758,13760,13762,13764,13766],{"class":300,"line":12839},[298,13734,13545],{"class":403},[298,13736,7949],{"class":1603},[298,13738,1610],{"class":403},[298,13740,2030],{"class":1732},[298,13742,13132],{"class":304},[298,13744,1087],{"class":403},[298,13746,13747],{"class":308},"'password'",[298,13749,8471],{"class":403},[298,13751,13563],{"class":409},[298,13753,1000],{"class":403},[298,13755,13568],{"class":409},[298,13757,2977],{"class":393},[298,13759,13573],{"class":1186},[298,13761,1793],{"class":403},[298,13763,1735],{"class":409},[298,13765,2086],{"class":403},[298,13767,2040],{"class":1732},[298,13769,13770,13772,13774,13776,13778,13780,13782,13784,13786],{"class":300,"line":12876},[298,13771,13545],{"class":403},[298,13773,13588],{"class":1603},[298,13775,1610],{"class":403},[298,13777,2030],{"class":1732},[298,13779,13137],{"class":304},[298,13781,1087],{"class":403},[298,13783,13747],{"class":308},[298,13785,2086],{"class":403},[298,13787,2040],{"class":1732},[298,13789,13790,13792,13794],{"class":300,"line":12894},[298,13791,13607],{"class":1603},[298,13793,1610],{"class":403},[298,13795,13796],{"class":308},"\"password\"\n",[298,13798,13799,13801,13803],{"class":300,"line":12927},[298,13800,13617],{"class":1603},[298,13802,1610],{"class":403},[298,13804,13805],{"class":308},"\"Password\"\n",[298,13807,13808],{"class":300,"line":12933},[298,13809,13627],{"class":1596},[298,13811,13812,13814,13816,13818,13820,13822,13824,13826,13828,13830,13832,13834,13836,13838,13840,13842,13844],{"class":300,"line":12938},[298,13813,1949],{"class":1596},[298,13815,298],{"class":1599},[298,13817,9625],{"class":393},[298,13819,1610],{"class":403},[298,13821,2030],{"class":1732},[298,13823,12681],{"class":409},[298,13825,1000],{"class":403},[298,13827,13728],{"class":409},[298,13829,13648],{"class":993},[298,13831,12227],{"class":409},[298,13833,1000],{"class":403},[298,13835,13728],{"class":409},[298,13837,2030],{"class":1732},[298,13839,1937],{"class":1603},[298,13841,1610],{"class":403},[298,13843,13663],{"class":308},[298,13845,1616],{"class":1596},[298,13847,13848,13850,13852,13854,13856],{"class":300,"line":12945},[298,13849,1966],{"class":403},[298,13851,12758],{"class":409},[298,13853,1000],{"class":403},[298,13855,13728],{"class":409},[298,13857,3169],{"class":403},[298,13859,13860,13862,13864],{"class":300,"line":12952},[298,13861,1982],{"class":1596},[298,13863,298],{"class":1599},[298,13865,1616],{"class":1596},[298,13867,13868,13870,13872],{"class":300,"line":12960},[298,13869,2285],{"class":1596},[298,13871,2003],{"class":1599},[298,13873,1616],{"class":1596},[298,13875,13876],{"class":300,"line":12967},[298,13877,2838],{"class":403},[298,13879,13880,13882,13884,13886,13888,13891,13893,13896,13898,13900,13902,13904,13906,13908,13910,13912,13914],{"class":300,"line":12975},[298,13881,1931],{"class":1596},[298,13883,9664],{"class":1599},[298,13885,1183],{"class":1603},[298,13887,1610],{"class":403},[298,13889,13890],{"class":308},"\"submit\"",[298,13892,2848],{"class":403},[298,13894,13895],{"class":1603},"disabled",[298,13897,1610],{"class":403},[298,13899,2030],{"class":1732},[298,13901,2521],{"class":993},[298,13903,13127],{"class":409},[298,13905,2030],{"class":1732},[298,13907,2203],{"class":1596},[298,13909,9732],{"class":403},[298,13911,1899],{"class":1596},[298,13913,9664],{"class":1599},[298,13915,1616],{"class":1596},[298,13917,13918,13920,13922],{"class":300,"line":12983},[298,13919,2294],{"class":1596},[298,13921,13484],{"class":1599},[298,13923,1616],{"class":1596},[298,13925,13926,13928,13930],{"class":300,"line":12990},[298,13927,1899],{"class":1596},[298,13929,1914],{"class":1599},[298,13931,1616],{"class":1596},[37,13933,13935],{"id":13934},"_9-performance-optimization-patterns","9. Performance Optimization Patterns",[4168,13937,13939],{"id":13938},"lazy-loading-components","Lazy Loading Components",[289,13941,13943],{"className":1587,"code":13942,"language":1589,"meta":16,"style":16},"\u003Cscript setup lang=\"ts\">\nimport { defineAsyncComponent } from 'vue'\n\n// Lazy load heavy components\nconst HeavyChart = defineAsyncComponent(() =>\n  import('@/components/HeavyChart.vue')\n)\n\nconst AdminPanel = defineAsyncComponent({\n  loader: () => import('@/components/AdminPanel.vue'),\n  loadingComponent: LoadingSpinner,\n  errorComponent: ErrorDisplay,\n  delay: 200,\n  timeout: 3000\n})\n\u003C/script>\n",[295,13944,13945,13961,13975,13979,13984,13999,14011,14015,14019,14032,14052,14062,14072,14082,14090,14094],{"__ignoreMap":16},[298,13946,13947,13949,13951,13953,13955,13957,13959],{"class":300,"line":301},[298,13948,1199],{"class":1596},[298,13950,1600],{"class":1599},[298,13952,1604],{"class":1603},[298,13954,1607],{"class":1603},[298,13956,1610],{"class":403},[298,13958,1613],{"class":308},[298,13960,1616],{"class":1596},[298,13962,13963,13965,13967,13969,13971,13973],{"class":300,"line":179},[298,13964,956],{"class":393},[298,13966,959],{"class":403},[298,13968,10107],{"class":409},[298,13970,965],{"class":403},[298,13972,968],{"class":393},[298,13974,8969],{"class":308},[298,13976,13977],{"class":300,"line":17},[298,13978,701],{"emptyLinePlaceholder":199},[298,13980,13981],{"class":300,"line":416},[298,13982,13983],{"class":387},"// Lazy load heavy components\n",[298,13985,13986,13988,13991,13993,13995,13997],{"class":300,"line":425},[298,13987,1650],{"class":985},[298,13989,13990],{"class":989}," HeavyChart",[298,13992,994],{"class":993},[298,13994,10276],{"class":304},[298,13996,1846],{"class":403},[298,13998,2467],{"class":985},[298,14000,14001,14004,14006,14009],{"class":300,"line":433},[298,14002,14003],{"class":985},"  import",[298,14005,1087],{"class":403},[298,14007,14008],{"class":308},"'@/components/HeavyChart.vue'",[298,14010,3034],{"class":403},[298,14012,14013],{"class":300,"line":439},[298,14014,3034],{"class":403},[298,14016,14017],{"class":300,"line":202},[298,14018,701],{"emptyLinePlaceholder":199},[298,14020,14021,14023,14026,14028,14030],{"class":300,"line":450},[298,14022,1650],{"class":985},[298,14024,14025],{"class":989}," AdminPanel",[298,14027,994],{"class":993},[298,14029,10276],{"class":304},[298,14031,404],{"class":403},[298,14033,14034,14037,14039,14041,14043,14045,14047,14050],{"class":300,"line":459},[298,14035,14036],{"class":304},"  loader",[298,14038,375],{"class":409},[298,14040,1750],{"class":403},[298,14042,1439],{"class":985},[298,14044,10287],{"class":985},[298,14046,1087],{"class":403},[298,14048,14049],{"class":308},"'@/components/AdminPanel.vue'",[298,14051,3970],{"class":403},[298,14053,14054,14057,14060],{"class":300,"line":467},[298,14055,14056],{"class":409},"  loadingComponent:",[298,14058,14059],{"class":409}," LoadingSpinner",[298,14061,422],{"class":403},[298,14063,14064,14067,14070],{"class":300,"line":473},[298,14065,14066],{"class":409},"  errorComponent:",[298,14068,14069],{"class":409}," ErrorDisplay",[298,14071,422],{"class":403},[298,14073,14074,14077,14080],{"class":300,"line":484},[298,14075,14076],{"class":409},"  delay:",[298,14078,14079],{"class":2549}," 200",[298,14081,422],{"class":403},[298,14083,14084,14087],{"class":300,"line":495},[298,14085,14086],{"class":409},"  timeout:",[298,14088,14089],{"class":2549}," 3000\n",[298,14091,14092],{"class":300,"line":506},[298,14093,9387],{"class":403},[298,14095,14096,14098,14100],{"class":300,"line":517},[298,14097,1899],{"class":1596},[298,14099,1600],{"class":1599},[298,14101,1616],{"class":1596},[4168,14103,14105],{"id":14104},"virtual-scrolling-for-large-lists","Virtual Scrolling for Large Lists",[289,14107,14109],{"className":1587,"code":14108,"language":1589,"meta":16,"style":16},"\u003Cscript setup lang=\"ts\">\nimport { ref, computed } from 'vue'\n\nconst items = ref(Array.from({ length: 10000 }, (_, i) => `Item ${i}`))\nconst scrollTop = ref(0)\nconst containerHeight = 600\nconst itemHeight = 50\nconst visibleCount = Math.ceil(containerHeight / itemHeight)\nconst bufferCount = 3\n\nconst visibleItems = computed(() => {\n  const startIndex = Math.max(0, Math.floor(scrollTop.value / itemHeight) - bufferCount)\n  const endIndex = Math.min(\n    items.value.length,\n    startIndex + visibleCount + bufferCount * 2\n  )\n  \n  return items.value.slice(startIndex, endIndex).map((item, i) => ({\n    item,\n    index: startIndex + i\n  }))\n})\n\nconst totalHeight = computed(() => items.value.length * itemHeight)\nconst offsetY = computed(() => \n  Math.max(0, Math.floor(scrollTop.value / itemHeight) - bufferCount) * itemHeight\n)\n\nfunction handleScroll(e: Event) {\n  scrollTop.value = (e.target as HTMLElement).scrollTop\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv \n    class=\"virtual-scroll-container\"\n    :style=\"{ height: `${containerHeight}px`, overflow: 'auto' }\"\n    @scroll=\"handleScroll\"\n  >\n    \u003Cdiv :style=\"{ height: `${totalHeight}px`, position: 'relative' }\">\n      \u003Cdiv\n        v-for=\"{ item, index } in visibleItems\"\n        :key=\"index\"\n        :style=\"{\n          position: 'absolute',\n          top: `${index * itemHeight}px`,\n          height: `${itemHeight}px`,\n          width: '100%'\n        }\"\n      >\n        {{ item }}\n      \u003C/div>\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n",[295,14110,14111,14127,14145,14149,14206,14223,14235,14247,14275,14287,14291,14308,14359,14377,14392,14410,14414,14418,14464,14471,14483,14488,14492,14496,14527,14544,14591,14595,14599,14617,14646,14650,14658,14662,14670,14678,14688,14728,14744,14749,14792,14799,14825,14839,14851,14861,14882,14900,14908,14915,14920,14928,14936,14944,14952],{"__ignoreMap":16},[298,14112,14113,14115,14117,14119,14121,14123,14125],{"class":300,"line":301},[298,14114,1199],{"class":1596},[298,14116,1600],{"class":1599},[298,14118,1604],{"class":1603},[298,14120,1607],{"class":1603},[298,14122,1610],{"class":403},[298,14124,1613],{"class":308},[298,14126,1616],{"class":1596},[298,14128,14129,14131,14133,14135,14137,14139,14141,14143],{"class":300,"line":179},[298,14130,956],{"class":393},[298,14132,959],{"class":403},[298,14134,8249],{"class":409},[298,14136,619],{"class":403},[298,14138,8275],{"class":409},[298,14140,965],{"class":403},[298,14142,968],{"class":393},[298,14144,8969],{"class":308},[298,14146,14147],{"class":300,"line":17},[298,14148,701],{"emptyLinePlaceholder":199},[298,14150,14151,14153,14156,14158,14160,14162,14165,14167,14169,14171,14174,14177,14180,14183,14185,14188,14190,14192,14195,14197,14199,14201,14203],{"class":300,"line":416},[298,14152,1650],{"class":985},[298,14154,14155],{"class":989}," items",[298,14157,994],{"class":993},[298,14159,8375],{"class":304},[298,14161,1087],{"class":403},[298,14163,14164],{"class":409},"Array",[298,14166,1000],{"class":403},[298,14168,968],{"class":304},[298,14170,2486],{"class":403},[298,14172,14173],{"class":409},"length:",[298,14175,14176],{"class":2549}," 10000",[298,14178,14179],{"class":403}," }, (",[298,14181,14182],{"class":1217},"_",[298,14184,619],{"class":403},[298,14186,14187],{"class":1217},"i",[298,14189,1436],{"class":403},[298,14191,1439],{"class":985},[298,14193,14194],{"class":308}," `Item ",[298,14196,1453],{"class":1452},[298,14198,14187],{"class":409},[298,14200,1458],{"class":1452},[298,14202,1740],{"class":308},[298,14204,14205],{"class":403},"))\n",[298,14207,14208,14210,14213,14215,14217,14219,14221],{"class":300,"line":425},[298,14209,1650],{"class":985},[298,14211,14212],{"class":989}," scrollTop",[298,14214,994],{"class":993},[298,14216,8375],{"class":304},[298,14218,1087],{"class":403},[298,14220,8380],{"class":2549},[298,14222,3034],{"class":403},[298,14224,14225,14227,14230,14232],{"class":300,"line":433},[298,14226,1650],{"class":985},[298,14228,14229],{"class":989}," containerHeight",[298,14231,994],{"class":993},[298,14233,14234],{"class":2549}," 600\n",[298,14236,14237,14239,14242,14244],{"class":300,"line":439},[298,14238,1650],{"class":985},[298,14240,14241],{"class":989}," itemHeight",[298,14243,994],{"class":993},[298,14245,14246],{"class":2549}," 50\n",[298,14248,14249,14251,14254,14256,14259,14261,14264,14266,14269,14271,14273],{"class":300,"line":202},[298,14250,1650],{"class":985},[298,14252,14253],{"class":989}," visibleCount",[298,14255,994],{"class":993},[298,14257,14258],{"class":409}," Math",[298,14260,1000],{"class":403},[298,14262,14263],{"class":304},"ceil",[298,14265,1087],{"class":403},[298,14267,14268],{"class":409},"containerHeight",[298,14270,11930],{"class":993},[298,14272,14241],{"class":409},[298,14274,3034],{"class":403},[298,14276,14277,14279,14282,14284],{"class":300,"line":450},[298,14278,1650],{"class":985},[298,14280,14281],{"class":989}," bufferCount",[298,14283,994],{"class":993},[298,14285,14286],{"class":2549}," 3\n",[298,14288,14289],{"class":300,"line":459},[298,14290,701],{"emptyLinePlaceholder":199},[298,14292,14293,14295,14298,14300,14302,14304,14306],{"class":300,"line":467},[298,14294,1650],{"class":985},[298,14296,14297],{"class":989}," visibleItems",[298,14299,994],{"class":993},[298,14301,1843],{"class":304},[298,14303,1846],{"class":403},[298,14305,1439],{"class":985},[298,14307,456],{"class":403},[298,14309,14310,14312,14315,14317,14319,14321,14324,14326,14328,14330,14333,14335,14338,14340,14343,14345,14347,14349,14351,14353,14355,14357],{"class":300,"line":473},[298,14311,3271],{"class":985},[298,14313,14314],{"class":989}," startIndex",[298,14316,994],{"class":993},[298,14318,14258],{"class":409},[298,14320,1000],{"class":403},[298,14322,14323],{"class":304},"max",[298,14325,1087],{"class":403},[298,14327,8380],{"class":2549},[298,14329,619],{"class":403},[298,14331,14332],{"class":409},"Math",[298,14334,1000],{"class":403},[298,14336,14337],{"class":304},"floor",[298,14339,1087],{"class":403},[298,14341,14342],{"class":409},"scrollTop",[298,14344,1000],{"class":403},[298,14346,1735],{"class":409},[298,14348,11930],{"class":993},[298,14350,14241],{"class":409},[298,14352,1436],{"class":403},[298,14354,3340],{"class":993},[298,14356,14281],{"class":409},[298,14358,3034],{"class":403},[298,14360,14361,14363,14366,14368,14370,14372,14375],{"class":300,"line":484},[298,14362,3271],{"class":985},[298,14364,14365],{"class":989}," endIndex",[298,14367,994],{"class":993},[298,14369,14258],{"class":409},[298,14371,1000],{"class":403},[298,14373,14374],{"class":304},"min",[298,14376,4248],{"class":403},[298,14378,14379,14382,14384,14386,14388,14390],{"class":300,"line":495},[298,14380,14381],{"class":409},"    items",[298,14383,1000],{"class":403},[298,14385,1735],{"class":409},[298,14387,1000],{"class":403},[298,14389,12867],{"class":4821},[298,14391,422],{"class":403},[298,14393,14394,14397,14399,14401,14403,14405,14407],{"class":300,"line":506},[298,14395,14396],{"class":409},"    startIndex",[298,14398,10816],{"class":993},[298,14400,14253],{"class":409},[298,14402,10816],{"class":993},[298,14404,14281],{"class":409},[298,14406,8445],{"class":993},[298,14408,14409],{"class":2549}," 2\n",[298,14411,14412],{"class":300,"line":517},[298,14413,12930],{"class":403},[298,14415,14416],{"class":300,"line":526},[298,14417,447],{"class":403},[298,14419,14420,14422,14424,14426,14428,14430,14433,14435,14438,14440,14443,14445,14448,14451,14454,14456,14458,14460,14462],{"class":300,"line":532},[298,14421,1446],{"class":393},[298,14423,14155],{"class":409},[298,14425,1000],{"class":403},[298,14427,1735],{"class":409},[298,14429,1000],{"class":403},[298,14431,14432],{"class":304},"slice",[298,14434,1087],{"class":403},[298,14436,14437],{"class":409},"startIndex",[298,14439,619],{"class":403},[298,14441,14442],{"class":409},"endIndex",[298,14444,1793],{"class":403},[298,14446,14447],{"class":304},"map",[298,14449,14450],{"class":403},"((",[298,14452,14453],{"class":1217},"item",[298,14455,619],{"class":403},[298,14457,14187],{"class":1217},[298,14459,1436],{"class":403},[298,14461,1439],{"class":985},[298,14463,3738],{"class":403},[298,14465,14466,14469],{"class":300,"line":537},[298,14467,14468],{"class":409},"    item",[298,14470,422],{"class":403},[298,14472,14473,14476,14478,14480],{"class":300,"line":547},[298,14474,14475],{"class":409},"    index:",[298,14477,14314],{"class":409},[298,14479,10816],{"class":993},[298,14481,14482],{"class":409}," i\n",[298,14484,14485],{"class":300,"line":557},[298,14486,14487],{"class":403},"  }))\n",[298,14489,14490],{"class":300,"line":567},[298,14491,9387],{"class":403},[298,14493,14494],{"class":300,"line":577},[298,14495,701],{"emptyLinePlaceholder":199},[298,14497,14498,14500,14503,14505,14507,14509,14511,14513,14515,14517,14519,14521,14523,14525],{"class":300,"line":588},[298,14499,1650],{"class":985},[298,14501,14502],{"class":989}," totalHeight",[298,14504,994],{"class":993},[298,14506,1843],{"class":304},[298,14508,1846],{"class":403},[298,14510,1439],{"class":985},[298,14512,14155],{"class":409},[298,14514,1000],{"class":403},[298,14516,1735],{"class":409},[298,14518,1000],{"class":403},[298,14520,12867],{"class":4821},[298,14522,8445],{"class":993},[298,14524,14241],{"class":409},[298,14526,3034],{"class":403},[298,14528,14529,14531,14534,14536,14538,14540,14542],{"class":300,"line":594},[298,14530,1650],{"class":985},[298,14532,14533],{"class":989}," offsetY",[298,14535,994],{"class":993},[298,14537,1843],{"class":304},[298,14539,1846],{"class":403},[298,14541,1439],{"class":985},[298,14543,1851],{"class":403},[298,14545,14546,14549,14551,14553,14555,14557,14559,14561,14563,14565,14567,14569,14571,14573,14575,14577,14579,14581,14583,14585,14588],{"class":300,"line":600},[298,14547,14548],{"class":409},"  Math",[298,14550,1000],{"class":403},[298,14552,14323],{"class":304},[298,14554,1087],{"class":403},[298,14556,8380],{"class":2549},[298,14558,619],{"class":403},[298,14560,14332],{"class":409},[298,14562,1000],{"class":403},[298,14564,14337],{"class":304},[298,14566,1087],{"class":403},[298,14568,14342],{"class":409},[298,14570,1000],{"class":403},[298,14572,1735],{"class":409},[298,14574,11930],{"class":993},[298,14576,14241],{"class":409},[298,14578,1436],{"class":403},[298,14580,3340],{"class":993},[298,14582,14281],{"class":409},[298,14584,1436],{"class":403},[298,14586,14587],{"class":993},"*",[298,14589,14590],{"class":409}," itemHeight\n",[298,14592,14593],{"class":300,"line":610},[298,14594,3034],{"class":403},[298,14596,14597],{"class":300,"line":625},[298,14598,701],{"emptyLinePlaceholder":199},[298,14600,14601,14603,14606,14608,14610,14612,14615],{"class":300,"line":637},[298,14602,8583],{"class":985},[298,14604,14605],{"class":304}," handleScroll",[298,14607,1087],{"class":403},[298,14609,10668],{"class":1217},[298,14611,375],{"class":993},[298,14613,14614],{"class":1186}," Event",[298,14616,2530],{"class":403},[298,14618,14619,14622,14624,14626,14628,14630,14632,14634,14636,14638,14641,14643],{"class":300,"line":648},[298,14620,14621],{"class":409},"  scrollTop",[298,14623,1000],{"class":403},[298,14625,1735],{"class":409},[298,14627,994],{"class":993},[298,14629,1426],{"class":403},[298,14631,10668],{"class":409},[298,14633,1000],{"class":403},[298,14635,13568],{"class":409},[298,14637,2977],{"class":393},[298,14639,14640],{"class":1186}," HTMLElement",[298,14642,1793],{"class":403},[298,14644,14645],{"class":409},"scrollTop\n",[298,14647,14648],{"class":300,"line":656},[298,14649,2573],{"class":403},[298,14651,14652,14654,14656],{"class":300,"line":666},[298,14653,1899],{"class":1596},[298,14655,1600],{"class":1599},[298,14657,1616],{"class":1596},[298,14659,14660],{"class":300,"line":677},[298,14661,701],{"emptyLinePlaceholder":199},[298,14663,14664,14666,14668],{"class":300,"line":686},[298,14665,1199],{"class":1596},[298,14667,1914],{"class":1599},[298,14669,1616],{"class":1596},[298,14671,14672,14674,14676],{"class":300,"line":692},[298,14673,1921],{"class":1596},[298,14675,2003],{"class":1599},[298,14677,1851],{"class":403},[298,14679,14680,14683,14685],{"class":300,"line":698},[298,14681,14682],{"class":1603},"    class",[298,14684,1610],{"class":403},[298,14686,14687],{"class":308},"\"virtual-scroll-container\"\n",[298,14689,14690,14693,14695,14697,14699,14701,14704,14706,14708,14710,14712,14715,14717,14720,14723,14726],{"class":300,"line":704},[298,14691,14692],{"class":403},"    :",[298,14694,4731],{"class":1603},[298,14696,1610],{"class":403},[298,14698,2030],{"class":1732},[298,14700,4507],{"class":403},[298,14702,14703],{"class":409},"height:",[298,14705,1449],{"class":308},[298,14707,1453],{"class":1452},[298,14709,14268],{"class":409},[298,14711,1458],{"class":1452},[298,14713,14714],{"class":308},"px`",[298,14716,619],{"class":403},[298,14718,14719],{"class":409},"overflow:",[298,14721,14722],{"class":308}," 'auto'",[298,14724,14725],{"class":403}," }",[298,14727,2040],{"class":1732},[298,14729,14730,14732,14735,14737,14739,14742],{"class":300,"line":712},[298,14731,4037],{"class":403},[298,14733,14734],{"class":1603},"scroll",[298,14736,1610],{"class":403},[298,14738,2030],{"class":1732},[298,14740,14741],{"class":409},"handleScroll",[298,14743,2040],{"class":1732},[298,14745,14746],{"class":300,"line":720},[298,14747,14748],{"class":1596},"  >\n",[298,14750,14751,14753,14755,14757,14759,14761,14763,14765,14767,14769,14771,14774,14776,14778,14780,14783,14786,14788,14790],{"class":300,"line":729},[298,14752,1931],{"class":1596},[298,14754,2003],{"class":1599},[298,14756,2848],{"class":403},[298,14758,4731],{"class":1603},[298,14760,1610],{"class":403},[298,14762,2030],{"class":1732},[298,14764,4507],{"class":403},[298,14766,14703],{"class":409},[298,14768,1449],{"class":308},[298,14770,1453],{"class":1452},[298,14772,14773],{"class":409},"totalHeight",[298,14775,1458],{"class":1452},[298,14777,14714],{"class":308},[298,14779,619],{"class":403},[298,14781,14782],{"class":409},"position:",[298,14784,14785],{"class":308}," 'relative'",[298,14787,14725],{"class":403},[298,14789,2030],{"class":1732},[298,14791,1616],{"class":1596},[298,14793,14794,14796],{"class":300,"line":734},[298,14795,1949],{"class":1596},[298,14797,14798],{"class":1599},"div\n",[298,14800,14801,14804,14806,14808,14810,14812,14814,14817,14819,14821,14823],{"class":300,"line":740},[298,14802,14803],{"class":393},"        v-for",[298,14805,1610],{"class":403},[298,14807,2030],{"class":1732},[298,14809,4507],{"class":403},[298,14811,14453],{"class":409},[298,14813,619],{"class":403},[298,14815,14816],{"class":409},"index",[298,14818,965],{"class":403},[298,14820,5329],{"class":985},[298,14822,14297],{"class":409},[298,14824,2040],{"class":1732},[298,14826,14827,14829,14831,14833,14835,14837],{"class":300,"line":1470},[298,14828,13525],{"class":403},[298,14830,2048],{"class":1603},[298,14832,1610],{"class":403},[298,14834,2030],{"class":1732},[298,14836,14816],{"class":409},[298,14838,2040],{"class":1732},[298,14840,14841,14843,14845,14847,14849],{"class":300,"line":1475},[298,14842,13525],{"class":403},[298,14844,4731],{"class":1603},[298,14846,1610],{"class":403},[298,14848,2030],{"class":1732},[298,14850,6284],{"class":403},[298,14852,14853,14856,14859],{"class":300,"line":1501},[298,14854,14855],{"class":409},"          position:",[298,14857,14858],{"class":308}," 'absolute'",[298,14860,422],{"class":403},[298,14862,14863,14866,14868,14870,14872,14874,14876,14878,14880],{"class":300,"line":1519},[298,14864,14865],{"class":409},"          top:",[298,14867,1449],{"class":308},[298,14869,1453],{"class":1452},[298,14871,14816],{"class":409},[298,14873,8445],{"class":993},[298,14875,14241],{"class":409},[298,14877,1458],{"class":1452},[298,14879,14714],{"class":308},[298,14881,422],{"class":403},[298,14883,14884,14887,14889,14891,14894,14896,14898],{"class":300,"line":1524},[298,14885,14886],{"class":409},"          height:",[298,14888,1449],{"class":308},[298,14890,1453],{"class":1452},[298,14892,14893],{"class":409},"itemHeight",[298,14895,1458],{"class":1452},[298,14897,14714],{"class":308},[298,14899,422],{"class":403},[298,14901,14902,14905],{"class":300,"line":1529},[298,14903,14904],{"class":409},"          width:",[298,14906,14907],{"class":308}," '100%'\n",[298,14909,14910,14913],{"class":300,"line":1555},[298,14911,14912],{"class":403},"        }",[298,14914,2040],{"class":1732},[298,14916,14917],{"class":300,"line":1573},[298,14918,14919],{"class":1596},"      >\n",[298,14921,14922,14924,14926],{"class":300,"line":2301},[298,14923,1966],{"class":403},[298,14925,14453],{"class":409},[298,14927,3169],{"class":403},[298,14929,14930,14932,14934],{"class":300,"line":12706},[298,14931,1982],{"class":1596},[298,14933,2003],{"class":1599},[298,14935,1616],{"class":1596},[298,14937,14938,14940,14942],{"class":300,"line":12711},[298,14939,2285],{"class":1596},[298,14941,2003],{"class":1599},[298,14943,1616],{"class":1596},[298,14945,14946,14948,14950],{"class":300,"line":12716},[298,14947,2294],{"class":1596},[298,14949,2003],{"class":1599},[298,14951,1616],{"class":1596},[298,14953,14954,14956,14958],{"class":300,"line":12725},[298,14955,1899],{"class":1596},[298,14957,1914],{"class":1599},[298,14959,1616],{"class":1596},[4168,14961,14963],{"id":14962},"computed-property-optimization","Computed Property Optimization",[289,14965,14967],{"className":1587,"code":14966,"language":1589,"meta":16,"style":16},"\u003Cscript setup lang=\"ts\">\nimport { ref, computed, shallowRef } from 'vue'\n\n// Use shallowRef for large objects you won't mutate deeply\nconst largeDataset = shallowRef\u003CDataPoint[]>([])\n\n// Memoize expensive computations\nconst processedData = computed(() => {\n  // This only re-runs when largeDataset reference changes\n  return largeDataset.value.map(point => ({\n    ...point,\n    processed: expensiveCalculation(point)\n  }))\n})\n\n// Use separate computed properties instead of one complex one\nconst filteredData = computed(() => \n  processedData.value.filter(item => item.active)\n)\n\nconst sortedData = computed(() => \n  [...filteredData.value].sort((a, b) => a.value - b.value)\n)\n\u003C/script>\n",[295,14968,14969,14985,15008,15012,15017,15037,15041,15046,15063,15068,15091,15100,15114,15118,15122,15126,15131,15148,15177,15181,15185,15202,15255,15259],{"__ignoreMap":16},[298,14970,14971,14973,14975,14977,14979,14981,14983],{"class":300,"line":301},[298,14972,1199],{"class":1596},[298,14974,1600],{"class":1599},[298,14976,1604],{"class":1603},[298,14978,1607],{"class":1603},[298,14980,1610],{"class":403},[298,14982,1613],{"class":308},[298,14984,1616],{"class":1596},[298,14986,14987,14989,14991,14993,14995,14997,14999,15002,15004,15006],{"class":300,"line":179},[298,14988,956],{"class":393},[298,14990,959],{"class":403},[298,14992,8249],{"class":409},[298,14994,619],{"class":403},[298,14996,8275],{"class":409},[298,14998,619],{"class":403},[298,15000,15001],{"class":409},"shallowRef",[298,15003,965],{"class":403},[298,15005,968],{"class":393},[298,15007,8969],{"class":308},[298,15009,15010],{"class":300,"line":17},[298,15011,701],{"emptyLinePlaceholder":199},[298,15013,15014],{"class":300,"line":416},[298,15015,15016],{"class":387},"// Use shallowRef for large objects you won't mutate deeply\n",[298,15018,15019,15021,15024,15026,15029,15031,15034],{"class":300,"line":425},[298,15020,1650],{"class":985},[298,15022,15023],{"class":989}," largeDataset",[298,15025,994],{"class":993},[298,15027,15028],{"class":304}," shallowRef",[298,15030,1199],{"class":403},[298,15032,15033],{"class":1186},"DataPoint",[298,15035,15036],{"class":403},"[]>([])\n",[298,15038,15039],{"class":300,"line":433},[298,15040,701],{"emptyLinePlaceholder":199},[298,15042,15043],{"class":300,"line":439},[298,15044,15045],{"class":387},"// Memoize expensive computations\n",[298,15047,15048,15050,15053,15055,15057,15059,15061],{"class":300,"line":202},[298,15049,1650],{"class":985},[298,15051,15052],{"class":989}," processedData",[298,15054,994],{"class":993},[298,15056,1843],{"class":304},[298,15058,1846],{"class":403},[298,15060,1439],{"class":985},[298,15062,456],{"class":403},[298,15064,15065],{"class":300,"line":450},[298,15066,15067],{"class":387},"  // This only re-runs when largeDataset reference changes\n",[298,15069,15070,15072,15074,15076,15078,15080,15082,15084,15087,15089],{"class":300,"line":459},[298,15071,1446],{"class":393},[298,15073,15023],{"class":409},[298,15075,1000],{"class":403},[298,15077,1735],{"class":409},[298,15079,1000],{"class":403},[298,15081,14447],{"class":304},[298,15083,1087],{"class":403},[298,15085,15086],{"class":1217},"point",[298,15088,1874],{"class":985},[298,15090,3738],{"class":403},[298,15092,15093,15096,15098],{"class":300,"line":467},[298,15094,15095],{"class":993},"    ...",[298,15097,15086],{"class":409},[298,15099,422],{"class":403},[298,15101,15102,15105,15108,15110,15112],{"class":300,"line":473},[298,15103,15104],{"class":409},"    processed:",[298,15106,15107],{"class":304}," expensiveCalculation",[298,15109,1087],{"class":403},[298,15111,15086],{"class":409},[298,15113,3034],{"class":403},[298,15115,15116],{"class":300,"line":484},[298,15117,14487],{"class":403},[298,15119,15120],{"class":300,"line":495},[298,15121,9387],{"class":403},[298,15123,15124],{"class":300,"line":506},[298,15125,701],{"emptyLinePlaceholder":199},[298,15127,15128],{"class":300,"line":517},[298,15129,15130],{"class":387},"// Use separate computed properties instead of one complex one\n",[298,15132,15133,15135,15138,15140,15142,15144,15146],{"class":300,"line":526},[298,15134,1650],{"class":985},[298,15136,15137],{"class":989}," filteredData",[298,15139,994],{"class":993},[298,15141,1843],{"class":304},[298,15143,1846],{"class":403},[298,15145,1439],{"class":985},[298,15147,1851],{"class":403},[298,15149,15150,15153,15155,15157,15159,15161,15163,15165,15167,15170,15172,15175],{"class":300,"line":532},[298,15151,15152],{"class":409},"  processedData",[298,15154,1000],{"class":403},[298,15156,1735],{"class":409},[298,15158,1000],{"class":403},[298,15160,1866],{"class":304},[298,15162,1087],{"class":403},[298,15164,14453],{"class":1217},[298,15166,1874],{"class":985},[298,15168,15169],{"class":409}," item",[298,15171,1000],{"class":403},[298,15173,15174],{"class":409},"active",[298,15176,3034],{"class":403},[298,15178,15179],{"class":300,"line":537},[298,15180,3034],{"class":403},[298,15182,15183],{"class":300,"line":547},[298,15184,701],{"emptyLinePlaceholder":199},[298,15186,15187,15189,15192,15194,15196,15198,15200],{"class":300,"line":557},[298,15188,1650],{"class":985},[298,15190,15191],{"class":989}," sortedData",[298,15193,994],{"class":993},[298,15195,1843],{"class":304},[298,15197,1846],{"class":403},[298,15199,1439],{"class":985},[298,15201,1851],{"class":403},[298,15203,15204,15207,15209,15212,15214,15216,15219,15222,15224,15227,15229,15232,15234,15236,15239,15241,15243,15246,15249,15251,15253],{"class":300,"line":567},[298,15205,15206],{"class":403},"  [",[298,15208,3814],{"class":993},[298,15210,15211],{"class":409},"filteredData",[298,15213,1000],{"class":403},[298,15215,1735],{"class":409},[298,15217,15218],{"class":403},"].",[298,15220,15221],{"class":304},"sort",[298,15223,14450],{"class":403},[298,15225,15226],{"class":1217},"a",[298,15228,619],{"class":403},[298,15230,15231],{"class":1217},"b",[298,15233,1436],{"class":403},[298,15235,1439],{"class":985},[298,15237,15238],{"class":409}," a",[298,15240,1000],{"class":403},[298,15242,1735],{"class":409},[298,15244,15245],{"class":993}," -",[298,15247,15248],{"class":409}," b",[298,15250,1000],{"class":403},[298,15252,1735],{"class":409},[298,15254,3034],{"class":403},[298,15256,15257],{"class":300,"line":577},[298,15258,3034],{"class":403},[298,15260,15261,15263,15265],{"class":300,"line":588},[298,15262,1899],{"class":1596},[298,15264,1600],{"class":1599},[298,15266,1616],{"class":1596},[37,15268,15270],{"id":15269},"_10-testing-patterns","10. Testing Patterns",[4168,15272,15274],{"id":15273},"testing-composables","Testing Composables",[289,15276,15278],{"className":378,"code":15277,"language":380,"meta":16,"style":16},"// composables/__tests__/useCounter.spec.ts\nimport { describe, it, expect } from 'vitest'\nimport { useCounter } from '../useCounter'\n\ndescribe('useCounter', () => {\n  it('initializes with default value', () => {\n    const { count } = useCounter()\n    expect(count.value).toBe(0)\n  })\n  \n  it('initializes with custom value', () => {\n    const { count } = useCounter(10)\n    expect(count.value).toBe(10)\n  })\n  \n  it('increments count', () => {\n    const { count, increment } = useCounter(0)\n    increment()\n    expect(count.value).toBe(1)\n  })\n  \n  it('computes double correctly', () => {\n    const { count, double, increment } = useCounter(5)\n    expect(double.value).toBe(10)\n    increment()\n    expect(double.value).toBe(12)\n  })\n})\n",[295,15279,15280,15285,15311,15326,15330,15345,15361,15377,15401,15406,15410,15425,15445,15467,15471,15475,15490,15514,15521,15544,15548,15552,15567,15596,15618,15624,15646,15650],{"__ignoreMap":16},[298,15281,15282],{"class":300,"line":301},[298,15283,15284],{"class":387},"// composables/__tests__/useCounter.spec.ts\n",[298,15286,15287,15289,15291,15294,15296,15299,15301,15304,15306,15308],{"class":300,"line":179},[298,15288,956],{"class":393},[298,15290,959],{"class":403},[298,15292,15293],{"class":409},"describe",[298,15295,619],{"class":403},[298,15297,15298],{"class":409},"it",[298,15300,619],{"class":403},[298,15302,15303],{"class":409},"expect",[298,15305,965],{"class":403},[298,15307,968],{"class":393},[298,15309,15310],{"class":308}," 'vitest'\n",[298,15312,15313,15315,15317,15319,15321,15323],{"class":300,"line":17},[298,15314,956],{"class":393},[298,15316,959],{"class":403},[298,15318,8863],{"class":409},[298,15320,965],{"class":403},[298,15322,968],{"class":393},[298,15324,15325],{"class":308}," '../useCounter'\n",[298,15327,15328],{"class":300,"line":416},[298,15329,701],{"emptyLinePlaceholder":199},[298,15331,15332,15334,15336,15339,15341,15343],{"class":300,"line":425},[298,15333,15293],{"class":304},[298,15335,1087],{"class":403},[298,15337,15338],{"class":308},"'useCounter'",[298,15340,2464],{"class":403},[298,15342,1439],{"class":985},[298,15344,456],{"class":403},[298,15346,15347,15350,15352,15355,15357,15359],{"class":300,"line":433},[298,15348,15349],{"class":304},"  it",[298,15351,1087],{"class":403},[298,15353,15354],{"class":308},"'initializes with default value'",[298,15356,2464],{"class":403},[298,15358,1439],{"class":985},[298,15360,456],{"class":403},[298,15362,15363,15365,15367,15369,15371,15373,15375],{"class":300,"line":439},[298,15364,1759],{"class":985},[298,15366,959],{"class":403},[298,15368,8468],{"class":989},[298,15370,965],{"class":403},[298,15372,1610],{"class":993},[298,15374,8693],{"class":304},[298,15376,2475],{"class":403},[298,15378,15379,15382,15384,15386,15388,15390,15392,15395,15397,15399],{"class":300,"line":202},[298,15380,15381],{"class":304},"    expect",[298,15383,1087],{"class":403},[298,15385,8468],{"class":409},[298,15387,1000],{"class":403},[298,15389,1735],{"class":409},[298,15391,1793],{"class":403},[298,15393,15394],{"class":304},"toBe",[298,15396,1087],{"class":403},[298,15398,8380],{"class":2549},[298,15400,3034],{"class":403},[298,15402,15403],{"class":300,"line":450},[298,15404,15405],{"class":403},"  })\n",[298,15407,15408],{"class":300,"line":459},[298,15409,447],{"class":403},[298,15411,15412,15414,15416,15419,15421,15423],{"class":300,"line":467},[298,15413,15349],{"class":304},[298,15415,1087],{"class":403},[298,15417,15418],{"class":308},"'initializes with custom value'",[298,15420,2464],{"class":403},[298,15422,1439],{"class":985},[298,15424,456],{"class":403},[298,15426,15427,15429,15431,15433,15435,15437,15439,15441,15443],{"class":300,"line":473},[298,15428,1759],{"class":985},[298,15430,959],{"class":403},[298,15432,8468],{"class":989},[298,15434,965],{"class":403},[298,15436,1610],{"class":993},[298,15438,8693],{"class":304},[298,15440,1087],{"class":403},[298,15442,8903],{"class":2549},[298,15444,3034],{"class":403},[298,15446,15447,15449,15451,15453,15455,15457,15459,15461,15463,15465],{"class":300,"line":484},[298,15448,15381],{"class":304},[298,15450,1087],{"class":403},[298,15452,8468],{"class":409},[298,15454,1000],{"class":403},[298,15456,1735],{"class":409},[298,15458,1793],{"class":403},[298,15460,15394],{"class":304},[298,15462,1087],{"class":403},[298,15464,8903],{"class":2549},[298,15466,3034],{"class":403},[298,15468,15469],{"class":300,"line":495},[298,15470,15405],{"class":403},[298,15472,15473],{"class":300,"line":506},[298,15474,447],{"class":403},[298,15476,15477,15479,15481,15484,15486,15488],{"class":300,"line":517},[298,15478,15349],{"class":304},[298,15480,1087],{"class":403},[298,15482,15483],{"class":308},"'increments count'",[298,15485,2464],{"class":403},[298,15487,1439],{"class":985},[298,15489,456],{"class":403},[298,15491,15492,15494,15496,15498,15500,15502,15504,15506,15508,15510,15512],{"class":300,"line":526},[298,15493,1759],{"class":985},[298,15495,959],{"class":403},[298,15497,8468],{"class":989},[298,15499,619],{"class":403},[298,15501,8811],{"class":989},[298,15503,965],{"class":403},[298,15505,1610],{"class":993},[298,15507,8693],{"class":304},[298,15509,1087],{"class":403},[298,15511,8380],{"class":2549},[298,15513,3034],{"class":403},[298,15515,15516,15519],{"class":300,"line":532},[298,15517,15518],{"class":304},"    increment",[298,15520,2475],{"class":403},[298,15522,15523,15525,15527,15529,15531,15533,15535,15537,15539,15542],{"class":300,"line":537},[298,15524,15381],{"class":304},[298,15526,1087],{"class":403},[298,15528,8468],{"class":409},[298,15530,1000],{"class":403},[298,15532,1735],{"class":409},[298,15534,1793],{"class":403},[298,15536,15394],{"class":304},[298,15538,1087],{"class":403},[298,15540,15541],{"class":2549},"1",[298,15543,3034],{"class":403},[298,15545,15546],{"class":300,"line":547},[298,15547,15405],{"class":403},[298,15549,15550],{"class":300,"line":557},[298,15551,447],{"class":403},[298,15553,15554,15556,15558,15561,15563,15565],{"class":300,"line":567},[298,15555,15349],{"class":304},[298,15557,1087],{"class":403},[298,15559,15560],{"class":308},"'computes double correctly'",[298,15562,2464],{"class":403},[298,15564,1439],{"class":985},[298,15566,456],{"class":403},[298,15568,15569,15571,15573,15575,15577,15579,15581,15583,15585,15587,15589,15591,15594],{"class":300,"line":577},[298,15570,1759],{"class":985},[298,15572,959],{"class":403},[298,15574,8468],{"class":989},[298,15576,619],{"class":403},[298,15578,8821],{"class":989},[298,15580,619],{"class":403},[298,15582,8811],{"class":989},[298,15584,965],{"class":403},[298,15586,1610],{"class":993},[298,15588,8693],{"class":304},[298,15590,1087],{"class":403},[298,15592,15593],{"class":2549},"5",[298,15595,3034],{"class":403},[298,15597,15598,15600,15602,15604,15606,15608,15610,15612,15614,15616],{"class":300,"line":588},[298,15599,15381],{"class":304},[298,15601,1087],{"class":403},[298,15603,8821],{"class":409},[298,15605,1000],{"class":403},[298,15607,1735],{"class":409},[298,15609,1793],{"class":403},[298,15611,15394],{"class":304},[298,15613,1087],{"class":403},[298,15615,8903],{"class":2549},[298,15617,3034],{"class":403},[298,15619,15620,15622],{"class":300,"line":594},[298,15621,15518],{"class":304},[298,15623,2475],{"class":403},[298,15625,15626,15628,15630,15632,15634,15636,15638,15640,15642,15644],{"class":300,"line":600},[298,15627,15381],{"class":304},[298,15629,1087],{"class":403},[298,15631,8821],{"class":409},[298,15633,1000],{"class":403},[298,15635,1735],{"class":409},[298,15637,1793],{"class":403},[298,15639,15394],{"class":304},[298,15641,1087],{"class":403},[298,15643,4862],{"class":2549},[298,15645,3034],{"class":403},[298,15647,15648],{"class":300,"line":610},[298,15649,15405],{"class":403},[298,15651,15652],{"class":300,"line":625},[298,15653,9387],{"class":403},[4168,15655,15657],{"id":15656},"testing-components","Testing Components",[289,15659,15661],{"className":378,"code":15660,"language":380,"meta":16,"style":16},"// components/__tests__/UserCard.spec.ts\nimport { describe, it, expect } from 'vitest'\nimport { mount } from '@vue/test-utils'\nimport UserCard from '../UserCard.vue'\n\ndescribe('UserCard', () => {\n  it('renders user name', () => {\n    const wrapper = mount(UserCard, {\n      props: {\n        user: {\n          name: 'John Doe',\n          email: 'john@example.com'\n        }\n      }\n    })\n    \n    expect(wrapper.text()).toContain('John Doe')\n  })\n  \n  it('emits delete event when button clicked', async () => {\n    const wrapper = mount(UserCard, {\n      props: {\n        user: { name: 'John', email: 'john@example.com' }\n      }\n    })\n    \n    await wrapper.find('button.delete').trigger('click')\n    expect(wrapper.emitted('delete')).toBeTruthy()\n  })\n})\n",[295,15662,15663,15668,15690,15706,15719,15723,15738,15753,15773,15780,15787,15797,15805,15810,15814,15819,15823,15848,15852,15856,15875,15891,15897,15918,15922,15926,15930,15958,15984,15988],{"__ignoreMap":16},[298,15664,15665],{"class":300,"line":301},[298,15666,15667],{"class":387},"// components/__tests__/UserCard.spec.ts\n",[298,15669,15670,15672,15674,15676,15678,15680,15682,15684,15686,15688],{"class":300,"line":179},[298,15671,956],{"class":393},[298,15673,959],{"class":403},[298,15675,15293],{"class":409},[298,15677,619],{"class":403},[298,15679,15298],{"class":409},[298,15681,619],{"class":403},[298,15683,15303],{"class":409},[298,15685,965],{"class":403},[298,15687,968],{"class":393},[298,15689,15310],{"class":308},[298,15691,15692,15694,15696,15699,15701,15703],{"class":300,"line":17},[298,15693,956],{"class":393},[298,15695,959],{"class":403},[298,15697,15698],{"class":409},"mount",[298,15700,965],{"class":403},[298,15702,968],{"class":393},[298,15704,15705],{"class":308}," '@vue/test-utils'\n",[298,15707,15708,15710,15713,15716],{"class":300,"line":416},[298,15709,956],{"class":393},[298,15711,15712],{"class":409}," UserCard",[298,15714,15715],{"class":393}," from",[298,15717,15718],{"class":308}," '../UserCard.vue'\n",[298,15720,15721],{"class":300,"line":425},[298,15722,701],{"emptyLinePlaceholder":199},[298,15724,15725,15727,15729,15732,15734,15736],{"class":300,"line":433},[298,15726,15293],{"class":304},[298,15728,1087],{"class":403},[298,15730,15731],{"class":308},"'UserCard'",[298,15733,2464],{"class":403},[298,15735,1439],{"class":985},[298,15737,456],{"class":403},[298,15739,15740,15742,15744,15747,15749,15751],{"class":300,"line":439},[298,15741,15349],{"class":304},[298,15743,1087],{"class":403},[298,15745,15746],{"class":308},"'renders user name'",[298,15748,2464],{"class":403},[298,15750,1439],{"class":985},[298,15752,456],{"class":403},[298,15754,15755,15757,15760,15762,15765,15767,15770],{"class":300,"line":202},[298,15756,1759],{"class":985},[298,15758,15759],{"class":989}," wrapper",[298,15761,994],{"class":993},[298,15763,15764],{"class":304}," mount",[298,15766,1087],{"class":403},[298,15768,15769],{"class":409},"UserCard",[298,15771,15772],{"class":403},", {\n",[298,15774,15775,15778],{"class":300,"line":450},[298,15776,15777],{"class":409},"      props:",[298,15779,456],{"class":403},[298,15781,15782,15785],{"class":300,"line":459},[298,15783,15784],{"class":409},"        user:",[298,15786,456],{"class":403},[298,15788,15789,15792,15795],{"class":300,"line":467},[298,15790,15791],{"class":409},"          name:",[298,15793,15794],{"class":308}," 'John Doe'",[298,15796,422],{"class":403},[298,15798,15799,15802],{"class":300,"line":473},[298,15800,15801],{"class":409},"          email:",[298,15803,15804],{"class":308}," 'john@example.com'\n",[298,15806,15807],{"class":300,"line":484},[298,15808,15809],{"class":403},"        }\n",[298,15811,15812],{"class":300,"line":495},[298,15813,591],{"class":403},[298,15815,15816],{"class":300,"line":506},[298,15817,15818],{"class":403},"    })\n",[298,15820,15821],{"class":300,"line":517},[298,15822,2838],{"class":403},[298,15824,15825,15827,15829,15832,15834,15836,15838,15841,15843,15846],{"class":300,"line":526},[298,15826,15381],{"class":304},[298,15828,1087],{"class":403},[298,15830,15831],{"class":409},"wrapper",[298,15833,1000],{"class":403},[298,15835,756],{"class":304},[298,15837,1096],{"class":403},[298,15839,15840],{"class":304},"toContain",[298,15842,1087],{"class":403},[298,15844,15845],{"class":308},"'John Doe'",[298,15847,3034],{"class":403},[298,15849,15850],{"class":300,"line":532},[298,15851,15405],{"class":403},[298,15853,15854],{"class":300,"line":537},[298,15855,447],{"class":403},[298,15857,15858,15860,15862,15865,15867,15869,15871,15873],{"class":300,"line":547},[298,15859,15349],{"class":304},[298,15861,1087],{"class":403},[298,15863,15864],{"class":308},"'emits delete event when button clicked'",[298,15866,619],{"class":403},[298,15868,9531],{"class":985},[298,15870,1750],{"class":403},[298,15872,1439],{"class":985},[298,15874,456],{"class":403},[298,15876,15877,15879,15881,15883,15885,15887,15889],{"class":300,"line":557},[298,15878,1759],{"class":985},[298,15880,15759],{"class":989},[298,15882,994],{"class":993},[298,15884,15764],{"class":304},[298,15886,1087],{"class":403},[298,15888,15769],{"class":409},[298,15890,15772],{"class":403},[298,15892,15893,15895],{"class":300,"line":567},[298,15894,15777],{"class":409},[298,15896,456],{"class":403},[298,15898,15899,15901,15903,15905,15908,15910,15912,15915],{"class":300,"line":577},[298,15900,15784],{"class":409},[298,15902,959],{"class":403},[298,15904,2621],{"class":409},[298,15906,15907],{"class":308}," 'John'",[298,15909,619],{"class":403},[298,15911,9557],{"class":409},[298,15913,15914],{"class":308}," 'john@example.com'",[298,15916,15917],{"class":403}," }\n",[298,15919,15920],{"class":300,"line":588},[298,15921,591],{"class":403},[298,15923,15924],{"class":300,"line":594},[298,15925,15818],{"class":403},[298,15927,15928],{"class":300,"line":600},[298,15929,2838],{"class":403},[298,15931,15932,15934,15936,15938,15941,15943,15946,15948,15951,15953,15956],{"class":300,"line":610},[298,15933,9550],{"class":393},[298,15935,15759],{"class":409},[298,15937,1000],{"class":403},[298,15939,15940],{"class":304},"find",[298,15942,1087],{"class":403},[298,15944,15945],{"class":308},"'button.delete'",[298,15947,1793],{"class":403},[298,15949,15950],{"class":304},"trigger",[298,15952,1087],{"class":403},[298,15954,15955],{"class":308},"'click'",[298,15957,3034],{"class":403},[298,15959,15960,15962,15964,15966,15968,15971,15973,15976,15979,15982],{"class":300,"line":625},[298,15961,15381],{"class":304},[298,15963,1087],{"class":403},[298,15965,15831],{"class":409},[298,15967,1000],{"class":403},[298,15969,15970],{"class":304},"emitted",[298,15972,1087],{"class":403},[298,15974,15975],{"class":308},"'delete'",[298,15977,15978],{"class":403},")).",[298,15980,15981],{"class":304},"toBeTruthy",[298,15983,2475],{"class":403},[298,15985,15986],{"class":300,"line":637},[298,15987,15405],{"class":403},[298,15989,15990],{"class":300,"line":648},[298,15991,9387],{"class":403},[37,15993,166],{"id":165},[30,15995,15996,15997,15999],{},"Adopting these Vue 3 patterns will empower you to write cleaner, more modular, and highly maintainable applications. The Composition API, along with features like composables, ",[295,15998,10057],{},", Suspense, and Teleport, provides a powerful toolkit for tackling complex frontend challenges. As Vue.js continues to evolve, staying updated with these best practices is key to leveraging the framework's full potential.",[4731,16001,16002],{},"html pre.shiki code .sffyN, html code.shiki .sffyN{--shiki-light:#24292E;--shiki-default:#808080;--shiki-dark:#808080}html pre.shiki code .ssFZ1, html code.shiki .ssFZ1{--shiki-light:#22863A;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .sFcZJ, html code.shiki .sFcZJ{--shiki-light:#6F42C1;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .sG4b4, html code.shiki .sG4b4{--shiki-light:#24292E;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}html pre.shiki code .sGDl4, html code.shiki .sGDl4{--shiki-light:#032F62;--shiki-default:#CE9178;--shiki-dark:#CE9178}html pre.shiki code .sEkCa, html code.shiki .sEkCa{--shiki-light:#D73A49;--shiki-default:#C586C0;--shiki-dark:#C586C0}html pre.shiki code .sZiGn, html code.shiki .sZiGn{--shiki-light:#24292E;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .s56mj, html code.shiki .s56mj{--shiki-light:#6A737D;--shiki-default:#6A9955;--shiki-dark:#6A9955}html pre.shiki code .s5uUr, html code.shiki .s5uUr{--shiki-light:#D73A49;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .sToQf, html code.shiki .sToQf{--shiki-light:#005CC5;--shiki-default:#4FC1FF;--shiki-dark:#4FC1FF}html pre.shiki code .s1p9p, html code.shiki .s1p9p{--shiki-light:#D73A49;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}html pre.shiki code .svuFb, html code.shiki .svuFb{--shiki-light:#6F42C1;--shiki-default:#DCDCAA;--shiki-dark:#DCDCAA}html pre.shiki code .seC34, html code.shiki .seC34{--shiki-light:#005CC5;--shiki-default:#B5CEA8;--shiki-dark:#B5CEA8}html pre.shiki code .s9TRk, html code.shiki .s9TRk{--shiki-light:#E36209;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .se2iQ, html code.shiki .se2iQ{--shiki-light:#032F62;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .s5T4v, html code.shiki .s5T4v{--shiki-light:#032F62;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}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 .su_XB, html code.shiki .su_XB{--shiki-light:#6F42C1;--shiki-default:#4EC9B0;--shiki-dark:#4EC9B0}html pre.shiki code .s6-XD, html code.shiki .s6-XD{--shiki-light:#005CC5;--shiki-default:#4EC9B0;--shiki-dark:#4EC9B0}html pre.shiki code .s7v1m, html code.shiki .s7v1m{--shiki-light:#005CC5;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .sUwQ0, html code.shiki .sUwQ0{--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-default:#F44747;--shiki-default-font-style:inherit;--shiki-dark:#F44747;--shiki-dark-font-style:inherit}html pre.shiki code .sps74, html code.shiki .sps74{--shiki-light:#005CC5;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .s4XyT, html code.shiki .s4XyT{--shiki-light:#032F62;--shiki-default:#D16969;--shiki-dark:#D16969}html pre.shiki code .s2gen, html code.shiki .s2gen{--shiki-light:#D73A49;--shiki-default:#DCDCAA;--shiki-dark:#DCDCAA}html pre.shiki code .sqBZk, html code.shiki .sqBZk{--shiki-light:#005CC5;--shiki-default:#CE9178;--shiki-dark:#CE9178}html pre.shiki code .smwCX, html code.shiki .smwCX{--shiki-light:#D73A49;--shiki-default:#CE9178;--shiki-dark:#CE9178}html pre.shiki code .suOk-, html code.shiki .suOk-{--shiki-light:#005CC5;--shiki-default:#D16969;--shiki-dark:#D16969}html pre.shiki code .sR-fR, html code.shiki .sR-fR{--shiki-light:#D73A49;--shiki-default:#D7BA7D;--shiki-dark:#D7BA7D}html pre.shiki code .sSxZ1, html code.shiki .sSxZ1{--shiki-light:#22863A;--shiki-light-font-weight:bold;--shiki-default:#D7BA7D;--shiki-default-font-weight:inherit;--shiki-dark:#D7BA7D;--shiki-dark-font-weight:inherit}",{"title":16,"searchDepth":17,"depth":17,"links":16004},[16005,16006,16007,16012,16014,16015,16016,16020,16025,16030,16034],{"id":8226,"depth":179,"text":8227},{"id":8618,"depth":179,"text":8619},{"id":8916,"depth":179,"text":8917,"children":16008},[16009,16010,16011],{"id":8923,"depth":17,"text":8924},{"id":9390,"depth":17,"text":9391},{"id":9757,"depth":17,"text":9758},{"id":10053,"depth":179,"text":16013},"4. Leveraging \u003Cscript setup>",{"id":10093,"depth":179,"text":10094},{"id":10309,"depth":179,"text":10310},{"id":10544,"depth":179,"text":10545,"children":16017},[16018,16019],{"id":10551,"depth":17,"text":10552},{"id":10836,"depth":17,"text":10837},{"id":11278,"depth":179,"text":11279,"children":16021},[16022,16023,16024],{"id":11282,"depth":17,"text":11283},{"id":11550,"depth":17,"text":11551},{"id":12034,"depth":17,"text":12035},{"id":13934,"depth":179,"text":13935,"children":16026},[16027,16028,16029],{"id":13938,"depth":17,"text":13939},{"id":14104,"depth":17,"text":14105},{"id":14962,"depth":17,"text":14963},{"id":15269,"depth":179,"text":15270,"children":16031},[16032,16033],{"id":15273,"depth":17,"text":15274},{"id":15656,"depth":17,"text":15657},{"id":165,"depth":179,"text":166},"Master Vue 3's Composition API, Pinia state management, and advanced patterns for building production-ready applications. Includes real-world examples, TypeScript integration, and performance optimization techniques.","https://images.unsplash.com/photo-1563986768494-4dee2763ff3f?auto=format&fit=crop&w=1200&q=80",{"excerpt":16038},{"type":13,"value":16039},[16040],[30,16041,8223],{},"/essential-vue3-patterns","2025-05-16",{"title":8218,"description":16035},"essential-vue3-patterns",[16047,16048,16049,52,380,16050,16051,16052,16053],"vue3","patterns","best-practices","frontend","architecture","composition-api","pinia","hWe0jCekUuYQA6Ek0BfVq7Ijxi4_fmq8IF4OUB-dwqc",{"id":16056,"title":16057,"author":26,"body":16058,"category":19,"description":16436,"extension":7,"image":16437,"isDraft":190,"isFeatured":190,"locale":9,"meta":16438,"navigation":199,"path":16446,"publishedAt":16447,"readingTime":179,"seo":16448,"stem":16439,"tags":16449,"updatedAt":16450,"__hash__":16451},"articles_en/generate-random-strings-characters-in-javascript.md","Generate random strings/characters in JavaScript",{"type":13,"value":16059,"toc":16431},[16060,16063,16067,16074,16199,16217,16221,16228,16356,16370,16374,16384,16423,16428],[30,16061,16062],{},"We will explore different ways to generate random strings and characters in JavaScript.",[37,16064,16066],{"id":16065},"serverside","Serverside",[30,16068,16069,16070,16073],{},"When working on the server side, you have access to the full Node.js environment, which includes the ",[295,16071,16072],{},"crypto"," library. This library provides a built-in way to generate cryptographically secure random strings and characters.",[289,16075,16077],{"className":6271,"code":16076,"language":52,"meta":16,"style":16},"const crypto = require('crypto');\n\nfunction generateRandomString(length) {\n  return crypto.randomBytes(Math.ceil(length / 2))\n    .toString('hex')\n    .slice(0, length);\n}\nconsole.log(generateRandomString(10));\n",[295,16078,16079,16098,16102,16115,16144,16158,16174,16178],{"__ignoreMap":16},[298,16080,16081,16083,16086,16088,16091,16093,16096],{"class":300,"line":301},[298,16082,1650],{"class":985},[298,16084,16085],{"class":989}," crypto",[298,16087,994],{"class":993},[298,16089,16090],{"class":304}," require",[298,16092,1087],{"class":403},[298,16094,16095],{"class":308},"'crypto'",[298,16097,1777],{"class":403},[298,16099,16100],{"class":300,"line":179},[298,16101,701],{"emptyLinePlaceholder":199},[298,16103,16104,16106,16109,16111,16113],{"class":300,"line":17},[298,16105,8583],{"class":985},[298,16107,16108],{"class":304}," generateRandomString",[298,16110,1087],{"class":403},[298,16112,12867],{"class":1217},[298,16114,2530],{"class":403},[298,16116,16117,16119,16121,16123,16126,16128,16130,16132,16134,16136,16138,16140,16142],{"class":300,"line":416},[298,16118,1446],{"class":393},[298,16120,16085],{"class":409},[298,16122,1000],{"class":403},[298,16124,16125],{"class":304},"randomBytes",[298,16127,1087],{"class":403},[298,16129,14332],{"class":409},[298,16131,1000],{"class":403},[298,16133,14263],{"class":304},[298,16135,1087],{"class":403},[298,16137,12867],{"class":409},[298,16139,11930],{"class":993},[298,16141,8448],{"class":2549},[298,16143,14205],{"class":403},[298,16145,16146,16148,16151,16153,16156],{"class":300,"line":425},[298,16147,2480],{"class":403},[298,16149,16150],{"class":304},"toString",[298,16152,1087],{"class":403},[298,16154,16155],{"class":308},"'hex'",[298,16157,3034],{"class":403},[298,16159,16160,16162,16164,16166,16168,16170,16172],{"class":300,"line":433},[298,16161,2480],{"class":403},[298,16163,14432],{"class":304},[298,16165,1087],{"class":403},[298,16167,8380],{"class":2549},[298,16169,619],{"class":403},[298,16171,12867],{"class":409},[298,16173,1777],{"class":403},[298,16175,16176],{"class":300,"line":439},[298,16177,2573],{"class":403},[298,16179,16180,16183,16185,16187,16189,16192,16194,16196],{"class":300,"line":202},[298,16181,16182],{"class":409},"console",[298,16184,1000],{"class":403},[298,16186,8495],{"class":304},[298,16188,1087],{"class":403},[298,16190,16191],{"class":304},"generateRandomString",[298,16193,1087],{"class":403},[298,16195,8903],{"class":2549},[298,16197,16198],{"class":403},"));\n",[30,16200,16201,16202,16205,16206,16208,16209,16212,16213,16216],{},"In this example, we use the ",[295,16203,16204],{},"randomBytes()"," method of the ",[295,16207,16072],{}," library to generate a random buffer of bytes. We then convert these bytes to a hexadecimal string using the ",[295,16210,16211],{},"toString()"," method. Finally, we use the ",[295,16214,16215],{},"slice()"," method to extract the desired number of characters from the hexadecimal string.",[37,16218,16220],{"id":16219},"clientside","Clientside",[30,16222,16223,16224,16227],{},"When working on the client side, the ",[295,16225,16226],{},"crypto.getRandomValues()"," method lets you get cryptographically strong random values. The array given as the parameter is filled with random numbers (random in its cryptographic meaning).",[289,16229,16231],{"className":6271,"code":16230,"language":52,"meta":16,"style":16},"function generateId (len) {\n  var arr = new Uint8Array((len || 40) / 2)\n  window.crypto.getRandomValues(arr)\n  return Array.from(arr, dec2hex).join('')\n}\n\nconsole.log(generateId())\n",[295,16232,16233,16247,16280,16301,16332,16336,16340],{"__ignoreMap":16},[298,16234,16235,16237,16240,16242,16245],{"class":300,"line":301},[298,16236,8583],{"class":985},[298,16238,16239],{"class":304}," generateId",[298,16241,1426],{"class":403},[298,16243,16244],{"class":1217},"len",[298,16246,2530],{"class":403},[298,16248,16249,16252,16255,16257,16260,16263,16265,16267,16269,16272,16274,16276,16278],{"class":300,"line":179},[298,16250,16251],{"class":985},"  var",[298,16253,16254],{"class":409}," arr",[298,16256,994],{"class":993},[298,16258,16259],{"class":985}," new",[298,16261,16262],{"class":304}," Uint8Array",[298,16264,14450],{"class":403},[298,16266,16244],{"class":409},[298,16268,3484],{"class":993},[298,16270,16271],{"class":2549}," 40",[298,16273,1436],{"class":403},[298,16275,13304],{"class":993},[298,16277,8448],{"class":2549},[298,16279,3034],{"class":403},[298,16281,16282,16285,16287,16289,16291,16294,16296,16299],{"class":300,"line":17},[298,16283,16284],{"class":409},"  window",[298,16286,1000],{"class":403},[298,16288,16072],{"class":409},[298,16290,1000],{"class":403},[298,16292,16293],{"class":304},"getRandomValues",[298,16295,1087],{"class":403},[298,16297,16298],{"class":409},"arr",[298,16300,3034],{"class":403},[298,16302,16303,16305,16307,16309,16311,16313,16315,16317,16320,16322,16325,16327,16330],{"class":300,"line":416},[298,16304,1446],{"class":393},[298,16306,2980],{"class":409},[298,16308,1000],{"class":403},[298,16310,968],{"class":304},[298,16312,1087],{"class":403},[298,16314,16298],{"class":409},[298,16316,619],{"class":403},[298,16318,16319],{"class":409},"dec2hex",[298,16321,1793],{"class":403},[298,16323,16324],{"class":304},"join",[298,16326,1087],{"class":403},[298,16328,16329],{"class":308},"''",[298,16331,3034],{"class":403},[298,16333,16334],{"class":300,"line":425},[298,16335,2573],{"class":403},[298,16337,16338],{"class":300,"line":433},[298,16339,701],{"emptyLinePlaceholder":199},[298,16341,16342,16344,16346,16348,16350,16353],{"class":300,"line":439},[298,16343,16182],{"class":409},[298,16345,1000],{"class":403},[298,16347,8495],{"class":304},[298,16349,1087],{"class":403},[298,16351,16352],{"class":304},"generateId",[298,16354,16355],{"class":403},"())\n",[30,16357,16358,16359,16362,16363,16366,16367,16369],{},"In this example, we create a ",[295,16360,16361],{},"result"," variable and an array of characters that we want to use to generate the random string. We then use a for loop to generate a random index within the range of the array and use the ",[295,16364,16365],{},"charAt()"," method to get the character at that index. We add that character to the ",[295,16368,16361],{}," variable on each iteration of the loop.",[37,16371,16373],{"id":16372},"npm-packages","npm Packages",[30,16375,16376,16377,8250,16380,16383],{},"If you want an even more secure and versatile option, you can use npm packages and libraries like ",[295,16378,16379],{},"randomstring",[295,16381,16382],{},"uuid"," that can be used to generate random strings in various formats.",[289,16385,16387],{"className":6271,"code":16386,"language":52,"meta":16,"style":16},"const uuidv4 = require('uuid/v4');\nconsole.log(uuidv4());\n",[295,16388,16389,16407],{"__ignoreMap":16},[298,16390,16391,16393,16396,16398,16400,16402,16405],{"class":300,"line":301},[298,16392,1650],{"class":985},[298,16394,16395],{"class":989}," uuidv4",[298,16397,994],{"class":993},[298,16399,16090],{"class":304},[298,16401,1087],{"class":403},[298,16403,16404],{"class":308},"'uuid/v4'",[298,16406,1777],{"class":403},[298,16408,16409,16411,16413,16415,16417,16420],{"class":300,"line":179},[298,16410,16182],{"class":409},[298,16412,1000],{"class":403},[298,16414,8495],{"class":304},[298,16416,1087],{"class":403},[298,16418,16419],{"class":304},"uuidv4",[298,16421,16422],{"class":403},"());\n",[30,16424,10060,16425,16427],{},[295,16426,16382],{}," package can be used to generate universally unique identifiers (UUIDs) which are unique across all devices and at all times.",[4731,16429,16430],{},"html pre.shiki code .s5uUr, html code.shiki .s5uUr{--shiki-light:#D73A49;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .sToQf, html code.shiki .sToQf{--shiki-light:#005CC5;--shiki-default:#4FC1FF;--shiki-dark:#4FC1FF}html pre.shiki code .s1p9p, html code.shiki .s1p9p{--shiki-light:#D73A49;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}html pre.shiki code .svuFb, html code.shiki .svuFb{--shiki-light:#6F42C1;--shiki-default:#DCDCAA;--shiki-dark:#DCDCAA}html pre.shiki code .sG4b4, html code.shiki .sG4b4{--shiki-light:#24292E;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}html pre.shiki code .sGDl4, html code.shiki .sGDl4{--shiki-light:#032F62;--shiki-default:#CE9178;--shiki-dark:#CE9178}html pre.shiki code .s9TRk, html code.shiki .s9TRk{--shiki-light:#E36209;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .sEkCa, html code.shiki .sEkCa{--shiki-light:#D73A49;--shiki-default:#C586C0;--shiki-dark:#C586C0}html pre.shiki code .sZiGn, html code.shiki .sZiGn{--shiki-light:#24292E;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .seC34, html code.shiki .seC34{--shiki-light:#005CC5;--shiki-default:#B5CEA8;--shiki-dark:#B5CEA8}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":16,"searchDepth":17,"depth":17,"links":16432},[16433,16434,16435],{"id":16065,"depth":179,"text":16066},{"id":16219,"depth":179,"text":16220},{"id":16372,"depth":179,"text":16373},"Different ways to generate random strings and characters in JavaScript. whether in the backend, frontend, or through npm packages","__GHOST_URL__/content/images/2023/01/carbon.png",{"slug":16439,"excerpt":16440},"generate-random-strings-characters-in-javascript",{"type":13,"value":16441},[16442,16444],[30,16443,16062],{},[37,16445,16066],{"id":16065},"/generate-random-strings-characters-in-javascript","2023-01-19T13:14:04.000Z",{"title":16057,"description":16436},[52,206],"2023-01-19T13:17:37.000Z","Qk4t3D6pWqc3LnkSky17Vm1YxrV6FgQH2MTwYQY58yE",{"id":16453,"title":16454,"author":26,"body":16455,"category":19,"description":20091,"extension":7,"image":20092,"isDraft":190,"isFeatured":199,"locale":9,"meta":20093,"navigation":199,"path":20104,"publishedAt":20105,"readingTime":506,"seo":20106,"stem":20107,"tags":20108,"updatedAt":8214,"__hash__":20110},"articles_en/getting-started-nuxt3.md","Getting Started with Nuxt: A Complete Guide for Modern Web Development",{"type":13,"value":16456,"toc":20046},[16457,16460,16463,16467,16470,16474,16480,16491,16501,16507,16513,16577,16582,16608,16614,16628,16632,16636,16639,16652,16656,16659,16675,16678,16686,16689,16716,16723,16727,16730,16736,16740,16744,16750,16755,16866,16871,16874,16882,17069,17073,17076,17080,17296,17299,17339,17343,17350,17355,17562,17565,17612,17616,17619,17624,17867,17872,17990,17995,18049,18053,18059,18064,18125,18128,18218,18223,18231,18323,18327,18330,18334,18497,18500,18664,18668,18671,18675,18688,18692,18722,18726,18740,18743,18857,18861,18875,18878,18931,18935,18937,18950,18954,18968,18974,18978,18992,18996,18999,19013,19017,19020,19025,19043,19048,19082,19091,19096,19116,19119,19123,19126,19176,19180,19190,19194,19197,19202,19416,19420,19427,19496,19500,19520,19524,19528,19723,19727,19818,19821,19862,19866,19871,19894,19899,19923,19928,19945,19949,19952,19969,19972,19976,19979,20033,20035,20038,20041,20043],[30,16458,16459],{},"Nuxt has become one of the most popular frameworks for building modern web applications with Vue.js. Whether you're creating a blog, an e-commerce site, or a complex web application, Nuxt provides the tools and structure you need to build fast, SEO-friendly, and maintainable projects.",[30,16461,16462],{},"This comprehensive guide will take you from zero to productive with Nuxt, covering everything from basic setup to advanced features and best practices.",[37,16464,16466],{"id":16465},"what-is-nuxt-and-why-should-you-use-it","What is Nuxt and Why Should You Use It?",[30,16468,16469],{},"Nuxt is a framework built on top of Vue.js that adds powerful features for production-ready applications. Think of it as Vue.js with superpowers for building full-stack web applications.",[4168,16471,16473],{"id":16472},"key-benefits","Key Benefits",[30,16475,16476,16479],{},[235,16477,16478],{},"1. Server-Side Rendering (SSR) Out of the Box","\nUnlike traditional Vue apps that render on the client, Nuxt can render your pages on the server, delivering fully-formed HTML to the browser. This means:",[229,16481,16482,16485,16488],{},[232,16483,16484],{},"Better SEO (search engines see your full content immediately)",[232,16486,16487],{},"Faster initial page loads",[232,16489,16490],{},"Better performance on slower devices",[30,16492,16493,16496,16497,16500],{},[235,16494,16495],{},"2. File-Based Routing","\nNo need to manually configure routes. Create a file in the ",[295,16498,16499],{},"pages"," directory, and Nuxt automatically creates a route for it:",[289,16502,16505],{"className":16503,"code":16504,"language":756},[754],"pages/\n  index.vue          → /\n  about.vue          → /about\n  blog/\n    index.vue        → /blog\n    [slug].vue       → /blog/:slug\n",[295,16506,16504],{"__ignoreMap":16},[30,16508,16509,16512],{},[235,16510,16511],{},"3. Auto-Imports","\nNuxt automatically imports components, composables, and utilities. Write less boilerplate code:",[289,16514,16516],{"className":1587,"code":16515,"language":1589,"meta":16,"style":16},"\u003C!-- No need to import! -->\n\u003Cscript setup>\nconst count = ref(0)  // ref is auto-imported\nconst route = useRoute()  // useRoute is auto-imported\n\u003C/script>\n",[295,16517,16518,16523,16533,16553,16569],{"__ignoreMap":16},[298,16519,16520],{"class":300,"line":301},[298,16521,16522],{"class":387},"\u003C!-- No need to import! -->\n",[298,16524,16525,16527,16529,16531],{"class":300,"line":179},[298,16526,1199],{"class":1596},[298,16528,1600],{"class":1599},[298,16530,1604],{"class":1603},[298,16532,1616],{"class":1596},[298,16534,16535,16537,16539,16541,16543,16545,16547,16550],{"class":300,"line":17},[298,16536,1650],{"class":985},[298,16538,8370],{"class":989},[298,16540,994],{"class":993},[298,16542,8375],{"class":304},[298,16544,1087],{"class":403},[298,16546,8380],{"class":2549},[298,16548,16549],{"class":403},")  ",[298,16551,16552],{"class":387},"// ref is auto-imported\n",[298,16554,16555,16557,16559,16561,16563,16566],{"class":300,"line":416},[298,16556,1650],{"class":985},[298,16558,2361],{"class":989},[298,16560,994],{"class":993},[298,16562,2366],{"class":304},[298,16564,16565],{"class":403},"()  ",[298,16567,16568],{"class":387},"// useRoute is auto-imported\n",[298,16570,16571,16573,16575],{"class":300,"line":425},[298,16572,1899],{"class":1596},[298,16574,1600],{"class":1599},[298,16576,1616],{"class":1596},[30,16578,16579],{},[235,16580,16581],{},"4. Built on Modern Tools",[229,16583,16584,16590,16596,16602],{},[232,16585,16586,16589],{},[235,16587,16588],{},"Vite"," for lightning-fast development and HMR (Hot Module Replacement)",[232,16591,16592,16595],{},[235,16593,16594],{},"Nitro"," for a powerful, portable server engine",[232,16597,16598,16601],{},[235,16599,16600],{},"TypeScript"," support out of the box",[232,16603,16604,16607],{},[235,16605,16606],{},"Vue 3"," with Composition API",[30,16609,16610,16613],{},[235,16611,16612],{},"5. Flexible Rendering Modes","\nChoose the best approach for each page:",[229,16615,16616,16619,16622,16625],{},[232,16617,16618],{},"SSR (Server-Side Rendering)",[232,16620,16621],{},"SPA (Single Page Application)",[232,16623,16624],{},"SSG (Static Site Generation)",[232,16626,16627],{},"ISR (Incremental Static Regeneration)",[37,16629,16631],{"id":16630},"installing-nuxt","Installing Nuxt",[4168,16633,16635],{"id":16634},"prerequisites","Prerequisites",[30,16637,16638],{},"Make sure you have Node.js installed (version 18.0.0 or higher). Check your version:",[289,16640,16642],{"className":291,"code":16641,"language":293,"meta":16,"style":16},"node --version\n",[295,16643,16644],{"__ignoreMap":16},[298,16645,16646,16649],{"class":300,"line":301},[298,16647,16648],{"class":304},"node",[298,16650,16651],{"class":631}," --version\n",[4168,16653,16655],{"id":16654},"create-your-first-project","Create Your First Project",[30,16657,16658],{},"Open your terminal and run:",[289,16660,16662],{"className":291,"code":16661,"language":293,"meta":16,"style":16},"npx nuxi@latest init my-app\n",[295,16663,16664],{"__ignoreMap":16},[298,16665,16666,16668,16670,16672],{"class":300,"line":301},[298,16667,305],{"class":304},[298,16669,309],{"class":308},[298,16671,312],{"class":308},[298,16673,16674],{"class":308}," my-app\n",[30,16676,16677],{},"You'll be asked a few questions:",[229,16679,16680,16683],{},[232,16681,16682],{},"Package manager: Choose npm, yarn, pnpm, or bun",[232,16684,16685],{},"Initialize git repository: Yes/No",[30,16687,16688],{},"After creation, navigate to your project and start the development server:",[289,16690,16692],{"className":291,"code":16691,"language":293,"meta":16,"style":16},"cd my-app\nnpm install\nnpm run dev\n",[295,16693,16694,16700,16706],{"__ignoreMap":16},[298,16695,16696,16698],{"class":300,"line":301},[298,16697,321],{"class":320},[298,16699,16674],{"class":308},[298,16701,16702,16704],{"class":300,"line":179},[298,16703,328],{"class":304},[298,16705,331],{"class":308},[298,16707,16708,16710,16713],{"class":300,"line":17},[298,16709,328],{"class":304},[298,16711,16712],{"class":308}," run",[298,16714,16715],{"class":308}," dev\n",[30,16717,16718,16719,16722],{},"Open your browser to ",[295,16720,16721],{},"http://localhost:3000"," and you'll see your new Nuxt app!",[4168,16724,16726],{"id":16725},"project-structure","Project Structure",[30,16728,16729],{},"Here's what Nuxt creates for you:",[289,16731,16734],{"className":16732,"code":16733,"language":756},[754],"my-app/\n├── .nuxt/              # Generated files (don't edit)\n├── node_modules/       # Dependencies\n├── pages/              # Your application pages\n│   └── index.vue       # Home page (/)\n├── public/             # Static files\n├── server/             # Backend API routes\n├── app.vue             # Root component\n├── nuxt.config.ts      # Nuxt configuration\n└── package.json        # Project metadata\n",[295,16735,16733],{"__ignoreMap":16},[37,16737,16739],{"id":16738},"essential-concepts","Essential Concepts",[4168,16741,16743],{"id":16742},"_1-pages-and-routing","1. Pages and Routing",[30,16745,16746,16747,16749],{},"Create a new file in the ",[295,16748,16499],{}," directory:",[30,16751,16752],{},[235,16753,16754],{},"pages/about.vue",[289,16756,16758],{"className":1587,"code":16757,"language":1589,"meta":16,"style":16},"\u003Cscript setup>\ndefinePageMeta({\n  title: 'About Us'\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>About Our Company\u003C/h1>\n    \u003Cp>We build amazing products...\u003C/p>\n  \u003C/div>\n\u003C/template>\n",[295,16759,16760,16770,16777,16784,16788,16796,16800,16808,16816,16833,16850,16858],{"__ignoreMap":16},[298,16761,16762,16764,16766,16768],{"class":300,"line":301},[298,16763,1199],{"class":1596},[298,16765,1600],{"class":1599},[298,16767,1604],{"class":1603},[298,16769,1616],{"class":1596},[298,16771,16772,16775],{"class":300,"line":179},[298,16773,16774],{"class":304},"definePageMeta",[298,16776,404],{"class":403},[298,16778,16779,16781],{"class":300,"line":17},[298,16780,1010],{"class":409},[298,16782,16783],{"class":308}," 'About Us'\n",[298,16785,16786],{"class":300,"line":416},[298,16787,9387],{"class":403},[298,16789,16790,16792,16794],{"class":300,"line":425},[298,16791,1899],{"class":1596},[298,16793,1600],{"class":1599},[298,16795,1616],{"class":1596},[298,16797,16798],{"class":300,"line":433},[298,16799,701],{"emptyLinePlaceholder":199},[298,16801,16802,16804,16806],{"class":300,"line":439},[298,16803,1199],{"class":1596},[298,16805,1914],{"class":1599},[298,16807,1616],{"class":1596},[298,16809,16810,16812,16814],{"class":300,"line":202},[298,16811,1921],{"class":1596},[298,16813,2003],{"class":1599},[298,16815,1616],{"class":1596},[298,16817,16818,16820,16822,16824,16827,16829,16831],{"class":300,"line":450},[298,16819,1931],{"class":1596},[298,16821,1952],{"class":1599},[298,16823,2203],{"class":1596},[298,16825,16826],{"class":403},"About Our Company",[298,16828,1899],{"class":1596},[298,16830,1952],{"class":1599},[298,16832,1616],{"class":1596},[298,16834,16835,16837,16839,16841,16844,16846,16848],{"class":300,"line":459},[298,16836,1931],{"class":1596},[298,16838,30],{"class":1599},[298,16840,2203],{"class":1596},[298,16842,16843],{"class":403},"We build amazing products...",[298,16845,1899],{"class":1596},[298,16847,30],{"class":1599},[298,16849,1616],{"class":1596},[298,16851,16852,16854,16856],{"class":300,"line":467},[298,16853,2294],{"class":1596},[298,16855,2003],{"class":1599},[298,16857,1616],{"class":1596},[298,16859,16860,16862,16864],{"class":300,"line":473},[298,16861,1899],{"class":1596},[298,16863,1914],{"class":1599},[298,16865,1616],{"class":1596},[30,16867,16868],{},[235,16869,16870],{},"Dynamic Routes:",[30,16872,16873],{},"Create a file with brackets for dynamic segments:",[30,16875,16876],{},[235,16877,16878,16879,16881],{},"pages/blog/",[298,16880,2417],{},".vue",[289,16883,16885],{"className":1587,"code":16884,"language":1589,"meta":16,"style":16},"\u003Cscript setup>\nconst route = useRoute()\nconst slug = route.params.slug\n\n// Fetch blog post based on slug\nconst { data: post } = await useFetch(`/api/posts/${slug}`)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Carticle>\n    \u003Ch1>{{ post.title }}\u003C/h1>\n    \u003Cdiv v-html=\"post.content\">\u003C/div>\n  \u003C/article>\n\u003C/template>\n",[295,16886,16887,16897,16909,16929,16933,16938,16973,16981,16985,16993,17001,17025,17053,17061],{"__ignoreMap":16},[298,16888,16889,16891,16893,16895],{"class":300,"line":301},[298,16890,1199],{"class":1596},[298,16892,1600],{"class":1599},[298,16894,1604],{"class":1603},[298,16896,1616],{"class":1596},[298,16898,16899,16901,16903,16905,16907],{"class":300,"line":179},[298,16900,1650],{"class":985},[298,16902,2361],{"class":989},[298,16904,994],{"class":993},[298,16906,2366],{"class":304},[298,16908,2475],{"class":403},[298,16910,16911,16913,16916,16918,16920,16922,16924,16926],{"class":300,"line":17},[298,16912,1650],{"class":985},[298,16914,16915],{"class":989}," slug",[298,16917,994],{"class":993},[298,16919,2361],{"class":409},[298,16921,1000],{"class":403},[298,16923,2412],{"class":409},[298,16925,1000],{"class":403},[298,16927,16928],{"class":409},"slug\n",[298,16930,16931],{"class":300,"line":416},[298,16932,701],{"emptyLinePlaceholder":199},[298,16934,16935],{"class":300,"line":425},[298,16936,16937],{"class":387},"// Fetch blog post based on slug\n",[298,16939,16940,16942,16944,16946,16948,16950,16952,16954,16956,16958,16960,16963,16965,16967,16969,16971],{"class":300,"line":433},[298,16941,1650],{"class":985},[298,16943,959],{"class":403},[298,16945,1696],{"class":1217},[298,16947,1699],{"class":403},[298,16949,1871],{"class":989},[298,16951,965],{"class":403},[298,16953,1610],{"class":993},[298,16955,1709],{"class":393},[298,16957,10977],{"class":304},[298,16959,1087],{"class":403},[298,16961,16962],{"class":308},"`/api/posts/",[298,16964,1453],{"class":1452},[298,16966,2417],{"class":409},[298,16968,1458],{"class":1452},[298,16970,1740],{"class":308},[298,16972,3034],{"class":403},[298,16974,16975,16977,16979],{"class":300,"line":439},[298,16976,1899],{"class":1596},[298,16978,1600],{"class":1599},[298,16980,1616],{"class":1596},[298,16982,16983],{"class":300,"line":202},[298,16984,701],{"emptyLinePlaceholder":199},[298,16986,16987,16989,16991],{"class":300,"line":450},[298,16988,1199],{"class":1596},[298,16990,1914],{"class":1599},[298,16992,1616],{"class":1596},[298,16994,16995,16997,16999],{"class":300,"line":459},[298,16996,1921],{"class":1596},[298,16998,2440],{"class":1599},[298,17000,1616],{"class":1596},[298,17002,17003,17005,17007,17009,17011,17013,17015,17017,17019,17021,17023],{"class":300,"line":467},[298,17004,1931],{"class":1596},[298,17006,1952],{"class":1599},[298,17008,2203],{"class":1596},[298,17010,2206],{"class":403},[298,17012,1871],{"class":409},[298,17014,1000],{"class":403},[298,17016,2154],{"class":409},[298,17018,2215],{"class":403},[298,17020,1899],{"class":1596},[298,17022,1952],{"class":1599},[298,17024,1616],{"class":1596},[298,17026,17027,17029,17031,17034,17036,17038,17040,17042,17044,17046,17049,17051],{"class":300,"line":473},[298,17028,1931],{"class":1596},[298,17030,2003],{"class":1599},[298,17032,17033],{"class":1603}," v-html",[298,17035,1610],{"class":403},[298,17037,2030],{"class":1732},[298,17039,1871],{"class":409},[298,17041,1000],{"class":403},[298,17043,11456],{"class":409},[298,17045,2030],{"class":1732},[298,17047,17048],{"class":1596},">\u003C/",[298,17050,2003],{"class":1599},[298,17052,1616],{"class":1596},[298,17054,17055,17057,17059],{"class":300,"line":484},[298,17056,2294],{"class":1596},[298,17058,2440],{"class":1599},[298,17060,1616],{"class":1596},[298,17062,17063,17065,17067],{"class":300,"line":495},[298,17064,1899],{"class":1596},[298,17066,1914],{"class":1599},[298,17068,1616],{"class":1596},[4168,17070,17072],{"id":17071},"_2-layouts","2. Layouts",[30,17074,17075],{},"Layouts wrap your pages with common structure (header, footer, etc.).",[30,17077,17078],{},[235,17079,3624],{},[289,17081,17083],{"className":1587,"code":17082,"language":1589,"meta":16,"style":16},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cheader>\n      \u003Cnav>\n        \u003CNuxtLink to=\"/\">Home\u003C/NuxtLink>\n        \u003CNuxtLink to=\"/about\">About\u003C/NuxtLink>\n        \u003CNuxtLink to=\"/blog\">Blog\u003C/NuxtLink>\n      \u003C/nav>\n    \u003C/header>\n    \n    \u003Cmain>\n      \u003C!-- Your page content goes here -->\n      \u003Cslot />\n    \u003C/main>\n    \n    \u003Cfooter>\n      \u003Cp>© 2025 My App\u003C/p>\n    \u003C/footer>\n  \u003C/div>\n\u003C/template>\n",[295,17084,17085,17093,17101,17109,17118,17141,17165,17189,17197,17205,17209,17217,17222,17232,17240,17244,17252,17272,17280,17288],{"__ignoreMap":16},[298,17086,17087,17089,17091],{"class":300,"line":301},[298,17088,1199],{"class":1596},[298,17090,1914],{"class":1599},[298,17092,1616],{"class":1596},[298,17094,17095,17097,17099],{"class":300,"line":179},[298,17096,1921],{"class":1596},[298,17098,2003],{"class":1599},[298,17100,1616],{"class":1596},[298,17102,17103,17105,17107],{"class":300,"line":17},[298,17104,1931],{"class":1596},[298,17106,11710],{"class":1599},[298,17108,1616],{"class":1596},[298,17110,17111,17113,17116],{"class":300,"line":416},[298,17112,1949],{"class":1596},[298,17114,17115],{"class":1599},"nav",[298,17117,1616],{"class":1596},[298,17119,17120,17122,17124,17126,17128,17130,17132,17135,17137,17139],{"class":300,"line":425},[298,17121,2017],{"class":1596},[298,17123,2270],{"class":1599},[298,17125,10373],{"class":1603},[298,17127,1610],{"class":403},[298,17129,4613],{"class":308},[298,17131,2203],{"class":1596},[298,17133,17134],{"class":403},"Home",[298,17136,1899],{"class":1596},[298,17138,2270],{"class":1599},[298,17140,1616],{"class":1596},[298,17142,17143,17145,17147,17149,17151,17154,17156,17159,17161,17163],{"class":300,"line":433},[298,17144,2017],{"class":1596},[298,17146,2270],{"class":1599},[298,17148,10373],{"class":1603},[298,17150,1610],{"class":403},[298,17152,17153],{"class":308},"\"/about\"",[298,17155,2203],{"class":1596},[298,17157,17158],{"class":403},"About",[298,17160,1899],{"class":1596},[298,17162,2270],{"class":1599},[298,17164,1616],{"class":1596},[298,17166,17167,17169,17171,17173,17175,17178,17180,17183,17185,17187],{"class":300,"line":439},[298,17168,2017],{"class":1596},[298,17170,2270],{"class":1599},[298,17172,10373],{"class":1603},[298,17174,1610],{"class":403},[298,17176,17177],{"class":308},"\"/blog\"",[298,17179,2203],{"class":1596},[298,17181,17182],{"class":403},"Blog",[298,17184,1899],{"class":1596},[298,17186,2270],{"class":1599},[298,17188,1616],{"class":1596},[298,17190,17191,17193,17195],{"class":300,"line":202},[298,17192,1982],{"class":1596},[298,17194,17115],{"class":1599},[298,17196,1616],{"class":1596},[298,17198,17199,17201,17203],{"class":300,"line":450},[298,17200,2285],{"class":1596},[298,17202,11710],{"class":1599},[298,17204,1616],{"class":1596},[298,17206,17207],{"class":300,"line":459},[298,17208,2838],{"class":403},[298,17210,17211,17213,17215],{"class":300,"line":467},[298,17212,1931],{"class":1596},[298,17214,1924],{"class":1599},[298,17216,1616],{"class":1596},[298,17218,17219],{"class":300,"line":473},[298,17220,17221],{"class":387},"      \u003C!-- Your page content goes here -->\n",[298,17223,17224,17226,17228,17230],{"class":300,"line":484},[298,17225,1949],{"class":1596},[298,17227,11746],{"class":1599},[298,17229,11930],{"class":11929},[298,17231,1616],{"class":1596},[298,17233,17234,17236,17238],{"class":300,"line":495},[298,17235,2285],{"class":1596},[298,17237,1924],{"class":1599},[298,17239,1616],{"class":1596},[298,17241,17242],{"class":300,"line":506},[298,17243,2838],{"class":403},[298,17245,17246,17248,17250],{"class":300,"line":517},[298,17247,1931],{"class":1596},[298,17249,11878],{"class":1599},[298,17251,1616],{"class":1596},[298,17253,17254,17256,17258,17260,17263,17266,17268,17270],{"class":300,"line":526},[298,17255,1949],{"class":1596},[298,17257,30],{"class":1599},[298,17259,2203],{"class":1596},[298,17261,17262],{"class":631},"©",[298,17264,17265],{"class":403}," 2025 My App",[298,17267,1899],{"class":1596},[298,17269,30],{"class":1599},[298,17271,1616],{"class":1596},[298,17273,17274,17276,17278],{"class":300,"line":532},[298,17275,2285],{"class":1596},[298,17277,11878],{"class":1599},[298,17279,1616],{"class":1596},[298,17281,17282,17284,17286],{"class":300,"line":537},[298,17283,2294],{"class":1596},[298,17285,2003],{"class":1599},[298,17287,1616],{"class":1596},[298,17289,17290,17292,17294],{"class":300,"line":547},[298,17291,1899],{"class":1596},[298,17293,1914],{"class":1599},[298,17295,1616],{"class":1596},[30,17297,17298],{},"Use it in a page:",[289,17300,17302],{"className":1587,"code":17301,"language":1589,"meta":16,"style":16},"\u003Cscript setup>\ndefinePageMeta({\n  layout: 'default'\n})\n\u003C/script>\n",[295,17303,17304,17314,17320,17327,17331],{"__ignoreMap":16},[298,17305,17306,17308,17310,17312],{"class":300,"line":301},[298,17307,1199],{"class":1596},[298,17309,1600],{"class":1599},[298,17311,1604],{"class":1603},[298,17313,1616],{"class":1596},[298,17315,17316,17318],{"class":300,"line":179},[298,17317,16774],{"class":304},[298,17319,404],{"class":403},[298,17321,17322,17325],{"class":300,"line":17},[298,17323,17324],{"class":409},"  layout:",[298,17326,11644],{"class":308},[298,17328,17329],{"class":300,"line":416},[298,17330,9387],{"class":403},[298,17332,17333,17335,17337],{"class":300,"line":425},[298,17334,1899],{"class":1596},[298,17336,1600],{"class":1599},[298,17338,1616],{"class":1596},[4168,17340,17342],{"id":17341},"_3-components","3. Components",[30,17344,17345,17346,17349],{},"Components in the ",[295,17347,17348],{},"components"," directory are automatically imported:",[30,17351,17352],{},[235,17353,17354],{},"components/Button.vue",[289,17356,17358],{"className":1587,"code":17357,"language":1589,"meta":16,"style":16},"\u003Cscript setup>\ndefineProps\u003C{\n  label: string\n  variant?: 'primary' | 'secondary'\n}>()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cbutton :class=\"variant\">\n    {{ label }}\n  \u003C/button>\n\u003C/template>\n\n\u003Cstyle scoped>\n.primary {\n  background: #f97216;\n  color: white;\n}\n.secondary {\n  background: #6b7280;\n  color: white;\n}\n\u003C/style>\n",[295,17359,17360,17370,17377,17386,17400,17405,17413,17417,17425,17445,17455,17463,17471,17475,17486,17494,17506,17518,17522,17529,17540,17550,17554],{"__ignoreMap":16},[298,17361,17362,17364,17366,17368],{"class":300,"line":301},[298,17363,1199],{"class":1596},[298,17365,1600],{"class":1599},[298,17367,1604],{"class":1603},[298,17369,1616],{"class":1596},[298,17371,17372,17374],{"class":300,"line":179},[298,17373,10086],{"class":304},[298,17375,17376],{"class":403},"\u003C{\n",[298,17378,17379,17382,17384],{"class":300,"line":17},[298,17380,17381],{"class":1217},"  label",[298,17383,375],{"class":993},[298,17385,10592],{"class":1223},[298,17387,17388,17390,17392,17395,17397],{"class":300,"line":416},[298,17389,11598],{"class":1217},[298,17391,1300],{"class":993},[298,17393,17394],{"class":308}," 'primary'",[298,17396,3316],{"class":993},[298,17398,17399],{"class":308}," 'secondary'\n",[298,17401,17402],{"class":300,"line":425},[298,17403,17404],{"class":403},"}>()\n",[298,17406,17407,17409,17411],{"class":300,"line":433},[298,17408,1899],{"class":1596},[298,17410,1600],{"class":1599},[298,17412,1616],{"class":1596},[298,17414,17415],{"class":300,"line":439},[298,17416,701],{"emptyLinePlaceholder":199},[298,17418,17419,17421,17423],{"class":300,"line":202},[298,17420,1199],{"class":1596},[298,17422,1914],{"class":1599},[298,17424,1616],{"class":1596},[298,17426,17427,17429,17431,17433,17435,17437,17439,17441,17443],{"class":300,"line":450},[298,17428,1921],{"class":1596},[298,17430,9664],{"class":1599},[298,17432,2848],{"class":403},[298,17434,10010],{"class":1603},[298,17436,1610],{"class":403},[298,17438,2030],{"class":1732},[298,17440,11690],{"class":409},[298,17442,2030],{"class":1732},[298,17444,1616],{"class":1596},[298,17446,17447,17450,17453],{"class":300,"line":459},[298,17448,17449],{"class":403},"    {{ ",[298,17451,17452],{"class":409},"label",[298,17454,3169],{"class":403},[298,17456,17457,17459,17461],{"class":300,"line":467},[298,17458,2294],{"class":1596},[298,17460,9664],{"class":1599},[298,17462,1616],{"class":1596},[298,17464,17465,17467,17469],{"class":300,"line":473},[298,17466,1899],{"class":1596},[298,17468,1914],{"class":1599},[298,17470,1616],{"class":1596},[298,17472,17473],{"class":300,"line":484},[298,17474,701],{"emptyLinePlaceholder":199},[298,17476,17477,17479,17481,17484],{"class":300,"line":495},[298,17478,1199],{"class":1596},[298,17480,4731],{"class":1599},[298,17482,17483],{"class":1603}," scoped",[298,17485,1616],{"class":1596},[298,17487,17488,17492],{"class":300,"line":506},[298,17489,17491],{"class":17490},"sO3gw",".primary",[298,17493,456],{"class":403},[298,17495,17496,17499,17501,17504],{"class":300,"line":517},[298,17497,17498],{"class":4821},"  background",[298,17500,1699],{"class":403},[298,17502,17503],{"class":4050},"#f97216",[298,17505,974],{"class":403},[298,17507,17508,17511,17513,17516],{"class":300,"line":526},[298,17509,17510],{"class":4821},"  color",[298,17512,1699],{"class":403},[298,17514,17515],{"class":4050},"white",[298,17517,974],{"class":403},[298,17519,17520],{"class":300,"line":532},[298,17521,2573],{"class":403},[298,17523,17524,17527],{"class":300,"line":537},[298,17525,17526],{"class":17490},".secondary",[298,17528,456],{"class":403},[298,17530,17531,17533,17535,17538],{"class":300,"line":547},[298,17532,17498],{"class":4821},[298,17534,1699],{"class":403},[298,17536,17537],{"class":4050},"#6b7280",[298,17539,974],{"class":403},[298,17541,17542,17544,17546,17548],{"class":300,"line":557},[298,17543,17510],{"class":4821},[298,17545,1699],{"class":403},[298,17547,17515],{"class":4050},[298,17549,974],{"class":403},[298,17551,17552],{"class":300,"line":567},[298,17553,2573],{"class":403},[298,17555,17556,17558,17560],{"class":300,"line":577},[298,17557,1899],{"class":1596},[298,17559,4731],{"class":1599},[298,17561,1616],{"class":1596},[30,17563,17564],{},"Use it anywhere without importing:",[289,17566,17568],{"className":1587,"code":17567,"language":1589,"meta":16,"style":16},"\u003Ctemplate>\n  \u003CButton label=\"Click me\" variant=\"primary\" />\n\u003C/template>\n",[295,17569,17570,17578,17604],{"__ignoreMap":16},[298,17571,17572,17574,17576],{"class":300,"line":301},[298,17573,1199],{"class":1596},[298,17575,1914],{"class":1599},[298,17577,1616],{"class":1596},[298,17579,17580,17582,17585,17588,17590,17593,17595,17597,17600,17602],{"class":300,"line":179},[298,17581,1921],{"class":1596},[298,17583,17584],{"class":1599},"Button",[298,17586,17587],{"class":1603}," label",[298,17589,1610],{"class":403},[298,17591,17592],{"class":308},"\"Click me\"",[298,17594,11974],{"class":1603},[298,17596,1610],{"class":403},[298,17598,17599],{"class":308},"\"primary\"",[298,17601,11930],{"class":11929},[298,17603,1616],{"class":1596},[298,17605,17606,17608,17610],{"class":300,"line":17},[298,17607,1899],{"class":1596},[298,17609,1914],{"class":1599},[298,17611,1616],{"class":1596},[4168,17613,17615],{"id":17614},"_4-data-fetching","4. Data Fetching",[30,17617,17618],{},"Nuxt provides powerful composables for fetching data:",[30,17620,17621],{},[235,17622,17623],{},"useFetch - For External APIs",[289,17625,17627],{"className":1587,"code":17626,"language":1589,"meta":16,"style":16},"\u003Cscript setup>\n// Automatically fetches on server and client\nconst { data: users, pending, error } = await useFetch('https://api.example.com/users')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp v-if=\"pending\">Loading...\u003C/p>\n    \u003Cp v-else-if=\"error\">Error: {{ error.message }}\u003C/p>\n    \u003Cul v-else>\n      \u003Cli v-for=\"user in users\" :key=\"user.id\">\n        {{ user.name }}\n      \u003C/li>\n    \u003C/ul>\n  \u003C/div>\n\u003C/template>\n",[295,17628,17629,17639,17644,17681,17689,17693,17701,17709,17736,17773,17783,17823,17835,17843,17851,17859],{"__ignoreMap":16},[298,17630,17631,17633,17635,17637],{"class":300,"line":301},[298,17632,1199],{"class":1596},[298,17634,1600],{"class":1599},[298,17636,1604],{"class":1603},[298,17638,1616],{"class":1596},[298,17640,17641],{"class":300,"line":179},[298,17642,17643],{"class":387},"// Automatically fetches on server and client\n",[298,17645,17646,17648,17650,17652,17654,17657,17659,17662,17664,17666,17668,17670,17672,17674,17676,17679],{"class":300,"line":17},[298,17647,1650],{"class":985},[298,17649,959],{"class":403},[298,17651,1696],{"class":1217},[298,17653,1699],{"class":403},[298,17655,17656],{"class":989},"users",[298,17658,619],{"class":403},[298,17660,17661],{"class":989},"pending",[298,17663,619],{"class":403},[298,17665,9222],{"class":989},[298,17667,965],{"class":403},[298,17669,1610],{"class":993},[298,17671,1709],{"class":393},[298,17673,10977],{"class":304},[298,17675,1087],{"class":403},[298,17677,17678],{"class":308},"'https://api.example.com/users'",[298,17680,3034],{"class":403},[298,17682,17683,17685,17687],{"class":300,"line":416},[298,17684,1899],{"class":1596},[298,17686,1600],{"class":1599},[298,17688,1616],{"class":1596},[298,17690,17691],{"class":300,"line":425},[298,17692,701],{"emptyLinePlaceholder":199},[298,17694,17695,17697,17699],{"class":300,"line":433},[298,17696,1199],{"class":1596},[298,17698,1914],{"class":1599},[298,17700,1616],{"class":1596},[298,17702,17703,17705,17707],{"class":300,"line":439},[298,17704,1921],{"class":1596},[298,17706,2003],{"class":1599},[298,17708,1616],{"class":1596},[298,17710,17711,17713,17715,17717,17719,17721,17723,17725,17727,17730,17732,17734],{"class":300,"line":202},[298,17712,1931],{"class":1596},[298,17714,30],{"class":1599},[298,17716,9625],{"class":393},[298,17718,1610],{"class":403},[298,17720,2030],{"class":1732},[298,17722,17661],{"class":409},[298,17724,2030],{"class":1732},[298,17726,2203],{"class":1596},[298,17728,17729],{"class":403},"Loading...",[298,17731,1899],{"class":1596},[298,17733,30],{"class":1599},[298,17735,1616],{"class":1596},[298,17737,17738,17740,17742,17745,17747,17749,17751,17753,17755,17758,17760,17762,17765,17767,17769,17771],{"class":300,"line":450},[298,17739,1931],{"class":1596},[298,17741,30],{"class":1599},[298,17743,17744],{"class":393}," v-else-if",[298,17746,1610],{"class":403},[298,17748,2030],{"class":1732},[298,17750,9222],{"class":409},[298,17752,2030],{"class":1732},[298,17754,2203],{"class":1596},[298,17756,17757],{"class":403},"Error: {{ ",[298,17759,9222],{"class":409},[298,17761,1000],{"class":403},[298,17763,17764],{"class":409},"message",[298,17766,2215],{"class":403},[298,17768,1899],{"class":1596},[298,17770,30],{"class":1599},[298,17772,1616],{"class":1596},[298,17774,17775,17777,17779,17781],{"class":300,"line":459},[298,17776,1931],{"class":1596},[298,17778,229],{"class":1599},[298,17780,9706],{"class":393},[298,17782,1616],{"class":1596},[298,17784,17785,17787,17789,17792,17794,17796,17798,17800,17803,17805,17807,17809,17811,17813,17815,17817,17819,17821],{"class":300,"line":467},[298,17786,1949],{"class":1596},[298,17788,232],{"class":1599},[298,17790,17791],{"class":393}," v-for",[298,17793,1610],{"class":403},[298,17795,2030],{"class":1732},[298,17797,8560],{"class":409},[298,17799,2035],{"class":985},[298,17801,17802],{"class":409}," users",[298,17804,2030],{"class":1732},[298,17806,2848],{"class":403},[298,17808,2048],{"class":1603},[298,17810,1610],{"class":403},[298,17812,2030],{"class":1732},[298,17814,8560],{"class":409},[298,17816,1000],{"class":403},[298,17818,10705],{"class":409},[298,17820,2030],{"class":1732},[298,17822,1616],{"class":1596},[298,17824,17825,17827,17829,17831,17833],{"class":300,"line":473},[298,17826,1966],{"class":403},[298,17828,8560],{"class":409},[298,17830,1000],{"class":403},[298,17832,2994],{"class":409},[298,17834,3169],{"class":403},[298,17836,17837,17839,17841],{"class":300,"line":484},[298,17838,1982],{"class":1596},[298,17840,232],{"class":1599},[298,17842,1616],{"class":1596},[298,17844,17845,17847,17849],{"class":300,"line":495},[298,17846,2285],{"class":1596},[298,17848,229],{"class":1599},[298,17850,1616],{"class":1596},[298,17852,17853,17855,17857],{"class":300,"line":506},[298,17854,2294],{"class":1596},[298,17856,2003],{"class":1599},[298,17858,1616],{"class":1596},[298,17860,17861,17863,17865],{"class":300,"line":517},[298,17862,1899],{"class":1596},[298,17864,1914],{"class":1599},[298,17866,1616],{"class":1596},[30,17868,17869],{},[235,17870,17871],{},"useAsyncData - For More Control",[289,17873,17875],{"className":1587,"code":17874,"language":1589,"meta":16,"style":16},"\u003Cscript setup>\nconst { data: products } = await useAsyncData('products', async () => {\n  // Custom fetch logic\n  const response = await $fetch('/api/products', {\n    params: { category: 'electronics' }\n  })\n  return response.data\n})\n\u003C/script>\n",[295,17876,17877,17887,17923,17928,17948,17963,17967,17978,17982],{"__ignoreMap":16},[298,17878,17879,17881,17883,17885],{"class":300,"line":301},[298,17880,1199],{"class":1596},[298,17882,1600],{"class":1599},[298,17884,1604],{"class":1603},[298,17886,1616],{"class":1596},[298,17888,17889,17891,17893,17895,17897,17900,17902,17904,17906,17908,17910,17913,17915,17917,17919,17921],{"class":300,"line":179},[298,17890,1650],{"class":985},[298,17892,959],{"class":403},[298,17894,1696],{"class":1217},[298,17896,1699],{"class":403},[298,17898,17899],{"class":989},"products",[298,17901,965],{"class":403},[298,17903,1610],{"class":993},[298,17905,1709],{"class":393},[298,17907,1712],{"class":304},[298,17909,1087],{"class":403},[298,17911,17912],{"class":308},"'products'",[298,17914,619],{"class":403},[298,17916,9531],{"class":985},[298,17918,1750],{"class":403},[298,17920,1439],{"class":985},[298,17922,456],{"class":403},[298,17924,17925],{"class":300,"line":17},[298,17926,17927],{"class":387},"  // Custom fetch logic\n",[298,17929,17930,17932,17934,17936,17938,17941,17943,17946],{"class":300,"line":416},[298,17931,3271],{"class":985},[298,17933,9173],{"class":989},[298,17935,994],{"class":993},[298,17937,1709],{"class":393},[298,17939,17940],{"class":304}," $fetch",[298,17942,1087],{"class":403},[298,17944,17945],{"class":308},"'/api/products'",[298,17947,15772],{"class":403},[298,17949,17950,17953,17955,17958,17961],{"class":300,"line":425},[298,17951,17952],{"class":409},"    params:",[298,17954,959],{"class":403},[298,17956,17957],{"class":409},"category:",[298,17959,17960],{"class":308}," 'electronics'",[298,17962,15917],{"class":403},[298,17964,17965],{"class":300,"line":433},[298,17966,15405],{"class":403},[298,17968,17969,17971,17973,17975],{"class":300,"line":439},[298,17970,1446],{"class":393},[298,17972,9173],{"class":409},[298,17974,1000],{"class":403},[298,17976,17977],{"class":409},"data\n",[298,17979,17980],{"class":300,"line":202},[298,17981,9387],{"class":403},[298,17983,17984,17986,17988],{"class":300,"line":450},[298,17985,1899],{"class":1596},[298,17987,1600],{"class":1599},[298,17989,1616],{"class":1596},[30,17991,17992],{},[235,17993,17994],{},"useLazyFetch - For Client-Side Loading",[289,17996,17998],{"className":1587,"code":17997,"language":1589,"meta":16,"style":16},"\u003Cscript setup>\n// Doesn't block page render\nconst { data, pending } = useLazyFetch('/api/heavy-data')\n\u003C/script>\n",[295,17999,18000,18010,18015,18041],{"__ignoreMap":16},[298,18001,18002,18004,18006,18008],{"class":300,"line":301},[298,18003,1199],{"class":1596},[298,18005,1600],{"class":1599},[298,18007,1604],{"class":1603},[298,18009,1616],{"class":1596},[298,18011,18012],{"class":300,"line":179},[298,18013,18014],{"class":387},"// Doesn't block page render\n",[298,18016,18017,18019,18021,18023,18025,18027,18029,18031,18034,18036,18039],{"class":300,"line":17},[298,18018,1650],{"class":985},[298,18020,959],{"class":403},[298,18022,1696],{"class":989},[298,18024,619],{"class":403},[298,18026,17661],{"class":989},[298,18028,965],{"class":403},[298,18030,1610],{"class":993},[298,18032,18033],{"class":304}," useLazyFetch",[298,18035,1087],{"class":403},[298,18037,18038],{"class":308},"'/api/heavy-data'",[298,18040,3034],{"class":403},[298,18042,18043,18045,18047],{"class":300,"line":416},[298,18044,1899],{"class":1596},[298,18046,1600],{"class":1599},[298,18048,1616],{"class":1596},[4168,18050,18052],{"id":18051},"_5-server-routes-api","5. Server Routes (API)",[30,18054,18055,18056,16749],{},"Create backend endpoints in the ",[295,18057,18058],{},"server/api",[30,18060,18061],{},[235,18062,18063],{},"server/api/hello.ts",[289,18065,18067],{"className":378,"code":18066,"language":380,"meta":16,"style":16},"export default defineEventHandler(() => {\n  return {\n    message: 'Hello from the server!',\n    timestamp: new Date().toISOString()\n  }\n})\n",[295,18068,18069,18084,18090,18100,18117,18121],{"__ignoreMap":16},[298,18070,18071,18073,18075,18078,18080,18082],{"class":300,"line":301},[298,18072,394],{"class":393},[298,18074,397],{"class":393},[298,18076,18077],{"class":304}," defineEventHandler",[298,18079,1846],{"class":403},[298,18081,1439],{"class":985},[298,18083,456],{"class":403},[298,18085,18086,18088],{"class":300,"line":179},[298,18087,1446],{"class":393},[298,18089,456],{"class":403},[298,18091,18092,18095,18098],{"class":300,"line":17},[298,18093,18094],{"class":409},"    message:",[298,18096,18097],{"class":308}," 'Hello from the server!'",[298,18099,422],{"class":403},[298,18101,18102,18105,18107,18110,18112,18115],{"class":300,"line":416},[298,18103,18104],{"class":409},"    timestamp:",[298,18106,16259],{"class":985},[298,18108,18109],{"class":304}," Date",[298,18111,1115],{"class":403},[298,18113,18114],{"class":304},"toISOString",[298,18116,2475],{"class":403},[298,18118,18119],{"class":300,"line":425},[298,18120,737],{"class":403},[298,18122,18123],{"class":300,"line":433},[298,18124,9387],{"class":403},[30,18126,18127],{},"Access it from your frontend:",[289,18129,18131],{"className":1587,"code":18130,"language":1589,"meta":16,"style":16},"\u003Cscript setup>\nconst { data } = await useFetch('/api/hello')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cp>{{ data.message }}\u003C/p>\n\u003C/template>\n",[295,18132,18133,18143,18166,18174,18178,18186,18210],{"__ignoreMap":16},[298,18134,18135,18137,18139,18141],{"class":300,"line":301},[298,18136,1199],{"class":1596},[298,18138,1600],{"class":1599},[298,18140,1604],{"class":1603},[298,18142,1616],{"class":1596},[298,18144,18145,18147,18149,18151,18153,18155,18157,18159,18161,18164],{"class":300,"line":179},[298,18146,1650],{"class":985},[298,18148,959],{"class":403},[298,18150,1696],{"class":989},[298,18152,965],{"class":403},[298,18154,1610],{"class":993},[298,18156,1709],{"class":393},[298,18158,10977],{"class":304},[298,18160,1087],{"class":403},[298,18162,18163],{"class":308},"'/api/hello'",[298,18165,3034],{"class":403},[298,18167,18168,18170,18172],{"class":300,"line":17},[298,18169,1899],{"class":1596},[298,18171,1600],{"class":1599},[298,18173,1616],{"class":1596},[298,18175,18176],{"class":300,"line":416},[298,18177,701],{"emptyLinePlaceholder":199},[298,18179,18180,18182,18184],{"class":300,"line":425},[298,18181,1199],{"class":1596},[298,18183,1914],{"class":1599},[298,18185,1616],{"class":1596},[298,18187,18188,18190,18192,18194,18196,18198,18200,18202,18204,18206,18208],{"class":300,"line":433},[298,18189,1921],{"class":1596},[298,18191,30],{"class":1599},[298,18193,2203],{"class":1596},[298,18195,2206],{"class":403},[298,18197,1696],{"class":409},[298,18199,1000],{"class":403},[298,18201,17764],{"class":409},[298,18203,2215],{"class":403},[298,18205,1899],{"class":1596},[298,18207,30],{"class":1599},[298,18209,1616],{"class":1596},[298,18211,18212,18214,18216],{"class":300,"line":439},[298,18213,1899],{"class":1596},[298,18215,1914],{"class":1599},[298,18217,1616],{"class":1596},[30,18219,18220],{},[235,18221,18222],{},"With Parameters:",[30,18224,18225],{},[235,18226,18227,18228,18230],{},"server/api/users/",[298,18229,10705],{},".ts",[289,18232,18234],{"className":378,"code":18233,"language":380,"meta":16,"style":16},"export default defineEventHandler((event) => {\n  const id = getRouterParam(event, 'id')\n  \n  // Fetch user from database\n  return {\n    id,\n    name: 'John Doe',\n    email: 'john@example.com'\n  }\n})\n",[295,18235,18236,18255,18278,18282,18287,18293,18300,18309,18315,18319],{"__ignoreMap":16},[298,18237,18238,18240,18242,18244,18246,18249,18251,18253],{"class":300,"line":301},[298,18239,394],{"class":393},[298,18241,397],{"class":393},[298,18243,18077],{"class":304},[298,18245,14450],{"class":403},[298,18247,18248],{"class":1217},"event",[298,18250,1436],{"class":403},[298,18252,1439],{"class":985},[298,18254,456],{"class":403},[298,18256,18257,18259,18262,18264,18267,18269,18271,18273,18276],{"class":300,"line":179},[298,18258,3271],{"class":985},[298,18260,18261],{"class":989}," id",[298,18263,994],{"class":993},[298,18265,18266],{"class":304}," getRouterParam",[298,18268,1087],{"class":403},[298,18270,18248],{"class":409},[298,18272,619],{"class":403},[298,18274,18275],{"class":308},"'id'",[298,18277,3034],{"class":403},[298,18279,18280],{"class":300,"line":17},[298,18281,447],{"class":403},[298,18283,18284],{"class":300,"line":416},[298,18285,18286],{"class":387},"  // Fetch user from database\n",[298,18288,18289,18291],{"class":300,"line":425},[298,18290,1446],{"class":393},[298,18292,456],{"class":403},[298,18294,18295,18298],{"class":300,"line":433},[298,18296,18297],{"class":409},"    id",[298,18299,422],{"class":403},[298,18301,18302,18305,18307],{"class":300,"line":439},[298,18303,18304],{"class":409},"    name:",[298,18306,15794],{"class":308},[298,18308,422],{"class":403},[298,18310,18311,18313],{"class":300,"line":202},[298,18312,13165],{"class":409},[298,18314,15804],{"class":308},[298,18316,18317],{"class":300,"line":450},[298,18318,737],{"class":403},[298,18320,18321],{"class":300,"line":459},[298,18322,9387],{"class":403},[4168,18324,18326],{"id":18325},"_6-composables","6. Composables",[30,18328,18329],{},"Composables are reusable functions that encapsulate reactive logic:",[30,18331,18332],{},[235,18333,8654],{},[289,18335,18337],{"className":378,"code":18336,"language":380,"meta":16,"style":16},"export const useCounter = (initialValue = 0) => {\n  const count = ref(initialValue)\n  \n  const increment = () => count.value++\n  const decrement = () => count.value--\n  const reset = () => count.value = initialValue\n  \n  return {\n    count: readonly(count),\n    increment,\n    decrement,\n    reset\n  }\n}\n",[295,18338,18339,18363,18379,18383,18404,18425,18448,18452,18458,18472,18478,18485,18489,18493],{"__ignoreMap":16},[298,18340,18341,18343,18345,18347,18349,18351,18353,18355,18357,18359,18361],{"class":300,"line":301},[298,18342,394],{"class":393},[298,18344,986],{"class":985},[298,18346,8693],{"class":304},[298,18348,994],{"class":993},[298,18350,1426],{"class":403},[298,18352,8698],{"class":1217},[298,18354,994],{"class":993},[298,18356,8703],{"class":2549},[298,18358,1436],{"class":403},[298,18360,1439],{"class":985},[298,18362,456],{"class":403},[298,18364,18365,18367,18369,18371,18373,18375,18377],{"class":300,"line":179},[298,18366,3271],{"class":985},[298,18368,8370],{"class":989},[298,18370,994],{"class":993},[298,18372,8375],{"class":304},[298,18374,1087],{"class":403},[298,18376,8698],{"class":409},[298,18378,3034],{"class":403},[298,18380,18381],{"class":300,"line":17},[298,18382,447],{"class":403},[298,18384,18385,18387,18389,18391,18393,18395,18397,18399,18401],{"class":300,"line":416},[298,18386,3271],{"class":985},[298,18388,8586],{"class":304},[298,18390,994],{"class":993},[298,18392,1750],{"class":403},[298,18394,1439],{"class":985},[298,18396,8370],{"class":409},[298,18398,1000],{"class":403},[298,18400,1735],{"class":409},[298,18402,18403],{"class":993},"++\n",[298,18405,18406,18408,18410,18412,18414,18416,18418,18420,18422],{"class":300,"line":425},[298,18407,3271],{"class":985},[298,18409,8750],{"class":304},[298,18411,994],{"class":993},[298,18413,1750],{"class":403},[298,18415,1439],{"class":985},[298,18417,8370],{"class":409},[298,18419,1000],{"class":403},[298,18421,1735],{"class":409},[298,18423,18424],{"class":993},"--\n",[298,18426,18427,18429,18431,18433,18435,18437,18439,18441,18443,18445],{"class":300,"line":433},[298,18428,3271],{"class":985},[298,18430,6802],{"class":304},[298,18432,994],{"class":993},[298,18434,1750],{"class":403},[298,18436,1439],{"class":985},[298,18438,8370],{"class":409},[298,18440,1000],{"class":403},[298,18442,1735],{"class":409},[298,18444,994],{"class":993},[298,18446,18447],{"class":409}," initialValue\n",[298,18449,18450],{"class":300,"line":439},[298,18451,447],{"class":403},[298,18453,18454,18456],{"class":300,"line":202},[298,18455,1446],{"class":393},[298,18457,456],{"class":403},[298,18459,18460,18463,18466,18468,18470],{"class":300,"line":450},[298,18461,18462],{"class":409},"    count:",[298,18464,18465],{"class":304}," readonly",[298,18467,1087],{"class":403},[298,18469,8468],{"class":409},[298,18471,3970],{"class":403},[298,18473,18474,18476],{"class":300,"line":459},[298,18475,15518],{"class":409},[298,18477,422],{"class":403},[298,18479,18480,18483],{"class":300,"line":467},[298,18481,18482],{"class":409},"    decrement",[298,18484,422],{"class":403},[298,18486,18487],{"class":300,"line":473},[298,18488,13017],{"class":409},[298,18490,18491],{"class":300,"line":484},[298,18492,737],{"class":403},[298,18494,18495],{"class":300,"line":495},[298,18496,2573],{"class":403},[30,18498,18499],{},"Use it anywhere:",[289,18501,18503],{"className":1587,"code":18502,"language":1589,"meta":16,"style":16},"\u003Cscript setup>\nconst { count, increment, decrement } = useCounter(10)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp>Count: {{ count }}\u003C/p>\n    \u003Cbutton @click=\"increment\">+\u003C/button>\n    \u003Cbutton @click=\"decrement\">-\u003C/button>\n  \u003C/div>\n\u003C/template>\n",[295,18504,18505,18515,18543,18551,18555,18563,18571,18592,18620,18648,18656],{"__ignoreMap":16},[298,18506,18507,18509,18511,18513],{"class":300,"line":301},[298,18508,1199],{"class":1596},[298,18510,1600],{"class":1599},[298,18512,1604],{"class":1603},[298,18514,1616],{"class":1596},[298,18516,18517,18519,18521,18523,18525,18527,18529,18531,18533,18535,18537,18539,18541],{"class":300,"line":179},[298,18518,1650],{"class":985},[298,18520,959],{"class":403},[298,18522,8468],{"class":989},[298,18524,619],{"class":403},[298,18526,8811],{"class":989},[298,18528,619],{"class":403},[298,18530,8816],{"class":989},[298,18532,965],{"class":403},[298,18534,1610],{"class":993},[298,18536,8693],{"class":304},[298,18538,1087],{"class":403},[298,18540,8903],{"class":2549},[298,18542,3034],{"class":403},[298,18544,18545,18547,18549],{"class":300,"line":17},[298,18546,1899],{"class":1596},[298,18548,1600],{"class":1599},[298,18550,1616],{"class":1596},[298,18552,18553],{"class":300,"line":416},[298,18554,701],{"emptyLinePlaceholder":199},[298,18556,18557,18559,18561],{"class":300,"line":425},[298,18558,1199],{"class":1596},[298,18560,1914],{"class":1599},[298,18562,1616],{"class":1596},[298,18564,18565,18567,18569],{"class":300,"line":433},[298,18566,1921],{"class":1596},[298,18568,2003],{"class":1599},[298,18570,1616],{"class":1596},[298,18572,18573,18575,18577,18579,18582,18584,18586,18588,18590],{"class":300,"line":439},[298,18574,1931],{"class":1596},[298,18576,30],{"class":1599},[298,18578,2203],{"class":1596},[298,18580,18581],{"class":403},"Count: {{ ",[298,18583,8468],{"class":409},[298,18585,2215],{"class":403},[298,18587,1899],{"class":1596},[298,18589,30],{"class":1599},[298,18591,1616],{"class":1596},[298,18593,18594,18596,18598,18600,18602,18604,18606,18608,18610,18612,18614,18616,18618],{"class":300,"line":202},[298,18595,1931],{"class":1596},[298,18597,9664],{"class":1599},[298,18599,9667],{"class":403},[298,18601,9670],{"class":1603},[298,18603,1610],{"class":403},[298,18605,2030],{"class":1732},[298,18607,8811],{"class":409},[298,18609,2030],{"class":1732},[298,18611,2203],{"class":1596},[298,18613,13271],{"class":403},[298,18615,1899],{"class":1596},[298,18617,9664],{"class":1599},[298,18619,1616],{"class":1596},[298,18621,18622,18624,18626,18628,18630,18632,18634,18636,18638,18640,18642,18644,18646],{"class":300,"line":450},[298,18623,1931],{"class":1596},[298,18625,9664],{"class":1599},[298,18627,9667],{"class":403},[298,18629,9670],{"class":1603},[298,18631,1610],{"class":403},[298,18633,2030],{"class":1732},[298,18635,8816],{"class":409},[298,18637,2030],{"class":1732},[298,18639,2203],{"class":1596},[298,18641,3340],{"class":403},[298,18643,1899],{"class":1596},[298,18645,9664],{"class":1599},[298,18647,1616],{"class":1596},[298,18649,18650,18652,18654],{"class":300,"line":459},[298,18651,2294],{"class":1596},[298,18653,2003],{"class":1599},[298,18655,1616],{"class":1596},[298,18657,18658,18660,18662],{"class":300,"line":467},[298,18659,1899],{"class":1596},[298,18661,1914],{"class":1599},[298,18663,1616],{"class":1596},[37,18665,18667],{"id":18666},"essential-nuxt-modules","Essential Nuxt Modules",[30,18669,18670],{},"Extend Nuxt with official and community modules:",[4168,18672,18674],{"id":18673},"tailwind-css","Tailwind CSS",[289,18676,18678],{"className":291,"code":18677,"language":293,"meta":16,"style":16},"npm install @nuxtjs/tailwindcss\n",[295,18679,18680],{"__ignoreMap":16},[298,18681,18682,18684,18686],{"class":300,"line":301},[298,18683,328],{"class":304},[298,18685,346],{"class":308},[298,18687,355],{"class":308},[30,18689,18690],{},[235,18691,374],{},[289,18693,18695],{"className":378,"code":18694,"language":380,"meta":16,"style":16},"export default defineNuxtConfig({\n  modules: ['@nuxtjs/tailwindcss']\n})\n",[295,18696,18697,18707,18718],{"__ignoreMap":16},[298,18698,18699,18701,18703,18705],{"class":300,"line":301},[298,18700,394],{"class":393},[298,18702,397],{"class":393},[298,18704,400],{"class":304},[298,18706,404],{"class":403},[298,18708,18709,18711,18713,18716],{"class":300,"line":179},[298,18710,410],{"class":409},[298,18712,1813],{"class":403},[298,18714,18715],{"class":308},"'@nuxtjs/tailwindcss'",[298,18717,12336],{"class":403},[298,18719,18720],{"class":300,"line":17},[298,18721,9387],{"class":403},[4168,18723,18725],{"id":18724},"nuxt-content-for-blogsdocs","Nuxt Content (for blogs/docs)",[289,18727,18729],{"className":291,"code":18728,"language":293,"meta":16,"style":16},"npm install @nuxt/content\n",[295,18730,18731],{"__ignoreMap":16},[298,18732,18733,18735,18737],{"class":300,"line":301},[298,18734,328],{"class":304},[298,18736,346],{"class":308},[298,18738,18739],{"class":308}," @nuxt/content\n",[30,18741,18742],{},"Great for markdown-based content:",[289,18744,18746],{"className":1587,"code":18745,"language":1589,"meta":16,"style":16},"\u003Cscript setup>\nconst { data: article } = await useAsyncData('article', () => \n  queryContent('/blog/my-post').findOne()\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CContentDoc :value=\"article\" />\n\u003C/template>\n",[295,18747,18748,18758,18789,18804,18808,18816,18820,18828,18849],{"__ignoreMap":16},[298,18749,18750,18752,18754,18756],{"class":300,"line":301},[298,18751,1199],{"class":1596},[298,18753,1600],{"class":1599},[298,18755,1604],{"class":1603},[298,18757,1616],{"class":1596},[298,18759,18760,18762,18764,18766,18768,18770,18772,18774,18776,18778,18780,18783,18785,18787],{"class":300,"line":179},[298,18761,1650],{"class":985},[298,18763,959],{"class":403},[298,18765,1696],{"class":1217},[298,18767,1699],{"class":403},[298,18769,2440],{"class":989},[298,18771,965],{"class":403},[298,18773,1610],{"class":993},[298,18775,1709],{"class":393},[298,18777,1712],{"class":304},[298,18779,1087],{"class":403},[298,18781,18782],{"class":308},"'article'",[298,18784,2464],{"class":403},[298,18786,1439],{"class":985},[298,18788,1851],{"class":403},[298,18790,18791,18793,18795,18798,18800,18802],{"class":300,"line":17},[298,18792,2472],{"class":304},[298,18794,1087],{"class":403},[298,18796,18797],{"class":308},"'/blog/my-post'",[298,18799,1793],{"class":403},[298,18801,2501],{"class":304},[298,18803,2475],{"class":403},[298,18805,18806],{"class":300,"line":416},[298,18807,3034],{"class":403},[298,18809,18810,18812,18814],{"class":300,"line":425},[298,18811,1899],{"class":1596},[298,18813,1600],{"class":1599},[298,18815,1616],{"class":1596},[298,18817,18818],{"class":300,"line":433},[298,18819,701],{"emptyLinePlaceholder":199},[298,18821,18822,18824,18826],{"class":300,"line":439},[298,18823,1199],{"class":1596},[298,18825,1914],{"class":1599},[298,18827,1616],{"class":1596},[298,18829,18830,18832,18835,18837,18839,18841,18843,18845,18847],{"class":300,"line":202},[298,18831,1921],{"class":1596},[298,18833,18834],{"class":1599},"ContentDoc",[298,18836,2848],{"class":403},[298,18838,1735],{"class":1603},[298,18840,1610],{"class":403},[298,18842,2030],{"class":1732},[298,18844,2440],{"class":409},[298,18846,2030],{"class":1732},[298,18848,2861],{"class":1596},[298,18850,18851,18853,18855],{"class":300,"line":450},[298,18852,1899],{"class":1596},[298,18854,1914],{"class":1599},[298,18856,1616],{"class":1596},[4168,18858,18860],{"id":18859},"nuxt-image","Nuxt Image",[289,18862,18864],{"className":291,"code":18863,"language":293,"meta":16,"style":16},"npm install @nuxt/image\n",[295,18865,18866],{"__ignoreMap":16},[298,18867,18868,18870,18872],{"class":300,"line":301},[298,18869,328],{"class":304},[298,18871,346],{"class":308},[298,18873,18874],{"class":308}," @nuxt/image\n",[30,18876,18877],{},"Automatic image optimization:",[289,18879,18881],{"className":1587,"code":18880,"language":1589,"meta":16,"style":16},"\u003Ctemplate>\n  \u003CNuxtImg src=\"/photo.jpg\" width=\"400\" height=\"300\" />\n\u003C/template>\n",[295,18882,18883,18891,18923],{"__ignoreMap":16},[298,18884,18885,18887,18889],{"class":300,"line":301},[298,18886,1199],{"class":1596},[298,18888,1914],{"class":1599},[298,18890,1616],{"class":1596},[298,18892,18893,18895,18898,18900,18902,18905,18908,18910,18913,18916,18918,18921],{"class":300,"line":179},[298,18894,1921],{"class":1596},[298,18896,18897],{"class":1599},"NuxtImg",[298,18899,6560],{"class":1603},[298,18901,1610],{"class":403},[298,18903,18904],{"class":308},"\"/photo.jpg\"",[298,18906,18907],{"class":1603}," width",[298,18909,1610],{"class":403},[298,18911,18912],{"class":308},"\"400\"",[298,18914,18915],{"class":1603}," height",[298,18917,1610],{"class":403},[298,18919,18920],{"class":308},"\"300\"",[298,18922,2861],{"class":1596},[298,18924,18925,18927,18929],{"class":300,"line":17},[298,18926,1899],{"class":1596},[298,18928,1914],{"class":1599},[298,18930,1616],{"class":1596},[37,18932,18934],{"id":18933},"building-and-deploying","Building and Deploying",[4168,18936,5],{"id":19},[289,18938,18940],{"className":291,"code":18939,"language":293,"meta":16,"style":16},"npm run dev\n",[295,18941,18942],{"__ignoreMap":16},[298,18943,18944,18946,18948],{"class":300,"line":301},[298,18945,328],{"class":304},[298,18947,16712],{"class":308},[298,18949,16715],{"class":308},[4168,18951,18953],{"id":18952},"production-build","Production Build",[289,18955,18957],{"className":291,"code":18956,"language":293,"meta":16,"style":16},"npm run build\n",[295,18958,18959],{"__ignoreMap":16},[298,18960,18961,18963,18965],{"class":300,"line":301},[298,18962,328],{"class":304},[298,18964,16712],{"class":308},[298,18966,18967],{"class":308}," build\n",[30,18969,18970,18971],{},"This creates an optimized build in ",[295,18972,18973],{},".output",[4168,18975,18977],{"id":18976},"preview-production-build","Preview Production Build",[289,18979,18981],{"className":291,"code":18980,"language":293,"meta":16,"style":16},"npm run preview\n",[295,18982,18983],{"__ignoreMap":16},[298,18984,18985,18987,18989],{"class":300,"line":301},[298,18986,328],{"class":304},[298,18988,16712],{"class":308},[298,18990,18991],{"class":308}," preview\n",[4168,18993,18995],{"id":18994},"static-generation","Static Generation",[30,18997,18998],{},"For purely static sites:",[289,19000,19002],{"className":291,"code":19001,"language":293,"meta":16,"style":16},"npm run generate\n",[295,19003,19004],{"__ignoreMap":16},[298,19005,19006,19008,19010],{"class":300,"line":301},[298,19007,328],{"class":304},[298,19009,16712],{"class":308},[298,19011,19012],{"class":308}," generate\n",[4168,19014,19016],{"id":19015},"deployment-platforms","Deployment Platforms",[30,19018,19019],{},"Nuxt works everywhere:",[30,19021,19022],{},[235,19023,19024],{},"Vercel:",[289,19026,19028],{"className":291,"code":19027,"language":293,"meta":16,"style":16},"npm run build\n# Deploy with Vercel CLI or connect your git repo\n",[295,19029,19030,19038],{"__ignoreMap":16},[298,19031,19032,19034,19036],{"class":300,"line":301},[298,19033,328],{"class":304},[298,19035,16712],{"class":308},[298,19037,18967],{"class":308},[298,19039,19040],{"class":300,"line":179},[298,19041,19042],{"class":387},"# Deploy with Vercel CLI or connect your git repo\n",[30,19044,19045],{},[235,19046,19047],{},"Netlify:",[289,19049,19051],{"className":291,"code":19050,"language":293,"meta":16,"style":16},"npm run generate  # for static\n# or\nnpm run build     # for SSR\n",[295,19052,19053,19065,19070],{"__ignoreMap":16},[298,19054,19055,19057,19059,19062],{"class":300,"line":301},[298,19056,328],{"class":304},[298,19058,16712],{"class":308},[298,19060,19061],{"class":308}," generate",[298,19063,19064],{"class":387},"  # for static\n",[298,19066,19067],{"class":300,"line":179},[298,19068,19069],{"class":387},"# or\n",[298,19071,19072,19074,19076,19079],{"class":300,"line":17},[298,19073,328],{"class":304},[298,19075,16712],{"class":308},[298,19077,19078],{"class":308}," build",[298,19080,19081],{"class":387},"     # for SSR\n",[30,19083,19084,19087,19088],{},[235,19085,19086],{},"Cloudflare Pages:","\nAutomatic deployment from git with build command: ",[295,19089,19090],{},"npm run build",[30,19092,19093],{},[235,19094,19095],{},"Your Own Server:",[289,19097,19099],{"className":291,"code":19098,"language":293,"meta":16,"style":16},"npm run build\nnode .output/server/index.mjs\n",[295,19100,19101,19109],{"__ignoreMap":16},[298,19102,19103,19105,19107],{"class":300,"line":301},[298,19104,328],{"class":304},[298,19106,16712],{"class":308},[298,19108,18967],{"class":308},[298,19110,19111,19113],{"class":300,"line":179},[298,19112,16648],{"class":304},[298,19114,19115],{"class":308}," .output/server/index.mjs\n",[37,19117,19118],{"id":16049},"Best Practices",[4168,19120,19122],{"id":19121},"_1-use-typescript","1. Use TypeScript",[30,19124,19125],{},"Enable strict mode for better type safety:",[289,19127,19129],{"className":378,"code":19128,"language":380,"meta":16,"style":16},"// nuxt.config.ts\nexport default defineNuxtConfig({\n  typescript: {\n    strict: true,\n    typeCheck: true\n  }\n})\n",[295,19130,19131,19135,19145,19152,19161,19168,19172],{"__ignoreMap":16},[298,19132,19133],{"class":300,"line":301},[298,19134,388],{"class":387},[298,19136,19137,19139,19141,19143],{"class":300,"line":179},[298,19138,394],{"class":393},[298,19140,397],{"class":393},[298,19142,400],{"class":304},[298,19144,404],{"class":403},[298,19146,19147,19150],{"class":300,"line":17},[298,19148,19149],{"class":409},"  typescript:",[298,19151,456],{"class":403},[298,19153,19154,19157,19159],{"class":300,"line":416},[298,19155,19156],{"class":409},"    strict:",[298,19158,632],{"class":631},[298,19160,422],{"class":403},[298,19162,19163,19166],{"class":300,"line":425},[298,19164,19165],{"class":409},"    typeCheck:",[298,19167,9159],{"class":631},[298,19169,19170],{"class":300,"line":433},[298,19171,737],{"class":403},[298,19173,19174],{"class":300,"line":439},[298,19175,9387],{"class":403},[4168,19177,19179],{"id":19178},"_2-optimize-images","2. Optimize Images",[30,19181,19182,19183,5255,19186,19189],{},"Always use ",[295,19184,19185],{},"\u003CNuxtImg>",[295,19187,19188],{},"\u003CNuxtPicture>"," for automatic optimization.",[4168,19191,19193],{"id":19192},"_3-error-handling","3. Error Handling",[30,19195,19196],{},"Create a custom error page:",[30,19198,19199],{},[235,19200,19201],{},"error.vue",[289,19203,19205],{"className":1587,"code":19204,"language":1589,"meta":16,"style":16},"\u003Cscript setup>\nconst props = defineProps\u003C{\n  error: {\n    statusCode: number\n    message: string\n  }\n}>()\n\nconst handleError = () => clearError({ redirect: '/' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>{{ error.statusCode }}\u003C/h1>\n    \u003Cp>{{ error.message }}\u003C/p>\n    \u003Cbutton @click=\"handleError\">Go Home\u003C/button>\n  \u003C/div>\n\u003C/template>\n",[295,19206,19207,19217,19229,19237,19246,19255,19259,19263,19267,19293,19301,19305,19313,19321,19346,19370,19400,19408],{"__ignoreMap":16},[298,19208,19209,19211,19213,19215],{"class":300,"line":301},[298,19210,1199],{"class":1596},[298,19212,1600],{"class":1599},[298,19214,1604],{"class":1603},[298,19216,1616],{"class":1596},[298,19218,19219,19221,19223,19225,19227],{"class":300,"line":179},[298,19220,1650],{"class":985},[298,19222,3524],{"class":989},[298,19224,994],{"class":993},[298,19226,3529],{"class":304},[298,19228,17376],{"class":403},[298,19230,19231,19233,19235],{"class":300,"line":17},[298,19232,10910],{"class":1217},[298,19234,375],{"class":993},[298,19236,456],{"class":403},[298,19238,19239,19242,19244],{"class":300,"line":416},[298,19240,19241],{"class":1217},"    statusCode",[298,19243,375],{"class":993},[298,19245,10601],{"class":1223},[298,19247,19248,19251,19253],{"class":300,"line":425},[298,19249,19250],{"class":1217},"    message",[298,19252,375],{"class":993},[298,19254,10592],{"class":1223},[298,19256,19257],{"class":300,"line":433},[298,19258,737],{"class":403},[298,19260,19261],{"class":300,"line":439},[298,19262,17404],{"class":403},[298,19264,19265],{"class":300,"line":202},[298,19266,701],{"emptyLinePlaceholder":199},[298,19268,19269,19271,19274,19276,19278,19280,19283,19285,19288,19291],{"class":300,"line":450},[298,19270,1650],{"class":985},[298,19272,19273],{"class":304}," handleError",[298,19275,994],{"class":993},[298,19277,1750],{"class":403},[298,19279,1439],{"class":985},[298,19281,19282],{"class":304}," clearError",[298,19284,2486],{"class":403},[298,19286,19287],{"class":409},"redirect:",[298,19289,19290],{"class":308}," '/'",[298,19292,2494],{"class":403},[298,19294,19295,19297,19299],{"class":300,"line":459},[298,19296,1899],{"class":1596},[298,19298,1600],{"class":1599},[298,19300,1616],{"class":1596},[298,19302,19303],{"class":300,"line":467},[298,19304,701],{"emptyLinePlaceholder":199},[298,19306,19307,19309,19311],{"class":300,"line":473},[298,19308,1199],{"class":1596},[298,19310,1914],{"class":1599},[298,19312,1616],{"class":1596},[298,19314,19315,19317,19319],{"class":300,"line":484},[298,19316,1921],{"class":1596},[298,19318,2003],{"class":1599},[298,19320,1616],{"class":1596},[298,19322,19323,19325,19327,19329,19331,19333,19335,19338,19340,19342,19344],{"class":300,"line":495},[298,19324,1931],{"class":1596},[298,19326,1952],{"class":1599},[298,19328,2203],{"class":1596},[298,19330,2206],{"class":403},[298,19332,9222],{"class":409},[298,19334,1000],{"class":403},[298,19336,19337],{"class":409},"statusCode",[298,19339,2215],{"class":403},[298,19341,1899],{"class":1596},[298,19343,1952],{"class":1599},[298,19345,1616],{"class":1596},[298,19347,19348,19350,19352,19354,19356,19358,19360,19362,19364,19366,19368],{"class":300,"line":506},[298,19349,1931],{"class":1596},[298,19351,30],{"class":1599},[298,19353,2203],{"class":1596},[298,19355,2206],{"class":403},[298,19357,9222],{"class":409},[298,19359,1000],{"class":403},[298,19361,17764],{"class":409},[298,19363,2215],{"class":403},[298,19365,1899],{"class":1596},[298,19367,30],{"class":1599},[298,19369,1616],{"class":1596},[298,19371,19372,19374,19376,19378,19380,19382,19384,19387,19389,19391,19394,19396,19398],{"class":300,"line":517},[298,19373,1931],{"class":1596},[298,19375,9664],{"class":1599},[298,19377,9667],{"class":403},[298,19379,9670],{"class":1603},[298,19381,1610],{"class":403},[298,19383,2030],{"class":1732},[298,19385,19386],{"class":409},"handleError",[298,19388,2030],{"class":1732},[298,19390,2203],{"class":1596},[298,19392,19393],{"class":403},"Go Home",[298,19395,1899],{"class":1596},[298,19397,9664],{"class":1599},[298,19399,1616],{"class":1596},[298,19401,19402,19404,19406],{"class":300,"line":526},[298,19403,2294],{"class":1596},[298,19405,2003],{"class":1599},[298,19407,1616],{"class":1596},[298,19409,19410,19412,19414],{"class":300,"line":532},[298,19411,1899],{"class":1596},[298,19413,1914],{"class":1599},[298,19415,1616],{"class":1596},[4168,19417,19419],{"id":19418},"_4-seo-optimization","4. SEO Optimization",[30,19421,19422,19423,19426],{},"Use ",[295,19424,19425],{},"useSeoMeta"," for better SEO:",[289,19428,19430],{"className":1587,"code":19429,"language":1589,"meta":16,"style":16},"\u003Cscript setup>\nuseSeoMeta({\n  title: 'My Amazing Page',\n  description: 'This page is amazing',\n  ogImage: 'https://example.com/image.jpg',\n  twitterCard: 'summary_large_image'\n})\n\u003C/script>\n",[295,19431,19432,19442,19448,19457,19466,19476,19484,19488],{"__ignoreMap":16},[298,19433,19434,19436,19438,19440],{"class":300,"line":301},[298,19435,1199],{"class":1596},[298,19437,1600],{"class":1599},[298,19439,1604],{"class":1603},[298,19441,1616],{"class":1596},[298,19443,19444,19446],{"class":300,"line":179},[298,19445,19425],{"class":304},[298,19447,404],{"class":403},[298,19449,19450,19452,19455],{"class":300,"line":17},[298,19451,1010],{"class":409},[298,19453,19454],{"class":308}," 'My Amazing Page'",[298,19456,422],{"class":403},[298,19458,19459,19461,19464],{"class":300,"line":416},[298,19460,1025],{"class":409},[298,19462,19463],{"class":308}," 'This page is amazing'",[298,19465,422],{"class":403},[298,19467,19468,19471,19474],{"class":300,"line":425},[298,19469,19470],{"class":409},"  ogImage:",[298,19472,19473],{"class":308}," 'https://example.com/image.jpg'",[298,19475,422],{"class":403},[298,19477,19478,19481],{"class":300,"line":433},[298,19479,19480],{"class":409},"  twitterCard:",[298,19482,19483],{"class":308}," 'summary_large_image'\n",[298,19485,19486],{"class":300,"line":439},[298,19487,9387],{"class":403},[298,19489,19490,19492,19494],{"class":300,"line":202},[298,19491,1899],{"class":1596},[298,19493,1600],{"class":1599},[298,19495,1616],{"class":1596},[4168,19497,19499],{"id":19498},"_5-performance","5. Performance",[229,19501,19502,19508,19511,19517],{},[232,19503,19422,19504,19507],{},[295,19505,19506],{},"useLazyFetch"," for non-critical data",[232,19509,19510],{},"Implement pagination for large datasets",[232,19512,19422,19513,19516],{},[295,19514,19515],{},"\u003CClientOnly>"," for components that don't need SSR",[232,19518,19519],{},"Lazy-load images and heavy components",[37,19521,19523],{"id":19522},"common-patterns","Common Patterns",[4168,19525,19527],{"id":19526},"authentication","Authentication",[289,19529,19531],{"className":378,"code":19530,"language":380,"meta":16,"style":16},"// composables/useAuth.ts\nexport const useAuth = () => {\n  const user = useState('user', () => null)\n  \n  const login = async (credentials) => {\n    const data = await $fetch('/api/auth/login', {\n      method: 'POST',\n      body: credentials\n    })\n    user.value = data.user\n  }\n  \n  const logout = () => {\n    user.value = null\n  }\n  \n  return { user, login, logout }\n}\n",[295,19532,19533,19538,19555,19578,19582,19602,19621,19631,19639,19643,19659,19663,19667,19681,19693,19697,19701,19719],{"__ignoreMap":16},[298,19534,19535],{"class":300,"line":301},[298,19536,19537],{"class":387},"// composables/useAuth.ts\n",[298,19539,19540,19542,19544,19547,19549,19551,19553],{"class":300,"line":179},[298,19541,394],{"class":393},[298,19543,986],{"class":985},[298,19545,19546],{"class":304}," useAuth",[298,19548,994],{"class":993},[298,19550,1750],{"class":403},[298,19552,1439],{"class":985},[298,19554,456],{"class":403},[298,19556,19557,19559,19561,19563,19566,19568,19570,19572,19574,19576],{"class":300,"line":17},[298,19558,3271],{"class":985},[298,19560,8389],{"class":989},[298,19562,994],{"class":993},[298,19564,19565],{"class":304}," useState",[298,19567,1087],{"class":403},[298,19569,8992],{"class":308},[298,19571,2464],{"class":403},[298,19573,1439],{"class":985},[298,19575,3319],{"class":631},[298,19577,3034],{"class":403},[298,19579,19580],{"class":300,"line":416},[298,19581,447],{"class":403},[298,19583,19584,19586,19588,19590,19592,19594,19596,19598,19600],{"class":300,"line":425},[298,19585,3271],{"class":985},[298,19587,9133],{"class":304},[298,19589,994],{"class":993},[298,19591,3251],{"class":985},[298,19593,1426],{"class":403},[298,19595,9138],{"class":1217},[298,19597,1436],{"class":403},[298,19599,1439],{"class":985},[298,19601,456],{"class":403},[298,19603,19604,19606,19608,19610,19612,19614,19616,19619],{"class":300,"line":433},[298,19605,1759],{"class":985},[298,19607,11009],{"class":989},[298,19609,994],{"class":993},[298,19611,1709],{"class":393},[298,19613,17940],{"class":304},[298,19615,1087],{"class":403},[298,19617,19618],{"class":308},"'/api/auth/login'",[298,19620,15772],{"class":403},[298,19622,19623,19626,19629],{"class":300,"line":439},[298,19624,19625],{"class":409},"      method:",[298,19627,19628],{"class":308}," 'POST'",[298,19630,422],{"class":403},[298,19632,19633,19636],{"class":300,"line":202},[298,19634,19635],{"class":409},"      body:",[298,19637,19638],{"class":409}," credentials\n",[298,19640,19641],{"class":300,"line":450},[298,19642,15818],{"class":403},[298,19644,19645,19647,19649,19651,19653,19655,19657],{"class":300,"line":459},[298,19646,9302],{"class":409},[298,19648,1000],{"class":403},[298,19650,1735],{"class":409},[298,19652,994],{"class":993},[298,19654,11009],{"class":409},[298,19656,1000],{"class":403},[298,19658,9209],{"class":409},[298,19660,19661],{"class":300,"line":467},[298,19662,737],{"class":403},[298,19664,19665],{"class":300,"line":473},[298,19666,447],{"class":403},[298,19668,19669,19671,19673,19675,19677,19679],{"class":300,"line":484},[298,19670,3271],{"class":985},[298,19672,9295],{"class":304},[298,19674,994],{"class":993},[298,19676,1750],{"class":403},[298,19678,1439],{"class":985},[298,19680,456],{"class":403},[298,19682,19683,19685,19687,19689,19691],{"class":300,"line":495},[298,19684,9302],{"class":409},[298,19686,1000],{"class":403},[298,19688,1735],{"class":409},[298,19690,994],{"class":993},[298,19692,9311],{"class":631},[298,19694,19695],{"class":300,"line":506},[298,19696,737],{"class":403},[298,19698,19699],{"class":300,"line":517},[298,19700,447],{"class":403},[298,19702,19703,19705,19707,19709,19711,19713,19715,19717],{"class":300,"line":526},[298,19704,1446],{"class":393},[298,19706,959],{"class":403},[298,19708,8560],{"class":409},[298,19710,619],{"class":403},[298,19712,9185],{"class":409},[298,19714,619],{"class":403},[298,19716,9515],{"class":409},[298,19718,15917],{"class":403},[298,19720,19721],{"class":300,"line":532},[298,19722,2573],{"class":403},[4168,19724,19726],{"id":19725},"protected-routes","Protected Routes",[289,19728,19730],{"className":378,"code":19729,"language":380,"meta":16,"style":16},"// middleware/auth.ts\nexport default defineNuxtRouteMiddleware((to, from) => {\n  const { user } = useAuth()\n  \n  if (!user.value) {\n    return navigateTo('/login')\n  }\n})\n",[295,19731,19732,19737,19760,19776,19780,19796,19810,19814],{"__ignoreMap":16},[298,19733,19734],{"class":300,"line":301},[298,19735,19736],{"class":387},"// middleware/auth.ts\n",[298,19738,19739,19741,19743,19746,19748,19750,19752,19754,19756,19758],{"class":300,"line":179},[298,19740,394],{"class":393},[298,19742,397],{"class":393},[298,19744,19745],{"class":304}," defineNuxtRouteMiddleware",[298,19747,14450],{"class":403},[298,19749,2068],{"class":1217},[298,19751,619],{"class":403},[298,19753,968],{"class":1217},[298,19755,1436],{"class":403},[298,19757,1439],{"class":985},[298,19759,456],{"class":403},[298,19761,19762,19764,19766,19768,19770,19772,19774],{"class":300,"line":17},[298,19763,3271],{"class":985},[298,19765,959],{"class":403},[298,19767,8560],{"class":989},[298,19769,965],{"class":403},[298,19771,1610],{"class":993},[298,19773,19546],{"class":304},[298,19775,2475],{"class":403},[298,19777,19778],{"class":300,"line":416},[298,19779,447],{"class":403},[298,19781,19782,19784,19786,19788,19790,19792,19794],{"class":300,"line":425},[298,19783,13413],{"class":393},[298,19785,1426],{"class":403},[298,19787,2521],{"class":993},[298,19789,8560],{"class":409},[298,19791,1000],{"class":403},[298,19793,1735],{"class":409},[298,19795,2530],{"class":403},[298,19797,19798,19800,19803,19805,19808],{"class":300,"line":433},[298,19799,1782],{"class":393},[298,19801,19802],{"class":304}," navigateTo",[298,19804,1087],{"class":403},[298,19806,19807],{"class":308},"'/login'",[298,19809,3034],{"class":403},[298,19811,19812],{"class":300,"line":439},[298,19813,737],{"class":403},[298,19815,19816],{"class":300,"line":202},[298,19817,9387],{"class":403},[30,19819,19820],{},"Use in a page:",[289,19822,19824],{"className":1587,"code":19823,"language":1589,"meta":16,"style":16},"\u003Cscript setup>\ndefinePageMeta({\n  middleware: 'auth'\n})\n\u003C/script>\n",[295,19825,19826,19836,19842,19850,19854],{"__ignoreMap":16},[298,19827,19828,19830,19832,19834],{"class":300,"line":301},[298,19829,1199],{"class":1596},[298,19831,1600],{"class":1599},[298,19833,1604],{"class":1603},[298,19835,1616],{"class":1596},[298,19837,19838,19840],{"class":300,"line":179},[298,19839,16774],{"class":304},[298,19841,404],{"class":403},[298,19843,19844,19847],{"class":300,"line":17},[298,19845,19846],{"class":409},"  middleware:",[298,19848,19849],{"class":308}," 'auth'\n",[298,19851,19852],{"class":300,"line":416},[298,19853,9387],{"class":403},[298,19855,19856,19858,19860],{"class":300,"line":425},[298,19857,1899],{"class":1596},[298,19859,1600],{"class":1599},[298,19861,1616],{"class":1596},[37,19863,19865],{"id":19864},"troubleshooting","Troubleshooting",[30,19867,19868],{},[235,19869,19870],{},"Port Already in Use:",[289,19872,19874],{"className":291,"code":19873,"language":293,"meta":16,"style":16},"npm run dev -- --port 3001\n",[295,19875,19876],{"__ignoreMap":16},[298,19877,19878,19880,19882,19885,19888,19891],{"class":300,"line":301},[298,19879,328],{"class":304},[298,19881,16712],{"class":308},[298,19883,19884],{"class":308}," dev",[298,19886,19887],{"class":631}," --",[298,19889,19890],{"class":631}," --port",[298,19892,19893],{"class":2549}," 3001\n",[30,19895,19896],{},[235,19897,19898],{},"Clear Nuxt Cache:",[289,19900,19902],{"className":291,"code":19901,"language":293,"meta":16,"style":16},"rm -rf .nuxt\nnpm run dev\n",[295,19903,19904,19915],{"__ignoreMap":16},[298,19905,19906,19909,19912],{"class":300,"line":301},[298,19907,19908],{"class":304},"rm",[298,19910,19911],{"class":631}," -rf",[298,19913,19914],{"class":308}," .nuxt\n",[298,19916,19917,19919,19921],{"class":300,"line":179},[298,19918,328],{"class":304},[298,19920,16712],{"class":308},[298,19922,16715],{"class":308},[30,19924,19925],{},[235,19926,19927],{},"TypeScript Errors:",[289,19929,19931],{"className":291,"code":19930,"language":293,"meta":16,"style":16},"npm run postinstall  # Regenerates types\n",[295,19932,19933],{"__ignoreMap":16},[298,19934,19935,19937,19939,19942],{"class":300,"line":301},[298,19936,328],{"class":304},[298,19938,16712],{"class":308},[298,19940,19941],{"class":308}," postinstall",[298,19943,19944],{"class":387},"  # Regenerates types\n",[37,19946,19948],{"id":19947},"whats-new-in-nuxt-4","What's New in Nuxt 4?",[30,19950,19951],{},"Nuxt 4 (currently in development) brings exciting improvements:",[229,19953,19954,19957,19960,19963,19966],{},[232,19955,19956],{},"Better performance with optimized server rendering",[232,19958,19959],{},"Enhanced TypeScript support",[232,19961,19962],{},"Improved developer experience",[232,19964,19965],{},"Smaller bundle sizes",[232,19967,19968],{},"Better compatibility with the latest Vue features",[30,19970,19971],{},"To prepare for Nuxt 4, keep your Nuxt 3 projects updated and follow migration guides when Nuxt 4 is released.",[37,19973,19975],{"id":19974},"next-steps","Next Steps",[30,19977,19978],{},"Now that you understand the basics:",[4704,19980,19981,19987,20000,20012,20027],{},[232,19982,19983,19986],{},[235,19984,19985],{},"Build a project",": Start with a simple blog or portfolio",[232,19988,19989,19992,19993,19999],{},[235,19990,19991],{},"Explore modules",": Check out the ",[15226,19994,19998],{"href":19995,"rel":19996},"https://nuxt.com/modules",[19997],"nofollow","Nuxt Modules"," directory",[232,20001,20002,20005,20006,20011],{},[235,20003,20004],{},"Read the docs",": The ",[15226,20007,20010],{"href":20008,"rel":20009},"https://nuxt.com",[19997],"official documentation"," is excellent",[232,20013,20014,1699,20017,619,20022],{},[235,20015,20016],{},"Join the community",[15226,20018,20021],{"href":20019,"rel":20020},"https://discord.com/invite/nuxt",[19997],"Discord",[15226,20023,20026],{"href":20024,"rel":20025},"https://github.com/nuxt/nuxt/discussions",[19997],"GitHub Discussions",[232,20028,20029,20032],{},[235,20030,20031],{},"Watch tutorials",": Many great video tutorials are available",[37,20034,166],{"id":165},[30,20036,20037],{},"Nuxt makes building modern web applications enjoyable and productive. Its opinionated structure, powerful features, and excellent developer experience make it a top choice for Vue developers.",[30,20039,20040],{},"Start small, experiment with features, and gradually build more complex applications. The best way to learn Nuxt is by building with it!",[30,20042,4729],{},[4731,20044,20045],{},"html pre.shiki code .s56mj, html code.shiki .s56mj{--shiki-light:#6A737D;--shiki-default:#6A9955;--shiki-dark:#6A9955}html pre.shiki code .sffyN, html code.shiki .sffyN{--shiki-light:#24292E;--shiki-default:#808080;--shiki-dark:#808080}html pre.shiki code .ssFZ1, html code.shiki .ssFZ1{--shiki-light:#22863A;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .sFcZJ, html code.shiki .sFcZJ{--shiki-light:#6F42C1;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .s5uUr, html code.shiki .s5uUr{--shiki-light:#D73A49;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .sToQf, html code.shiki .sToQf{--shiki-light:#005CC5;--shiki-default:#4FC1FF;--shiki-dark:#4FC1FF}html pre.shiki code .s1p9p, html code.shiki .s1p9p{--shiki-light:#D73A49;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}html pre.shiki code .svuFb, html code.shiki .svuFb{--shiki-light:#6F42C1;--shiki-default:#DCDCAA;--shiki-dark:#DCDCAA}html pre.shiki code .sG4b4, html code.shiki .sG4b4{--shiki-light:#24292E;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}html pre.shiki code .seC34, html code.shiki .seC34{--shiki-light:#005CC5;--shiki-default:#B5CEA8;--shiki-dark:#B5CEA8}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 .s7v1m, html code.shiki .s7v1m{--shiki-light:#005CC5;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .sGDl4, html code.shiki .sGDl4{--shiki-light:#032F62;--shiki-default:#CE9178;--shiki-dark:#CE9178}html pre.shiki code .sNX3-, html code.shiki .sNX3-{--shiki-light:#005CC5;--shiki-default:#DCDCAA;--shiki-dark:#DCDCAA}html pre.shiki code .sZiGn, html code.shiki .sZiGn{--shiki-light:#24292E;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .s9TRk, html code.shiki .s9TRk{--shiki-light:#E36209;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .sEkCa, html code.shiki .sEkCa{--shiki-light:#D73A49;--shiki-default:#C586C0;--shiki-dark:#C586C0}html pre.shiki code .se2iQ, html code.shiki .se2iQ{--shiki-light:#032F62;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .s5T4v, html code.shiki .s5T4v{--shiki-light:#032F62;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}html pre.shiki code .sUwQ0, html code.shiki .sUwQ0{--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-default:#F44747;--shiki-default-font-style:inherit;--shiki-dark:#F44747;--shiki-dark-font-style:inherit}html pre.shiki code .s6-XD, html code.shiki .s6-XD{--shiki-light:#005CC5;--shiki-default:#4EC9B0;--shiki-dark:#4EC9B0}html pre.shiki code .sO3gw, html code.shiki .sO3gw{--shiki-light:#6F42C1;--shiki-default:#D7BA7D;--shiki-dark:#D7BA7D}html pre.shiki code .sps74, html code.shiki .sps74{--shiki-light:#005CC5;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .sqBZk, html code.shiki .sqBZk{--shiki-light:#005CC5;--shiki-default:#CE9178;--shiki-dark:#CE9178}",{"title":16,"searchDepth":17,"depth":17,"links":20047},[20048,20051,20056,20064,20069,20076,20083,20087,20088,20089,20090],{"id":16465,"depth":179,"text":16466,"children":20049},[20050],{"id":16472,"depth":17,"text":16473},{"id":16630,"depth":179,"text":16631,"children":20052},[20053,20054,20055],{"id":16634,"depth":17,"text":16635},{"id":16654,"depth":17,"text":16655},{"id":16725,"depth":17,"text":16726},{"id":16738,"depth":179,"text":16739,"children":20057},[20058,20059,20060,20061,20062,20063],{"id":16742,"depth":17,"text":16743},{"id":17071,"depth":17,"text":17072},{"id":17341,"depth":17,"text":17342},{"id":17614,"depth":17,"text":17615},{"id":18051,"depth":17,"text":18052},{"id":18325,"depth":17,"text":18326},{"id":18666,"depth":179,"text":18667,"children":20065},[20066,20067,20068],{"id":18673,"depth":17,"text":18674},{"id":18724,"depth":17,"text":18725},{"id":18859,"depth":17,"text":18860},{"id":18933,"depth":179,"text":18934,"children":20070},[20071,20072,20073,20074,20075],{"id":19,"depth":17,"text":5},{"id":18952,"depth":17,"text":18953},{"id":18976,"depth":17,"text":18977},{"id":18994,"depth":17,"text":18995},{"id":19015,"depth":17,"text":19016},{"id":16049,"depth":179,"text":19118,"children":20077},[20078,20079,20080,20081,20082],{"id":19121,"depth":17,"text":19122},{"id":19178,"depth":17,"text":19179},{"id":19192,"depth":17,"text":19193},{"id":19418,"depth":17,"text":19419},{"id":19498,"depth":17,"text":19499},{"id":19522,"depth":179,"text":19523,"children":20084},[20085,20086],{"id":19526,"depth":17,"text":19527},{"id":19725,"depth":17,"text":19726},{"id":19864,"depth":179,"text":19865},{"id":19947,"depth":179,"text":19948},{"id":19974,"depth":179,"text":19975},{"id":165,"depth":179,"text":166},"Learn how to build fast, modern web applications with Nuxt 3 and Nuxt 4. A comprehensive guide covering setup, key features, best practices, and real-world examples.","https://images.unsplash.com/photo-1559028012-481c04fa702d?q=80&w=1200",{"excerpt":20094},{"type":13,"value":20095},[20096,20098,20100,20102],[30,20097,16459],{},[30,20099,16462],{},[37,20101,16466],{"id":16465},[30,20103,16469],{},"/getting-started-nuxt3","2024-05-01",{"title":16454,"description":20091},"getting-started-nuxt3",[4778,1589,52,380,208,20109],"ssr","souZ7oFFLLurxVS0EDebSj02P4JvmYPLRE5-6EpVoCQ",{"id":20112,"title":20113,"author":26,"body":20114,"category":19,"description":20210,"extension":7,"image":20211,"isDraft":190,"isFeatured":190,"locale":9,"meta":20212,"navigation":199,"path":20224,"publishedAt":20225,"readingTime":439,"seo":20226,"stem":20213,"tags":20227,"updatedAt":211,"__hash__":20228},"articles_en/how-long-does-it-take-to-learn-javascript.md","How Long Does it Take to Learn JavaScript?",{"type":13,"value":20115,"toc":20203},[20116,20123,20126,20130,20133,20136,20139,20142,20146,20149,20152,20155,20158,20161,20165,20168,20171,20174,20177,20181,20184,20195,20198,20200],[30,20117,20118,20119,20122],{},"Learning a programming language can be a daunting task, and it's natural to wonder how long it will take before you feel comfortable and proficient. JavaScript is a popular and versatile language that is widely used for web development, and it's a useful skill to have in your toolkit.",[20120,20121],"br",{},"\nIn this article, we'll break down the various factors that can influence how long it takes to learn JavaScript and provide some tips on how to speed up the learning process.",[30,20124,20125],{},"There are several factors that can impact how quickly you learn JavaScript, including your previous programming experience, how much time you're able to devote to learning, and your natural aptitude for coding. In this article, we'll explore these factors in more detail and provide some estimates for how long it might take to learn JavaScript based on different learning paths.",[37,20127,20129],{"id":20128},"previous-programming-experience","Previous Programming Experience",[30,20131,20132],{},"If you have no previous programming experience, learning JavaScript (or any other programming language) will likely take longer than if you already have some familiarity with coding concepts. That being said, learning JavaScript is a great way to get started with programming, as it's a relatively easy language to learn and has a large and active community of developers who can provide support and guidance.",[30,20134,20135],{},"If you do have some programming experience, it will likely take you less time to learn JavaScript. Depending on the language(s) you already know and the level of familiarity you have with programming concepts, it might only take a few weeks or a couple of months to feel comfortable with JavaScript.",[30,20137,20138],{},"It's worth noting that the type of programming language you already know can also affect how quickly you learn JavaScript. If you already know a similar language such as C++ or Java, you may find that many of the concepts and syntax are familiar, which can make learning JavaScript easier. On the other hand, if you're coming from a completely different type of languages, such as Python or Ruby, you may need to spend more time adjusting to the syntax and structure of JavaScript.",[30,20140,20141],{},"Overall, having previous programming experience can definitely help speed up the learning process for JavaScript, but it's not a requirement. With dedication and hard work, anyone can learn to code, regardless of their background or previous experience.",[37,20143,20145],{"id":20144},"time-devoted-to-learning","Time Devoted to Learning",[30,20147,20148],{},"The amount of time you're able to devote to learning JavaScript will also have a significant impact on how quickly you learn the language. The more time you can spend learning and practice, the faster you'll make progress.",[30,20150,20151],{},"If you're able to set aside several hours each day to focus on learning JavaScript, you'll make faster progress than if you can only devote a few hours per week. This is because learning a programming language requires a lot of repetition and practice to truly understand and internalize the concepts. The more time you can spend working with the language, the more comfortable you'll become with it.",[30,20153,20154],{},"It's also important to be consistent in your learning. Setting aside dedicated study time on a regular basis will be more effective than sporadic bursts of activity. Aim to learn and practice JavaScript at least a few times per week, and try to make it a habit. This will help you stay focused and motivated, and it will make it easier to retain the material you're learning.",[30,20156,20157],{},"In addition to the quantity of time you spend learning, the quality of your study time is also important. Simply reading about or watching videos on JavaScript is not enough to truly understand and master the language. You need to actively engage with the material and practice what you're learning. This could mean working through coding challenges, building small projects, or collaborating with other developers.",[30,20159,20160],{},"The more time you're able to devote to learning JavaScript, the faster you'll make progress. However, it's also important to make sure you're actively engaged in the learning process and making the most of your study time.",[37,20162,20164],{"id":20163},"natural-aptitude-for-coding","Natural Aptitude for Coding",[30,20166,20167],{},"While anyone can learn to code with dedication and hard work, it's true that some people seem to have a natural aptitude for programming. If you're someone who enjoys problem-solving, logical thinking and working with computers, you may find that learning JavaScript (and other programming languages) comes more easily to you.",[30,20169,20170],{},"On the other hand, if you struggle with these types of tasks or don't enjoy working with computers, you may find learning JavaScript more challenging. That being said, it's important to remember that programming is a skill that can be learned and developed with practice, even if you don't have a natural aptitude for it.",[30,20172,20173],{},"If you're not sure if you have a natural aptitude for coding, there are a few things you can try to get a better sense of whether or not it's something you'd enjoy. For example, you could try working through some coding challenges or building small projects with a language like Scratch or Python. This will give you a taste of what programming is like and help you decide if it's something you're interested in pursuing further.",[30,20175,20176],{},"Ultimately, whether or not you have a natural aptitude for coding shouldn't be a deciding factor in whether or not you learn JavaScript. With dedication and hard work, anyone can learn to code, regardless of their natural aptitude. So, it's better to give it a try and see if it's something you enjoy and are good at, rather than assuming you won't be able to learn it based on your perceived aptitude.",[37,20178,20180],{"id":20179},"estimating-how-long-it-will-take-to-learn-javascript","Estimating How Long It Will Take to Learn JavaScript",[30,20182,20183],{},"Given the variables at play, it's difficult to provide a precise estimate for how long it will take you to learn JavaScript. However, here are some rough estimates based on different learning paths:",[229,20185,20186,20189,20192],{},[232,20187,20188],{},"If you have no programming experience and are able to devote several hours per day to learning JavaScript, it could take you anywhere from three to six months to feel comfortable with the language. This estimate assumes you're learning consistently and actively engaging with the material.",[232,20190,20191],{},"If you have some programming experience and can devote several hours per day to learning JavaScript, it might take you one to three months to feel comfortable with the language. This estimate assumes you already have a basic understanding of programming concepts and are able to focus on learning more advanced JavaScript concepts and techniques.",[232,20193,20194],{},"If you have a lot of programming experience and can devote several hours per day to learning JavaScript, it might take you just a few weeks to feel comfortable with the language. This estimate assumes you already have a strong foundation in programming and are able to pick up new languages quickly.",[30,20196,20197],{},"It's important to keep in mind that these are just rough estimates and your actual learning journey may be shorter or longer depending on your individual circumstances. The most important thing is to stay focused, consistent, and patient as you learn JavaScript.",[37,20199,166],{"id":165},[30,20201,20202],{},"Learning JavaScript (or any programming language) takes time and effort, is an ongoing process. While you may reach a point where you feel comfortable with the language and are able to build basic projects, there will always be more to learn and new techniques to master. Don't be discouraged if it takes you longer than these estimates to feel comfortable with JavaScript, and remember that learning is a journey, not a destination. The most important thing is to keep learning and growing as a developer.",{"title":16,"searchDepth":17,"depth":17,"links":20204},[20205,20206,20207,20208,20209],{"id":20128,"depth":179,"text":20129},{"id":20144,"depth":179,"text":20145},{"id":20163,"depth":179,"text":20164},{"id":20179,"depth":179,"text":20180},{"id":165,"depth":179,"text":166},"Learning a programming language can be a daunting task, and it's natural to wonder how long it will take before you feel comfortable and proficient. JavaScript is a popular and versatile language that is widely used for web development, and it's a useful skill to have in your toolkit","https://images.unsplash.com/photo-1550063873-ab792950096b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDV8fGphdmFzY3JpcHR8ZW58MHx8fHwxNjcxMTUyNjAy&ixlib=rb-4.0.3&q=80&w=2000",{"slug":20213,"excerpt":20214},"how-long-does-it-take-to-learn-javascript",{"type":13,"value":20215},[20216,20220,20222],[30,20217,20118,20218,20122],{},[20120,20219],{},[30,20221,20125],{},[37,20223,20129],{"id":20128},"/how-long-does-it-take-to-learn-javascript","2022-12-18T09:29:37.000Z",{"title":20113,"description":20210},[39,52,205,146,206,207,208,210],"OiVL6QbtjFQXwpjZ1K6NAUFWvMO-nioF4_fcAIOD4Ws",{"id":20230,"title":20231,"author":26,"body":20232,"category":19,"description":20236,"extension":7,"image":20391,"isDraft":190,"isFeatured":190,"locale":9,"meta":20392,"navigation":199,"path":20400,"publishedAt":20401,"readingTime":425,"seo":20402,"stem":20393,"tags":20403,"updatedAt":211,"__hash__":20404},"articles_en/how-long-does-it-take-to-learn-python.md","How Long Does it Take to Learn Python?",{"type":13,"value":20233,"toc":20379},[20234,20237,20240,20244,20247,20273,20277,20280,20294,20297,20301,20304,20308,20311,20314,20340,20344,20347,20351,20354,20357,20361,20364,20368,20371,20374,20376],[30,20235,20236],{},"Learning to program can be a challenging but rewarding experience. One of the most popular programming languages to learn is Python, due to its simplicity, versatility, and widespread use in a variety of industries. So, how long does it take to learn Python?",[30,20238,20239],{},"The answer depends on several factors, including your prior programming experience, the amount of time you can devote to learning, and your learning style. In this article, we'll explore these factors in more detail and provide some estimates for how long it might take to learn Python.",[37,20241,20243],{"id":20242},"factors-that-affect-how-long-it-takes-to-learn-python","Factors that Affect How Long it Takes to Learn Python",[30,20245,20246],{},"There are several factors that can influence how long it takes to learn Python, including:",[4704,20248,20249,20255,20261,20267],{},[232,20250,20251,20254],{},[235,20252,20253],{},"Prior programming experience",": If you have prior programming experience, especially in a similar language like Java or C++, it will likely take you less time to learn Python. On the other hand, if you are new to programming, it may take you longer to learn Python and get comfortable with the basics of programming.",[232,20256,20257,20260],{},[235,20258,20259],{},"Amount of time dedicated to learning",": Like any skill, the more time you dedicate to learning Python, the faster you will progress. If you can devote several hours a day to learning, you will likely progress faster than if you only have an hour or two a week to devote to learning.",[232,20262,20263,20266],{},[235,20264,20265],{},"Learning style",": Some people may learn faster through visual learning, while others may prefer hands-on exercises or reading. Identifying your preferred learning style can help you choose the best resources and methods for learning Python.",[232,20268,20269,20272],{},[235,20270,20271],{},"Goals for learning Python",": What you want to use Python for will also impact how long it takes you to learn. If you want to use Python for data analysis, for example, you will need to learn about data manipulation and visualization libraries like Pandas and Matplotlib, which will require additional time.",[37,20274,20276],{"id":20275},"how-long-does-it-take-to-learn-python-estimates","How Long Does it Take to Learn Python: Estimates",[30,20278,20279],{},"With these factors in mind, it's difficult to provide a precise estimate of how long it will take you to learn Python. However, here are some rough estimates based on the factors discussed above:",[229,20281,20282,20285,20288,20291],{},[232,20283,20284],{},"If you are new to programming and can dedicate several hours a day to learning, it may take you 3-6 months to learn Python.",[232,20286,20287],{},"If you have some prior programming experience and can dedicate several hours a day to learning, it may take you 1-3 months to learn Python.",[232,20289,20290],{},"If you are new to programming but can only dedicate an hour or two a week to learning, it may take you 6-12 months to learn Python.",[232,20292,20293],{},"If you have some prior programming experience and can only dedicate an hour or two a week to learning, it may take you 3-6 months to learn Python.",[30,20295,20296],{},"Keep in mind that these estimates are rough and will vary depending on your individual learning style and goals for using Python.",[37,20298,20300],{"id":20299},"steps-to-take-to-learn-python","Steps to Take to Learn Python",[30,20302,20303],{},"Now that we've explored some rough estimates for how long it might take you to learn Python, let's consider the steps you can take to start learning. Here are some steps to take as you begin your journey to learn Python:",[4168,20305,20307],{"id":20306},"_1-choose-a-learning-resource","1. Choose a Learning Resource",[30,20309,20310],{},"There are many resources available for learning Python, including online courses, books, and tutorials. When choosing a resource, consider your learning style and goals. Do you prefer visual learning, or do you prefer hands-on exercises? Do you want to learn Python for data analysis, web development, or something else? Answering these questions can help you choose a resource that is best suited to your needs.",[30,20312,20313],{},"Some popular options for learning Python include:",[229,20315,20316,20324,20332],{},[232,20317,20318,20323],{},[15226,20319,20322],{"href":20320,"rel":20321},"https://www.codecademy.com/learn/learn-python",[19997],"Codecademy"," - an interactive online course with exercises and projects",[232,20325,20326,20331],{},[15226,20327,20330],{"href":20328,"rel":20329},"https://www.learnpython.org/",[19997],"LearnPython.org"," - a free tutorial with exercises and quizzes",[232,20333,20334,20339],{},[15226,20335,20338],{"href":20336,"rel":20337},"https://www.coursera.org/specializations/python",[19997],"Python for Everybody"," - a series of online courses on Python for data manipulation, visualization, and web development",[4168,20341,20343],{"id":20342},"_2-start-with-the-basics","2. Start with the Basics",[30,20345,20346],{},"Before diving into more advanced topics, it's important to build a strong foundation in the basics of Python. This includes learning about data types, variables, loops, and control structures. Make sure to take the time to understand these concepts thoroughly, as they will form the foundation of your programming skills.",[4168,20348,20350],{"id":20349},"_3-practice-practice-practice","3. Practice, Practice, Practice",[30,20352,20353],{},"The best way to learn Python is by actively using it. As you work through tutorials and exercises, try to apply what you've learned to your own projects. This will help you solidify your understanding and build your skills.",[30,20355,20356],{},"Consider setting aside dedicated time each day or week to practice coding in Python. You can also join online communities, such as forums or Discord channels, where you can ask for help and get feedback on your work from more experienced programmers.",[4168,20358,20360],{"id":20359},"_4-seek-help-when-needed","4. Seek Help When Needed",[30,20362,20363],{},"Don't be afraid to ask for help if you get stuck or have questions. There are many resources available for getting help with Python, including online communities, forums, and Stack Overflow. Don't be afraid to reach out for assistance when you need it – everyone has to start somewhere, and there are many experienced programmers who are willing to help out those who are just starting out.",[4168,20365,20367],{"id":20366},"_5-keep-learning-and-expanding-your-skills","5. Keep Learning and Expanding Your Skills",[30,20369,20370],{},"Once you've learned the basics of Python, there is still much more to learn. Consider exploring new libraries and frameworks, or diving into more advanced topics like machine learning or web development.",[30,20372,20373],{},"Keep an open mind and be willing to try new things. The more you learn and practice, the more proficient you will become in Python.",[37,20375,166],{"id":165},[30,20377,20378],{},"In conclusion, how long it takes to learn Python will depend on your prior programming experience, the amount of time you can dedicate to learning, and your learning style. With dedication and practice, most people can learn Python within a few months to a year. By following a structured learning plan and seeking help when needed, you can set yourself up for success as you learn this powerful programming language.",{"title":16,"searchDepth":17,"depth":17,"links":20380},[20381,20382,20383,20390],{"id":20242,"depth":179,"text":20243},{"id":20275,"depth":179,"text":20276},{"id":20299,"depth":179,"text":20300,"children":20384},[20385,20386,20387,20388,20389],{"id":20306,"depth":17,"text":20307},{"id":20342,"depth":17,"text":20343},{"id":20349,"depth":17,"text":20350},{"id":20359,"depth":17,"text":20360},{"id":20366,"depth":17,"text":20367},{"id":165,"depth":179,"text":166},"https://images.unsplash.com/photo-1515879218367-8466d910aaa4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDJ8fHB5dGhvbnxlbnwwfHx8fDE2NzExNTE1NTM&ixlib=rb-4.0.3&q=80&w=2000",{"slug":20393,"excerpt":20394},"how-long-does-it-take-to-learn-python",{"type":13,"value":20395},[20396,20398],[30,20397,20236],{},[30,20399,20239],{},"/how-long-does-it-take-to-learn-python","2022-12-17T13:06:39.000Z",{"title":20231,"description":20236},[39,65,205,206,207,208,210],"hrRjMGTeqRPC-hW6RkwFwA_UUyz4QScLXfn2ZQg4s5c",{"id":20406,"title":20407,"author":26,"body":20408,"category":19,"description":20418,"extension":7,"image":20509,"isDraft":190,"isFeatured":190,"locale":9,"meta":20510,"navigation":199,"path":20520,"publishedAt":20521,"readingTime":425,"seo":20522,"stem":20511,"tags":20523,"updatedAt":211,"__hash__":20524},"articles_en/self-taught-developers.md","Self-Taught Developers: Guide",{"type":13,"value":20409,"toc":20503},[20410,20416,20419,20422,20426,20429,20446,20450,20453,20464,20468,20471,20482,20486,20489,20500],[20411,20412,20413],"blockquote",{},[30,20414,20415],{},"No man is brave that has never walked a hundred miles. If you want to know the truth of who you are, walk until not a person knows your name. Travel is the great leveler, the great teacher, bitter as medicine, crueler than mirror-glass. A long stretch of road will teach you more about yourself than a hundred years of quiet. -Patrick Ruthfuss",[30,20417,20418],{},"It's no secret that the demand for skilled developers is on the rise, and more and more people are turning to self-teaching as a way to enter the field. But the road to becoming a self-taught developer can be challenging, especially if you don't have a background in computer science.",[30,20420,20421],{},"Here are some tips and strategies to help you on your journey:",[37,20423,20425],{"id":20424},"find-the-right-resources","Find the right resources",[30,20427,20428],{},"There are a ton of online resources available for self-taught developers, ranging from free tutorials and video courses to paid online courses and certification programs. It's important to do your research and find resources that are tailored to your specific needs and goals. Here are a few things to consider when looking for resources:",[4704,20430,20431,20434,20437,20440,20443],{},[232,20432,20433],{},"Your goals: What do you want to learn? Are you looking to learn a specific programming language or build a specific type of application? Make sure the resources you choose to align with your goals.",[232,20435,20436],{},"Your learning style: Everyone learns differently. Some people prefer video courses, while others prefer reading tutorials or working through exercises. Consider what learning style works best for you and choose resources that align with it.",[232,20438,20439],{},"Your budget: Some resources are free, while others come with a cost. Determine your budget and look for resources that fit within it.",[232,20441,20442],{},"The reputation of the resource: Check out reviews and ratings of the resource you're considering. Are other people finding it helpful and effective?",[232,20444,20445],{},"The format of the resource: Do you prefer interactive courses, or are you more comfortable with reading tutorials and documentation? Choose resources that align with your preferred format.",[37,20447,20449],{"id":20448},"practice-practice-practice","Practice, practice, practice",[30,20451,20452],{},"One of the best ways to learn programming is through hands-on practice. You can do this through online coding challenges and projects, or by building your own small applications or websites. The more you practice, the more you'll learn, and the more confident you'll become as a programmer. There are a few ways you can practice your programming skills:",[4704,20454,20455,20458,20461],{},[232,20456,20457],{},"Online coding challenges and exercises: Many websites offer coding challenges and exercises that allow you to practice your skills in a variety of programming languages. Some popular options include HackerRank, CodeWars, and LeetCode.",[232,20459,20460],{},"Build your own projects: Consider building your own small applications or websites. This will give you the opportunity to apply what you've learned and create something that is uniquely your own.",[232,20462,20463],{},"Contribute to open source projects: Many open source projects welcome contributions from new developers. This is a great way to practice your skills and give back to the community at the same time.",[37,20465,20467],{"id":20466},"stay-up-to-date","Stay up to date",[30,20469,20470],{},"To be a successful self-taught developer, it's important to stay up to date with the latest trends and technologies. This can be done through reading industry blogs and publications, participating in online communities and forums, and attending tech meetups and conferences. Here are a few ways to do so:",[4704,20472,20473,20476,20479],{},[232,20474,20475],{},"Read industry blogs and publications: Follow blogs and publications that cover the latest trends and technologies in the tech industry. This will help you stay informed about what's happening in the field and give you a sense of what's coming up next.",[232,20477,20478],{},"Participate in online communities and forums: Join online communities and forums related to programming and technology. This is a great way to connect with other developers and stay informed about what's happening in the industry.",[232,20480,20481],{},"Attend tech meetups and conferences: Consider attending tech meetups and conferences in your area. These events are a great way to meet other developers, learn about new technologies, and stay up to date on the latest trends.",[37,20483,20485],{"id":20484},"find-a-support-system","Find a support system",[30,20487,20488],{},"Finally, it's crucial to have a strong support system in place as you embark on your journey as a self-taught developer. This could include friends and family who are supportive of your goals, or a mentor who can offer guidance and advice. Here are a few ways to build a support system:",[4704,20490,20491,20494,20497],{},[232,20492,20493],{},"Connect with friends and family: Surround yourself with people who are supportive of your goals and can offer encouragement and motivation.",[232,20495,20496],{},"Find a mentor: Consider reaching out to a more experienced developer who can offer guidance and advice. This could be someone you know personally or someone you find through online communities or tech meetups.",[232,20498,20499],{},"Join online communities and forums: Participating in online communities and forums is a great way to connect with other developers who are on a similar journey. You can ask questions, share your progress, and get feedback and support from others.",[30,20501,20502],{},"In summary, becoming a self-taught developer requires dedication, hard work, and a willingness to constantly learn and adapt. With the right resources, practice, and support system, it is possible to become a skilled and successful programmer.",{"title":16,"searchDepth":17,"depth":17,"links":20504},[20505,20506,20507,20508],{"id":20424,"depth":179,"text":20425},{"id":20448,"depth":179,"text":20449},{"id":20466,"depth":179,"text":20467},{"id":20484,"depth":179,"text":20485},"https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDh8fHNvZnR3YXJlJTIwZW5nfGVufDB8fHx8MTY2MjU2MDg0Nw&ixlib=rb-1.2.1&q=80&w=2000",{"slug":20511,"excerpt":20512},"self-taught-developers",{"type":13,"value":20513},[20514,20518],[20411,20515,20516],{},[30,20517,20415],{},[30,20519,20418],{},"/self-taught-developers","2022-12-17T09:40:20.000Z",{"title":20407,"description":20418},[206,207,208,210],"XSjnOocM89ogm4S1LIxL1i_unSfhshnPOwHRKwnxF18",{"id":20526,"title":20527,"author":26,"body":20528,"category":19,"description":20532,"extension":7,"image":20607,"isDraft":190,"isFeatured":199,"locale":9,"meta":20608,"navigation":199,"path":20616,"publishedAt":20617,"readingTime":416,"seo":20618,"stem":20609,"tags":20619,"updatedAt":20620,"__hash__":20621},"articles_en/the-importance-of-mindset-in-learning.md","The Importance of Mindset in Learning",{"type":13,"value":20529,"toc":20597},[20530,20533,20537,20540,20544,20547,20551,20554,20558,20561,20565,20568,20572,20575,20579,20582,20586,20589,20592],[30,20531,20532],{},"Our mindset is crucial when teaching ourselves any new skills, not just programming. In fact, our mindset will have more of an impact on our chances of success than almost anything else.",[37,20534,20536],{"id":20535},"a-positive-attitude-is-key","A Positive Attitude is Key",[30,20538,20539],{},"A positive attitude can help us approach challenges with determination and resilience. When we believe in our ability to learn and grow, we are more likely to persevere through difficult parts of the learning process and overcome obstacles.",[37,20541,20543],{"id":20542},"a-growth-mindset-is-essential","A Growth Mindset is Essential",[30,20545,20546],{},"Having a growth mindset is essential for effective learning. When we believe that our abilities can be developed through effort and learning, we are more likely to take on challenges and seek out feedback and new experiences that can help us improve.",[37,20548,20550],{"id":20549},"fixed-mindsets-hold-us-back","Fixed Mindsets Hold Us Back",[30,20552,20553],{},"On the other hand, a fixed mindset can hold us back. If we believe that our abilities are fixed and cannot be changed, we may be more likely to give up when faced with difficult tasks or setbacks. This can prevent us from achieving our full potential as learners.",[37,20555,20557],{"id":20556},"intelligence-can-be-developed","Intelligence Can Be Developed",[30,20559,20560],{},"It's important to remember that intelligence is not fixed. Someone with a growth mindset believes they can get better at anything with effort and persistence. By believing that we can learn new skills and develop new talents, we open ourselves up to the possibility of achieving our goals and reaching our full potential.",[37,20562,20564],{"id":20563},"embrace-struggles-and-challenges","Embrace Struggles and Challenges",[30,20566,20567],{},"Struggling with something is growth. That's a natural part of the learning process. It is an opportunity to grow and improve, rather than a sign of failure or inability. When we encounter a difficult concept or problem, we should try to approach it with a growth mindset. This means believing that we can learn and grow through effort and persistence. We should embrace the struggles we encounter while learning. We should not see them as roadblocks but as opportunities for growth and development.",[37,20569,20571],{"id":20570},"keep-pushing-forward","Keep Pushing Forward",[30,20573,20574],{},"We should persevere through challenges and keep working towards our goals, even when things get difficult. This is what persistence and grit are all about. We should celebrate our persistence and determination when we overcome a challenge. This can give us a sense of accomplishment and motivate us to continue learning and growing.",[37,20576,20578],{"id":20577},"real-learning-happens-through-struggle","Real Learning Happens Through Struggle",[30,20580,20581],{},"We must remember that real learning happens when we push ourselves to grow and improve, even through struggles and challenges. We should embrace these opportunities and keep working towards our goals. When we are questioning our abilities, we should reflect on successes we have already achieved while learning to program. This is proof that we can do it.",[37,20583,20585],{"id":20584},"believe-in-yourself-and-your-ability-to-learn","Believe in Yourself and Your Ability to Learn",[30,20587,20588],{},"Ultimately, we must believe in ourselves and our ability to learn and grow. We must keep a growth mindset and persist through challenges. This is how real learning happens. It is important to discover our motivation for learning. We might be motivated by a desire to develop new technical skills, create useful stuff, or advance our careers. We should reflect on why we are interested in learning a new skill and what we hope to achieve by mastering it. We should identify our motivation for learning the skill and set specific, achievable goals that align with our reasons for learning. We should use our motivation to help us stay focused and motivated as we work through the learning process. Lastly, we should track our progress and celebrate our successes along the way.",[30,20590,20591],{},"As The Odin Project says:",[20411,20593,20594],{},[30,20595,20596],{},"\"Whatever it is, hold on tightly to your motivation - this will be what pulls you through to the end of this journey, giving you a definitive goal to aim towards.\"",{"title":16,"searchDepth":17,"depth":17,"links":20598},[20599,20600,20601,20602,20603,20604,20605,20606],{"id":20535,"depth":179,"text":20536},{"id":20542,"depth":179,"text":20543},{"id":20549,"depth":179,"text":20550},{"id":20556,"depth":179,"text":20557},{"id":20563,"depth":179,"text":20564},{"id":20570,"depth":179,"text":20571},{"id":20577,"depth":179,"text":20578},{"id":20584,"depth":179,"text":20585},"https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDcwfHxtaW5kc2V0JTIwbGVhcm5pbmd8ZW58MHx8fHwxNjcxMTQwOTY5&ixlib=rb-4.0.3&q=80&w=2000",{"slug":20609,"excerpt":20610},"the-importance-of-mindset-in-learning",{"type":13,"value":20611},[20612,20614],[30,20613,20532],{},[37,20615,20536],{"id":20535},"/the-importance-of-mindset-in-learning","2022-12-15T21:52:33.000Z",{"title":20527,"description":20532},[207,209,210],"2022-12-15T22:28:51.000Z","lzfa7-hD7APXrCo6PWIvQvFhFgckj-b2P-gr_cx43pw",{"id":20623,"title":20624,"author":26,"body":20625,"category":19,"description":20629,"extension":7,"image":20693,"isDraft":190,"isFeatured":190,"locale":9,"meta":20694,"navigation":199,"path":20702,"publishedAt":20703,"readingTime":17,"seo":20704,"stem":20695,"tags":20705,"updatedAt":20706,"__hash__":20707},"articles_en/tips-for-improving-your-web-development-skills.md","Tips for Improving Your Web Development Skills",{"type":13,"value":20626,"toc":20685},[20627,20630,20634,20637,20640,20644,20647,20650,20654,20657,20660,20664,20667,20670,20674,20677,20680,20682],[30,20628,20629],{},"As a web developer, it's important to continually improve your skills and stay up-to-date with the latest technologies and best practices in the field. Here are some strategies for doing just that:",[37,20631,20633],{"id":20632},"attend-conferences-and-workshops","Attend Conferences and Workshops",[30,20635,20636],{},"Attending conferences and workshops is a great way to learn about new technologies, best practices, and industry trends. Many conferences offer a variety of sessions and tracks, so you can choose the topics that most interest you.",[30,20638,20639],{},"Not only will you learn from experts in the field, but you'll also have the opportunity to network with other professionals and build connections that can be valuable in your career. Conferences and workshops can also be a great source of inspiration, as you'll get to see what others are working on and how they're tackling different challenges.",[37,20641,20643],{"id":20642},"read-blogs-and-online-articles","Read Blogs and Online Articles",[30,20645,20646],{},"There are many blogs and online articles that cover web development topics. Follow a few that you find interesting and informative, and make a habit of reading them regularly. Not only will you learn about new technologies and best practices, but you'll also get a sense of what's happening in the industry as a whole.",[30,20648,20649],{},"In addition to reading general web development blogs, you can also look for more specialized blogs that focus on specific technologies or approaches. This can be a great way to get in-depth knowledge and insights from experts in those areas.",[37,20651,20653],{"id":20652},"learn-from-others","Learn from Others",[30,20655,20656],{},"Don't be afraid to ask for help or advice from other developers. Many developers are happy to share their knowledge and experience, and you can learn a lot from those who have been working in the field for a while.",[30,20658,20659],{},"One way to learn from others is to join online communities or forums where developers discuss web development topics. You can ask questions, share your own experiences, and get feedback from others. You can also look for local meetups or user groups where you can connect with other developers in person.",[37,20661,20663],{"id":20662},"experiment-and-try-new-things","Experiment and Try New Things",[30,20665,20666],{},"One of the best ways to improve your skills is to try new things. Experiment with different technologies and approaches, and don't be afraid to make mistakes. You'll learn a lot from your successes and failures, and you'll become more comfortable with new technologies as you gain experience.",[30,20668,20669],{},"In addition to experimenting on your own, you can also look for opportunities to work on projects with other developers. Collaborating with others can be a great way to learn from each other and gain new perspectives.",[37,20671,20673],{"id":20672},"take-online-courses","Take Online Courses",[30,20675,20676],{},"There are many online courses and tutorials available that can help you learn new skills and technologies. Look for courses that are taught by experienced developers and cover topics that are relevant to your interests and goals.",[30,20678,20679],{},"Online courses can be a convenient and flexible way to learn, as you can usually work at your own pace and fit your learning around your schedule. Many courses also include quizzes, assignments, and projects to help you apply what you've learned and consolidate your knowledge.",[37,20681,166],{"id":165},[30,20683,20684],{},"By following these tips, you can continually improve your web development skills and stay up-to-date with the latest technologies and best practices in the field. With hard work and dedication, you can become a top-notch web developer and build successful websites and web applications.",{"title":16,"searchDepth":17,"depth":17,"links":20686},[20687,20688,20689,20690,20691,20692],{"id":20632,"depth":179,"text":20633},{"id":20642,"depth":179,"text":20643},{"id":20652,"depth":179,"text":20653},{"id":20662,"depth":179,"text":20663},{"id":20672,"depth":179,"text":20673},{"id":165,"depth":179,"text":166},"https://images.unsplash.com/photo-1518818608552-195ed130cdf4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDI1fHxwcm9ncmFtbWluZyUyMGxhbmd1YWdlfGVufDB8fHx8MTY3MTE1NDE5OQ&ixlib=rb-4.0.3&q=80&w=2000",{"slug":20695,"excerpt":20696},"tips-for-improving-your-web-development-skills",{"type":13,"value":20697},[20698,20700],[30,20699,20629],{},[37,20701,20633],{"id":20632},"/tips-for-improving-your-web-development-skills","2022-12-16T09:53:38.000Z",{"title":20624,"description":20629},[206,207,208,209,210],"2022-12-16T10:49:53.000Z","f9rjA0g02WRwAoH62m3Zi_DMNprGiIcdc-E6P8kqjZE",{"id":20709,"title":20710,"author":26,"body":20711,"category":19,"description":20769,"extension":7,"image":20770,"isDraft":190,"isFeatured":190,"locale":9,"meta":20771,"navigation":199,"path":20779,"publishedAt":20780,"readingTime":17,"seo":20781,"stem":20772,"tags":20782,"updatedAt":211,"__hash__":20783},"articles_en/unity-engine-reusable-and-scalable-codes.md","Unity Engine: Reusable and Scalable Codes",{"type":13,"value":20712,"toc":20761},[20713,20716,20720,20723,20727,20730,20734,20737,20741,20744,20748,20751,20755,20758],[30,20714,20715],{},"Creating modular and reusable code in Unity is an important concept for efficient game development. Here are a few tips to help you make your code more modular, organized, and reusable:",[37,20717,20719],{"id":20718},"use-scriptableobjects","Use ScriptableObjects:",[30,20721,20722],{},"ScriptableObjects are data containers that can be used to store and organize game data, such as settings, item properties, and character stats. They can be easily edited and modified in the Unity editor and can be shared across multiple scripts and scenes. This makes it easy to change game data without having to dig through and modify multiple scripts.",[37,20724,20726],{"id":20725},"utilize-interfaces","Utilize interfaces:",[30,20728,20729],{},"Interfaces are a way to define a contract for certain functionality that a class must implement. By using interfaces, you can create more flexible and reusable code that can be easily extended or modified. This allows you to create a blueprint of what a class should look like, making it simpler to swap out or add new classes without breaking existing code.",[37,20731,20733],{"id":20732},"create-helper-classes-and-functions","Create helper classes and functions:",[30,20735,20736],{},"Helper classes and functions can be used to encapsulate common functionality, such as mathematical operations or input handling. By creating these helpers, you can keep your code organized and reduce duplicated logic. This also makes it easier to test and debug your code.",[37,20738,20740],{"id":20739},"use-the-single-responsibility-principle","Use the Single Responsibility Principle:",[30,20742,20743],{},"The Single Responsibility Principle states that a class should have one, and only one reason to change. By adhering to this principle, you can create classes that are focused on a specific task, making them more reusable and testable. This also makes it easier to understand and work with individual classes.",[37,20745,20747],{"id":20746},"use-the-dependency-injection-pattern","Use the Dependency Injection pattern:",[30,20749,20750],{},"Dependency injection is a design pattern that allows you to decouple your code by injecting dependencies into a class rather than creating them within the class. This makes your code more flexible, testable, and reusable. It also makes it easier to swap out different implementations of a dependency without having to change the dependent class.",[37,20752,20754],{"id":20753},"refactor-your-code-regularly","Refactor your code regularly:",[30,20756,20757],{},"As your game grows, it’s important to regularly review and refactor your code to ensure it stays organized and easy to maintain. This can involve renaming variables, refactoring functions, or even breaking up large classes into smaller ones. This will make it easier to add new features and fix bugs in the future.",[30,20759,20760],{},"By following these tips and principles, you can create more modular, organized, and reusable code that is easier to maintain and extend as your game grows. This will save you time and resources in the long run and help you create a more polished and stable game",{"title":16,"searchDepth":17,"depth":17,"links":20762},[20763,20764,20765,20766,20767,20768],{"id":20718,"depth":179,"text":20719},{"id":20725,"depth":179,"text":20726},{"id":20732,"depth":179,"text":20733},{"id":20739,"depth":179,"text":20740},{"id":20746,"depth":179,"text":20747},{"id":20753,"depth":179,"text":20754},"Creating modular and reusable code in Unity is an important concept for efficient game development. Here are a few tips to help you make your code more modular, organized, and reusable: Use ScriptableObjects: ScriptableObjects are data containers that can be used to store and organize game data, such as settings, item properties, and character stats.","__GHOST_URL__/content/images/2023/01/DSC_4044.JPG",{"slug":20772,"excerpt":20773},"unity-engine-reusable-and-scalable-codes",{"type":13,"value":20774},[20775,20777],[30,20776,20715],{},[37,20778,20719],{"id":20718},"/unity-engine-reusable-and-scalable-codes","2023-01-29T13:12:14.000Z",{"title":20710,"description":20769},[206,210],"n1HsnPPn6alToiYjommGc8oi1TEDvUARUnMf--omfUU",{"id":20785,"title":20786,"author":26,"body":20787,"category":19,"description":20846,"extension":7,"image":20847,"isDraft":190,"isFeatured":190,"locale":9,"meta":20848,"navigation":199,"path":20856,"publishedAt":20857,"readingTime":416,"seo":20858,"stem":20849,"tags":20859,"updatedAt":20860,"__hash__":20861},"articles_en/will-artificial-intelligence-kill-creativity-in-video-game-development.md","Artificial Intelligence Powered Tools And Video Game Development?",{"type":13,"value":20788,"toc":20841},[20789,20793,20796,20799,20802,20806,20811,20814,20817,20820,20823,20827,20832,20835,20838],[37,20790,20792],{"id":20791},"growth-and-challenges-of-video-game-development","Growth and Challenges of Video Game Development:",[30,20794,20795],{},"The video game industry has experienced significant growth in recent years, driven by the increasing popularity of mobile gaming and advancements in technology. According to a report by Newzoo, the global video game market reached $159.3 billion in 2020, with a year-over-year growth rate of 9.3%. Additionally, a report by App Annie estimates that global mobile gaming revenue has reached $100 billion in 2021.",[30,20797,20798],{},"However, this growth also means that game developers are under pressure to deliver high-quality games within tight deadlines and with limited resources. A survey by the International Game Developers Association (IGDA) found that 70% of game developers work more than 40 hours a week, with 28% working more than 60 hours a week. Additionally, 69% of game developers reported working on projects with unrealistic deadlines, and 61% reported working on projects with unrealistic budgets.",[30,20800,20801],{},"To address these challenges, game developers are constantly searching for ways to improve their workflow and efficiency. This includes seeking out new technologies and tools, as well as implementing best practices for project management and team collaboration. By finding ways to streamline their development process and make the most of their resources, developers are able to deliver high-quality games to players while staying on schedule and within budget.",[37,20803,20805],{"id":20804},"can-ai-help-addressing-some-of-these-problems","Can AI Help Addressing Some Of These problems?",[30,20807,20808],{},[2111,20809],{"alt":16,"src":20810},"__GHOST_URL__/content/images/2023/01/ai-in-gaming-main-1600-1.jpg",[30,20812,20813],{},"Artificial Intelligence (AI) is taking the video game industry by storm and changing the way games are designed, developed, and played. Imagine being able to create a game that adapts to the player's behavior, generates new levels on the fly, and creates realistic NPCs that can hold a conversation with you. Well, all of that and more is possible thanks to the power of AI.",[30,20815,20816],{},"One of the most exciting aspects of AI in game development is its ability to assist in game design. Game designers can use AI-powered tools to generate level layouts, NPC behaviors, and quest chains with ease. This not only saves designers time but also allows them to create more complex and varied game content. For example, AI can simulate player behavior and identify potential bugs or performance issues, helping developers fix problems before a game is released and improving the overall player experience.",[30,20818,20819],{},"AI-powered tools can also be used to create game assets such as 3D models and animations. This automates the process of creating assets and saves time and resources, allowing developers to focus on more important tasks such as creating engaging gameplay experiences.",[30,20821,20822],{},"In addition, AI can be used to create intelligent and adaptive gameplay, by tracking the player's progress and adjusting the game's difficulty accordingly. This keeps players engaged and ensures that the game is challenging but not frustrating. And that's just the tip of the iceberg, with AI-powered natural language processing (NLP) NPCs can have more realistic and dynamic behaviors and also help in creating more natural language-based interactions with the players.",[37,20824,20826],{"id":20825},"ai-powered-tools-and-creativity","AI-Powered Tools and Creativity:",[30,20828,20829],{},[2111,20830],{"alt":16,"src":20831},"__GHOST_URL__/content/images/2023/01/Screenshot_136.png",[30,20833,20834],{},"As the use of Artificial Intelligence in game development becomes more prevalent, one question that arises is the impact it has on creativity and artistry in the industry. While these tools can assist in game design and help automate the process of creating assets, some artists and game developers are concerned that it could lead to a loss of creativity and originality. On one hand, AI-generated art and assets can save time and resources for developers, allowing them to focus on more important tasks such as creating engaging gameplay experiences and unique game content that would be difficult or impossible to create manually.",[30,20836,20837],{},"On the other hand, some artists argue that the use of these tools can lead to a homogenization of game content, as the same algorithms and techniques are used to create assets, resulting in a lack of diversity and originality in games, and the potential loss of the unique styles and perspectives that human artists bring to the table. For example, some artists may worry that AI-generated art and assets may lack the personal touch and unique perspective that a human artist would bring to the table.",[30,20839,20840],{},"Furthermore, the use of these tools can also raise ethical concerns, as it can lead to the displacement of human artists and designers from their jobs, and questions about the ownership and copyright of AI-generated art. For example, some artists may worry that the use of AI-generated art and assets could lead to the displacement of human artists, and raise questions about the ownership and copyright of AI-generated art.",{"title":16,"searchDepth":17,"depth":17,"links":20842},[20843,20844,20845],{"id":20791,"depth":179,"text":20792},{"id":20804,"depth":179,"text":20805},{"id":20825,"depth":179,"text":20826},"Growth and Challenges of Video Game Development: The video game industry has experienced significant growth in recent years, driven by the increasing popularity of mobile gaming and advancements in technology. According to a report by Newzoo, the global video game market reached $159.","__GHOST_URL__/content/images/2023/01/sony_santa_monica.0-1.jpg",{"slug":20849,"excerpt":20850},"will-artificial-intelligence-kill-creativity-in-video-game-development",{"type":13,"value":20851},[20852,20854],[37,20853,20792],{"id":20791},[30,20855,20795],{},"/will-artificial-intelligence-kill-creativity-in-video-game-development","2023-01-23T09:00:12.000Z",{"title":20786,"description":20846},[120,206,209,210],"2023-01-23T21:35:21.000Z","H42DpBKdvKSfA7tb0EgJf4bR03-uT0jHUc7Hhv1YMWk",{"id":20863,"avatar":20864,"bio":20865,"extension":7,"github":20866,"linkedin":26,"locale":9,"meta":20867,"name":20869,"role":20874,"slug":26,"stem":20875,"twitter":20876,"website":20877,"__hash__":20878},"authors_en/en/authors/raed-bahri.md","/images/raed-bahri.avif","Product Manager and Developer specializing in Arabic-first applications","lord007tn",{"path":20868,"title":20869,"description":16,"body":20870},"/en/authors/raed-bahri","Raed Bahri",{"type":13,"value":20871,"toc":20872},[],{"title":16,"searchDepth":17,"depth":17,"links":20873},[],"Founder & Product Developer","en/authors/raed-bahri","El_Raed_Bahri","https://raedbahri.com","Z0e-eL6j77RzKuYkRKXQQdjQaKAmnzlYZYONZP3MjEQ",{"id":4,"title":5,"description":6,"extension":7,"image":8,"locale":9,"meta":20880,"slug":19,"stem":20,"__hash__":21},{"path":11,"body":20881},{"type":13,"value":20882,"toc":20883},[],{"title":16,"searchDepth":17,"depth":17,"links":20884},[],1761775956028]