[{"data":1,"prerenderedAt":203},["ShallowReactive",2],{"\u002Fblog\u002Fgetting_started_with_nuxt":3,"\u002Fblog\u002Fgetting_started_with_nuxt-surround":196},{"id":4,"title":5,"author":6,"body":10,"date":185,"description":186,"extension":187,"image":188,"meta":189,"minRead":190,"navigation":191,"path":192,"seo":193,"stem":194,"__hash__":195},"blog\u002Fblog\u002Fgetting_started_with_nuxt.md","Nuxt 3: My First Impressions",{"name":7,"avatar":8},"NSTCrystal",{"src":9,"alt":7},"avatar.png",{"type":11,"value":12,"toc":180},"minimark",[13,17,22,30,87,90,94,97,166,170,173,176],[14,15,16],"p",{},"Nuxt là một trong những framework tốt nhất để xây dựng các ứng dụng web hiện đại với Vue. Khi mới bắt đầu sử dụng, tôi đã rất ngạc nhiên trước những tính năng được tích hợp sẵn ngay từ đầu.",[18,19,21],"h2",{"id":20},"file-based-routing","File-Based Routing",[14,23,24,25,29],{},"Một trong những điều đầu tiên bạn sẽ nhận thấy là việc thiết lập định tuyến routing rất dễ dàng. Chỉ cần tạo một tệp trong thư mục ",[26,27,28],"code",{},"pages\u002F"," và Nuxt sẽ tự động tạo tuyến đường cho bạn.",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Ch1>Hello World\u003C\u002Fh1>\n\u003C\u002Ftemplate>\n","vue","",[26,38,39,55,78],{"__ignoreMap":36},[40,41,44,48,52],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"sMK4o","\u003C",[40,49,51],{"class":50},"swJcz","template",[40,53,54],{"class":46},">\n",[40,56,58,61,64,67,71,74,76],{"class":42,"line":57},2,[40,59,60],{"class":46},"  \u003C",[40,62,63],{"class":50},"h1",[40,65,66],{"class":46},">",[40,68,70],{"class":69},"sTEyZ","Hello World",[40,72,73],{"class":46},"\u003C\u002F",[40,75,63],{"class":50},[40,77,54],{"class":46},[40,79,81,83,85],{"class":42,"line":80},3,[40,82,73],{"class":46},[40,84,51],{"class":50},[40,86,54],{"class":46},[14,88,89],{},"Chỉ vậy thôi – không cần cấu hình bộ định tuyến. Nó hoạt động ngay.",[18,91,93],{"id":92},"auto-imports","Auto-Imports",[14,95,96],{},"Nuxt tự động import các component, composable và utility. Bạn không cần phải viết câu lệnh import cho từng thứ một.",[31,98,102],{"className":99,"code":100,"language":101,"meta":36,"style":36},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const count = ref(0)\nconst { data } = await useFetch('\u002Fapi\u002Fdata')\n","ts",[26,103,104,130],{"__ignoreMap":36},[40,105,106,110,113,116,120,123,127],{"class":42,"line":43},[40,107,109],{"class":108},"spNyl","const",[40,111,112],{"class":69}," count ",[40,114,115],{"class":46},"=",[40,117,119],{"class":118},"s2Zo4"," ref",[40,121,122],{"class":69},"(",[40,124,126],{"class":125},"sbssI","0",[40,128,129],{"class":69},")\n",[40,131,132,134,137,140,143,146,150,153,155,158,162,164],{"class":42,"line":57},[40,133,109],{"class":108},[40,135,136],{"class":46}," {",[40,138,139],{"class":69}," data ",[40,141,142],{"class":46},"}",[40,144,145],{"class":46}," =",[40,147,149],{"class":148},"s7zQu"," await",[40,151,152],{"class":118}," useFetch",[40,154,122],{"class":69},[40,156,157],{"class":46},"'",[40,159,161],{"class":160},"sfazB","\u002Fapi\u002Fdata",[40,163,157],{"class":46},[40,165,129],{"class":69},[18,167,169],{"id":168},"why-i-love-it","Why I Love It",[14,171,172],{},"Trải nghiệm thực sự tuyệt vời. Tính năng HMR hoạt động nhanh chóng, khả năng hỗ trợ TypeScript đạt chất lượng hàng đầu, và hệ sinh thái đi kèm (như Nuxt UI và Nuxt Content) biến việc xây dựng các dự án thực tế thành một trải nghiệm đầy hứng khởi.",[14,174,175],{},"Nếu bạn đang dùng Vue thuần, hãy thử qua Nuxt xem sao. Đây là framework mà tôi luôn ưu tiên lựa chọn hiện nay.",[177,178,179],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}",{"title":36,"searchDepth":57,"depth":57,"links":181},[182,183,184],{"id":20,"depth":57,"text":21},{"id":92,"depth":57,"text":93},{"id":168,"depth":57,"text":169},"2026-06-15","Bài chia sẻ chi tiết và dễ hiểu về trải nghiệm bắt đầu với Nuxt của tôi, bao gồm cơ chế định tuyến dựa trên cấu trúc tệp, tính năng tự động import và trải nghiệm tuyệt vời dành cho nhà phát triển.","md","\u002Fimages\u002Fblog\u002Fnuxt3.png",{},6,true,"\u002Fblog\u002Fgetting_started_with_nuxt",{"title":5,"description":186},"blog\u002Fgetting_started_with_nuxt","8ddNGQb2QpOFBzDuCr0sMW9WCpbh4hgOvzjNHlxpqE0",[197,198],null,{"title":199,"path":200,"stem":201,"description":202,"children":-1},"How to use Markdown files","\u002Fblog\u002Fhow_to_use_markdown_files","blog\u002Fhow_to_use_Markdown_files","Cách sử dụng file văn bản phổ biến nhất cho dân lập trình là Markdown, học về MarkDown chi tiết nhất và cách sử dụng MarkDown.",1789113753722]