[{"data":1,"prerenderedAt":1588},["ShallowReactive",2],{"post-\u002Fposts\u002Fhow-to-use-layouts-and-pages-in-nuxt":3,"post-author-garywoodfine":1197,"post-aside-video-none":6,"\u002Fposts\u002Fhow-to-use-layouts-and-pages-in-nuxt-surround":1206,"navigation":1217,"authors":1265,"author-garywoodfine":1294,"post-aside-related-candidates":1295,"content-section-services":1564,"content-section-products":1567,"content-section-company":1570,"legal-link":1572},{"id":4,"title":5,"aside":6,"author":7,"body":8,"category":1174,"date":1175,"description":1176,"extension":1177,"featureImage":1178,"meta":1180,"navigation":467,"path":1182,"seo":1183,"sitemap":1184,"slug":6,"stem":1194,"subtitle":1176,"summary":1195,"tags":6,"updated":6,"video":6,"__hash__":1196},"posts\u002Fposts\u002Fhow-to-use-layouts-and-pages-in-nuxt.md","How to use layouts and pages in Nuxt",null,"garywoodfine",{"type":9,"value":10,"toc":1163},"minimark",[11,21,24,27,30,35,38,43,70,73,187,207,215,219,248,251,255,261,264,288,291,421,424,539,552,561,565,601,609,613,616,620,662,665,672,676,682,699,710,831,837,926,945,950,961,1022,1026,1035,1039,1085,1093,1102,1106,1117,1139,1143,1149,1153,1157,1160],[12,13,14,15,20],"p",{},"In ",[16,17,19],"a",{"href":18},"getting-started-with-nuxt","how to get started with nuxt"," we started down the road of getting familiar with Nuxt.  We\nalso started down the road of generating a simple project in Nuxt.",[12,22,23],{},"Nuxt is a powerful framework built on top of Vue that simplifies the development of universal (server-side rendered)\nand single-page Vue applications. One of the key features that make Nuxt highly effective is its intuitive\nfile-based routing system, which includes the concepts of Layouts and Pages.",[12,25,26],{},"Pages and Layouts in Nuxt are key components that contribute to the framework's powerful and structured approach to\nbuilding applications. Pages are Vue components that define the routes of your application, offering a straightforward\nway to set up different views and handle routing dynamically. Layouts, on the other hand, act as templates for your\npages, enabling you to create consistent structures and designs across different parts of your application.",[12,28,29],{},"By using layouts, you can define common elements such as headers, footers, and sidebars that multiple pages can\nshare, enhancing code reusability and maintainability. Together, Pages and Layouts streamline the development process,\nmaking it effortless to create organised and cohesive web applications.",[31,32,34],"h3",{"id":33},"what-are-layouts-in-nuxt","What are Layouts in Nuxt",[12,36,37],{},"In Nuxt, layouts serve as a foundational template mechanism that allows developers to define a consistent structural\nframework for pages across their application. Layouts facilitate the centralised management of recurring components\nand design elements, such as headers, footers, navigation bars, and sidebars, ensuring that the look and feel across\ndifferent pages remain unified and coherent.",[39,40,42],"h4",{"id":41},"key-features-of-layouts-in-nuxt","Key features of layouts in Nuxt",[44,45,46,53,60],"ol",{},[47,48,49],"li",{},[50,51,52],"code",{},"Default Layout:",[47,54,55,59],{},[56,57,58],"strong",{},"Custom Layouts:"," You can create custom layouts for different sections or types of content in your application. For\nexample, you might have an admin section with its own unique layout (layouts\u002Fadmin.vue), separate from the main\nuser-facing layout.",[47,61,62,65,66,69],{},[56,63,64],{},"Defining Layouts:"," Layouts are defined in the layouts directory at the root of your Nuxt project. Each\nlayout is a Vue component that includes the ",[50,67,68],{},"\u003Cslot \u002F>"," component, which serves as a placeholder for the page content.",[12,71,72],{},"Here’s an example of a simple layout:",[74,75,82],"pre",{"className":76,"code":77,"filename":78,"language":79,"meta":80,"style":81},"language-html shiki shiki-themes material-theme-lighter monokai monokai monokai","   \u003Ctemplate>\n     \u003Cdiv>\n       \u003Cheader>My App Header\u003C\u002Fheader>\n       \u003Cslot \u002F>\n       \u003Cfooter>My App Footer\u003C\u002Ffooter>\n     \u003C\u002Fdiv>\n   \u003C\u002Ftemplate>\n","layouts\u002Fdefault.vue","html","meta-info=val","",[50,83,84,100,111,134,148,167,177],{"__ignoreMap":81},[85,86,89,93,97],"span",{"class":87,"line":88},"line",1,[85,90,92],{"class":91},"s8B1f","   \u003C",[85,94,96],{"class":95},"sMgo4","template",[85,98,99],{"class":91},">\n",[85,101,103,106,109],{"class":87,"line":102},2,[85,104,105],{"class":91},"     \u003C",[85,107,108],{"class":95},"div",[85,110,99],{"class":91},[85,112,114,117,120,123,127,130,132],{"class":87,"line":113},3,[85,115,116],{"class":91},"       \u003C",[85,118,119],{"class":95},"header",[85,121,122],{"class":91},">",[85,124,126],{"class":125},"sRVMn","My App Header",[85,128,129],{"class":91},"\u003C\u002F",[85,131,119],{"class":95},[85,133,99],{"class":91},[85,135,137,139,142,146],{"class":87,"line":136},4,[85,138,116],{"class":91},[85,140,141],{"class":95},"slot",[85,143,145],{"class":144},"szel-"," \u002F",[85,147,99],{"class":91},[85,149,151,153,156,158,161,163,165],{"class":87,"line":150},5,[85,152,116],{"class":91},[85,154,155],{"class":95},"footer",[85,157,122],{"class":91},[85,159,160],{"class":125},"My App Footer",[85,162,129],{"class":91},[85,164,155],{"class":95},[85,166,99],{"class":91},[85,168,170,173,175],{"class":87,"line":169},6,[85,171,172],{"class":91},"     \u003C\u002F",[85,174,108],{"class":95},[85,176,99],{"class":91},[85,178,180,183,185],{"class":87,"line":179},7,[85,181,182],{"class":91},"   \u003C\u002F",[85,184,96],{"class":95},[85,186,99],{"class":91},[12,188,189,190,192,193,195,196,199,200,203,204,206],{},"The ",[50,191,68],{}," component is important when it comes to building Nuxt Layouts. ",[50,194,68],{}," identifies as the placeholder\nfor the code we put in. On every page we create, that makes use of this layout, will have the ",[56,197,198],{},"Header"," at top and the ",[56,201,202],{},"Footer","\nat the bottom. In the middle, where the ",[50,205,68],{}," is present, is where you will view the layout of that particular\npage you’re on.",[44,208,209],{"start":136},[47,210,211,214],{},[56,212,213],{},"Applying Layouts to Pages:"," You can specify which layout to use for a particular page by setting the layout\nproperty in the page component. If no layout is specified, the default layout is applied.",[31,216,218],{"id":217},"benefits-of-using-layouts-in-nuxt","Benefits of using layouts in Nuxt",[220,221,222,228,234,240,246],"ul",{},[47,223,224,227],{},[56,225,226],{},"Consistency:"," Layouts ensure that UI elements common to multiple pages are consistent throughout the application.",[47,229,230,233],{},[56,231,232],{},"Reusability:"," By defining common elements in layouts, you avoid repetition and reduce the effort needed to manage\nthese elements across different pages.",[47,235,236,239],{},[56,237,238],{},"Maintainability:"," Centralising shared components within layouts simplifies updates and maintenance. Modifications\nmade in a layout will automatically propagate to all pages using that layout.",[47,241,242,245],{},[56,243,244],{},"Separation of Concerns:"," Layouts facilitate a clear separation between the structural design and individual page\ncontent, enhancing readability and organisation of the codebase.",[47,247],{},[12,249,250],{},"By using layouts effectively, you can build maintainable, and visually unified applications with Nuxt,\nsignificantly streamlining the development process and improving the overall user experience.",[31,252,254],{"id":253},"how-to-create-a-new-layout","How to create a new layout",[12,256,14,257,260],{},[16,258,259],{"href":18},"Getting started with Nuxt"," we introduced the Nuxi command-line interface (CLI) tool\nfor Nuxt.js that simplifies the process of creating, developing, and deploying Nuxt.js applications by providing a\nsuite of commands to streamline various project tasks and configurations. This is what we will use to generate our\ninitial layout.",[12,262,263],{},"To generate your layout, you can use the following command in the root of your project directory:",[74,265,270],{"className":266,"code":267,"filename":268,"language":269,"meta":80,"style":81},"language-shell shiki shiki-themes material-theme-lighter monokai monokai monokai","nuxi add layout default\n","Terminal","shell",[50,271,272],{"__ignoreMap":81},[85,273,274,278,282,285],{"class":87,"line":88},[85,275,277],{"class":276},"sC-bC","nuxi",[85,279,281],{"class":280},"sKdu0"," add",[85,283,284],{"class":280}," layout",[85,286,287],{"class":280}," default\n",[12,289,290],{},"Once the command has completed, you will notice a new layouts directory and new vue component has been created in your\nproject directory:",[74,292,294],{"className":266,"code":293,"filename":268,"language":269,"meta":80,"style":81},".\n├── app.vue\n├── layouts\n│ └── default.vue\n├── nuxt.config.ts\n├── package.json\n├── public\n│ ├── favicon.ico\n│ └── robots.txt\n├── README.md\n├── server\n│  └── tsconfig.json\n├── tailwind.config.ts\n├── tsconfig.json\n└── yarn.lock\n",[50,295,296,302,310,317,328,335,342,349,360,370,378,386,397,405,412],{"__ignoreMap":81},[85,297,298],{"class":87,"line":88},[85,299,301],{"class":300},"sSYhn",".\n",[85,303,304,307],{"class":87,"line":102},[85,305,306],{"class":276},"├──",[85,308,309],{"class":280}," app.vue\n",[85,311,312,314],{"class":87,"line":113},[85,313,306],{"class":276},[85,315,316],{"class":280}," layouts\n",[85,318,319,322,325],{"class":87,"line":136},[85,320,321],{"class":276},"│",[85,323,324],{"class":280}," └──",[85,326,327],{"class":280}," default.vue\n",[85,329,330,332],{"class":87,"line":150},[85,331,306],{"class":276},[85,333,334],{"class":280}," nuxt.config.ts\n",[85,336,337,339],{"class":87,"line":169},[85,338,306],{"class":276},[85,340,341],{"class":280}," package.json\n",[85,343,344,346],{"class":87,"line":179},[85,345,306],{"class":276},[85,347,348],{"class":280}," public\n",[85,350,352,354,357],{"class":87,"line":351},8,[85,353,321],{"class":276},[85,355,356],{"class":280}," ├──",[85,358,359],{"class":280}," favicon.ico\n",[85,361,363,365,367],{"class":87,"line":362},9,[85,364,321],{"class":276},[85,366,324],{"class":280},[85,368,369],{"class":280}," robots.txt\n",[85,371,373,375],{"class":87,"line":372},10,[85,374,306],{"class":276},[85,376,377],{"class":280}," README.md\n",[85,379,381,383],{"class":87,"line":380},11,[85,382,306],{"class":276},[85,384,385],{"class":280}," server\n",[85,387,389,391,394],{"class":87,"line":388},12,[85,390,321],{"class":276},[85,392,393],{"class":280},"  └──",[85,395,396],{"class":280}," tsconfig.json\n",[85,398,400,402],{"class":87,"line":399},13,[85,401,306],{"class":276},[85,403,404],{"class":280}," tailwind.config.ts\n",[85,406,408,410],{"class":87,"line":407},14,[85,409,306],{"class":276},[85,411,396],{"class":280},[85,413,415,418],{"class":87,"line":414},15,[85,416,417],{"class":276},"└──",[85,419,420],{"class":280}," yarn.lock\n",[12,422,423],{},"If you inspect the new vue component at this stage it will be really simple, containing only the basics of what you\nneed for a view.",[74,425,427],{"className":76,"code":426,"filename":268,"language":79,"meta":80,"style":81},"\u003Cscript setup lang=\"ts\">\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    Layout: default\n    \u003Cslot \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\u003C\u002Fstyle>\n\n",[50,428,429,463,469,477,486,491,502,511,519,523],{"__ignoreMap":81},[85,430,431,434,437,441,444,447,451,454,456,459,461],{"class":87,"line":88},[85,432,433],{"class":91},"\u003C",[85,435,436],{"class":95},"script",[85,438,440],{"class":439},"sE8jp"," setup",[85,442,443],{"class":439}," lang",[85,445,446],{"class":91},"=",[85,448,450],{"class":449},"sxJtY","\"",[85,452,453],{"class":280},"ts",[85,455,450],{"class":449},[85,457,458],{"class":91},">\u003C\u002F",[85,460,436],{"class":95},[85,462,99],{"class":91},[85,464,465],{"class":87,"line":102},[85,466,468],{"emptyLinePlaceholder":467},true,"\n",[85,470,471,473,475],{"class":87,"line":113},[85,472,433],{"class":91},[85,474,96],{"class":95},[85,476,99],{"class":91},[85,478,479,482,484],{"class":87,"line":136},[85,480,481],{"class":91},"  \u003C",[85,483,108],{"class":95},[85,485,99],{"class":91},[85,487,488],{"class":87,"line":150},[85,489,490],{"class":125},"    Layout: default\n",[85,492,493,496,498,500],{"class":87,"line":169},[85,494,495],{"class":91},"    \u003C",[85,497,141],{"class":95},[85,499,145],{"class":144},[85,501,99],{"class":91},[85,503,504,507,509],{"class":87,"line":179},[85,505,506],{"class":91},"  \u003C\u002F",[85,508,108],{"class":95},[85,510,99],{"class":91},[85,512,513,515,517],{"class":87,"line":351},[85,514,129],{"class":91},[85,516,96],{"class":95},[85,518,99],{"class":91},[85,520,521],{"class":87,"line":362},[85,522,468],{"emptyLinePlaceholder":467},[85,524,525,527,530,533,535,537],{"class":87,"line":372},[85,526,433],{"class":91},[85,528,529],{"class":95},"style",[85,531,532],{"class":439}," scoped",[85,534,458],{"class":91},[85,536,529],{"class":95},[85,538,99],{"class":91},[12,540,541,542,544,545,548,549],{},"The key concept to understand within this file, is as we have mentioned earlier in this post is the ",[50,543,68],{}," component.\nThe ",[50,546,547],{},"\u003Cslot\u002F>"," he ",[141,550,551],{}," component is used within Vue.js components to create flexible and reusable layouts by allowing\nparent components to pass and inject custom content into predefined placeholders within child components.",[12,553,554,555,557,558,560],{},"We'll delve deeper into the ",[50,556,68],{}," as we go through this article but for now, we'll keep it simple, but for now it\nis essential to understand the benefits of the ",[50,559,68],{}," component.",[39,562,564],{"id":563},"benefits-of-slot-component","Benefits of slot component",[220,566,567,572,578,584,589,595],{},[47,568,569,571],{},[56,570,232],{}," Enables the creation of highly reusable and customisable components by allowing different content\nto be passed into predefined slots.",[47,573,574,577],{},[56,575,576],{},"Flexibility:"," Allows for flexible component layouts where the parent component determines how the child component\nis populated, promoting a clean separation of concerns.",[47,579,580,583],{},[56,581,582],{},"Scalability:"," Supports multiple named slots to facilitate complex and scalable component structures, accommodating\nvarious use cases within the same component.",[47,585,586,588],{},[56,587,238],{}," Simplifies component maintenance and improves code readability by avoiding hard-coding of\ncontent, making it easier to update and manage.",[47,590,591,594],{},[56,592,593],{},"Dynamic Content:"," Provides a way to inject dynamic content into components, enhancing interactivity and\nresponsiveness in applications.",[47,596,597,600],{},[56,598,599],{},"Consistent Styles:"," Promotes consistent styling across different parts of the application by centralising the\nlayout in reusable components while varying the content as needed.",[602,603,604],"top-tip",{},[96,605,606],{"v-slot:message":81},[12,607,608],{},"using layouts and pages together, developers can create organised and cohesive web applications with ease.",[31,610,612],{"id":611},"what-are-pages-in-nuxt","What are Pages in nuxt",[12,614,615],{},"In Nuxt, \"Pages\" refer to Vue single file components that define the various views of your application. Each page\ncomponent typically corresponds to a specific route in your application, enabling a URL-based navigation system.",[39,617,619],{"id":618},"benefits-of-pages","Benefits of pages",[220,621,622,632,638,644,650,656],{},[47,623,624,627,628,631],{},[56,625,626],{},"Automatic Routing:"," Nuxt automatically generates the routing configuration based on the file structure within the\npages directory. Each ",[50,629,630],{},".vue"," file corresponds to a unique route.",[47,633,634,637],{},[56,635,636],{},"File-Based Routing:"," The routes are created based on the folder and file names within the pages directory, which\nmakes defining routes simple and intuitive.",[47,639,640,643],{},[56,641,642],{},"Dynamic Routes:"," By using dynamic file names prefixed with an underscore (e.g., _id.vue), developers can create\ndynamic routes that accept parameters.",[47,645,646,649],{},[56,647,648],{},"Nested Routes:"," Nested directories within the pages directory create nested routes, facilitating the creation of\ncomplex, hierarchical route structures.",[47,651,652,655],{},[56,653,654],{},"Layouts and Middleware:"," Pages can use layouts to share common structure and design across multiple views,\nand middleware to execute code before rendering the page.",[47,657,658,661],{},[56,659,660],{},"Static and Dynamic Rendering:"," Pages in Nuxt.js can be statically generated or server-side rendered, providing\nflexibility in how content is delivered.",[12,663,664],{},"pages offer a powerful and easy-to-use method for managing the different views and routes in a web application,\nenhancing both development efficiency and user navigation experience.",[602,666,667],{},[96,668,669],{"v-slot:message":81},[12,670,671],{},"Pages in Nuxt are Vue single file components that define various views of the application, with automatic routing based on the file structure within the pages directory.",[31,673,675],{"id":674},"how-to-create-pages-in-nuxt","How to create pages in Nuxt",[12,677,678,679,681],{},"We can create pages in Nuxt in similar fashion as we did with Layouts, by using ",[50,680,277],{},". So we can use the following\ncommand to generate our first page.",[74,683,685],{"className":266,"code":684,"filename":268,"language":269,"meta":80,"style":81},"nuxi add page index\n",[50,686,687],{"__ignoreMap":81},[85,688,689,691,693,696],{"class":87,"line":88},[85,690,277],{"class":276},[85,692,281],{"class":280},[85,694,695],{"class":280}," page",[85,697,698],{"class":280}," index\n",[12,700,701,702,705,706,709],{},"After the command complete you will notice a ",[50,703,704],{},"pages"," directory with a new ",[50,707,708],{},"index"," vue component has been created.",[74,711,713],{"className":266,"code":712,"filename":268,"language":269,"meta":80,"style":81},".\n├── app.vue\n├── layouts\n│   └── default.vue\n├── nuxt.config.ts\n├── package.json\n├── pages\n│   └── index.vue\n├── public\n│  ├── favicon.ico\n│  └── robots.txt\n├── README.md\n├── server\n│   └── tsconfig.json\n├── tailwind.config.ts\n├── tsconfig.json\n└── yarn.lock\n",[50,714,715,719,725,731,740,746,752,759,768,774,783,791,797,803,811,817,824],{"__ignoreMap":81},[85,716,717],{"class":87,"line":88},[85,718,301],{"class":300},[85,720,721,723],{"class":87,"line":102},[85,722,306],{"class":276},[85,724,309],{"class":280},[85,726,727,729],{"class":87,"line":113},[85,728,306],{"class":276},[85,730,316],{"class":280},[85,732,733,735,738],{"class":87,"line":136},[85,734,321],{"class":276},[85,736,737],{"class":280},"   └──",[85,739,327],{"class":280},[85,741,742,744],{"class":87,"line":150},[85,743,306],{"class":276},[85,745,334],{"class":280},[85,747,748,750],{"class":87,"line":169},[85,749,306],{"class":276},[85,751,341],{"class":280},[85,753,754,756],{"class":87,"line":179},[85,755,306],{"class":276},[85,757,758],{"class":280}," pages\n",[85,760,761,763,765],{"class":87,"line":351},[85,762,321],{"class":276},[85,764,737],{"class":280},[85,766,767],{"class":280}," index.vue\n",[85,769,770,772],{"class":87,"line":362},[85,771,306],{"class":276},[85,773,348],{"class":280},[85,775,776,778,781],{"class":87,"line":372},[85,777,321],{"class":276},[85,779,780],{"class":280},"  ├──",[85,782,359],{"class":280},[85,784,785,787,789],{"class":87,"line":380},[85,786,321],{"class":276},[85,788,393],{"class":280},[85,790,369],{"class":280},[85,792,793,795],{"class":87,"line":388},[85,794,306],{"class":276},[85,796,377],{"class":280},[85,798,799,801],{"class":87,"line":399},[85,800,306],{"class":276},[85,802,385],{"class":280},[85,804,805,807,809],{"class":87,"line":407},[85,806,321],{"class":276},[85,808,737],{"class":280},[85,810,396],{"class":280},[85,812,813,815],{"class":87,"line":414},[85,814,306],{"class":276},[85,816,404],{"class":280},[85,818,820,822],{"class":87,"line":819},16,[85,821,306],{"class":276},[85,823,396],{"class":280},[85,825,827,829],{"class":87,"line":826},17,[85,828,417],{"class":276},[85,830,420],{"class":280},[12,832,833,834,836],{},"If we take a look at the ",[50,835,708],{}," component we will see that at this stage the contents are relatively simple and it\nis ready for us to start coding",[74,838,841],{"className":76,"code":839,"filename":840,"language":79,"meta":80,"style":81},"\u003Cscript setup lang=\"ts\">\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    Page: index\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\u003C\u002Fstyle>\n\n","index.vue",[50,842,843,867,871,879,887,892,900,908,912],{"__ignoreMap":81},[85,844,845,847,849,851,853,855,857,859,861,863,865],{"class":87,"line":88},[85,846,433],{"class":91},[85,848,436],{"class":95},[85,850,440],{"class":439},[85,852,443],{"class":439},[85,854,446],{"class":91},[85,856,450],{"class":449},[85,858,453],{"class":280},[85,860,450],{"class":449},[85,862,458],{"class":91},[85,864,436],{"class":95},[85,866,99],{"class":91},[85,868,869],{"class":87,"line":102},[85,870,468],{"emptyLinePlaceholder":467},[85,872,873,875,877],{"class":87,"line":113},[85,874,433],{"class":91},[85,876,96],{"class":95},[85,878,99],{"class":91},[85,880,881,883,885],{"class":87,"line":136},[85,882,481],{"class":91},[85,884,108],{"class":95},[85,886,99],{"class":91},[85,888,889],{"class":87,"line":150},[85,890,891],{"class":125},"    Page: index\n",[85,893,894,896,898],{"class":87,"line":169},[85,895,506],{"class":91},[85,897,108],{"class":95},[85,899,99],{"class":91},[85,901,902,904,906],{"class":87,"line":179},[85,903,129],{"class":91},[85,905,96],{"class":95},[85,907,99],{"class":91},[85,909,910],{"class":87,"line":351},[85,911,468],{"emptyLinePlaceholder":467},[85,913,914,916,918,920,922,924],{"class":87,"line":362},[85,915,433],{"class":91},[85,917,529],{"class":95},[85,919,532],{"class":439},[85,921,458],{"class":91},[85,923,529],{"class":95},[85,925,99],{"class":91},[12,927,928,929,931,932,936,937,940,941,944],{},"If you're following along, from the ",[16,930,259],{"href":18}," or the\n",[16,933,935],{"href":934},"how-to-add-tailwindcss-to-nuxt","How to add tailwindcss to nuxt","  guides, you may already have the really\nsimple ",[50,938,939],{},"Hello World"," project created and are using that to follow along.  If so, if you try run the application now\nby using ",[50,942,943],{},"yarn dev",", or whatever your preferred package manager is, you will see an error message similar to the below.",[946,947],"content-image",{"image":948,"title":949},"blog\u002Fhello-world-layouts-error_ubvtw6","Nuxt Layout error",[12,951,952,953,956,957,960],{},"This happens because Nuxt has detected that you have a layout or Pages folder, but you are missing one vital bit of",[954,955],"br",{},"\nconfiguration. Lets go ahead and fix this, by navigating to your ",[50,958,959],{},"app.vue"," and add the following code to the file.",[74,962,964],{"className":76,"code":963,"filename":959,"language":79,"meta":80,"style":81},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CNuxtRouteAnnouncer\u002F>\n    \u003Cnuxt-page>\u003C\u002Fnuxt-page>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[50,965,966,974,982,993,1006,1014],{"__ignoreMap":81},[85,967,968,970,972],{"class":87,"line":88},[85,969,433],{"class":91},[85,971,96],{"class":95},[85,973,99],{"class":91},[85,975,976,978,980],{"class":87,"line":102},[85,977,481],{"class":91},[85,979,108],{"class":95},[85,981,99],{"class":91},[85,983,984,986,990],{"class":87,"line":113},[85,985,495],{"class":91},[85,987,989],{"class":988},"sZE68","NuxtRouteAnnouncer",[85,991,992],{"class":91},"\u002F>\n",[85,994,995,997,1000,1002,1004],{"class":87,"line":136},[85,996,495],{"class":91},[85,998,999],{"class":95},"nuxt-page",[85,1001,458],{"class":91},[85,1003,999],{"class":95},[85,1005,99],{"class":91},[85,1007,1008,1010,1012],{"class":87,"line":150},[85,1009,506],{"class":91},[85,1011,108],{"class":95},[85,1013,99],{"class":91},[85,1015,1016,1018,1020],{"class":87,"line":169},[85,1017,129],{"class":91},[85,1019,96],{"class":95},[85,1021,99],{"class":91},[31,1023,1025],{"id":1024},"what-is-the-nuxt-page-component","What is the Nuxt Page component",[12,1027,189,1028,1031,1032,1034],{},[50,1029,1030],{},"\u003Cnuxt-page>"," component in Nuxt acts as a placeholder for rendering the content of the current route. It is",[954,1033],{},"\nprimarily used within layout components to dynamically display page components based on the active route.",[39,1036,1038],{"id":1037},"benefits-of-nuxt-page-component","Benefits of Nuxt Page component",[44,1040,1041,1053,1062,1074],{},[47,1042,1043,1046,1047,1049,1050,1052],{},[56,1044,1045],{},"Dynamic Content Rendering:"," The ",[50,1048,1030],{}," component dynamically renders the page component that matches the",[954,1051],{},"\ncurrent route, ensuring that the correct content is displayed to the user.",[47,1054,1055,1058,1059,1061],{},[56,1056,1057],{},"Layout Integration:"," It is typically used within layout components to provide a consistent structure",[954,1060],{},"\n(such as headers, footers, and sidebars) across different pages while switching the main content area.",[47,1063,1064,1067,1068],{},[56,1065,1066],{},"Simplified Routing:"," By centralising the routing logic, ",[999,1069,1070,1071,1073],{}," simplifies the process of swapping out",[954,1072],{},"\ncontent when routes change without the need for manual component management or re-rendering.",[47,1075,1076,1079,1080,1082,1084],{},[56,1077,1078],{},"SEO Friendly:"," Since Nuxt supports server-side rendering (SSR) and static site generation (SSG), the use of",[954,1081],{},[50,1083,1030],{}," plays a critical role in ensuring that page content is correctly rendered and indexed by search engines.",[12,1086,1087,1088,1090,1092],{},"We now need to configure our Page component to use our Layout component. To do this, navigate to your ",[50,1089,840],{},[954,1091],{},"\ncomponent.",[12,1094,1095,1096,1098,1099,560],{},"There are a couple of ways to configure your pages to use the layout, for the purpose of this article and to keep things",[954,1097],{},"\nsimple for the moment we will make use of the ",[50,1100,1101],{},"\u003Cnuxt-layout>",[31,1103,1105],{"id":1104},"what-is-the-nuxt-layout-component","What is the Nuxt Layout component",[12,1107,189,1108,1110,1111,1113,1114,1116],{},[50,1109,1101],{}," component in Nuxt is used to specify different layout structures for your pages. Layouts in Nuxt",[954,1112],{},"\nhelp maintain a consistent look and feel across multiple pages by sharing common elements such as headers, footers,",[954,1115],{},"\nand sidebars.",[220,1118,1119,1131],{},[47,1120,1121,1124,1125,1127,1128,1130],{},[56,1122,1123],{},"Dynamic Layout Switching:"," Using the ",[50,1126,1101],{}," component, you can dynamically switch layouts based on",[954,1129],{},"\nspecific conditions or route metadata, allowing different pages to have different layouts",[47,1132,1133,1135,1136,1138],{},[56,1134,52],{}," By default, if no specific layout is defined for a page, Nuxt uses the default.vue layout.",[954,1137],{},"\nYou can create additional layouts in the layouts directory and assign them to specific pages.",[31,1140,1142],{"id":1141},"run-the-application","Run the application",[12,1144,1145,1146,1148],{},"Now if we run our application, we should see the amazing result, similar to the below, which will prove nothing more than",[954,1147],{},"\nour Page and Layouts are working together.  As underwhelming as the results appear, they prove that nuxt has simplified the\nprocess of being able to separate the development of layouts and pages",[946,1150],{"image":1151,"title":1152},"blog\u002Fnuxt-page-layout_hsq3ud","Nuxt Layouts",[31,1154,1156],{"id":1155},"conclusion","Conclusion",[12,1158,1159],{},"We've covered quite a lot of ground in this post, and probably in a lot more detail than absolutely necessary, but\nwe've learned how quite a number of Nuxt features work together to deliver most of the things you'll need when building\napps, enabling you to focus on the task of just building your app.",[529,1161,1162],{},"html pre.shiki code .s8B1f, html code.shiki .s8B1f{--shiki-light:#39ADB5;--shiki-default:#F8F8F2;--shiki-dark:#F8F8F2;--shiki-sepia:#F8F8F2}html pre.shiki code .sMgo4, html code.shiki .sMgo4{--shiki-light:#E53935;--shiki-default:#F92672;--shiki-dark:#F92672;--shiki-sepia:#F92672}html pre.shiki code .sRVMn, html code.shiki .sRVMn{--shiki-light:#90A4AE;--shiki-default:#F8F8F2;--shiki-dark:#F8F8F2;--shiki-sepia:#F8F8F2}html pre.shiki code .szel-, html code.shiki .szel-{--shiki-light:#39ADB5;--shiki-default:#F44747;--shiki-dark:#F44747;--shiki-sepia:#F44747}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 .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html pre.shiki code .sC-bC, html code.shiki .sC-bC{--shiki-light:#E2931D;--shiki-default:#A6E22E;--shiki-dark:#A6E22E;--shiki-sepia:#A6E22E}html pre.shiki code .sKdu0, html code.shiki .sKdu0{--shiki-light:#91B859;--shiki-default:#E6DB74;--shiki-dark:#E6DB74;--shiki-sepia:#E6DB74}html pre.shiki code .sSYhn, html code.shiki .sSYhn{--shiki-light:#6182B8;--shiki-default:#66D9EF;--shiki-dark:#66D9EF;--shiki-sepia:#66D9EF}html pre.shiki code .sE8jp, html code.shiki .sE8jp{--shiki-light:#9C3EDA;--shiki-default:#A6E22E;--shiki-dark:#A6E22E;--shiki-sepia:#A6E22E}html pre.shiki code .sxJtY, html code.shiki .sxJtY{--shiki-light:#39ADB5;--shiki-default:#E6DB74;--shiki-dark:#E6DB74;--shiki-sepia:#E6DB74}html pre.shiki code .sZE68, html code.shiki .sZE68{--shiki-light:#E53935;--shiki-default:#F44747;--shiki-dark:#F44747;--shiki-sepia:#F44747}",{"title":81,"searchDepth":102,"depth":102,"links":1164},[1165,1166,1167,1168,1169,1170,1171,1172,1173],{"id":33,"depth":113,"text":34},{"id":217,"depth":113,"text":218},{"id":253,"depth":113,"text":254},{"id":611,"depth":113,"text":612},{"id":674,"depth":113,"text":675},{"id":1024,"depth":113,"text":1025},{"id":1104,"depth":113,"text":1105},{"id":1141,"depth":113,"text":1142},{"id":1155,"depth":113,"text":1156},"development","2024-10-08","Explore how to use layouts and pages in your Nuxt Application","md",{"url":1179,"title":5},"v1690313878\u002Fnuxt-header_tbc9cp",{"publishDateTime":1181},"2024-10-08:17:30","\u002Fposts\u002Fhow-to-use-layouts-and-pages-in-nuxt",{"title":5,"description":1176},{"loc":1182,"lastmod":1175,"changefreq":1185,"priority":1186,"images":1187},"monthly",0.8,[1188,1190,1192],{"loc":1189},"https:\u002F\u002Fres.cloudinary.com\u002Fthreenine-co-uk\u002Fimage\u002Fupload\u002Ff_jpg,w_1200\u002Fv1690313878\u002Fnuxt-header_tbc9cp",{"loc":1191},"https:\u002F\u002Fres.cloudinary.com\u002Fthreenine-co-uk\u002Fimage\u002Fupload\u002Ff_jpg,w_1200\u002Fblog\u002Fhello-world-layouts-error_ubvtw6",{"loc":1193},"https:\u002F\u002Fres.cloudinary.com\u002Fthreenine-co-uk\u002Fimage\u002Fupload\u002Ff_jpg,w_1200\u002Fblog\u002Fnuxt-page-layout_hsq3ud","posts\u002Fhow-to-use-layouts-and-pages-in-nuxt","Layouts are templates for pages, defining consistent structures and designs. They can include common elements such as headers, footers, and sidebars, and can be customised for different sections or types of content.","_-Cq8l1swtNwNEM_va_56c2rg6IJsXk9O5KaeyW6uEM",{"name":1198,"to":1199,"avatar":1200,"sameAs":1201},"Gary Woodfine","https:\u002F\u002Fgarywoodfine.com","garywoodfine_tlccjw",[1202,1203,1204,1205],"https:\u002F\u002Fgithub.com\u002Fgarywoodfine","https:\u002F\u002Fwww.youtube.com\u002F@Threenineio","https:\u002F\u002Fnjump.me\u002Fnpub1a3jz7w9laar2k77dkkh2rhxunr9zpja5emrl5yrxetamt29swqyqmmt32y","nostr:npub1a3jz7w9laar2k77dkkh2rhxunr9zpja5emrl5yrxetamt29swqyqmmt32y",[1207,1212],{"title":1208,"path":1209,"stem":1210,"description":1211,"children":-1},"How to store Terraform state in DigitalOcean Spaces","\u002Fposts\u002Fhow-to-store-terraform_state-in-digital-ocean-space","posts\u002Fhow-to-store-terraform_state-in-digital-ocean-space","using DigitalOcean Spaces as a Terraform state Backend",{"title":1213,"path":1214,"stem":1215,"description":1216,"children":-1},"How to use Terraform with DigitalOcean","\u002Fposts\u002Fhow-to-use-terraform-with-digitalocean","posts\u002Fhow-to-use-terraform-with-digitalocean","A tutorial on how to configure your local environment with Terraform and DigitalOcean CLI",{"id":1218,"extension":1219,"items":1220,"meta":1262,"stem":1263,"__hash__":1264},"navigation\u002Fnavigation.yaml","yaml",[1221,1234,1247,1255],{"label":1222,"children":1223},"products",[1224,1229],{"label":1225,"icon":1226,"description":1227,"to":1228},"Diogel","material-symbols:preview","Keep your Nostr identity in your hands, in your browser, on your phone or on your own server.","\u002Fproducts\u002Fdiogel",{"label":1230,"icon":1231,"description":1232,"to":1233},"Nostrfi","i-lucide-radio-tower","Nostr relay, storage and backend-service infrastructure for builders and operators.","\u002Fproducts\u002Fnostrfi",{"label":1235,"children":1236},"services",[1237,1242],{"label":1238,"description":1239,"icon":1240,"to":1241},"Nostr product development","Focused engineering support for teams building Nostr-native products, tools and protocol-aware user experiences.","game-icons:ostrich","\u002Fservices\u002Fnostr-product-development",{"label":1243,"description":1244,"icon":1245,"to":1246},"Bitcoin product development","Engineering for Bitcoin payments, wallet-connected flows and products where users hold their own keys.","bx:bxl-bitcoin","\u002Fservices\u002Fbitcoin-product-development",{"label":1248,"children":1249},"company",[1250],{"label":1251,"icon":1252,"description":1253,"to":1254},"About","i-lucide-file-text","What we believe, what we build and how we work.","\u002Fcompany\u002Fabout",{"label":1256,"children":1257},"resources",[1258],{"label":1259,"icon":1252,"description":1260,"to":1261},"Blog","Practical Bitcoin, Nostr and product engineering guides.","https:\u002F\u002Fthreenine.blog",{},"navigation","n-Xc9COCwoCHJiMCeBNLauHtuhxcGol-wu9S2og3Rqs",{"id":1266,"title":1198,"avatar":1200,"body":1267,"description":1271,"extension":1177,"meta":1286,"name":1198,"navigation":467,"path":1287,"role":1288,"sameAs":1289,"seo":1290,"stem":1291,"summary":1292,"to":1199,"username":7,"__hash__":1293},"authors\u002Fauthors\u002FGary Woodfine.md",{"type":9,"value":1268,"toc":1284},[1269,1272,1275,1278,1281],[12,1270,1271],{},"Polyglot software engineer with extensive experience in software engineering, with a passion to build great scalable software to solve complex business problems. A track record in developing high-performance backend systems, optimizing architecture, and ensuring continuous availability of critical APIs.",[12,1273,1274],{},"I'm an independent software developer, vendor, architect, consultant, blogger, Bitcoin & Nostr Enthusiast. I've provided software development expertise and helped augment software development skills and teams for a number of startups, product companies, corporate IT shops, and consulting firms.",[12,1276,1277],{},"I started out in the software world back in 1995, building websites with HoTMetaL Pro & ASP and moved on to building web apps with .NET when it released in Beta in 2001, since then, I've shipped systems in just about every industry.",[12,1279,1280],{},"Along my journey, I have also shipped various platforms & products in a number of other programming languages or software development frameworks that have had their moments in the sun, but somehow I have always made way back to C# & .Net.",[12,1282,1283],{},"Over the years, I've strived to improve how I and my teams deliver value to the clients, customers, and end-users. That has led me down the path of exploring Agile, Domain-Driven Design, REST, messaging, distributed systems, and anything else I thought could help.",{"title":81,"searchDepth":102,"depth":102,"links":1285},[],{},"\u002Fauthors\u002Fgary-woodfine","Managing Director",[1202,1203,1204,1205],{"title":1198,"description":1271},"authors\u002FGary Woodfine","independent software developer, vendor, architect, consultant, blogger, Bitcoin & Nostr Enthusiast. I've provided software development expertise and helped augment software development skills and teams for a number of startups, product companies, corporate IT shops, and consulting firms.","30ZWJ-6T2g8S0kLLgUhZWA7_QFUOpa5CElif7tAhsLo",{"title":1198,"name":1198,"role":1288,"summary":1292,"avatar":1200,"username":7,"to":1199},[1296,1308,1319,1326,1333,1340,1351,1360,1366,1373,1379,1386,1396,1405,1411,1417,1422,1427,1436,1442,1444,1448,1452,1455,1458,1463,1468,1473,1479,1484,1491,1500,1506,1511,1519,1524,1530,1535,1540,1544,1550,1555,1559],{"path":1297,"title":1298,"date":1299,"tags":1300,"category":1301,"featureImage":1306},"\u002Fposts\u002Fwhat-is-a-nostr-client","What is a Nostr client?","2026-10-26",[1301,1302,1303,1304,1305],"nostr","nostr-client","privacy","keys","getting-started",{"url":1307,"title":1298},"v1690313893\u002Fnostr-logo_hwrql1",{"path":1309,"title":1310,"date":1311,"tags":1312,"category":1301,"featureImage":1317},"\u002Fposts\u002Fhow-to-choose-nostr-relays","How to Choose Nostr Relays","2026-04-11",[1301,1313,1303,1314,1315,1316],"relay","security","nostr-relays","censorship-resistance",{"url":1307,"title":1318},"How to choose nostr relays",{"path":1320,"title":1321,"date":1311,"tags":1322,"category":1301,"featureImage":1325},"\u002Fposts\u002Fnostr-relays-privacy-and-security","Nostr Relays, Privacy, and Security",[1301,1313,1303,1314,1323,1324],"key-management","nostr-relay",{"url":1307,"title":1321},{"path":1327,"title":1328,"date":1311,"tags":1329,"category":1301,"featureImage":1331},"\u002Fposts\u002Fwhat-is-a-nostr-relay","What is a Nostr Relay?",[1301,1313,1303,1316,1330,1324],"decentralization",{"url":1307,"title":1332}," What is a Nostr Relay?",{"path":1334,"title":1335,"date":1336,"tags":1337,"category":1301,"featureImage":1339},"\u002Fposts\u002Fwhy-nostr-keys-better-privacy","Why Nostr keys and identity are better for privacy","2026-04-06",[1301,1303,1338,1314],"identity",{"url":1307,"title":1335},{"path":1341,"title":1342,"date":1343,"tags":1344,"category":1301,"featureImage":1350},"\u002Fposts\u002Fbest-nostr-browser-extensions-2026","Best Nostr Browser Extensions (2026): Complete Comparison","2026-03-24",[1301,1345,1346,1314,1347,1348,1349],"browser-extension","nip-07","comparison","porwr","diogel",{"url":1307,"title":1342},{"path":1352,"title":1353,"date":1343,"tags":1354,"category":1301,"featureImage":1357},"\u002Fposts\u002Fhow-to-get-started-with-porwr","Getting Started with Nostr: Porwr Setup Guide (2026)",[1355,1303,1301,1348,1349,1356,1346,1345],"social","cryptography",{"url":1358,"title":1359},"v1690313893\u002Fblog\u002Fdiogel-product-header_x3az6t","Porwr Browser Extension",{"path":1361,"title":1362,"date":1363,"tags":1364,"category":1301,"featureImage":1365},"\u002Fposts\u002Fhow-to-manage-keys-for-nostr","How to manage keys for Nostr","2025-12-15",[1301,1304,1303,1314],{"url":1307,"title":1362},{"path":1367,"title":1368,"date":1363,"tags":1369,"category":1301,"featureImage":1372},"\u002Fposts\u002Fhow-to-self-host-your-nip-05-identity","How to self-host your NIP-05 identity",[1301,1370,1303,1371],"nip-05","self-hosting",{"url":1307,"title":1368},{"path":1374,"title":1375,"date":1376,"tags":6,"category":1303,"featureImage":1377},"\u002Fposts\u002Fwhy-privacy-is-a-fundamental-human-right","Why privacy is a fundamental human right","2025-12-09",{"url":1378,"title":1375},"v1690313893\u002Fprivacy-header_exiblo",{"path":1380,"title":1381,"date":1382,"tags":6,"category":1383,"featureImage":1384},"\u002Fposts\u002Fhow-government-monetary-policy-erodes-the-value-of-money","How government monetary policy erodes the value of money","2025-12-01","bitcoin",{"url":1385,"title":1381},"v1719908027\u002Fbitcoin_szcm1m",{"path":1387,"title":1388,"date":1389,"tags":1390,"category":1383,"featureImage":1394},"\u002Fposts\u002Fbitaxe-touch-genesis-batch","Bitaxe Touch Genesis Batch","2025-07-23",[1391,1392,1393],"bitaxe","mining","solo",{"url":1395,"title":1388},"v1690313878\u002Fbitaxe-touch_c6qrjd",{"path":1397,"title":1398,"date":1399,"tags":1400,"category":1383,"featureImage":1404},"\u002Fposts\u002Fbitcoin-is-not-a-ponzi-scheme","Bitcoin is not a Ponzi Scheme","2025-07-22",[1401,1402,1403],"ponzi","economics","investment",{"url":1385,"title":1398},{"path":1406,"title":1407,"date":1399,"tags":1408,"category":1383,"featureImage":1410},"\u002Fposts\u002Fgetting-started-with-public-pool-mining","Getting started with Public Pool Mining",[1392,1393,1409],"lottery",{"url":1385,"title":1407},{"path":1412,"title":1413,"date":1414,"tags":1415,"category":1383,"featureImage":1416},"\u002Fposts\u002Fgetting-started-with-solo-mining","Getting started with solo mining","2025-07-19",[1391,1392,1393,1409],{"url":1385,"title":1413},{"path":1418,"title":1419,"date":1414,"tags":1420,"category":1383,"featureImage":1421},"\u002Fposts\u002Fwhat-is-bitcoin-mining","What is Bitcoin mining",[1392,1383],{"url":1385,"title":1419},{"path":1423,"title":1424,"date":1414,"tags":1425,"category":1383,"featureImage":1426},"\u002Fposts\u002Fwhat-is-solo-mining","What is solo mining",[1393],{"url":1385,"title":1424},{"path":1428,"title":1429,"date":1430,"tags":1431,"category":1383,"featureImage":1434},"\u002Fposts\u002Fhow-to-run-a-bitcoin-node","How to run a Bitcoin Node with Umbrel Home","2025-07-14",[1432,1433],"node","umbrel",{"url":1385,"title":1435},"How to run a Bitcoin node",{"path":1437,"title":1438,"date":1439,"tags":1440,"category":1301,"featureImage":1441},"\u002Fposts\u002Fhow-to-get-started-with-nostr","How to get started with Nostr","2024-10-09",[1301,1305,1303,1304],{"url":1307,"title":1438},{"path":1182,"title":5,"date":1175,"tags":6,"category":1174,"featureImage":1443},{"url":1179,"title":5},{"path":1445,"title":935,"date":1446,"tags":6,"category":1174,"featureImage":1447},"\u002Fposts\u002Fhow-to-add-tailwindcss-to-nuxt","2024-10-07",{"url":1179,"title":259},{"path":1449,"title":259,"date":1450,"tags":6,"category":1174,"featureImage":1451},"\u002Fposts\u002Fgetting-started-with-nuxt","2024-10-06",{"url":1179,"title":259},{"path":1209,"title":1208,"date":1450,"tags":6,"category":1174,"featureImage":1453},{"url":1454,"title":1208},"v1690313893\u002Fterraform-header_ixmkgg",{"path":1214,"title":1213,"date":1456,"tags":6,"category":1174,"featureImage":1457},"2024-10-05",{"url":1454,"title":1213},{"path":1459,"title":1460,"date":1461,"tags":6,"category":1303,"featureImage":1462},"\u002Fposts\u002Fhow-to-add-fathom-analytics-to-nuxt","How to add Fathom Analytics to Nuxt","2024-07-01",{"url":1179,"title":1460},{"path":1464,"title":1465,"date":1461,"tags":6,"category":1303,"featureImage":1466},"\u002Fposts\u002Fimportance-of-privacy-in-web-analytics","The Importance of Privacy in Web Analytics",{"url":1467,"title":1465},"v1690313893\u002Fanalytics_nlew9f",{"path":1469,"title":1470,"date":1461,"tags":1471,"category":1301,"featureImage":1472},"\u002Fposts\u002Fwhat-is-a-nip-07-signer","What is a NIP-07 signer?",[1301,1346,1345,1314],{"url":1307,"title":1470},{"path":1474,"title":1475,"date":1461,"tags":1476,"category":1301,"featureImage":1478},"\u002Fposts\u002Fwhat-is-nostr","What is Nostr?",[1301,1477,1303,1330],"relays",{"url":1307,"title":1475},{"path":1480,"title":1481,"date":1461,"tags":6,"category":1303,"featureImage":1482},"\u002Fposts\u002Fwhy-choose-privacy-focused-analytics","Why choose privacy focused Analytics",{"url":1483,"title":1481},"v1690313893\u002Fblog\u002Ffathom-header_y7s0x2",{"path":1485,"title":1486,"date":1487,"tags":6,"category":1174,"featureImage":1488},"\u002Fposts\u002Fwhat-is-api-integration","What is API Integration?","2024-06-04",{"url":1489,"title":1490},"v1719908247\u002Fapi_f3f1mh","What is API integration?",{"path":1492,"title":1493,"date":1494,"tags":1495,"category":1383,"featureImage":1497},"\u002Fposts\u002Fhow-blockchain-uses-cryptography","How Blockchain uses Cryptography","2024-05-18",[1496,1356],"blockchain",{"url":1498,"title":1499},"v1690313893\u002Fblockchain_tfrcrd","What is blockchain?",{"path":1501,"title":1502,"date":1503,"tags":6,"category":1174,"featureImage":1504},"\u002Fposts\u002Fhow-to-create-a-websocket-server-in-dotnet","How to create a WebSocket server in dotnet","2024-05-15",{"url":1505,"title":1502},"v1719908486\u002Fwebsockets_pjqtld",{"path":1507,"title":1508,"date":1503,"tags":1509,"category":1383,"featureImage":1510},"\u002Fposts\u002Fwhat-is-blockchain","What is Blockchain",[1496,1383],{"url":1498,"title":1499},{"path":1512,"title":1513,"date":1514,"tags":1515,"category":1383,"featureImage":1517},"\u002Fposts\u002Fintroduction-to-public-and-private-key-cryptography","Public Key Cryptography Explained: A Beginner's Guide","2024-05-12",[1516,1383,1301],"encryption",{"url":1498,"title":1518},"Introduction to public and private key cryptography",{"path":1520,"title":1521,"date":1514,"tags":1522,"category":1383,"featureImage":1523},"\u002Fposts\u002Fwhat-is-bitcoin","What is Bitcoin?",[1496,1383],{"url":1385,"title":1521},{"path":1525,"title":1526,"date":1527,"tags":6,"category":1174,"featureImage":1528},"\u002Fposts\u002Fwhat-are-web-sockets","What are Web Sockets","2023-09-06",{"url":1505,"title":1529},"What are Websockets",{"path":1531,"title":1532,"date":1533,"tags":6,"category":1174,"featureImage":1534},"\u002Fposts\u002Fwhat-is-api-first","What is API First?","2023-07-13",{"url":1489,"title":1532},{"path":1536,"title":1537,"date":1538,"tags":6,"category":1174,"featureImage":1539},"\u002Fposts\u002Fapi-gateway-pattern","API Gateway Pattern","2023-06-10",{"url":1489,"title":1537},{"path":1541,"title":1542,"date":1538,"tags":6,"category":1174,"featureImage":1543},"\u002Fposts\u002Fbackend-for-frontend-design-pattern","Backend for Frontend Design Pattern",{"url":1489,"title":1542},{"path":1545,"title":1546,"date":1547,"tags":6,"category":1174,"featureImage":1548},"\u002Fposts\u002Fguide-api-development","An introductory guide to API Development","2023-06-05",{"url":1489,"title":1549},"API Development",{"path":1551,"title":1552,"date":1547,"tags":6,"category":1174,"featureImage":1553},"\u002Fposts\u002Fwhat-is-a-rest-api","What is a REST API?",{"url":1489,"title":1554},"What is an API?",{"path":1556,"title":1554,"date":1557,"tags":6,"category":1174,"featureImage":1558},"\u002Fposts\u002Fwhat-is-an-api","2023-06-01",{"url":1489,"title":1554},{"path":1560,"title":1561,"date":1557,"tags":6,"category":1174,"featureImage":1562},"\u002Fposts\u002Fwhat-is-api-development","What is API Development ?",{"url":1489,"title":1563},"What is API development?",[1565,1566],{"label":1238,"description":1239,"icon":1240,"to":1241},{"label":1243,"description":1244,"icon":1245,"to":1246},[1568,1569],{"label":1225,"icon":1226,"description":1227,"to":1228},{"label":1230,"icon":1231,"description":1232,"to":1233},[1571],{"label":1251,"icon":1252,"description":1253,"to":1254},[1573,1576,1579,1582,1585],{"path":1574,"title":1575},"\u002Flegals\u002Fcookie-policy","Cookie Policy",{"path":1577,"title":1578},"\u002Flegals\u002Fcopyright","Copyright",{"path":1580,"title":1581},"\u002Flegals\u002Fcustomer-support","Customer Support",{"path":1583,"title":1584},"\u002Flegals\u002Fprivacy-policy","Privacy Policy",{"path":1586,"title":1587},"\u002Flegals\u002Fterms-of-service","Terms of Service",1793132669422]