[{"data":1,"prerenderedAt":1294},["ShallowReactive",2],{"post-\u002Fposts\u002Fgetting-started-with-nuxt":3,"post-author-garywoodfine":903,"post-aside-video-none":6,"\u002Fposts\u002Fgetting-started-with-nuxt-surround":912,"navigation":923,"authors":971,"author-garywoodfine":1000,"post-aside-related-candidates":1001,"content-section-services":1270,"content-section-products":1273,"content-section-company":1276,"legal-link":1278},{"id":4,"title":5,"aside":6,"author":7,"body":8,"category":872,"date":873,"description":874,"extension":875,"featureImage":876,"meta":878,"navigation":880,"path":881,"seo":882,"sitemap":883,"slug":6,"stem":901,"subtitle":874,"summary":874,"tags":6,"updated":6,"video":6,"__hash__":902},"posts\u002Fposts\u002Fgetting-started-with-nuxt.md","Getting started with Nuxt",null,"garywoodfine",{"type":9,"value":10,"toc":860},"minimark",[11,15,18,21,26,29,34,75,79,105,109,121,131,135,138,141,147,163,191,196,201,204,297,300,336,339,355,358,361,365,372,393,399,544,550,554,557,572,585,588,595,672,676,680,689,693,704,708,715,754,760,766,771,776,779,783,788,800,804,807,810,814,817,820,832,846,850,853,856],[12,13,14],"p",{},"At threenine.io we have grown to really appreciate the Nuxt Framework as our defacto standard for quickly and efficiently\ndeveloping web-based projects.  We have tried hundreds over the years, but over the last 2-3 years we have settled\non predominantly using and recommending to clients to consider using Nuxt & Vue.",[12,16,17],{},"In fact, we love Nuxt so much we use it at the primary platform to develop all our tools and services with. This\nplatform you're reading this post on, is built entirely on Nuxt. We will continue to add more features and complexity\nas we move through the Nuxt Tutorials , the results of which you will also be able to experience on this site.",[12,19,20],{},"In our opinion, Nuxt is uniquely crafted to streamline your development process from start to finish.",[22,23,25],"h3",{"id":24},"what-is-nuxt","What is Nuxt",[12,27,28],{},"Nuxt is a versatile framework built on top of Vue, designed to make web development more efficient and\nstreamlined. It primarily focuses on creating universal applications that can be both server-rendered (SSR) and\nstatic-generated (pre-rendered), making it a popular choice for building high-performance, SEO-friendly web applications.",[30,31,33],"h4",{"id":32},"key-features-of-nuxt","Key features of Nuxt",[35,36,37,45,51,57,63,69],"ul",{},[38,39,40,44],"li",{},[41,42,43],"strong",{},"Server-Side Rendering (SSR):"," Nuxt is renowned for its ability to integrate server-side rendering,\nwhich can significantly improve the performance and SEO of web applications. SSR renders the app's initial HTML on\nthe server, resulting in a faster TTI (Time to Interactive) for users.",[38,46,47,50],{},[41,48,49],{},"Static Site Generation:"," Alongside SSR, Nuxt supports static site generation. It allows developers to generate\na full static website, which can be deployed easily to any static hosting service. This approach combines the benefits\nof static websites with the dynamic nature of Vue.",[38,52,53,56],{},[41,54,55],{},"Modular Architecture:"," Nuxt boasts a modular architecture, making it easy to integrate various features as\nneeded. With over 50 modules available, developers can easily add functionalities like PWA support, Google Analytics,\nand more without extensive configuration.",[38,58,59,62],{},[41,60,61],{},"Automatic Routing:"," Nuxt simplifies routing by automatically generating routes based on the file structure\nin the pages directory. This reduces boilerplate code and streamlines the development process.",[38,64,65,68],{},[41,66,67],{},"Vue Ecosystem Compatibility:"," Being built on top of Vue, Nuxt uses the full Vue ecosystem. It supports\nall Vue features and functionalities, enabling developers to use Vue components and plugins directly.",[38,70,71,74],{},[41,72,73],{},"Integrated Development Tools:"," Nuxt includes a full development environment with hot module replacement,\nmodular plugin system, and middleware support, enhancing the developer experience and productivity.",[30,76,78],{"id":77},"use-cases-for-nuxt","Use Cases for Nuxt",[35,80,81,87,93,99],{},[38,82,83,86],{},[41,84,85],{},"SEO-Friendly Websites:"," Nuxt SSR capabilities make it ideal for developing websites where SEO is a priority,\nsuch as blogs, e-commerce platforms, and marketing websites.",[38,88,89,92],{},[41,90,91],{},"Performance-Centric Applications:"," Applications that require fast load times and a smooth user experience can\nbenefit from Nuxt's performance optimisations.",[38,94,95,98],{},[41,96,97],{},"Content-Rich Static Sites:"," For sites requiring a static output but complex interactions, such as documentation\nsites or static blogs, Nuxt provides an efficient solution.",[38,100,101,104],{},[41,102,103],{},"Universal Applications:"," Applications that need to run both on the server and client side, offering a consistent\nexperience across different environments.",[22,106,108],{"id":107},"how-to-start-a-new-project-with-nuxt","How to start a new project with Nuxt",[12,110,111,112,116,117,120],{},"To start a new project with Nuxt its really quite simple making use ",[113,114,115],"code",{},"npx",", which stands for ",[41,118,119],{},"_Node Package Execute (npx)","_\nis available by default wit NPM starting with version 5.2+, enabling the execution of any package from the packages\nrepository without the need of installing that package locally on your machine.",[12,122,123,124,130],{},"Using npx we can use the ",[125,126,127],"em",{},[41,128,129],{},"Nuxi"," package without installing.",[30,132,134],{"id":133},"what-is-nuxi","What is Nuxi?",[12,136,137],{},"Nuxt Command Line Interface (nuxi) is a set of terminal commands available enabling you to interact with the Nuxt\nframework to perform tasks and develop.",[12,139,140],{},"The Nuxt CLI helps you scaffold entirely new projects with zero effort. The CLI now comes with a new modules interface\nbuilt-in, and it helps you run commands faster and more efficiently.",[12,142,143,146],{},[113,144,145],{},"nuxi"," was introduced to provide a no dependency experience for easily scaffolding your Nuxt projects.",[148,149,150],"top-tip",{},[151,152,154],"template",{"v-slot:message":153},"",[12,155,156,157,159,160],{},"To install ",[113,158,145],{}," on you local computer use ",[113,161,162],{},"npm i -g nuxi",[164,165,171],"pre",{"className":166,"code":167,"filename":168,"language":169,"meta":170,"style":153},"language-shell shiki shiki-themes material-theme-lighter monokai monokai monokai","npx nuxi init name-of-your-project\n","Terminal","shell","meta-info=val",[113,172,173],{"__ignoreMap":153},[174,175,178,181,185,188],"span",{"class":176,"line":177},"line",1,[174,179,115],{"class":180},"sC-bC",[174,182,184],{"class":183},"sKdu0"," nuxi",[174,186,187],{"class":183}," init",[174,189,190],{"class":183}," name-of-your-project\n",[12,192,193,195],{},[113,194,129],{}," will prompt you for your choice of package manager, we'll leave this up to you to decide which one works best for\nyou. The good news is that Nuxt, can fit into any of your preferred tool-chains.",[197,198],"content-image",{"image":199,"title":200},"blog\u002Fnuxi-start_nmk4jp","Nuxi Start Project",[12,202,203],{},"After working your way through the rest of the application generation wizard, if your change into the directory created\nyou will obeserve that the following minimal project structure has been created for you.",[164,205,207],{"className":166,"code":206,"filename":168,"language":169,"meta":170,"style":153},".\n├── app.vue\n├── node_modules\n├── nuxt.config.ts\n├── package.json\n├── public\n├── README.md\n├── server\n├── tailwind.config.ts\n├── tsconfig.json\n└── yarn.lock\n\n",[113,208,209,215,224,232,240,248,256,264,272,280,288],{"__ignoreMap":153},[174,210,211],{"class":176,"line":177},[174,212,214],{"class":213},"sSYhn",".\n",[174,216,218,221],{"class":176,"line":217},2,[174,219,220],{"class":180},"├──",[174,222,223],{"class":183}," app.vue\n",[174,225,227,229],{"class":176,"line":226},3,[174,228,220],{"class":180},[174,230,231],{"class":183}," node_modules\n",[174,233,235,237],{"class":176,"line":234},4,[174,236,220],{"class":180},[174,238,239],{"class":183}," nuxt.config.ts\n",[174,241,243,245],{"class":176,"line":242},5,[174,244,220],{"class":180},[174,246,247],{"class":183}," package.json\n",[174,249,251,253],{"class":176,"line":250},6,[174,252,220],{"class":180},[174,254,255],{"class":183}," public\n",[174,257,259,261],{"class":176,"line":258},7,[174,260,220],{"class":180},[174,262,263],{"class":183}," README.md\n",[174,265,267,269],{"class":176,"line":266},8,[174,268,220],{"class":180},[174,270,271],{"class":183}," server\n",[174,273,275,277],{"class":176,"line":274},9,[174,276,220],{"class":180},[174,278,279],{"class":183}," tailwind.config.ts\n",[174,281,283,285],{"class":176,"line":282},10,[174,284,220],{"class":180},[174,286,287],{"class":183}," tsconfig.json\n",[174,289,291,294],{"class":176,"line":290},11,[174,292,293],{"class":180},"└──",[174,295,296],{"class":183}," yarn.lock\n",[12,298,299],{},"Let’s breakdown these files and directories.",[35,301,302,312,318,324,330],{},[38,303,304,307,308,311],{},[113,305,306],{},"app.vue:"," This is the main component of a Nuxt.js application created when you initiate a new project with\n",[113,309,310],{},"npx nuxi init",". This component is sufficient for an app that does not need routing.",[38,313,314,317],{},[113,315,316],{},"node_modules:"," This is the file where the project’s dependencies are placed. We neither modify this directory’s\ncontents nor stage its contents for versioning.",[38,319,320,323],{},[113,321,322],{},"nuxt.config.js",": This is the file that stores a Nuxt project’s configuration.",[38,325,326,329],{},[113,327,328],{},"package.json",": file is a crucial component of any Node.js project. It holds metadata relevant to the project and is\nused to manage project dependencies, scripts, and other configurations.",[38,331,332,335],{},[113,333,334],{},"yarn.lock"," : This file persists the versions of the dependencies our project uses for consistency whenever our\nproject happens to be run. We normally don’t modify this file as it is managed by the package manager.",[12,337,338],{},"Once you've generated your project, as the screen. suggest you can now change into the directory created and run it",[164,340,342],{"className":166,"code":341,"filename":168,"language":169,"meta":170,"style":153},"yarn run dev\n",[113,343,344],{"__ignoreMap":153},[174,345,346,349,352],{"class":176,"line":177},[174,347,348],{"class":180},"yarn",[174,350,351],{"class":183}," run",[174,353,354],{"class":183}," dev\n",[197,356],{"image":357,"title":200},"image-7_akdeew",[12,359,360],{},"This will display the Nuxt welcome page which will verify that your project creation has gone to plan.",[22,362,364],{"id":363},"set-your-node-version","Set your Node Version",[12,366,367,368,371],{},"We generally make use of Node Version Manager here at threenine.io, to support multiple projects on different versions of node.\nSo usually one of the first steps we carry out on new projects is to set the Version of node for the project, buy creating\nthe ",[113,369,370],{},".nvmrc"," file that records the Node Version number. You can do really simply by running the following command:",[164,373,375],{"className":166,"code":374,"filename":168,"language":169,"meta":170,"style":153},"node -v > .nvmrc\n",[113,376,377],{"__ignoreMap":153},[174,378,379,382,386,390],{"class":176,"line":177},[174,380,381],{"class":180},"node",[174,383,385],{"class":384},"sbSe9"," -v",[174,387,389],{"class":388},"sb10O"," >",[174,391,392],{"class":183}," .nvmrc\n",[12,394,395,396,398],{},"This will create a new ",[113,397,370],{}," file in your project directory",[164,400,402],{"className":166,"code":401,"filename":168,"language":169,"meta":170,"style":153},".\n├── app.vue\n├── .gitignore\n├── layouts\n│   └── default.vue\n├── nuxt.config.ts\n├── .nvmrc\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",[113,403,404,408,414,421,428,439,445,451,457,464,473,479,490,500,507,514,523,530,537],{"__ignoreMap":153},[174,405,406],{"class":176,"line":177},[174,407,214],{"class":213},[174,409,410,412],{"class":176,"line":217},[174,411,220],{"class":180},[174,413,223],{"class":183},[174,415,416,418],{"class":176,"line":226},[174,417,220],{"class":180},[174,419,420],{"class":183}," .gitignore\n",[174,422,423,425],{"class":176,"line":234},[174,424,220],{"class":180},[174,426,427],{"class":183}," layouts\n",[174,429,430,433,436],{"class":176,"line":242},[174,431,432],{"class":180},"│",[174,434,435],{"class":183},"   └──",[174,437,438],{"class":183}," default.vue\n",[174,440,441,443],{"class":176,"line":250},[174,442,220],{"class":180},[174,444,239],{"class":183},[174,446,447,449],{"class":176,"line":258},[174,448,220],{"class":180},[174,450,392],{"class":183},[174,452,453,455],{"class":176,"line":266},[174,454,220],{"class":180},[174,456,247],{"class":183},[174,458,459,461],{"class":176,"line":274},[174,460,220],{"class":180},[174,462,463],{"class":183}," pages\n",[174,465,466,468,470],{"class":176,"line":282},[174,467,432],{"class":180},[174,469,435],{"class":183},[174,471,472],{"class":183}," index.vue\n",[174,474,475,477],{"class":176,"line":290},[174,476,220],{"class":180},[174,478,255],{"class":183},[174,480,482,484,487],{"class":176,"line":481},12,[174,483,432],{"class":180},[174,485,486],{"class":183},"   ├──",[174,488,489],{"class":183}," favicon.ico\n",[174,491,493,495,497],{"class":176,"line":492},13,[174,494,432],{"class":180},[174,496,435],{"class":183},[174,498,499],{"class":183}," robots.txt\n",[174,501,503,505],{"class":176,"line":502},14,[174,504,220],{"class":180},[174,506,263],{"class":183},[174,508,510,512],{"class":176,"line":509},15,[174,511,220],{"class":180},[174,513,271],{"class":183},[174,515,517,519,521],{"class":176,"line":516},16,[174,518,432],{"class":180},[174,520,435],{"class":183},[174,522,287],{"class":183},[174,524,526,528],{"class":176,"line":525},17,[174,527,220],{"class":180},[174,529,279],{"class":183},[174,531,533,535],{"class":176,"line":532},18,[174,534,220],{"class":180},[174,536,287],{"class":183},[174,538,540,542],{"class":176,"line":539},19,[174,541,293],{"class":180},[174,543,296],{"class":183},[12,545,546,547],{},"Which will contain your node version you have set for the project, or have set as your default version you're currently\nworking with.  In my case this is set to ",[113,548,549],{},"v20.12.0",[22,551,553],{"id":552},"edit-your-startup","Edit your startup",[12,555,556],{},"The default start page for a project is that not exactly what you'd want to develop for your project, so you're more than\nlikely going to what to  change that.",[12,558,559,560,563,564,571],{},"To change, this you can use any Text Editor or IDE to open the project and navigate to ",[113,561,562],{},"app.vue",". In my case, I will\nbe making use of ",[565,566,570],"a",{"href":567,"rel":568},"https:\u002F\u002Fwww.jetbrains.com\u002Ffleet?source=threenine",[569],"nofollow","Jetbrains Fleet",", which is a Code Editor.",[164,573,575],{"className":166,"code":574,"filename":168,"language":169,"meta":170,"style":153},"fleet .\n",[113,576,577],{"__ignoreMap":153},[174,578,579,582],{"class":176,"line":177},[174,580,581],{"class":180},"fleet",[174,583,584],{"class":183}," .\n",[197,586],{"image":587,"title":200},"nuxt-editor_alq7zz",[12,589,590,591,594],{},"You can safely remove the ",[113,592,593],{},"\u003CNuxtWelcome \u002F>",", and if you go back to your browser there will be nothing but a white screen\nYou can update the contents of the file as follows,",[164,596,600],{"className":597,"code":598,"filename":562,"language":599,"meta":170,"style":153},"language-vue shiki shiki-themes material-theme-lighter monokai monokai monokai","\u003Ctemplate>\n  \u003Cdiv>\n    \u003CNuxtRouteAnnouncer \u002F>\n  \u003Cp>Hello World!\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n","vue",[113,601,602,614,624,635,655,664],{"__ignoreMap":153},[174,603,604,608,611],{"class":176,"line":177},[174,605,607],{"class":606},"s8B1f","\u003C",[174,609,151],{"class":610},"sMgo4",[174,612,613],{"class":606},">\n",[174,615,616,619,622],{"class":176,"line":217},[174,617,618],{"class":606},"  \u003C",[174,620,621],{"class":610},"div",[174,623,613],{"class":606},[174,625,626,629,632],{"class":176,"line":226},[174,627,628],{"class":606},"    \u003C",[174,630,631],{"class":610},"NuxtRouteAnnouncer",[174,633,634],{"class":606}," \u002F>\n",[174,636,637,639,641,644,648,651,653],{"class":176,"line":234},[174,638,618],{"class":606},[174,640,12],{"class":610},[174,642,643],{"class":606},">",[174,645,647],{"class":646},"sRVMn","Hello World!",[174,649,650],{"class":606},"\u003C\u002F",[174,652,12],{"class":610},[174,654,613],{"class":606},[174,656,657,660,662],{"class":176,"line":242},[174,658,659],{"class":606},"  \u003C\u002F",[174,661,621],{"class":610},[174,663,613],{"class":606},[174,665,666,668,670],{"class":176,"line":250},[174,667,650],{"class":606},[174,669,151],{"class":610},[174,671,613],{"class":606},[197,673],{"image":674,"title":675},"nuxt-hello-world_tkrs7t","Nuxt Hello World",[22,677,679],{"id":678},"what-is-the-nuxtrouteannouncer","What is the NuxtRouteAnnouncer",[12,681,682,683,685,686,688],{},"a ",[113,684,631],{}," is a component or feature in Nuxt that announces route changes to assistive technologies,\nsuch as screen readers, when a user navigates between pages.  The ",[113,687,631],{}," aims to improve the accessibility\nof Nuxt applications by providing a clear and immediate announcement of route changes to users relying on assistive\ntechnologies.",[22,690,692],{"id":691},"getting-to-know-nuxi","Getting to know Nuxi",[12,694,695,696,700,701,703],{},"The best way to start developing with Nuxt is too really get acquainted with Nuxi, most notably because it comes bundled\nwith a number commands which are extremely useful.  In ",[565,697,699],{"href":698},"how-to-use-layouts-and-pages-in-nuxt","How to use layouts and pages in Nuxt","\nwe provide further instruction on how to use ",[113,702,145],{}," during your course of developing an application in nuxt. However,\nfor now we'll discuss the most common commands you will undoubtedly use when working regularly with Nuxt.",[22,705,707],{"id":706},"nuxi-add","Nuxi Add",[12,709,710,711,714],{},"The ",[113,712,713],{},"nuxi add"," command usually adds a template of a file to your Nuxt project. This can either be a api,layout, page, composable,\nplugin, or middleware.",[164,716,718],{"className":166,"code":717,"filename":168,"language":169,"meta":170,"style":153},"nuxi add [--cwd] [--force] \u003CTEMPLATE> \u003CNAME>\n",[113,719,720],{"__ignoreMap":153},[174,721,722,724,727,730,733,736,739,742,745,747,749,752],{"class":176,"line":177},[174,723,145],{"class":180},[174,725,726],{"class":183}," add",[174,728,729],{"class":646}," [--cwd] ",[174,731,732],{"class":606},"[",[174,734,735],{"class":646},"--force",[174,737,738],{"class":606},"]",[174,740,741],{"class":388}," \u003C",[174,743,744],{"class":646},"TEMPLATE",[174,746,643],{"class":388},[174,748,741],{"class":388},[174,750,751],{"class":646},"NAME",[174,753,613],{"class":388},[12,755,756,759],{},[113,757,758],{},"cwd"," : current working directory which is the path you will like the file to be created. This is optional",[12,761,762,765],{},[113,763,764],{},"—force",": override file if file already exists (optional)",[12,767,768,770],{},[113,769,744],{},": type of file (page, plugin, component etc)",[12,772,773,775],{},[113,774,751],{},": name of file",[12,777,778],{},"We will of course go through a number of these options in future tutorials, but at the moment it is a good idea to\ngain some familiarity of the structure of the commands.",[22,780,782],{"id":781},"nuxi-analyze","nuxi analyze",[12,784,785,787],{},[113,786,782],{}," is an experimental feature that builds your Nuxt app and analyses the production bundle. After running the\nnuxi analyze command, a local server is created to view your bundles.",[164,789,791],{"className":166,"code":790,"filename":168,"language":169,"meta":170,"style":153},"nuxi analyze\n",[113,792,793],{"__ignoreMap":153},[174,794,795,797],{"class":176,"line":177},[174,796,145],{"class":180},[174,798,799],{"class":183}," analyze\n",[197,801],{"image":802,"title":803},"nuxi-analyze_ygclgv","Nuxi analyze",[12,805,806],{},"Clicking on any of those links will show a visual representation of your production bundles viewed on our created local\nserver. You can then analyse your bundles and optimise them as you can. All this may look overwhelming at the\nbeginning but the larger the rectangle, the bigger part of the bundle that dependency is and may affect performance.",[197,808],{"image":809,"title":803},"nuxi-analyze-bundles_casvnx",[22,811,813],{"id":812},"nuxi-upgrade","nuxi upgrade",[12,815,816],{},"The upgrade command simplifies the often complex and error-prone process of updating project dependencies. Executing\nthis command, nuxi automatically checks for the latest versions of Nuxt and related packages, applies necessary\nupdates, and makes sure all configurations and dependencies are compatible with the new versions.",[12,818,819],{},"This helps developers maintain an up-to-date codebase with the latest features, performance improvements, and\nsecurity patches, ensuring the application remains secure and efficient.",[164,821,823],{"className":166,"code":822,"filename":168,"language":169,"meta":170,"style":153},"nuxi upgrade\n",[113,824,825],{"__ignoreMap":153},[174,826,827,829],{"class":176,"line":177},[174,828,145],{"class":180},[174,830,831],{"class":183}," upgrade\n",[833,834,835],"content-note",{},[151,836,837,843],{"v-slot:message":153},[12,838,839,840,842],{},"Before using the ",[113,841,813],{}," command, it is crucial to ensure that your project is backed up or version-controlled,\npreferably with a recent commit in your version control system. This precaution helps protect against any unexpected\nissues or incompatibilities that may arise during the upgrade process.",[12,844,845],{},"Additionally, once the upgrade is complete,\nthoroughly test your application to confirm that all functionalities are intact and that no breaking changes have\nbeen introduced. Following these steps can save significant time and effort, ensuring a smooth and successful\ntransition to the latest versions of Nuxt and its dependencies.",[22,847,849],{"id":848},"conclusion","Conclusion",[12,851,852],{},"Nuxt provides a powerful yet intuitive framework for building modern, server-rendered Vue.js applications. This\nguide walked you through the initial setup, including installation, gaining a basic understanding the project structure, and\nconfiguring essential features like routing, components, and plugins.",[12,854,855],{},"By using Nuxt, developers can benefit from enhanced SEO, improved performance, and a structured approach to\nbuilding scalable applications. As you continue to explore and develop with Nuxt, you'll find a rich ecosystem of\ntools and a supportive community to assist you in creating high-quality web applications. Embrace the features and\nflexibility of Nuxt.js to elevate your web development projects to new heights.",[857,858,859],"style",{},"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 .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 .sSYhn, html code.shiki .sSYhn{--shiki-light:#6182B8;--shiki-default:#66D9EF;--shiki-dark:#66D9EF;--shiki-sepia:#66D9EF}html pre.shiki code .sbSe9, html code.shiki .sbSe9{--shiki-light:#91B859;--shiki-default:#AE81FF;--shiki-dark:#AE81FF;--shiki-sepia:#AE81FF}html pre.shiki code .sb10O, html code.shiki .sb10O{--shiki-light:#39ADB5;--shiki-default:#F92672;--shiki-dark:#F92672;--shiki-sepia:#F92672}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}",{"title":153,"searchDepth":217,"depth":217,"links":861},[862,863,864,865,866,867,868,869,870,871],{"id":24,"depth":226,"text":25},{"id":107,"depth":226,"text":108},{"id":363,"depth":226,"text":364},{"id":552,"depth":226,"text":553},{"id":678,"depth":226,"text":679},{"id":691,"depth":226,"text":692},{"id":706,"depth":226,"text":707},{"id":781,"depth":226,"text":782},{"id":812,"depth":226,"text":813},{"id":848,"depth":226,"text":849},"development","2024-10-06","Explore the Nuxt framework and how to start a new project using Nuxt and Vue","md",{"url":877,"title":5},"v1690313878\u002Fnuxt-header_tbc9cp",{"publishDateTime":879},"2024-10-06:17:30",true,"\u002Fposts\u002Fgetting-started-with-nuxt",{"title":5,"description":874},{"loc":881,"lastmod":873,"changefreq":884,"priority":885,"images":886},"monthly",0.8,[887,889,891,893,895,897,899],{"loc":888},"https:\u002F\u002Fres.cloudinary.com\u002Fthreenine-co-uk\u002Fimage\u002Fupload\u002Ff_jpg,w_1200\u002Fv1690313878\u002Fnuxt-header_tbc9cp",{"loc":890},"https:\u002F\u002Fres.cloudinary.com\u002Fthreenine-co-uk\u002Fimage\u002Fupload\u002Ff_jpg,w_1200\u002Fblog\u002Fnuxi-start_nmk4jp",{"loc":892},"https:\u002F\u002Fres.cloudinary.com\u002Fthreenine-co-uk\u002Fimage\u002Fupload\u002Ff_jpg,w_1200\u002Fimage-7_akdeew",{"loc":894},"https:\u002F\u002Fres.cloudinary.com\u002Fthreenine-co-uk\u002Fimage\u002Fupload\u002Ff_jpg,w_1200\u002Fnuxt-editor_alq7zz",{"loc":896},"https:\u002F\u002Fres.cloudinary.com\u002Fthreenine-co-uk\u002Fimage\u002Fupload\u002Ff_jpg,w_1200\u002Fnuxt-hello-world_tkrs7t",{"loc":898},"https:\u002F\u002Fres.cloudinary.com\u002Fthreenine-co-uk\u002Fimage\u002Fupload\u002Ff_jpg,w_1200\u002Fnuxi-analyze_ygclgv",{"loc":900},"https:\u002F\u002Fres.cloudinary.com\u002Fthreenine-co-uk\u002Fimage\u002Fupload\u002Ff_jpg,w_1200\u002Fnuxi-analyze-bundles_casvnx","posts\u002Fgetting-started-with-nuxt","8E1t4EgtQMci7vpCy1xfktGn4D5AXAn28uZ7PlguJ_0",{"name":904,"to":905,"avatar":906,"sameAs":907},"Gary Woodfine","https:\u002F\u002Fgarywoodfine.com","garywoodfine_tlccjw",[908,909,910,911],"https:\u002F\u002Fgithub.com\u002Fgarywoodfine","https:\u002F\u002Fwww.youtube.com\u002F@Threenineio","https:\u002F\u002Fnjump.me\u002Fnpub1a3jz7w9laar2k77dkkh2rhxunr9zpja5emrl5yrxetamt29swqyqmmt32y","nostr:npub1a3jz7w9laar2k77dkkh2rhxunr9zpja5emrl5yrxetamt29swqyqmmt32y",[913,918],{"title":914,"path":915,"stem":916,"description":917,"children":-1},"Backend for Frontend Design Pattern","\u002Fposts\u002Fbackend-for-frontend-design-pattern","posts\u002Fbackend-for-frontend-design-pattern","The backend for frontend (BFF) is a software architecture pattern relevant for microservices & domain-driven design to simplify the communication between the frontend and backend",{"title":919,"path":920,"stem":921,"description":922,"children":-1},"An introductory guide to API Development","\u002Fposts\u002Fguide-api-development","posts\u002Fguide-api-development","threenine.io covers introductory concepts, terminology & technologies related to API development in order to gain a basic understanding.",{"id":924,"extension":925,"items":926,"meta":968,"stem":969,"__hash__":970},"navigation\u002Fnavigation.yaml","yaml",[927,940,953,961],{"label":928,"children":929},"products",[930,935],{"label":931,"icon":932,"description":933,"to":934},"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":936,"icon":937,"description":938,"to":939},"Nostrfi","i-lucide-radio-tower","Nostr relay, storage and backend-service infrastructure for builders and operators.","\u002Fproducts\u002Fnostrfi",{"label":941,"children":942},"services",[943,948],{"label":944,"description":945,"icon":946,"to":947},"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":949,"description":950,"icon":951,"to":952},"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":954,"children":955},"company",[956],{"label":957,"icon":958,"description":959,"to":960},"About","i-lucide-file-text","What we believe, what we build and how we work.","\u002Fcompany\u002Fabout",{"label":962,"children":963},"resources",[964],{"label":965,"icon":958,"description":966,"to":967},"Blog","Practical Bitcoin, Nostr and product engineering guides.","https:\u002F\u002Fthreenine.blog",{},"navigation","n-Xc9COCwoCHJiMCeBNLauHtuhxcGol-wu9S2og3Rqs",{"id":972,"title":904,"avatar":906,"body":973,"description":977,"extension":875,"meta":992,"name":904,"navigation":880,"path":993,"role":994,"sameAs":995,"seo":996,"stem":997,"summary":998,"to":905,"username":7,"__hash__":999},"authors\u002Fauthors\u002FGary Woodfine.md",{"type":9,"value":974,"toc":990},[975,978,981,984,987],[12,976,977],{},"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,979,980],{},"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,982,983],{},"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,985,986],{},"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,988,989],{},"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":153,"searchDepth":217,"depth":217,"links":991},[],{},"\u002Fauthors\u002Fgary-woodfine","Managing Director",[908,909,910,911],{"title":904,"description":977},"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":904,"name":904,"role":994,"summary":998,"avatar":906,"username":7,"to":905},[1002,1014,1025,1032,1039,1046,1057,1066,1072,1079,1085,1092,1102,1111,1117,1123,1128,1133,1141,1147,1151,1156,1158,1163,1168,1173,1178,1183,1189,1194,1201,1210,1216,1221,1229,1234,1240,1245,1250,1252,1256,1261,1265],{"path":1003,"title":1004,"date":1005,"tags":1006,"category":1007,"featureImage":1012},"\u002Fposts\u002Fwhat-is-a-nostr-client","What is a Nostr client?","2026-10-26",[1007,1008,1009,1010,1011],"nostr","nostr-client","privacy","keys","getting-started",{"url":1013,"title":1004},"v1690313893\u002Fnostr-logo_hwrql1",{"path":1015,"title":1016,"date":1017,"tags":1018,"category":1007,"featureImage":1023},"\u002Fposts\u002Fhow-to-choose-nostr-relays","How to Choose Nostr Relays","2026-04-11",[1007,1019,1009,1020,1021,1022],"relay","security","nostr-relays","censorship-resistance",{"url":1013,"title":1024},"How to choose nostr relays",{"path":1026,"title":1027,"date":1017,"tags":1028,"category":1007,"featureImage":1031},"\u002Fposts\u002Fnostr-relays-privacy-and-security","Nostr Relays, Privacy, and Security",[1007,1019,1009,1020,1029,1030],"key-management","nostr-relay",{"url":1013,"title":1027},{"path":1033,"title":1034,"date":1017,"tags":1035,"category":1007,"featureImage":1037},"\u002Fposts\u002Fwhat-is-a-nostr-relay","What is a Nostr Relay?",[1007,1019,1009,1022,1036,1030],"decentralization",{"url":1013,"title":1038}," What is a Nostr Relay?",{"path":1040,"title":1041,"date":1042,"tags":1043,"category":1007,"featureImage":1045},"\u002Fposts\u002Fwhy-nostr-keys-better-privacy","Why Nostr keys and identity are better for privacy","2026-04-06",[1007,1009,1044,1020],"identity",{"url":1013,"title":1041},{"path":1047,"title":1048,"date":1049,"tags":1050,"category":1007,"featureImage":1056},"\u002Fposts\u002Fbest-nostr-browser-extensions-2026","Best Nostr Browser Extensions (2026): Complete Comparison","2026-03-24",[1007,1051,1052,1020,1053,1054,1055],"browser-extension","nip-07","comparison","porwr","diogel",{"url":1013,"title":1048},{"path":1058,"title":1059,"date":1049,"tags":1060,"category":1007,"featureImage":1063},"\u002Fposts\u002Fhow-to-get-started-with-porwr","Getting Started with Nostr: Porwr Setup Guide (2026)",[1061,1009,1007,1054,1055,1062,1052,1051],"social","cryptography",{"url":1064,"title":1065},"v1690313893\u002Fblog\u002Fdiogel-product-header_x3az6t","Porwr Browser Extension",{"path":1067,"title":1068,"date":1069,"tags":1070,"category":1007,"featureImage":1071},"\u002Fposts\u002Fhow-to-manage-keys-for-nostr","How to manage keys for Nostr","2025-12-15",[1007,1010,1009,1020],{"url":1013,"title":1068},{"path":1073,"title":1074,"date":1069,"tags":1075,"category":1007,"featureImage":1078},"\u002Fposts\u002Fhow-to-self-host-your-nip-05-identity","How to self-host your NIP-05 identity",[1007,1076,1009,1077],"nip-05","self-hosting",{"url":1013,"title":1074},{"path":1080,"title":1081,"date":1082,"tags":6,"category":1009,"featureImage":1083},"\u002Fposts\u002Fwhy-privacy-is-a-fundamental-human-right","Why privacy is a fundamental human right","2025-12-09",{"url":1084,"title":1081},"v1690313893\u002Fprivacy-header_exiblo",{"path":1086,"title":1087,"date":1088,"tags":6,"category":1089,"featureImage":1090},"\u002Fposts\u002Fhow-government-monetary-policy-erodes-the-value-of-money","How government monetary policy erodes the value of money","2025-12-01","bitcoin",{"url":1091,"title":1087},"v1719908027\u002Fbitcoin_szcm1m",{"path":1093,"title":1094,"date":1095,"tags":1096,"category":1089,"featureImage":1100},"\u002Fposts\u002Fbitaxe-touch-genesis-batch","Bitaxe Touch Genesis Batch","2025-07-23",[1097,1098,1099],"bitaxe","mining","solo",{"url":1101,"title":1094},"v1690313878\u002Fbitaxe-touch_c6qrjd",{"path":1103,"title":1104,"date":1105,"tags":1106,"category":1089,"featureImage":1110},"\u002Fposts\u002Fbitcoin-is-not-a-ponzi-scheme","Bitcoin is not a Ponzi Scheme","2025-07-22",[1107,1108,1109],"ponzi","economics","investment",{"url":1091,"title":1104},{"path":1112,"title":1113,"date":1105,"tags":1114,"category":1089,"featureImage":1116},"\u002Fposts\u002Fgetting-started-with-public-pool-mining","Getting started with Public Pool Mining",[1098,1099,1115],"lottery",{"url":1091,"title":1113},{"path":1118,"title":1119,"date":1120,"tags":1121,"category":1089,"featureImage":1122},"\u002Fposts\u002Fgetting-started-with-solo-mining","Getting started with solo mining","2025-07-19",[1097,1098,1099,1115],{"url":1091,"title":1119},{"path":1124,"title":1125,"date":1120,"tags":1126,"category":1089,"featureImage":1127},"\u002Fposts\u002Fwhat-is-bitcoin-mining","What is Bitcoin mining",[1098,1089],{"url":1091,"title":1125},{"path":1129,"title":1130,"date":1120,"tags":1131,"category":1089,"featureImage":1132},"\u002Fposts\u002Fwhat-is-solo-mining","What is solo mining",[1099],{"url":1091,"title":1130},{"path":1134,"title":1135,"date":1136,"tags":1137,"category":1089,"featureImage":1139},"\u002Fposts\u002Fhow-to-run-a-bitcoin-node","How to run a Bitcoin Node with Umbrel Home","2025-07-14",[381,1138],"umbrel",{"url":1091,"title":1140},"How to run a Bitcoin node",{"path":1142,"title":1143,"date":1144,"tags":1145,"category":1007,"featureImage":1146},"\u002Fposts\u002Fhow-to-get-started-with-nostr","How to get started with Nostr","2024-10-09",[1007,1011,1009,1010],{"url":1013,"title":1143},{"path":1148,"title":699,"date":1149,"tags":6,"category":872,"featureImage":1150},"\u002Fposts\u002Fhow-to-use-layouts-and-pages-in-nuxt","2024-10-08",{"url":877,"title":699},{"path":1152,"title":1153,"date":1154,"tags":6,"category":872,"featureImage":1155},"\u002Fposts\u002Fhow-to-add-tailwindcss-to-nuxt","How to add tailwindcss to nuxt","2024-10-07",{"url":877,"title":5},{"path":881,"title":5,"date":873,"tags":6,"category":872,"featureImage":1157},{"url":877,"title":5},{"path":1159,"title":1160,"date":873,"tags":6,"category":872,"featureImage":1161},"\u002Fposts\u002Fhow-to-store-terraform_state-in-digital-ocean-space","How to store Terraform state in DigitalOcean Spaces",{"url":1162,"title":1160},"v1690313893\u002Fterraform-header_ixmkgg",{"path":1164,"title":1165,"date":1166,"tags":6,"category":872,"featureImage":1167},"\u002Fposts\u002Fhow-to-use-terraform-with-digitalocean","How to use Terraform with DigitalOcean","2024-10-05",{"url":1162,"title":1165},{"path":1169,"title":1170,"date":1171,"tags":6,"category":1009,"featureImage":1172},"\u002Fposts\u002Fhow-to-add-fathom-analytics-to-nuxt","How to add Fathom Analytics to Nuxt","2024-07-01",{"url":877,"title":1170},{"path":1174,"title":1175,"date":1171,"tags":6,"category":1009,"featureImage":1176},"\u002Fposts\u002Fimportance-of-privacy-in-web-analytics","The Importance of Privacy in Web Analytics",{"url":1177,"title":1175},"v1690313893\u002Fanalytics_nlew9f",{"path":1179,"title":1180,"date":1171,"tags":1181,"category":1007,"featureImage":1182},"\u002Fposts\u002Fwhat-is-a-nip-07-signer","What is a NIP-07 signer?",[1007,1052,1051,1020],{"url":1013,"title":1180},{"path":1184,"title":1185,"date":1171,"tags":1186,"category":1007,"featureImage":1188},"\u002Fposts\u002Fwhat-is-nostr","What is Nostr?",[1007,1187,1009,1036],"relays",{"url":1013,"title":1185},{"path":1190,"title":1191,"date":1171,"tags":6,"category":1009,"featureImage":1192},"\u002Fposts\u002Fwhy-choose-privacy-focused-analytics","Why choose privacy focused Analytics",{"url":1193,"title":1191},"v1690313893\u002Fblog\u002Ffathom-header_y7s0x2",{"path":1195,"title":1196,"date":1197,"tags":6,"category":872,"featureImage":1198},"\u002Fposts\u002Fwhat-is-api-integration","What is API Integration?","2024-06-04",{"url":1199,"title":1200},"v1719908247\u002Fapi_f3f1mh","What is API integration?",{"path":1202,"title":1203,"date":1204,"tags":1205,"category":1089,"featureImage":1207},"\u002Fposts\u002Fhow-blockchain-uses-cryptography","How Blockchain uses Cryptography","2024-05-18",[1206,1062],"blockchain",{"url":1208,"title":1209},"v1690313893\u002Fblockchain_tfrcrd","What is blockchain?",{"path":1211,"title":1212,"date":1213,"tags":6,"category":872,"featureImage":1214},"\u002Fposts\u002Fhow-to-create-a-websocket-server-in-dotnet","How to create a WebSocket server in dotnet","2024-05-15",{"url":1215,"title":1212},"v1719908486\u002Fwebsockets_pjqtld",{"path":1217,"title":1218,"date":1213,"tags":1219,"category":1089,"featureImage":1220},"\u002Fposts\u002Fwhat-is-blockchain","What is Blockchain",[1206,1089],{"url":1208,"title":1209},{"path":1222,"title":1223,"date":1224,"tags":1225,"category":1089,"featureImage":1227},"\u002Fposts\u002Fintroduction-to-public-and-private-key-cryptography","Public Key Cryptography Explained: A Beginner's Guide","2024-05-12",[1226,1089,1007],"encryption",{"url":1208,"title":1228},"Introduction to public and private key cryptography",{"path":1230,"title":1231,"date":1224,"tags":1232,"category":1089,"featureImage":1233},"\u002Fposts\u002Fwhat-is-bitcoin","What is Bitcoin?",[1206,1089],{"url":1091,"title":1231},{"path":1235,"title":1236,"date":1237,"tags":6,"category":872,"featureImage":1238},"\u002Fposts\u002Fwhat-are-web-sockets","What are Web Sockets","2023-09-06",{"url":1215,"title":1239},"What are Websockets",{"path":1241,"title":1242,"date":1243,"tags":6,"category":872,"featureImage":1244},"\u002Fposts\u002Fwhat-is-api-first","What is API First?","2023-07-13",{"url":1199,"title":1242},{"path":1246,"title":1247,"date":1248,"tags":6,"category":872,"featureImage":1249},"\u002Fposts\u002Fapi-gateway-pattern","API Gateway Pattern","2023-06-10",{"url":1199,"title":1247},{"path":915,"title":914,"date":1248,"tags":6,"category":872,"featureImage":1251},{"url":1199,"title":914},{"path":920,"title":919,"date":1253,"tags":6,"category":872,"featureImage":1254},"2023-06-05",{"url":1199,"title":1255},"API Development",{"path":1257,"title":1258,"date":1253,"tags":6,"category":872,"featureImage":1259},"\u002Fposts\u002Fwhat-is-a-rest-api","What is a REST API?",{"url":1199,"title":1260},"What is an API?",{"path":1262,"title":1260,"date":1263,"tags":6,"category":872,"featureImage":1264},"\u002Fposts\u002Fwhat-is-an-api","2023-06-01",{"url":1199,"title":1260},{"path":1266,"title":1267,"date":1263,"tags":6,"category":872,"featureImage":1268},"\u002Fposts\u002Fwhat-is-api-development","What is API Development ?",{"url":1199,"title":1269},"What is API development?",[1271,1272],{"label":944,"description":945,"icon":946,"to":947},{"label":949,"description":950,"icon":951,"to":952},[1274,1275],{"label":931,"icon":932,"description":933,"to":934},{"label":936,"icon":937,"description":938,"to":939},[1277],{"label":957,"icon":958,"description":959,"to":960},[1279,1282,1285,1288,1291],{"path":1280,"title":1281},"\u002Flegals\u002Fcookie-policy","Cookie Policy",{"path":1283,"title":1284},"\u002Flegals\u002Fcopyright","Copyright",{"path":1286,"title":1287},"\u002Flegals\u002Fcustomer-support","Customer Support",{"path":1289,"title":1290},"\u002Flegals\u002Fprivacy-policy","Privacy Policy",{"path":1292,"title":1293},"\u002Flegals\u002Fterms-of-service","Terms of Service",1793132669312]