[{"data":1,"prerenderedAt":1109},["ShallowReactive",2],{"blog-posts":3},[4,732,952],{"id":5,"title":6,"author":7,"body":8,"date":720,"description":721,"extension":722,"meta":723,"navigation":137,"path":724,"seo":725,"stem":726,"tags":727,"__hash__":731},"blog/blog/typescript-best-practices.md","TypeScript Best Practices for Vue Applications","Mike Johnson",{"type":9,"value":10,"toc":710},"minimark",[11,15,20,23,56,60,63,163,167,170,276,280,283,359,363,366,425,429,432,573,577,580,699,703,706],[12,13,14],"p",{},"TypeScript brings static type checking to JavaScript, making your Vue applications more robust and maintainable. Here are the essential best practices for using TypeScript with Vue.",[16,17,19],"h2",{"id":18},"setting-up-typescript-with-vue","Setting Up TypeScript with Vue",[12,21,22],{},"First, ensure you have TypeScript installed and configured:",[24,25,30],"pre",{"className":26,"code":27,"language":28,"meta":29,"style":29},"language-bash shiki shiki-themes github-light github-dark","npm install -D typescript @vue/typescript\n","bash","",[31,32,33],"code",{"__ignoreMap":29},[34,35,38,42,46,50,53],"span",{"class":36,"line":37},"line",1,[34,39,41],{"class":40},"sScJk","npm",[34,43,45],{"class":44},"sZZnC"," install",[34,47,49],{"class":48},"sj4cs"," -D",[34,51,52],{"class":44}," typescript",[34,54,55],{"class":44}," @vue/typescript\n",[16,57,59],{"id":58},"defining-component-props","Defining Component Props",[12,61,62],{},"Always define proper types for your component props:",[24,64,68],{"className":65,"code":66,"language":67,"meta":29,"style":29},"language-typescript shiki shiki-themes github-light github-dark","interface Props {\n  title: string;\n  count?: number;\n  items: string[];\n}\n\nconst props = defineProps\u003CProps>();\n","typescript",[31,69,70,83,99,113,126,132,139],{"__ignoreMap":29},[34,71,72,76,79],{"class":36,"line":37},[34,73,75],{"class":74},"szBVR","interface",[34,77,78],{"class":40}," Props",[34,80,82],{"class":81},"sVt8B"," {\n",[34,84,86,90,93,96],{"class":36,"line":85},2,[34,87,89],{"class":88},"s4XuR","  title",[34,91,92],{"class":74},":",[34,94,95],{"class":48}," string",[34,97,98],{"class":81},";\n",[34,100,102,105,108,111],{"class":36,"line":101},3,[34,103,104],{"class":88},"  count",[34,106,107],{"class":74},"?:",[34,109,110],{"class":48}," number",[34,112,98],{"class":81},[34,114,116,119,121,123],{"class":36,"line":115},4,[34,117,118],{"class":88},"  items",[34,120,92],{"class":74},[34,122,95],{"class":48},[34,124,125],{"class":81},"[];\n",[34,127,129],{"class":36,"line":128},5,[34,130,131],{"class":81},"}\n",[34,133,135],{"class":36,"line":134},6,[34,136,138],{"emptyLinePlaceholder":137},true,"\n",[34,140,142,145,148,151,154,157,160],{"class":36,"line":141},7,[34,143,144],{"class":74},"const",[34,146,147],{"class":48}," props",[34,149,150],{"class":74}," =",[34,152,153],{"class":40}," defineProps",[34,155,156],{"class":81},"\u003C",[34,158,159],{"class":40},"Props",[34,161,162],{"class":81},">();\n",[16,164,166],{"id":165},"typing-reactive-data","Typing Reactive Data",[12,168,169],{},"Use proper types for reactive references:",[24,171,173],{"className":65,"code":172,"language":67,"meta":29,"style":29},"interface User {\n  id: number;\n  name: string;\n  email: string;\n}\n\nconst user = ref\u003CUser | null>(null);\nconst users = ref\u003CUser[]>([]);\n",[31,174,175,184,195,206,217,221,225,257],{"__ignoreMap":29},[34,176,177,179,182],{"class":36,"line":37},[34,178,75],{"class":74},[34,180,181],{"class":40}," User",[34,183,82],{"class":81},[34,185,186,189,191,193],{"class":36,"line":85},[34,187,188],{"class":88},"  id",[34,190,92],{"class":74},[34,192,110],{"class":48},[34,194,98],{"class":81},[34,196,197,200,202,204],{"class":36,"line":101},[34,198,199],{"class":88},"  name",[34,201,92],{"class":74},[34,203,95],{"class":48},[34,205,98],{"class":81},[34,207,208,211,213,215],{"class":36,"line":115},[34,209,210],{"class":88},"  email",[34,212,92],{"class":74},[34,214,95],{"class":48},[34,216,98],{"class":81},[34,218,219],{"class":36,"line":128},[34,220,131],{"class":81},[34,222,223],{"class":36,"line":134},[34,224,138],{"emptyLinePlaceholder":137},[34,226,227,229,232,234,237,239,242,245,248,251,254],{"class":36,"line":141},[34,228,144],{"class":74},[34,230,231],{"class":48}," user",[34,233,150],{"class":74},[34,235,236],{"class":40}," ref",[34,238,156],{"class":81},[34,240,241],{"class":40},"User",[34,243,244],{"class":74}," |",[34,246,247],{"class":48}," null",[34,249,250],{"class":81},">(",[34,252,253],{"class":48},"null",[34,255,256],{"class":81},");\n",[34,258,260,262,265,267,269,271,273],{"class":36,"line":259},8,[34,261,144],{"class":74},[34,263,264],{"class":48}," users",[34,266,150],{"class":74},[34,268,236],{"class":40},[34,270,156],{"class":81},[34,272,241],{"class":40},[34,274,275],{"class":81},"[]>([]);\n",[16,277,279],{"id":278},"computed-properties","Computed Properties",[12,281,282],{},"Type your computed properties for better IntelliSense:",[24,284,286],{"className":65,"code":285,"language":67,"meta":29,"style":29},"const fullName = computed((): string => {\n  return `${user.value?.firstName} ${user.value?.lastName}`;\n});\n",[31,287,288,312,354],{"__ignoreMap":29},[34,289,290,292,295,297,300,303,305,307,310],{"class":36,"line":37},[34,291,144],{"class":74},[34,293,294],{"class":48}," fullName",[34,296,150],{"class":74},[34,298,299],{"class":40}," computed",[34,301,302],{"class":81},"(()",[34,304,92],{"class":74},[34,306,95],{"class":48},[34,308,309],{"class":74}," =>",[34,311,82],{"class":81},[34,313,314,317,320,323,326,329,332,335,338,340,342,344,346,349,352],{"class":36,"line":85},[34,315,316],{"class":74},"  return",[34,318,319],{"class":44}," `${",[34,321,322],{"class":81},"user",[34,324,325],{"class":44},".",[34,327,328],{"class":81},"value",[34,330,331],{"class":44},"?.",[34,333,334],{"class":81},"firstName",[34,336,337],{"class":44},"} ${",[34,339,322],{"class":81},[34,341,325],{"class":44},[34,343,328],{"class":81},[34,345,331],{"class":44},[34,347,348],{"class":81},"lastName",[34,350,351],{"class":44},"}`",[34,353,98],{"class":81},[34,355,356],{"class":36,"line":101},[34,357,358],{"class":81},"});\n",[16,360,362],{"id":361},"event-handlers","Event Handlers",[12,364,365],{},"Type your event handlers properly:",[24,367,369],{"className":65,"code":368,"language":67,"meta":29,"style":29},"const handleClick = (event: MouseEvent): void => {\n  console.log('Button clicked', event.target);\n};\n",[31,370,371,403,420],{"__ignoreMap":29},[34,372,373,375,378,380,383,386,388,391,394,396,399,401],{"class":36,"line":37},[34,374,144],{"class":74},[34,376,377],{"class":40}," handleClick",[34,379,150],{"class":74},[34,381,382],{"class":81}," (",[34,384,385],{"class":88},"event",[34,387,92],{"class":74},[34,389,390],{"class":40}," MouseEvent",[34,392,393],{"class":81},")",[34,395,92],{"class":74},[34,397,398],{"class":48}," void",[34,400,309],{"class":74},[34,402,82],{"class":81},[34,404,405,408,411,414,417],{"class":36,"line":85},[34,406,407],{"class":81},"  console.",[34,409,410],{"class":40},"log",[34,412,413],{"class":81},"(",[34,415,416],{"class":44},"'Button clicked'",[34,418,419],{"class":81},", event.target);\n",[34,421,422],{"class":36,"line":101},[34,423,424],{"class":81},"};\n",[16,426,428],{"id":427},"api-responses","API Responses",[12,430,431],{},"Define interfaces for API responses:",[24,433,435],{"className":65,"code":434,"language":67,"meta":29,"style":29},"interface ApiResponse\u003CT> {\n  data: T;\n  status: number;\n  message: string;\n}\n\nconst fetchUsers = async (): Promise\u003CApiResponse\u003CUser[]>> => {\n  const response = await fetch('/api/users');\n  return response.json();\n};\n",[31,436,437,452,464,475,486,490,494,531,554,568],{"__ignoreMap":29},[34,438,439,441,444,446,449],{"class":36,"line":37},[34,440,75],{"class":74},[34,442,443],{"class":40}," ApiResponse",[34,445,156],{"class":81},[34,447,448],{"class":40},"T",[34,450,451],{"class":81},"> {\n",[34,453,454,457,459,462],{"class":36,"line":85},[34,455,456],{"class":88},"  data",[34,458,92],{"class":74},[34,460,461],{"class":40}," T",[34,463,98],{"class":81},[34,465,466,469,471,473],{"class":36,"line":101},[34,467,468],{"class":88},"  status",[34,470,92],{"class":74},[34,472,110],{"class":48},[34,474,98],{"class":81},[34,476,477,480,482,484],{"class":36,"line":115},[34,478,479],{"class":88},"  message",[34,481,92],{"class":74},[34,483,95],{"class":48},[34,485,98],{"class":81},[34,487,488],{"class":36,"line":128},[34,489,131],{"class":81},[34,491,492],{"class":36,"line":134},[34,493,138],{"emptyLinePlaceholder":137},[34,495,496,498,501,503,506,509,511,514,516,519,521,523,526,529],{"class":36,"line":141},[34,497,144],{"class":74},[34,499,500],{"class":40}," fetchUsers",[34,502,150],{"class":74},[34,504,505],{"class":74}," async",[34,507,508],{"class":81}," ()",[34,510,92],{"class":74},[34,512,513],{"class":40}," Promise",[34,515,156],{"class":81},[34,517,518],{"class":40},"ApiResponse",[34,520,156],{"class":81},[34,522,241],{"class":40},[34,524,525],{"class":81},"[]>> ",[34,527,528],{"class":74},"=>",[34,530,82],{"class":81},[34,532,533,536,539,541,544,547,549,552],{"class":36,"line":259},[34,534,535],{"class":74},"  const",[34,537,538],{"class":48}," response",[34,540,150],{"class":74},[34,542,543],{"class":74}," await",[34,545,546],{"class":40}," fetch",[34,548,413],{"class":81},[34,550,551],{"class":44},"'/api/users'",[34,553,256],{"class":81},[34,555,557,559,562,565],{"class":36,"line":556},9,[34,558,316],{"class":74},[34,560,561],{"class":81}," response.",[34,563,564],{"class":40},"json",[34,566,567],{"class":81},"();\n",[34,569,571],{"class":36,"line":570},10,[34,572,424],{"class":81},[16,574,576],{"id":575},"generic-components","Generic Components",[12,578,579],{},"Use generics for reusable components:",[24,581,583],{"className":65,"code":582,"language":67,"meta":29,"style":29},"interface ListProps\u003CT> {\n  items: T[];\n  keyField: keyof T;\n  renderItem: (item: T) => string;\n}\n\nconst List = \u003CT>(props: ListProps\u003CT>) => {\n  // Component implementation\n};\n",[31,584,585,598,608,622,647,651,655,689,695],{"__ignoreMap":29},[34,586,587,589,592,594,596],{"class":36,"line":37},[34,588,75],{"class":74},[34,590,591],{"class":40}," ListProps",[34,593,156],{"class":81},[34,595,448],{"class":40},[34,597,451],{"class":81},[34,599,600,602,604,606],{"class":36,"line":85},[34,601,118],{"class":88},[34,603,92],{"class":74},[34,605,461],{"class":40},[34,607,125],{"class":81},[34,609,610,613,615,618,620],{"class":36,"line":101},[34,611,612],{"class":88},"  keyField",[34,614,92],{"class":74},[34,616,617],{"class":74}," keyof",[34,619,461],{"class":40},[34,621,98],{"class":81},[34,623,624,627,629,631,634,636,638,641,643,645],{"class":36,"line":115},[34,625,626],{"class":40},"  renderItem",[34,628,92],{"class":74},[34,630,382],{"class":81},[34,632,633],{"class":88},"item",[34,635,92],{"class":74},[34,637,461],{"class":40},[34,639,640],{"class":81},") ",[34,642,528],{"class":74},[34,644,95],{"class":48},[34,646,98],{"class":81},[34,648,649],{"class":36,"line":128},[34,650,131],{"class":81},[34,652,653],{"class":36,"line":134},[34,654,138],{"emptyLinePlaceholder":137},[34,656,657,659,662,664,667,669,671,674,676,678,680,682,685,687],{"class":36,"line":141},[34,658,144],{"class":74},[34,660,661],{"class":40}," List",[34,663,150],{"class":74},[34,665,666],{"class":81}," \u003C",[34,668,448],{"class":40},[34,670,250],{"class":81},[34,672,673],{"class":88},"props",[34,675,92],{"class":74},[34,677,591],{"class":40},[34,679,156],{"class":81},[34,681,448],{"class":40},[34,683,684],{"class":81},">) ",[34,686,528],{"class":74},[34,688,82],{"class":81},[34,690,691],{"class":36,"line":259},[34,692,694],{"class":693},"sJ8bj","  // Component implementation\n",[34,696,697],{"class":36,"line":556},[34,698,424],{"class":81},[16,700,702],{"id":701},"conclusion","Conclusion",[12,704,705],{},"Following these TypeScript best practices will make your Vue applications more type-safe, maintainable, and easier to debug. Start with basic typing and gradually adopt more advanced patterns as your application grows.",[707,708,709],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":29,"searchDepth":85,"depth":85,"links":711},[712,713,714,715,716,717,718,719],{"id":18,"depth":85,"text":19},{"id":58,"depth":85,"text":59},{"id":165,"depth":85,"text":166},{"id":278,"depth":85,"text":279},{"id":361,"depth":85,"text":362},{"id":427,"depth":85,"text":428},{"id":575,"depth":85,"text":576},{"id":701,"depth":85,"text":702},"2024-01-25","Discover essential TypeScript best practices for Vue.js applications. Learn about type safety, interfaces, generics, and how to write maintainable TypeScript code.","md",{},"/blog/typescript-best-practices",{"title":6,"description":721},"blog/typescript-best-practices",[67,728,729,730],"vue","javascript","best-practices","vnsJGHlPbDui0tHOe2nJihj7eYj2y9cGPWtNWLFh-U0",{"id":733,"title":734,"author":735,"body":736,"date":942,"description":943,"extension":722,"meta":944,"navigation":137,"path":945,"seo":946,"stem":947,"tags":948,"__hash__":951},"blog/blog/vue-composition-api-guide.md","Vue 3 Composition API: A Complete Guide","Jane Smith",{"type":9,"value":737,"toc":932},[738,741,745,748,777,781,784,794,798,805,820,824,831,855,857,863,872,876,879,898,902,905,924,926,929],[12,739,740],{},"The Composition API is one of the most significant features introduced in Vue 3. It provides a more flexible way to organize component logic and makes code more reusable and maintainable.",[16,742,744],{"id":743},"why-composition-api","Why Composition API?",[12,746,747],{},"The Composition API solves several problems with the Options API:",[749,750,751,759,765,771],"ul",{},[752,753,754,758],"li",{},[755,756,757],"strong",{},"Better Logic Reuse",": Easier to extract and reuse logic across components",[752,760,761,764],{},[755,762,763],{},"Better TypeScript Support",": More natural TypeScript integration",[752,766,767,770],{},[755,768,769],{},"Better Code Organization",": Related logic can be grouped together",[752,772,773,776],{},[755,774,775],{},"Better Tree Shaking",": Unused code can be eliminated more effectively",[16,778,780],{"id":779},"basic-setup","Basic Setup",[12,782,783],{},"To use the Composition API, you need to import the necessary functions from Vue:",[24,785,788],{"className":786,"code":787,"language":729,"meta":29,"style":29},"language-javascript shiki shiki-themes github-light github-dark","import { ref, reactive, computed, watch, onMounted } from 'vue';\n",[31,789,790],{"__ignoreMap":29},[34,791,792],{"class":36,"line":37},[34,793,787],{},[16,795,797],{"id":796},"reactive-references","Reactive References",[12,799,800,801,804],{},"The ",[31,802,803],{},"ref"," function creates a reactive reference to a value:",[24,806,808],{"className":786,"code":807,"language":729,"meta":29,"style":29},"const count = ref(0);\nconst message = ref('Hello, Vue!');\n",[31,809,810,815],{"__ignoreMap":29},[34,811,812],{"class":36,"line":37},[34,813,814],{},"const count = ref(0);\n",[34,816,817],{"class":36,"line":85},[34,818,819],{},"const message = ref('Hello, Vue!');\n",[16,821,823],{"id":822},"reactive-objects","Reactive Objects",[12,825,826,827,830],{},"For objects, use the ",[31,828,829],{},"reactive"," function:",[24,832,834],{"className":786,"code":833,"language":729,"meta":29,"style":29},"const state = reactive({\n  count: 0,\n  message: 'Hello, Vue!',\n});\n",[31,835,836,841,846,851],{"__ignoreMap":29},[34,837,838],{"class":36,"line":37},[34,839,840],{},"const state = reactive({\n",[34,842,843],{"class":36,"line":85},[34,844,845],{},"  count: 0,\n",[34,847,848],{"class":36,"line":101},[34,849,850],{},"  message: 'Hello, Vue!',\n",[34,852,853],{"class":36,"line":115},[34,854,358],{},[16,856,279],{"id":278},[12,858,859,860,830],{},"Computed properties are defined using the ",[31,861,862],{},"computed",[24,864,866],{"className":786,"code":865,"language":729,"meta":29,"style":29},"const doubleCount = computed(() => count.value * 2);\n",[31,867,868],{"__ignoreMap":29},[34,869,870],{"class":36,"line":37},[34,871,865],{},[16,873,875],{"id":874},"watchers","Watchers",[12,877,878],{},"Watchers allow you to perform side effects when reactive data changes:",[24,880,882],{"className":786,"code":881,"language":729,"meta":29,"style":29},"watch(count, (newValue, oldValue) => {\n  console.log(`Count changed from ${oldValue} to ${newValue}`);\n});\n",[31,883,884,889,894],{"__ignoreMap":29},[34,885,886],{"class":36,"line":37},[34,887,888],{},"watch(count, (newValue, oldValue) => {\n",[34,890,891],{"class":36,"line":85},[34,892,893],{},"  console.log(`Count changed from ${oldValue} to ${newValue}`);\n",[34,895,896],{"class":36,"line":101},[34,897,358],{},[16,899,901],{"id":900},"lifecycle-hooks","Lifecycle Hooks",[12,903,904],{},"Lifecycle hooks are available as functions:",[24,906,908],{"className":786,"code":907,"language":729,"meta":29,"style":29},"onMounted(() => {\n  console.log('Component mounted!');\n});\n",[31,909,910,915,920],{"__ignoreMap":29},[34,911,912],{"class":36,"line":37},[34,913,914],{},"onMounted(() => {\n",[34,916,917],{"class":36,"line":85},[34,918,919],{},"  console.log('Component mounted!');\n",[34,921,922],{"class":36,"line":101},[34,923,358],{},[16,925,702],{"id":701},[12,927,928],{},"The Composition API provides a more powerful and flexible way to write Vue components. While it might seem different at first, it offers significant benefits for complex applications and better code organization.",[707,930,931],{},"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":29,"searchDepth":85,"depth":85,"links":933},[934,935,936,937,938,939,940,941],{"id":743,"depth":85,"text":744},{"id":779,"depth":85,"text":780},{"id":796,"depth":85,"text":797},{"id":822,"depth":85,"text":823},{"id":278,"depth":85,"text":279},{"id":874,"depth":85,"text":875},{"id":900,"depth":85,"text":901},{"id":701,"depth":85,"text":702},"2024-01-20","Master the Vue 3 Composition API with this comprehensive guide. Learn about reactive refs, computed properties, watchers, and lifecycle hooks with practical examples.",{},"/blog/vue-composition-api-guide",{"title":734,"description":943},"blog/vue-composition-api-guide",[728,949,729,950],"composition-api","frontend","BfrU8rsg-YJk1k8SKv_q9DMzScN5aZDba6H3H9OPiS4",{"id":953,"title":954,"author":955,"body":956,"date":1099,"description":1100,"extension":722,"meta":1101,"navigation":137,"path":1102,"seo":1103,"stem":1104,"tags":1105,"__hash__":1108},"blog/blog/getting-started-with-nuxt.md","Getting Started with Nuxt 4","John Doe",{"type":9,"value":957,"toc":1089},[958,961,965,968,994,998,1001,1044,1048,1053,1064,1068,1071,1075,1078,1080,1083,1086],[12,959,960],{},"Nuxt 4 is the latest version of the Vue.js framework that makes it easy to build modern web applications. In this guide, we'll explore the key features and improvements that make Nuxt 4 a powerful choice for developers.",[16,962,964],{"id":963},"whats-new-in-nuxt-4","What's New in Nuxt 4",[12,966,967],{},"Nuxt 4 brings several exciting improvements:",[749,969,970,976,982,988],{},[752,971,972,975],{},[755,973,974],{},"Better Performance",": Optimized build process and runtime performance",[752,977,978,981],{},[755,979,980],{},"Enhanced Developer Experience",": Improved TypeScript support and better debugging tools",[752,983,984,987],{},[755,985,986],{},"New Features",": Server-side rendering improvements and better static site generation",[752,989,990,993],{},[755,991,992],{},"Ecosystem Updates",": Updated dependencies and better integration with modern tools",[16,995,997],{"id":996},"installation","Installation",[12,999,1000],{},"Getting started with Nuxt 4 is straightforward. You can create a new project using the official CLI:",[24,1002,1004],{"className":26,"code":1003,"language":28,"meta":29,"style":29},"npx nuxi@latest init my-nuxt-app\ncd my-nuxt-app\nnpm install\nnpm run dev\n",[31,1005,1006,1020,1027,1034],{"__ignoreMap":29},[34,1007,1008,1011,1014,1017],{"class":36,"line":37},[34,1009,1010],{"class":40},"npx",[34,1012,1013],{"class":44}," nuxi@latest",[34,1015,1016],{"class":44}," init",[34,1018,1019],{"class":44}," my-nuxt-app\n",[34,1021,1022,1025],{"class":36,"line":85},[34,1023,1024],{"class":48},"cd",[34,1026,1019],{"class":44},[34,1028,1029,1031],{"class":36,"line":101},[34,1030,41],{"class":40},[34,1032,1033],{"class":44}," install\n",[34,1035,1036,1038,1041],{"class":36,"line":115},[34,1037,41],{"class":40},[34,1039,1040],{"class":44}," run",[34,1042,1043],{"class":44}," dev\n",[16,1045,1047],{"id":1046},"key-concepts","Key Concepts",[1049,1050,1052],"h3",{"id":1051},"pages-and-routing","Pages and Routing",[12,1054,1055,1056,1059,1060,1063],{},"Nuxt 4 uses file-based routing, which means your file structure determines your application's routes. Simply create a ",[31,1057,1058],{},".vue"," file in the ",[31,1061,1062],{},"pages"," directory, and it becomes a route.",[1049,1065,1067],{"id":1066},"components","Components",[12,1069,1070],{},"Components in Nuxt 4 are automatically imported, so you can use them anywhere in your application without explicit imports.",[1049,1072,1074],{"id":1073},"server-side-rendering","Server-Side Rendering",[12,1076,1077],{},"Nuxt 4 excels at server-side rendering, providing better SEO and performance for your applications.",[16,1079,702],{"id":701},[12,1081,1082],{},"Nuxt 4 is an excellent choice for building modern web applications. Its powerful features, excellent developer experience, and strong ecosystem make it a top choice for Vue.js developers.",[12,1084,1085],{},"Whether you're building a simple blog or a complex web application, Nuxt 4 provides the tools and flexibility you need to succeed.",[707,1087,1088],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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":29,"searchDepth":85,"depth":85,"links":1090},[1091,1092,1093,1098],{"id":963,"depth":85,"text":964},{"id":996,"depth":85,"text":997},{"id":1046,"depth":85,"text":1047,"children":1094},[1095,1096,1097],{"id":1051,"depth":101,"text":1052},{"id":1066,"depth":101,"text":1067},{"id":1073,"depth":101,"text":1074},{"id":701,"depth":85,"text":702},"2024-01-15","Learn how to build modern web applications with Nuxt 4, the latest version of the Vue.js framework. This comprehensive guide covers everything from installation to deployment.",{},"/blog/getting-started-with-nuxt",{"title":954,"description":1100},"blog/getting-started-with-nuxt",[1106,728,729,1107],"nuxt","tutorial","v4WME2ZdYSs0fR5iCslWnwtRODPwUn-uivVCfCBXyl8",1764590496264]