[{"data":1,"prerenderedAt":3580},["ShallowReactive",2],{"blog-article-/blog/migrating-nuxt2-nuxt3":3,"blog-surround-/blog/migrating-nuxt2-nuxt3":3571},{"id":4,"title":5,"body":6,"canonical":3555,"date":3556,"description":3557,"extension":3558,"featured":3559,"image":3560,"meta":3561,"navigation":310,"ogImage":3563,"path":3564,"provider":3565,"published":310,"seo":3566,"stem":3567,"tags":3568,"url":3555,"__hash__":3570},"blog/blog/migrating-nuxt2-nuxt3.md","Migrating from Nuxt 2 to Nuxt 3",{"type":7,"value":8,"toc":3523},"minimark",[9,21,24,29,32,61,64,77,92,96,99,114,178,182,185,220,235,239,246,250,258,277,284,348,371,374,452,459,493,511,646,668,895,901,960,964,974,985,989,1009,1026,1038,1095,1098,1102,1115,1131,1141,1250,1254,1257,1260,1264,1267,1281,1293,1427,1431,1446,1507,1511,1518,1534,1540,1592,1605,1661,1664,1668,1676,1692,1695,1724,1730,1778,1784,1876,1880,1883,1899,1920,2022,2029,2089,2093,2103,2130,2135,2138,2183,2190,2228,2232,2243,2344,2351,2404,2408,2411,2520,2530,2612,2624,2628,2646,2808,2812,2815,2824,2856,2860,2867,2903,2906,2968,2972,2983,3149,3152,3279,3283,3297,3326,3329,3391,3395,3402,3405,3408,3413,3417,3443,3452,3456,3469,3476,3485,3489,3519],[10,11,12,13,20],"p",{},"My personal website was built many years ago and had collected quite a large amount of code as I used my site to play around and experiment new features of Nuxt. It took me ages to finally decide to migrate cause lets face it, we all hate migrations. But I finally did it and I'm so glad I did. I'm going to share with you the steps I took to migrate my site from Nuxt 2 to Nuxt 3. My website is open source so feel free to ",[14,15,19],"a",{"href":16,"rel":17},"https://github.com/debs-obrien/debbie.codes",[18],"nofollow","check out my repo or clone it",".",[10,22,23],{},"When I first stared the migration I decided to update my package.json and install Nuxt 3 and try to fix error by error. But this didn't work out too well. There were too many and I couldn't figure out which module was causing the error or if it was something else. So I decided to start from scratch and copy over my code. This worked out much better.",[25,26,28],"h2",{"id":27},"starting-from-scratch","Starting from Scratch",[10,30,31],{},"Now starting from scratch sounds very scary indeed. Like a lot of work and time but actually it wasn't and it proved to be the better method for migration. I created a new branch from the main branch so it included all my code. I then created a folder called \"__nuxt2\" and copied all my code into it. I now had no files or folders at root level except the nuxt2 folder. I then started a new Nuxt project following the instructions from the docs. This gave me a very basic Nuxt 3 project and somewhere to start from.",[33,34,39],"pre",{"className":35,"code":36,"language":37,"meta":38,"style":38},"language-bash shiki shiki-themes github-light github-dark","npx nuxi init nuxt-app\n","bash","",[40,41,42],"code",{"__ignoreMap":38},[43,44,47,51,55,58],"span",{"class":45,"line":46},"line",1,[43,48,50],{"class":49},"sScJk","npx",[43,52,54],{"class":53},"sZZnC"," nuxi",[43,56,57],{"class":53}," init",[43,59,60],{"class":53}," nuxt-app\n",[10,62,63],{},"This command creates a minimal Nuxt app inside a folder called nuxt-app. I then just moved these to root level and deleted the folder. Then I installed the dependencies and started the dev server.",[33,65,67],{"className":35,"code":66,"language":37,"meta":38,"style":38},"npm install\n",[40,68,69],{"__ignoreMap":38},[43,70,71,74],{"class":45,"line":46},[43,72,73],{"class":49},"npm",[43,75,76],{"class":53}," install\n",[33,78,80],{"className":35,"code":79,"language":37,"meta":38,"style":38},"npm run dev\n",[40,81,82],{"__ignoreMap":38},[43,83,84,86,89],{"class":45,"line":46},[43,85,73],{"class":49},[43,87,88],{"class":53}," run",[43,90,91],{"class":53}," dev\n",[25,93,95],{"id":94},"whats-different","What's different?",[10,97,98],{},"I took a look at what had been installed to understand the differences between Nuxt 2 and Nuxt 3. Nuxt 3 is much more stripped back than Nuxt 2 with the idea of adding the folders you need rather than having everything and activating them by putting a file inside. This means by default Nuxt 3 is much smaller and doesn't include the router by default. That also means there is no pages folder by default. By adding the pages folder and putting a file inside it will create the router for you. If you only have one page, for example a landing page then you may not need a pages folder.",[10,100,101,102,105,106,109,110,113],{},"The ",[40,103,104],{},"app.vue"," file is the root of your application and Nuxt renders its contents for every route of the application. You will notice this page comes with a Welcome component that is built into Nuxt meaning you won't find it in the components folder. The first thing I did was remove this component and add my name in a ",[40,107,108],{},"\u003Ch1>"," tag. Once I saw this worked I now knew I needed to add a way to render each page. This is done with the built in ",[40,111,112],{},"\u003CNuxtPage />"," component.",[33,115,119],{"className":116,"code":117,"language":118,"meta":38,"style":38},"language-html shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003Cdiv>\n    \u003CNuxtPage />\n  \u003C/div>\n\u003C/template>\n","html",[40,120,121,134,145,158,168],{"__ignoreMap":38},[43,122,123,127,131],{"class":45,"line":46},[43,124,126],{"class":125},"sVt8B","\u003C",[43,128,130],{"class":129},"s9eBZ","template",[43,132,133],{"class":125},">\n",[43,135,137,140,143],{"class":45,"line":136},2,[43,138,139],{"class":125},"  \u003C",[43,141,142],{"class":129},"div",[43,144,133],{"class":125},[43,146,148,151,155],{"class":45,"line":147},3,[43,149,150],{"class":125},"    \u003C",[43,152,154],{"class":153},"s7hpK","NuxtPage",[43,156,157],{"class":125}," />\n",[43,159,161,164,166],{"class":45,"line":160},4,[43,162,163],{"class":125},"  \u003C/",[43,165,142],{"class":129},[43,167,133],{"class":125},[43,169,171,174,176],{"class":45,"line":170},5,[43,172,173],{"class":125},"\u003C/",[43,175,130],{"class":129},[43,177,133],{"class":125},[25,179,181],{"id":180},"adding-the-pages-folder","Adding the pages folder",[10,183,184],{},"Now in order to see something rendered I needed to create a pages folder and a file called index.vue. I then added the following code to the file. Inside this file I could add my name and test out that it worked.",[33,186,188],{"className":116,"code":187,"language":118,"meta":38,"style":38},"\u003Ctemplate>\n  \u003Ch1>Debbie\u003C/h1>\n\u003C/template>\n",[40,189,190,198,212],{"__ignoreMap":38},[43,191,192,194,196],{"class":45,"line":46},[43,193,126],{"class":125},[43,195,130],{"class":129},[43,197,133],{"class":125},[43,199,200,202,205,208,210],{"class":45,"line":136},[43,201,139],{"class":125},[43,203,204],{"class":129},"h1",[43,206,207],{"class":125},">Debbie\u003C/",[43,209,204],{"class":129},[43,211,133],{"class":125},[43,213,214,216,218],{"class":45,"line":147},[43,215,173],{"class":125},[43,217,130],{"class":129},[43,219,133],{"class":125},[10,221,222,223,226,227,230,231,234],{},"And it worked! I now had my name rendered on the page. I then added a second page called ",[40,224,225],{},"about.vue"," and added some text. I checked routing was working by adding 'about' at the end of ",[40,228,229],{},"http://localhost:3000/about"," in the browser url. This has always been one of my favourite features of Nuxt. No need to setup or understand how routing works. You just have to add ",[40,232,233],{},".vue"," files to the pages folder and thats it.",[25,236,238],{"id":237},"adding-content","Adding content",[10,240,241,242,245],{},"I decided to focus on adding all content to the index page as this page contained many components and also was using Nuxt content to fetch data from my markdown files. First thing I did was copy the contents of my index file from the Nuxt 2 folder into my new index file. I simplified things by commenting out anything in the ",[40,243,244],{},"\u003Cscript>"," tag and any components that relied on the Nuxt Content Module such as the blog post cards and video cards etc. This left me with a very basic page with just text rendered with no formatting and broken images.",[25,247,249],{"id":248},"nuxt-content-module","Nuxt Content Module",[10,251,252,253,20],{},"I decided to work on getting content rendered first. All my content comes from markdown files which are located in a content folder. The Nuxt content module works like a git based CMS making it really easy to write blog posts in markdown or use yaml to create content for video or podcast cards and easily render them throughout the site. The module has a great feature for querying so you can get back only what you need just like if it were stored in a database. I started by copying the content folder from my nuxt 2 folder and pasted it at root level of. I then ",[14,254,257],{"href":255,"rel":256},"https://content.nuxtjs.org/get-started#add-to-a-project",[18],"installed the Nuxt Content Module",[33,259,261],{"className":35,"code":260,"language":37,"meta":38,"style":38},"npm install -D @nuxt/content\n",[40,262,263],{"__ignoreMap":38},[43,264,265,267,270,274],{"class":45,"line":46},[43,266,73],{"class":49},[43,268,269],{"class":53}," install",[43,271,273],{"class":272},"sj4cs"," -D",[43,275,276],{"class":53}," @nuxt/content\n",[10,278,279,280,283],{},"I then added it to the modules array in the ",[40,281,282],{},"nuxt.config.js"," file.",[33,285,289],{"className":286,"code":287,"language":288,"meta":38,"style":38},"language-js shiki shiki-themes github-light github-dark","import { defineNuxtConfig } from 'nuxt'\n\nexport default defineNuxtConfig({\n  modules: [\n    '@nuxt/content'\n  ],\n})\n","js",[40,290,291,306,312,326,331,336,342],{"__ignoreMap":38},[43,292,293,297,300,303],{"class":45,"line":46},[43,294,296],{"class":295},"szBVR","import",[43,298,299],{"class":125}," { defineNuxtConfig } ",[43,301,302],{"class":295},"from",[43,304,305],{"class":53}," 'nuxt'\n",[43,307,308],{"class":45,"line":136},[43,309,311],{"emptyLinePlaceholder":310},true,"\n",[43,313,314,317,320,323],{"class":45,"line":147},[43,315,316],{"class":295},"export",[43,318,319],{"class":295}," default",[43,321,322],{"class":49}," defineNuxtConfig",[43,324,325],{"class":125},"({\n",[43,327,328],{"class":45,"line":160},[43,329,330],{"class":125},"  modules: [\n",[43,332,333],{"class":45,"line":170},[43,334,335],{"class":53},"    '@nuxt/content'\n",[43,337,339],{"class":45,"line":338},6,[43,340,341],{"class":125},"  ],\n",[43,343,345],{"class":45,"line":344},7,[43,346,347],{"class":125},"})\n",[10,349,350,351,354,355,358,359,362,363,368,369,20],{},"Next step was to query some content. There are a few differences between Nuxt content version 1 and version 2 when it comes to querying data. Fetch has changed to ",[40,352,353],{},"find()"," and ",[40,356,357],{},"queryContent"," composable instead of the ",[40,360,361],{},"$content"," variable. I suggest taking a look at the ",[14,364,367],{"href":365,"rel":366},"https://content.nuxtjs.org/guide/displaying/querying",[18],"Nuxt Content docs"," to see examples of using ",[40,370,357],{},[10,372,373],{},"I stared out with a stripped back version of my query in order to just see some data rendered. In my content folder I previously had a folder called articles which I renamed to blog as blog is used as the root path.",[33,375,377],{"className":286,"code":376,"language":288,"meta":38,"style":38},"const { data: articles } = await useAsyncData('articles',\n  () => queryContent('blog')\n    .find()\n)\n",[40,378,379,418,437,448],{"__ignoreMap":38},[43,380,381,384,387,391,394,397,400,403,406,409,412,415],{"class":45,"line":46},[43,382,383],{"class":295},"const",[43,385,386],{"class":125}," { ",[43,388,390],{"class":389},"s4XuR","data",[43,392,393],{"class":125},": ",[43,395,396],{"class":272},"articles",[43,398,399],{"class":125}," } ",[43,401,402],{"class":295},"=",[43,404,405],{"class":295}," await",[43,407,408],{"class":49}," useAsyncData",[43,410,411],{"class":125},"(",[43,413,414],{"class":53},"'articles'",[43,416,417],{"class":125},",\n",[43,419,420,423,426,429,431,434],{"class":45,"line":136},[43,421,422],{"class":125},"  () ",[43,424,425],{"class":295},"=>",[43,427,428],{"class":49}," queryContent",[43,430,411],{"class":125},[43,432,433],{"class":53},"'blog'",[43,435,436],{"class":125},")\n",[43,438,439,442,445],{"class":45,"line":147},[43,440,441],{"class":125},"    .",[43,443,444],{"class":49},"find",[43,446,447],{"class":125},"()\n",[43,449,450],{"class":45,"line":160},[43,451,436],{"class":125},[10,453,454,455,458],{},"Then in the template I added a ",[40,456,457],{},"\u003Cpre>"," tag to render the data.",[33,460,462],{"className":116,"code":461,"language":118,"meta":38,"style":38},"\u003Ctemplate>\n  \u003Cpre>{{ articles }}\u003C/pre>\n\u003C/template>\n",[40,463,464,472,485],{"__ignoreMap":38},[43,465,466,468,470],{"class":45,"line":46},[43,467,126],{"class":125},[43,469,130],{"class":129},[43,471,133],{"class":125},[43,473,474,476,478,481,483],{"class":45,"line":136},[43,475,139],{"class":125},[43,477,33],{"class":129},[43,479,480],{"class":125},">{{ articles }}\u003C/",[43,482,33],{"class":129},[43,484,133],{"class":125},[43,486,487,489,491],{"class":45,"line":147},[43,488,173],{"class":125},[43,490,130],{"class":129},[43,492,133],{"class":125},[10,494,495,496,499,500,502,503,506,507,510],{},"Once I saw I had some data back I then improved the query to only get back the data I needed. The ",[40,497,498],{},"sort()"," method is a little bit different than before and the ",[40,501,353],{}," method has changed to a ",[40,504,505],{},"fetch()"," method but the rest was the same. Also make sure you add a key as the first argument to the ",[40,508,509],{},"useAsyncData()"," function.",[33,512,514],{"className":286,"code":513,"language":288,"meta":38,"style":38},"const { data: articles } = await useAsyncData('articles',\n  () => queryContent('blog')\n    .where({ published: { $ne: false } })\n    .without('body')\n    .skip(1)\n    .sort({ date: -1 })\n    .limit(6)\n    .find()\n)\n",[40,515,516,542,556,572,586,600,618,632,641],{"__ignoreMap":38},[43,517,518,520,522,524,526,528,530,532,534,536,538,540],{"class":45,"line":46},[43,519,383],{"class":295},[43,521,386],{"class":125},[43,523,390],{"class":389},[43,525,393],{"class":125},[43,527,396],{"class":272},[43,529,399],{"class":125},[43,531,402],{"class":295},[43,533,405],{"class":295},[43,535,408],{"class":49},[43,537,411],{"class":125},[43,539,414],{"class":53},[43,541,417],{"class":125},[43,543,544,546,548,550,552,554],{"class":45,"line":136},[43,545,422],{"class":125},[43,547,425],{"class":295},[43,549,428],{"class":49},[43,551,411],{"class":125},[43,553,433],{"class":53},[43,555,436],{"class":125},[43,557,558,560,563,566,569],{"class":45,"line":147},[43,559,441],{"class":125},[43,561,562],{"class":49},"where",[43,564,565],{"class":125},"({ published: { $ne: ",[43,567,568],{"class":272},"false",[43,570,571],{"class":125}," } })\n",[43,573,574,576,579,581,584],{"class":45,"line":160},[43,575,441],{"class":125},[43,577,578],{"class":49},"without",[43,580,411],{"class":125},[43,582,583],{"class":53},"'body'",[43,585,436],{"class":125},[43,587,588,590,593,595,598],{"class":45,"line":170},[43,589,441],{"class":125},[43,591,592],{"class":49},"skip",[43,594,411],{"class":125},[43,596,597],{"class":272},"1",[43,599,436],{"class":125},[43,601,602,604,607,610,613,615],{"class":45,"line":338},[43,603,441],{"class":125},[43,605,606],{"class":49},"sort",[43,608,609],{"class":125},"({ date: ",[43,611,612],{"class":295},"-",[43,614,597],{"class":272},[43,616,617],{"class":125}," })\n",[43,619,620,622,625,627,630],{"class":45,"line":344},[43,621,441],{"class":125},[43,623,624],{"class":49},"limit",[43,626,411],{"class":125},[43,628,629],{"class":272},"6",[43,631,436],{"class":125},[43,633,635,637,639],{"class":45,"line":634},8,[43,636,441],{"class":125},[43,638,444],{"class":49},[43,640,447],{"class":125},[43,642,644],{"class":45,"line":643},9,[43,645,436],{"class":125},[10,647,648,649,652,653,655,656,354,659,661,662,664,665,667],{},"I now had just the data from the ",[40,650,651],{},"yaml"," part of my markdown files so I uncommented out the rest of my queries changing the ",[40,654,361],{}," variable to ",[40,657,658],{},"queryContent()",[40,660,505],{}," to ",[40,663,353],{}," and refactoring the ",[40,666,498],{}," method.",[33,669,671],{"className":286,"code":670,"language":288,"meta":38,"style":38},"const { data: videos } = await useAsyncData('videos',\n  () => queryContent('videos')\n    .where({ published: { $ne: false } })\n    .without('body')\n    .sort({ date: -1 })\n    .limit(4)\n    .find()\n)\n\nconst { data: podcasts } = await useAsyncData('podcasts',\n  () => queryContent('podcasts')\n    .where({ published: { $ne: false } })\n    .without('body')\n    .sort({ date: -1 })\n    .limit(3)\n    .find()\n)\n",[40,672,673,701,715,727,739,753,766,774,778,782,811,826,839,852,867,881,890],{"__ignoreMap":38},[43,674,675,677,679,681,683,686,688,690,692,694,696,699],{"class":45,"line":46},[43,676,383],{"class":295},[43,678,386],{"class":125},[43,680,390],{"class":389},[43,682,393],{"class":125},[43,684,685],{"class":272},"videos",[43,687,399],{"class":125},[43,689,402],{"class":295},[43,691,405],{"class":295},[43,693,408],{"class":49},[43,695,411],{"class":125},[43,697,698],{"class":53},"'videos'",[43,700,417],{"class":125},[43,702,703,705,707,709,711,713],{"class":45,"line":136},[43,704,422],{"class":125},[43,706,425],{"class":295},[43,708,428],{"class":49},[43,710,411],{"class":125},[43,712,698],{"class":53},[43,714,436],{"class":125},[43,716,717,719,721,723,725],{"class":45,"line":147},[43,718,441],{"class":125},[43,720,562],{"class":49},[43,722,565],{"class":125},[43,724,568],{"class":272},[43,726,571],{"class":125},[43,728,729,731,733,735,737],{"class":45,"line":160},[43,730,441],{"class":125},[43,732,578],{"class":49},[43,734,411],{"class":125},[43,736,583],{"class":53},[43,738,436],{"class":125},[43,740,741,743,745,747,749,751],{"class":45,"line":170},[43,742,441],{"class":125},[43,744,606],{"class":49},[43,746,609],{"class":125},[43,748,612],{"class":295},[43,750,597],{"class":272},[43,752,617],{"class":125},[43,754,755,757,759,761,764],{"class":45,"line":338},[43,756,441],{"class":125},[43,758,624],{"class":49},[43,760,411],{"class":125},[43,762,763],{"class":272},"4",[43,765,436],{"class":125},[43,767,768,770,772],{"class":45,"line":344},[43,769,441],{"class":125},[43,771,444],{"class":49},[43,773,447],{"class":125},[43,775,776],{"class":45,"line":634},[43,777,436],{"class":125},[43,779,780],{"class":45,"line":643},[43,781,311],{"emptyLinePlaceholder":310},[43,783,785,787,789,791,793,796,798,800,802,804,806,809],{"class":45,"line":784},10,[43,786,383],{"class":295},[43,788,386],{"class":125},[43,790,390],{"class":389},[43,792,393],{"class":125},[43,794,795],{"class":272},"podcasts",[43,797,399],{"class":125},[43,799,402],{"class":295},[43,801,405],{"class":295},[43,803,408],{"class":49},[43,805,411],{"class":125},[43,807,808],{"class":53},"'podcasts'",[43,810,417],{"class":125},[43,812,814,816,818,820,822,824],{"class":45,"line":813},11,[43,815,422],{"class":125},[43,817,425],{"class":295},[43,819,428],{"class":49},[43,821,411],{"class":125},[43,823,808],{"class":53},[43,825,436],{"class":125},[43,827,829,831,833,835,837],{"class":45,"line":828},12,[43,830,441],{"class":125},[43,832,562],{"class":49},[43,834,565],{"class":125},[43,836,568],{"class":272},[43,838,571],{"class":125},[43,840,842,844,846,848,850],{"class":45,"line":841},13,[43,843,441],{"class":125},[43,845,578],{"class":49},[43,847,411],{"class":125},[43,849,583],{"class":53},[43,851,436],{"class":125},[43,853,855,857,859,861,863,865],{"class":45,"line":854},14,[43,856,441],{"class":125},[43,858,606],{"class":49},[43,860,609],{"class":125},[43,862,612],{"class":295},[43,864,597],{"class":272},[43,866,617],{"class":125},[43,868,870,872,874,876,879],{"class":45,"line":869},15,[43,871,441],{"class":125},[43,873,624],{"class":49},[43,875,411],{"class":125},[43,877,878],{"class":272},"3",[43,880,436],{"class":125},[43,882,884,886,888],{"class":45,"line":883},16,[43,885,441],{"class":125},[43,887,444],{"class":49},[43,889,447],{"class":125},[43,891,893],{"class":45,"line":892},17,[43,894,436],{"class":125},[10,896,897,898,900],{},"I then added a ",[40,899,457],{}," tag to render each query.",[33,902,904],{"className":116,"code":903,"language":118,"meta":38,"style":38},"\u003Ctemplate>\n  \u003Cpre>{{ articles }}\u003C/pre>\n  \u003Cpre>{{ podcasts }}\u003C/pre>\n  \u003Cpre>{{ videos }}\u003C/pre>\n\u003C/template>\n",[40,905,906,914,926,939,952],{"__ignoreMap":38},[43,907,908,910,912],{"class":45,"line":46},[43,909,126],{"class":125},[43,911,130],{"class":129},[43,913,133],{"class":125},[43,915,916,918,920,922,924],{"class":45,"line":136},[43,917,139],{"class":125},[43,919,33],{"class":129},[43,921,480],{"class":125},[43,923,33],{"class":129},[43,925,133],{"class":125},[43,927,928,930,932,935,937],{"class":45,"line":147},[43,929,139],{"class":125},[43,931,33],{"class":129},[43,933,934],{"class":125},">{{ podcasts }}\u003C/",[43,936,33],{"class":129},[43,938,133],{"class":125},[43,940,941,943,945,948,950],{"class":45,"line":160},[43,942,139],{"class":125},[43,944,33],{"class":129},[43,946,947],{"class":125},">{{ videos }}\u003C/",[43,949,33],{"class":129},[43,951,133],{"class":125},[43,953,954,956,958],{"class":45,"line":170},[43,955,173],{"class":125},[43,957,130],{"class":129},[43,959,133],{"class":125},[25,961,963],{"id":962},"adding-components","Adding components",[10,965,966,967,970,971,973],{},"Next step was to add the components so that they could be rendered correctly. I copied over only the components I needed from my Nuxt 2 folder starting with the BlogPostCard component, VideoCard component and PodcastCard component. I then uncommented out the components from the ",[40,968,969],{},"index.vue"," file and removed the ",[40,972,457],{}," tags. Things now looked a little tidier on the page but were still super ugly as I had no styling added yet. I also had some title components which I copied to the components folder and then uncommented out the code so they could also be rendered.",[975,976,977],"blockquote",{},[10,978,979,980,20],{},"The great thing about Nuxt 3 is that once I add a component to the components folder I can just use it directly in any of my pages without having to import it or add any module. It just works thanks to ",[14,981,984],{"href":982,"rel":983},"https://nuxt.com/docs/guide/concepts/auto-imports",[18],"Nuxt's auto imports",[25,986,988],{"id":987},"adding-styling","Adding styling",[10,990,991,992,995,996,999,1000,1003,1004,20],{},"I now had a super ugly page with all the content rendered but it was time to add some styling. I first created an ",[40,993,994],{},"assets"," folder and then copied over the ",[40,997,998],{},"main.css"," file from my Nuxt 2 folder. I then copied over my ",[40,1001,1002],{},"tailwind.config.js"," file and installed ",[14,1005,1008],{"href":1006,"rel":1007},"https://tailwindcss.com/",[18],"Tailwind",[33,1010,1012],{"className":35,"code":1011,"language":37,"meta":38,"style":38},"npm i -D @nuxtjs/tailwindcss\n",[40,1013,1014],{"__ignoreMap":38},[43,1015,1016,1018,1021,1023],{"class":45,"line":46},[43,1017,73],{"class":49},[43,1019,1020],{"class":53}," i",[43,1022,273],{"class":272},[43,1024,1025],{"class":53}," @nuxtjs/tailwindcss\n",[10,1027,1028,1029,1032,1033,1035,1036,283],{},"Next I added the ",[40,1030,1031],{},"@nuxtjs/tailwindcss"," module to the ",[40,1034,282],{}," file as well as the css array with the path to my ",[40,1037,998],{},[33,1039,1041],{"className":286,"code":1040,"language":288,"meta":38,"style":38},"export default defineNuxtConfig({\n  modules: [\n    '@nuxtjs/tailwindcss',\n    '@nuxt/content',\n  ],\n  css: [\n    '~/assets/css/main.css',\n  ],\n})\n",[40,1042,1043,1053,1057,1064,1071,1075,1080,1087,1091],{"__ignoreMap":38},[43,1044,1045,1047,1049,1051],{"class":45,"line":46},[43,1046,316],{"class":295},[43,1048,319],{"class":295},[43,1050,322],{"class":49},[43,1052,325],{"class":125},[43,1054,1055],{"class":45,"line":136},[43,1056,330],{"class":125},[43,1058,1059,1062],{"class":45,"line":147},[43,1060,1061],{"class":53},"    '@nuxtjs/tailwindcss'",[43,1063,417],{"class":125},[43,1065,1066,1069],{"class":45,"line":160},[43,1067,1068],{"class":53},"    '@nuxt/content'",[43,1070,417],{"class":125},[43,1072,1073],{"class":45,"line":170},[43,1074,341],{"class":125},[43,1076,1077],{"class":45,"line":338},[43,1078,1079],{"class":125},"  css: [\n",[43,1081,1082,1085],{"class":45,"line":344},[43,1083,1084],{"class":53},"    '~/assets/css/main.css'",[43,1086,417],{"class":125},[43,1088,1089],{"class":45,"line":634},[43,1090,341],{"class":125},[43,1092,1093],{"class":45,"line":643},[43,1094,347],{"class":125},[10,1096,1097],{},"I now had all styles working and the home page was looking pretty good indeed.",[25,1099,1101],{"id":1100},"nuxt-image-module","Nuxt Image Module",[10,1103,1104,1105,1109,1110,1114],{},"In order to render the images I had previously been using the ",[14,1106,1101],{"href":1107,"rel":1108},"https://image.nuxtjs.org/",[18]," for ",[14,1111,1113],{"href":1112},"/blog/nuxt-image","enhanced performance"," so I needed to install it. This module is still on the edge version but it seems to work just fine.",[33,1116,1118],{"className":35,"code":1117,"language":37,"meta":38,"style":38},"npm i -D @nuxt/image-edge\n",[40,1119,1120],{"__ignoreMap":38},[43,1121,1122,1124,1126,1128],{"class":45,"line":46},[43,1123,73],{"class":49},[43,1125,1020],{"class":53},[43,1127,273],{"class":272},[43,1129,1130],{"class":53}," @nuxt/image-edge\n",[10,1132,1133,1134,1136,1137,1140],{},"Once installed I added it to the modules array in the ",[40,1135,282],{}," file and copied my configuration for the module from my ",[40,1138,1139],{},"nuxt.config"," file in my Nuxt 2 folder. Ths included adding my cloudinary baseURL and imgix baseURL as these were the two cloud providers I was using.",[33,1142,1144],{"className":286,"code":1143,"language":288,"meta":38,"style":38},"export default defineNuxtConfig({\n  modules: [\n    '@nuxt/image-edge',\n    '@nuxtjs/tailwindcss',\n    '@nuxt/content',\n  ],\n  css: [\n    '~/assets/css/main.css',\n  ],\n  image: {\n    cloudinary: {\n      baseURL: 'https://res.cloudinary.com/debsobrien/image/upload/',\n    },\n    imgix: {\n      baseURL: 'https://images.unsplash.com/',\n    },\n  },\n})\n",[40,1145,1146,1156,1160,1167,1173,1179,1183,1187,1193,1197,1202,1207,1217,1222,1227,1236,1240,1245],{"__ignoreMap":38},[43,1147,1148,1150,1152,1154],{"class":45,"line":46},[43,1149,316],{"class":295},[43,1151,319],{"class":295},[43,1153,322],{"class":49},[43,1155,325],{"class":125},[43,1157,1158],{"class":45,"line":136},[43,1159,330],{"class":125},[43,1161,1162,1165],{"class":45,"line":147},[43,1163,1164],{"class":53},"    '@nuxt/image-edge'",[43,1166,417],{"class":125},[43,1168,1169,1171],{"class":45,"line":160},[43,1170,1061],{"class":53},[43,1172,417],{"class":125},[43,1174,1175,1177],{"class":45,"line":170},[43,1176,1068],{"class":53},[43,1178,417],{"class":125},[43,1180,1181],{"class":45,"line":338},[43,1182,341],{"class":125},[43,1184,1185],{"class":45,"line":344},[43,1186,1079],{"class":125},[43,1188,1189,1191],{"class":45,"line":634},[43,1190,1084],{"class":53},[43,1192,417],{"class":125},[43,1194,1195],{"class":45,"line":643},[43,1196,341],{"class":125},[43,1198,1199],{"class":45,"line":784},[43,1200,1201],{"class":125},"  image: {\n",[43,1203,1204],{"class":45,"line":813},[43,1205,1206],{"class":125},"    cloudinary: {\n",[43,1208,1209,1212,1215],{"class":45,"line":828},[43,1210,1211],{"class":125},"      baseURL: ",[43,1213,1214],{"class":53},"'https://res.cloudinary.com/debsobrien/image/upload/'",[43,1216,417],{"class":125},[43,1218,1219],{"class":45,"line":841},[43,1220,1221],{"class":125},"    },\n",[43,1223,1224],{"class":45,"line":854},[43,1225,1226],{"class":125},"    imgix: {\n",[43,1228,1229,1231,1234],{"class":45,"line":869},[43,1230,1211],{"class":125},[43,1232,1233],{"class":53},"'https://images.unsplash.com/'",[43,1235,417],{"class":125},[43,1237,1238],{"class":45,"line":883},[43,1239,1221],{"class":125},[43,1241,1242],{"class":45,"line":892},[43,1243,1244],{"class":125},"  },\n",[43,1246,1248],{"class":45,"line":1247},18,[43,1249,347],{"class":125},[25,1251,1253],{"id":1252},"header-and-footer","Header and Footer",[10,1255,1256],{},"I now had images rendered and a pretty good looking home page. Next step was to add the header and footer components to have a complete looking page. I started by copying the header, footer and Navigation component into my Nuxt 3 folder and then uncommenting them on the home page. As mentioned before adding components to the components folder makes them available on any page with no need to import them in your file and no module needed as it's built in to Nuxt 3.",[10,1258,1259],{},"The header component was pretty straight forward but the footer component included svgs that were using a module. I decided to not use the svg module for now and just convert my social icons into Vue components and add them to an Icon folder inside the components folder. I could then just use these icon components like any other vue component.",[25,1261,1263],{"id":1262},"pages-and-dynamic-routes","Pages and dynamic routes",[10,1265,1266],{},"The home page was pretty much complete but none of the links in the Navigation worked as I didn't have any pages yet in my pages folder except the about page I previously created. Nuxt does all the work for you when it comes to routing so the only thing you have to do is add the pages into the pages folder. I copied over the missing pages for the blog, podcasts and videos etc. As these pages all query the content folder I refactored the query to use Convent v2 just like I had done on the home page.",[10,1268,1269,1270,1273,1274,1277,1278,1280],{},"The main difference was dynamic pages. This had changed and now the dynamic page is wrapped in square brackets, ",[40,1271,1272],{},"[slug].vue"," instead of the ",[40,1275,1276],{},"_slug.vue",". I took this opportunity to refactor the way I was handing the blog categories and remove pagination in favour of adding more categories and improving the filtering. This was done by creating a ",[40,1279,1272],{}," page in a tags folder so that I could have a page for each tag such as a page for 'nuxt', 'testing' etc. I also added all videos into one content folder called videos and added categories and the tags component to all other similar pages.",[10,1282,1283,1284,1287,1288,1290,1291,510],{},"When working with params in Nuxt 3 we have a ",[40,1285,1286],{},"useRoute()"," composeable. For the data call make sure you add a unique key to your ",[40,1289,509],{}," so that the change in slug changes the value of the call. This gets passed in as the first argument to the ",[40,1292,509],{},[33,1294,1296],{"className":286,"code":1295,"language":288,"meta":38,"style":38},"const {\n  params: { slug },\n} = useRoute()\n\nconst { data: articles } = await useAsyncData(`articles-${slug}`,\n  () => queryContent\u003CBlogPost>('blog')\n    .where({ published: { $ne: false }, tags: { $contains: slug } })\n    .sort({ date: -1 })\n    .find(),\n)\n",[40,1297,1298,1305,1319,1331,1335,1367,1387,1400,1414,1423],{"__ignoreMap":38},[43,1299,1300,1302],{"class":45,"line":46},[43,1301,383],{"class":295},[43,1303,1304],{"class":125}," {\n",[43,1306,1307,1310,1313,1316],{"class":45,"line":136},[43,1308,1309],{"class":389},"  params",[43,1311,1312],{"class":125},": { ",[43,1314,1315],{"class":272},"slug",[43,1317,1318],{"class":125}," },\n",[43,1320,1321,1324,1326,1329],{"class":45,"line":147},[43,1322,1323],{"class":125},"} ",[43,1325,402],{"class":295},[43,1327,1328],{"class":49}," useRoute",[43,1330,447],{"class":125},[43,1332,1333],{"class":45,"line":160},[43,1334,311],{"emptyLinePlaceholder":310},[43,1336,1337,1339,1341,1343,1345,1347,1349,1351,1353,1355,1357,1360,1362,1365],{"class":45,"line":170},[43,1338,383],{"class":295},[43,1340,386],{"class":125},[43,1342,390],{"class":389},[43,1344,393],{"class":125},[43,1346,396],{"class":272},[43,1348,399],{"class":125},[43,1350,402],{"class":295},[43,1352,405],{"class":295},[43,1354,408],{"class":49},[43,1356,411],{"class":125},[43,1358,1359],{"class":53},"`articles-${",[43,1361,1315],{"class":125},[43,1363,1364],{"class":53},"}`",[43,1366,417],{"class":125},[43,1368,1369,1371,1373,1375,1377,1380,1383,1385],{"class":45,"line":338},[43,1370,422],{"class":125},[43,1372,425],{"class":295},[43,1374,428],{"class":49},[43,1376,126],{"class":125},[43,1378,1379],{"class":49},"BlogPost",[43,1381,1382],{"class":125},">(",[43,1384,433],{"class":53},[43,1386,436],{"class":125},[43,1388,1389,1391,1393,1395,1397],{"class":45,"line":344},[43,1390,441],{"class":125},[43,1392,562],{"class":49},[43,1394,565],{"class":125},[43,1396,568],{"class":272},[43,1398,1399],{"class":125}," }, tags: { $contains: slug } })\n",[43,1401,1402,1404,1406,1408,1410,1412],{"class":45,"line":634},[43,1403,441],{"class":125},[43,1405,606],{"class":49},[43,1407,609],{"class":125},[43,1409,612],{"class":295},[43,1411,597],{"class":272},[43,1413,617],{"class":125},[43,1415,1416,1418,1420],{"class":45,"line":643},[43,1417,441],{"class":125},[43,1419,444],{"class":49},[43,1421,1422],{"class":125},"(),\n",[43,1424,1425],{"class":45,"line":784},[43,1426,436],{"class":125},[25,1428,1430],{"id":1429},"rendering-markdown-content","Rendering markdown content",[10,1432,1433,1434,1441,1442,1445],{},"There were also some small difference when rending the blog page and there is now a new component to render the markdown content called ",[14,1435,1438],{"href":1436,"rel":1437},"https://content.nuxtjs.org/guide/displaying/rendering#contentrenderer-",[18],[40,1439,1440],{},"ContentRenderer"," passing in your data into the ",[40,1443,1444],{},"value"," prop.",[33,1447,1449],{"className":116,"code":1448,"language":118,"meta":38,"style":38},"\u003CContentRenderer :value=\"article\">\n  \u003Ctemplate #empty>\n    \u003Cp>No content found.\u003C/p>\n  \u003C/template>\n\u003C/ContentRenderer>\n",[40,1450,1451,1467,1478,1491,1499],{"__ignoreMap":38},[43,1452,1453,1455,1457,1460,1462,1465],{"class":45,"line":46},[43,1454,126],{"class":125},[43,1456,1440],{"class":153},[43,1458,1459],{"class":49}," :value",[43,1461,402],{"class":125},[43,1463,1464],{"class":53},"\"article\"",[43,1466,133],{"class":125},[43,1468,1469,1471,1473,1476],{"class":45,"line":136},[43,1470,139],{"class":125},[43,1472,130],{"class":129},[43,1474,1475],{"class":49}," #empty",[43,1477,133],{"class":125},[43,1479,1480,1482,1484,1487,1489],{"class":45,"line":147},[43,1481,150],{"class":125},[43,1483,10],{"class":129},[43,1485,1486],{"class":125},">No content found.\u003C/",[43,1488,10],{"class":129},[43,1490,133],{"class":125},[43,1492,1493,1495,1497],{"class":45,"line":160},[43,1494,163],{"class":125},[43,1496,130],{"class":129},[43,1498,133],{"class":125},[43,1500,1501,1503,1505],{"class":45,"line":170},[43,1502,173],{"class":125},[43,1504,1440],{"class":153},[43,1506,133],{"class":125},[25,1508,1510],{"id":1509},"styling-the-blog-page","Styling the blog page",[10,1512,1513,1514,1517],{},"To easily style the main blog article I used the ",[40,1515,1516],{},"@tailwindcss/typography"," plugin just like before. I first installed it.",[33,1519,1521],{"className":35,"code":1520,"language":37,"meta":38,"style":38},"npm i -D @tailwindcss/typography\n",[40,1522,1523],{"__ignoreMap":38},[43,1524,1525,1527,1529,1531],{"class":45,"line":46},[43,1526,73],{"class":49},[43,1528,1020],{"class":53},[43,1530,273],{"class":272},[43,1532,1533],{"class":53}," @tailwindcss/typography\n",[10,1535,1536,1537,1539],{},"I already had this plugin added to my plugins array in the ",[40,1538,1002],{}," file as I had copied over the whole config file and was previously using this for styling markdown content.",[33,1541,1543],{"className":286,"code":1542,"language":288,"meta":38,"style":38},"module.exports = {\n  ..\n  plugins: [\n    require('@tailwindcss/typography'),\n  ],\n}\n",[40,1544,1545,1560,1565,1570,1583,1587],{"__ignoreMap":38},[43,1546,1547,1550,1552,1555,1558],{"class":45,"line":46},[43,1548,1549],{"class":272},"module",[43,1551,20],{"class":125},[43,1553,1554],{"class":272},"exports",[43,1556,1557],{"class":295}," =",[43,1559,1304],{"class":125},[43,1561,1562],{"class":45,"line":136},[43,1563,1564],{"class":125},"  ..\n",[43,1566,1567],{"class":45,"line":147},[43,1568,1569],{"class":125},"  plugins: [\n",[43,1571,1572,1575,1577,1580],{"class":45,"line":160},[43,1573,1574],{"class":49},"    require",[43,1576,411],{"class":125},[43,1578,1579],{"class":53},"'@tailwindcss/typography'",[43,1581,1582],{"class":125},"),\n",[43,1584,1585],{"class":45,"line":170},[43,1586,341],{"class":125},[43,1588,1589],{"class":45,"line":338},[43,1590,1591],{"class":125},"}\n",[10,1593,1594,1595,1598,1599,1602,1603,283],{},"For syntax highlighting of the codeblocks I added the ",[40,1596,1597],{},"material-palenight"," theme by adding the theme to the ",[40,1600,1601],{},"content"," object in the ",[40,1604,282],{},[33,1606,1608],{"className":286,"code":1607,"language":288,"meta":38,"style":38},"export default defineNuxtConfig({\n//...\n content: {\n    highlight: {\n      theme: 'github-dark'\n    },\n  },\n  //...\n})\n",[40,1609,1610,1620,1626,1631,1636,1644,1648,1652,1657],{"__ignoreMap":38},[43,1611,1612,1614,1616,1618],{"class":45,"line":46},[43,1613,316],{"class":295},[43,1615,319],{"class":295},[43,1617,322],{"class":49},[43,1619,325],{"class":125},[43,1621,1622],{"class":45,"line":136},[43,1623,1625],{"class":1624},"sJ8bj","//...\n",[43,1627,1628],{"class":45,"line":147},[43,1629,1630],{"class":125}," content: {\n",[43,1632,1633],{"class":45,"line":160},[43,1634,1635],{"class":125},"    highlight: {\n",[43,1637,1638,1641],{"class":45,"line":170},[43,1639,1640],{"class":125},"      theme: ",[43,1642,1643],{"class":53},"'github-dark'\n",[43,1645,1646],{"class":45,"line":338},[43,1647,1221],{"class":125},[43,1649,1650],{"class":45,"line":344},[43,1651,1244],{"class":125},[43,1653,1654],{"class":45,"line":634},[43,1655,1656],{"class":1624},"  //...\n",[43,1658,1659],{"class":45,"line":643},[43,1660,347],{"class":125},[10,1662,1663],{},"The blog page now looked pretty good although I did make some extra changes to it and improved the previous and next component as well as adding the table of contents component and a better heading for the page complete with an image and tags.",[25,1665,1667],{"id":1666},"youtube-lite-plugin","Youtube lite plugin",[10,1669,1670,1671,1675],{},"My videos were all using the ",[14,1672,1674],{"href":1673},"/blog/nuxt-lite-youtube-embeds","youtube lite plugin"," which enhances performance when loading lots of youtube videos. In order to get this working I first needed to install the npm package.",[33,1677,1679],{"className":35,"code":1678,"language":37,"meta":38,"style":38},"npm i -D lite-youtube-embed\n",[40,1680,1681],{"__ignoreMap":38},[43,1682,1683,1685,1687,1689],{"class":45,"line":46},[43,1684,73],{"class":49},[43,1686,1020],{"class":53},[43,1688,273],{"class":272},[43,1690,1691],{"class":53}," lite-youtube-embed\n",[10,1693,1694],{},"I then created a plugins folder and added the youtube lite plugin to it.",[33,1696,1698],{"className":286,"code":1697,"language":288,"meta":38,"style":38},"import 'lite-youtube-embed'\nexport default defineNuxtPlugin(() => {})\n",[40,1699,1700,1707],{"__ignoreMap":38},[43,1701,1702,1704],{"class":45,"line":46},[43,1703,296],{"class":295},[43,1705,1706],{"class":53}," 'lite-youtube-embed'\n",[43,1708,1709,1711,1713,1716,1719,1721],{"class":45,"line":136},[43,1710,316],{"class":295},[43,1712,319],{"class":295},[43,1714,1715],{"class":49}," defineNuxtPlugin",[43,1717,1718],{"class":125},"(() ",[43,1720,425],{"class":295},[43,1722,1723],{"class":125}," {})\n",[10,1725,1726,1727,1729],{},"In Nuxt 3 plugins are automatically imported which is very cool indeed, so I didn't have to add it to the ",[40,1728,282],{}," file. However I did need to add the CSS for the plugin to the css array in the config.",[33,1731,1733],{"className":286,"code":1732,"language":288,"meta":38,"style":38},"export default defineNuxtConfig({\n  //...\n  css: [\n    '~/assets/css/main.css',\n    '~/node_modules/lite-youtube-embed/src/lite-yt-embed.css',\n  ],\n  //...\n})\n",[40,1734,1735,1745,1749,1753,1759,1766,1770,1774],{"__ignoreMap":38},[43,1736,1737,1739,1741,1743],{"class":45,"line":46},[43,1738,316],{"class":295},[43,1740,319],{"class":295},[43,1742,322],{"class":49},[43,1744,325],{"class":125},[43,1746,1747],{"class":45,"line":136},[43,1748,1656],{"class":1624},[43,1750,1751],{"class":45,"line":147},[43,1752,1079],{"class":125},[43,1754,1755,1757],{"class":45,"line":160},[43,1756,1084],{"class":53},[43,1758,417],{"class":125},[43,1760,1761,1764],{"class":45,"line":170},[43,1762,1763],{"class":53},"    '~/node_modules/lite-youtube-embed/src/lite-yt-embed.css'",[43,1765,417],{"class":125},[43,1767,1768],{"class":45,"line":338},[43,1769,341],{"class":125},[43,1771,1772],{"class":45,"line":344},[43,1773,1656],{"class":1624},[43,1775,1776],{"class":45,"line":634},[43,1777,347],{"class":125},[10,1779,1780,1781,1783],{},"I then needed to add the following to the ",[40,1782,282],{}," file so that the component could be transpiled correctly as this was a custom element.",[33,1785,1787],{"className":286,"code":1786,"language":288,"meta":38,"style":38},"export default defineNuxtConfig({\n  //...\n  build: {\n    transpile: ['lite-youtube'],\n  },\n  vue: {\n    compilerOptions: {\n      isCustomElement: tag => ['lite-youtube'].includes(tag),\n    },\n  },\n  //...\n})\n",[40,1788,1789,1799,1803,1808,1819,1823,1828,1833,1860,1864,1868,1872],{"__ignoreMap":38},[43,1790,1791,1793,1795,1797],{"class":45,"line":46},[43,1792,316],{"class":295},[43,1794,319],{"class":295},[43,1796,322],{"class":49},[43,1798,325],{"class":125},[43,1800,1801],{"class":45,"line":136},[43,1802,1656],{"class":1624},[43,1804,1805],{"class":45,"line":147},[43,1806,1807],{"class":125},"  build: {\n",[43,1809,1810,1813,1816],{"class":45,"line":160},[43,1811,1812],{"class":125},"    transpile: [",[43,1814,1815],{"class":53},"'lite-youtube'",[43,1817,1818],{"class":125},"],\n",[43,1820,1821],{"class":45,"line":170},[43,1822,1244],{"class":125},[43,1824,1825],{"class":45,"line":338},[43,1826,1827],{"class":125},"  vue: {\n",[43,1829,1830],{"class":45,"line":344},[43,1831,1832],{"class":125},"    compilerOptions: {\n",[43,1834,1835,1838,1840,1843,1846,1849,1851,1854,1857],{"class":45,"line":634},[43,1836,1837],{"class":49},"      isCustomElement",[43,1839,393],{"class":125},[43,1841,1842],{"class":389},"tag",[43,1844,1845],{"class":295}," =>",[43,1847,1848],{"class":125}," [",[43,1850,1815],{"class":53},[43,1852,1853],{"class":125},"].",[43,1855,1856],{"class":49},"includes",[43,1858,1859],{"class":125},"(tag),\n",[43,1861,1862],{"class":45,"line":643},[43,1863,1221],{"class":125},[43,1865,1866],{"class":45,"line":784},[43,1867,1244],{"class":125},[43,1869,1870],{"class":45,"line":813},[43,1871,1656],{"class":1624},[43,1873,1874],{"class":45,"line":828},[43,1875,347],{"class":125},[25,1877,1879],{"id":1878},"color-mode-module","Color mode module",[10,1881,1882],{},"The color module had changed a little from Nuxt 2 to Nuxt 3. I started by first installing the module.",[33,1884,1886],{"className":35,"code":1885,"language":37,"meta":38,"style":38},"npm i -D @nuxtjs/color-mode\n",[40,1887,1888],{"__ignoreMap":38},[43,1889,1890,1892,1894,1896],{"class":45,"line":46},[43,1891,73],{"class":49},[43,1893,1020],{"class":53},[43,1895,273],{"class":272},[43,1897,1898],{"class":53}," @nuxtjs/color-mode\n",[10,1900,1901,1902,1904,1905,1908,1909,1912,1913,354,1916,1919],{},"I then added the module to the ",[40,1903,282],{}," file and added the configuration for the module. This consisted of adding the ",[40,1906,1907],{},"colorMode"," object with the ",[40,1910,1911],{},"classSuffix",", ",[40,1914,1915],{},"preference",[40,1917,1918],{},"fallback"," properties.",[33,1921,1923],{"className":286,"code":1922,"language":288,"meta":38,"style":38},"export default defineNuxtConfig({\n//...\n  modules: [\n    '@nuxt/image-edge',\n    '@nuxtjs/tailwindcss',\n    '@nuxt/content',\n    '@nuxtjs/color-mode',\n  ],\n  colorMode: {\n    classSuffix: '',\n    preference: 'system', // default value of $colorMode.preference\n    fallback: 'dark',\n  },\n  //...\n})\n",[40,1924,1925,1935,1939,1943,1949,1955,1961,1968,1972,1977,1987,2000,2010,2014,2018],{"__ignoreMap":38},[43,1926,1927,1929,1931,1933],{"class":45,"line":46},[43,1928,316],{"class":295},[43,1930,319],{"class":295},[43,1932,322],{"class":49},[43,1934,325],{"class":125},[43,1936,1937],{"class":45,"line":136},[43,1938,1625],{"class":1624},[43,1940,1941],{"class":45,"line":147},[43,1942,330],{"class":125},[43,1944,1945,1947],{"class":45,"line":160},[43,1946,1164],{"class":53},[43,1948,417],{"class":125},[43,1950,1951,1953],{"class":45,"line":170},[43,1952,1061],{"class":53},[43,1954,417],{"class":125},[43,1956,1957,1959],{"class":45,"line":338},[43,1958,1068],{"class":53},[43,1960,417],{"class":125},[43,1962,1963,1966],{"class":45,"line":344},[43,1964,1965],{"class":53},"    '@nuxtjs/color-mode'",[43,1967,417],{"class":125},[43,1969,1970],{"class":45,"line":634},[43,1971,341],{"class":125},[43,1973,1974],{"class":45,"line":643},[43,1975,1976],{"class":125},"  colorMode: {\n",[43,1978,1979,1982,1985],{"class":45,"line":784},[43,1980,1981],{"class":125},"    classSuffix: ",[43,1983,1984],{"class":53},"''",[43,1986,417],{"class":125},[43,1988,1989,1992,1995,1997],{"class":45,"line":813},[43,1990,1991],{"class":125},"    preference: ",[43,1993,1994],{"class":53},"'system'",[43,1996,1912],{"class":125},[43,1998,1999],{"class":1624},"// default value of $colorMode.preference\n",[43,2001,2002,2005,2008],{"class":45,"line":828},[43,2003,2004],{"class":125},"    fallback: ",[43,2006,2007],{"class":53},"'dark'",[43,2009,417],{"class":125},[43,2011,2012],{"class":45,"line":841},[43,2013,1244],{"class":125},[43,2015,2016],{"class":45,"line":854},[43,2017,1656],{"class":1624},[43,2019,2020],{"class":45,"line":869},[43,2021,347],{"class":125},[10,2023,2024,2025,2028],{},"For the component itself there was some slight refactoring to do adding the ",[40,2026,2027],{},"useColorMode()"," composable instead of the method. I also decided to use TypeScript and therefore added the type of Theme to be either light or dark. Previously I also had a sepia theme but decided not to keep maintaining it.",[33,2030,2032],{"className":286,"code":2031,"language":288,"meta":38,"style":38},"\u003Cscript setup lang=\"ts\">\ntype Theme = 'light' | 'dark'\nconst setColorTheme = (newTheme: Theme) => {\n  useColorMode().preference = newTheme\n}\n\u003C/script>\n",[40,2033,2034,2054,2059,2064,2077,2081],{"__ignoreMap":38},[43,2035,2036,2038,2041,2044,2047,2049,2052],{"class":45,"line":46},[43,2037,126],{"class":125},[43,2039,2040],{"class":129},"script",[43,2042,2043],{"class":49}," setup",[43,2045,2046],{"class":49}," lang",[43,2048,402],{"class":295},[43,2050,2051],{"class":53},"\"ts\"",[43,2053,133],{"class":125},[43,2055,2056],{"class":45,"line":136},[43,2057,2058],{"class":125},"type Theme = 'light' | 'dark'\n",[43,2060,2061],{"class":45,"line":147},[43,2062,2063],{"class":125},"const setColorTheme = (newTheme: Theme) => {\n",[43,2065,2066,2069,2072,2074],{"class":45,"line":160},[43,2067,2068],{"class":49},"  useColorMode",[43,2070,2071],{"class":125},"().preference ",[43,2073,402],{"class":295},[43,2075,2076],{"class":125}," newTheme\n",[43,2078,2079],{"class":45,"line":170},[43,2080,1591],{"class":125},[43,2082,2083,2085,2087],{"class":45,"line":338},[43,2084,173],{"class":125},[43,2086,2040],{"class":129},[43,2088,133],{"class":125},[25,2090,2092],{"id":2091},"options-to-composition","Options to composition",[10,2094,2095,2096,2099,2100,2102],{},"All my code worked and my site was pretty much finished and ready to deploy. However I wanted to improve things and learn more about the composition API and what was different. So I started to refactor my code starting by adding ",[40,2097,2098],{},"setup"," to the ",[40,2101,244],{}," tag.",[33,2104,2106],{"className":286,"code":2105,"language":288,"meta":38,"style":38},"\u003Cscript setup>\n\n\u003C/script>\n",[40,2107,2108,2118,2122],{"__ignoreMap":38},[43,2109,2110,2112,2114,2116],{"class":45,"line":46},[43,2111,126],{"class":125},[43,2113,2040],{"class":129},[43,2115,2043],{"class":49},[43,2117,133],{"class":125},[43,2119,2120],{"class":45,"line":136},[43,2121,311],{"emptyLinePlaceholder":310},[43,2123,2124,2126,2128],{"class":45,"line":147},[43,2125,173],{"class":125},[43,2127,2040],{"class":129},[43,2129,133],{"class":125},[2131,2132,2134],"h3",{"id":2133},"props","Props",[10,2136,2137],{},"Previously for props we needed to add an export default and add props to the props object.",[33,2139,2141],{"className":286,"code":2140,"language":288,"meta":38,"style":38},"\u003Cscript>\n  export default {\n    props: {\n      list\n    },\n  }\n\u003C/script>\n",[40,2142,2143,2151,2156,2161,2166,2170,2175],{"__ignoreMap":38},[43,2144,2145,2147,2149],{"class":45,"line":46},[43,2146,126],{"class":125},[43,2148,2040],{"class":129},[43,2150,133],{"class":125},[43,2152,2153],{"class":45,"line":136},[43,2154,2155],{"class":125},"  export default {\n",[43,2157,2158],{"class":45,"line":147},[43,2159,2160],{"class":125},"    props: {\n",[43,2162,2163],{"class":45,"line":160},[43,2164,2165],{"class":125},"      list\n",[43,2167,2168],{"class":45,"line":170},[43,2169,1221],{"class":125},[43,2171,2172],{"class":45,"line":338},[43,2173,2174],{"class":125},"  }\n",[43,2176,2177,2179,2181],{"class":45,"line":344},[43,2178,173],{"class":125},[43,2180,2040],{"class":129},[43,2182,133],{"class":125},[10,2184,2185,2186,2189],{},"In Vue 3 we can use ",[40,2187,2188],{},"defineProps"," instead.",[33,2191,2193],{"className":286,"code":2192,"language":288,"meta":38,"style":38},"\u003Cscript setup>\n  defineProps\u003C{\n    list\n  }>()\n\u003C/script>\n",[40,2194,2195,2205,2210,2215,2220],{"__ignoreMap":38},[43,2196,2197,2199,2201,2203],{"class":45,"line":46},[43,2198,126],{"class":125},[43,2200,2040],{"class":129},[43,2202,2043],{"class":49},[43,2204,133],{"class":125},[43,2206,2207],{"class":45,"line":136},[43,2208,2209],{"class":125},"  defineProps\u003C{\n",[43,2211,2212],{"class":45,"line":147},[43,2213,2214],{"class":125},"    list\n",[43,2216,2217],{"class":45,"line":160},[43,2218,2219],{"class":125},"  }>()\n",[43,2221,2222,2224,2226],{"class":45,"line":170},[43,2223,173],{"class":125},[43,2225,2040],{"class":129},[43,2227,133],{"class":125},[2131,2229,2231],{"id":2230},"methods","Methods",[10,2233,2234,2235,2238,2239,2242],{},"I was previously setting the data of ",[40,2236,2237],{},"isOpen"," to false and then using a method with a ",[40,2240,2241],{},"toggle()"," function to change the value of the data from true to false.",[33,2244,2246],{"className":286,"code":2245,"language":288,"meta":38,"style":38},"\u003Cscript>\n  export default {\n    data() {\n      return {\n        isOpen: false\n      }\n    },\n    methods: {\n      toggle() {\n        this.isOpen = !this.isOpen\n      }\n    }\n  }\n\u003C/script>\n",[40,2247,2248,2256,2260,2268,2273,2283,2288,2292,2297,2304,2323,2327,2332,2336],{"__ignoreMap":38},[43,2249,2250,2252,2254],{"class":45,"line":46},[43,2251,126],{"class":125},[43,2253,2040],{"class":129},[43,2255,133],{"class":125},[43,2257,2258],{"class":45,"line":136},[43,2259,2155],{"class":125},[43,2261,2262,2265],{"class":45,"line":147},[43,2263,2264],{"class":49},"    data",[43,2266,2267],{"class":125},"() {\n",[43,2269,2270],{"class":45,"line":160},[43,2271,2272],{"class":125},"      return {\n",[43,2274,2275,2278,2280],{"class":45,"line":170},[43,2276,2277],{"class":49},"        isOpen",[43,2279,393],{"class":125},[43,2281,2282],{"class":272},"false\n",[43,2284,2285],{"class":45,"line":338},[43,2286,2287],{"class":125},"      }\n",[43,2289,2290],{"class":45,"line":344},[43,2291,1221],{"class":125},[43,2293,2294],{"class":45,"line":634},[43,2295,2296],{"class":125},"    methods: {\n",[43,2298,2299,2302],{"class":45,"line":643},[43,2300,2301],{"class":49},"      toggle",[43,2303,2267],{"class":125},[43,2305,2306,2309,2312,2314,2317,2320],{"class":45,"line":784},[43,2307,2308],{"class":272},"        this",[43,2310,2311],{"class":125},".isOpen ",[43,2313,402],{"class":295},[43,2315,2316],{"class":295}," !",[43,2318,2319],{"class":272},"this",[43,2321,2322],{"class":125},".isOpen\n",[43,2324,2325],{"class":45,"line":813},[43,2326,2287],{"class":125},[43,2328,2329],{"class":45,"line":828},[43,2330,2331],{"class":125},"    }\n",[43,2333,2334],{"class":45,"line":841},[43,2335,2174],{"class":125},[43,2337,2338,2340,2342],{"class":45,"line":854},[43,2339,173],{"class":125},[43,2341,2040],{"class":129},[43,2343,133],{"class":125},[10,2345,2346,2347,2350],{},"I refactored this to use ",[40,2348,2349],{},"refs"," passing in the initial value of false and toggling this value when the toggle is called. You can see how much cleaner the code looks from the previous version.",[33,2352,2354],{"className":286,"code":2353,"language":288,"meta":38,"style":38},"\u003Cscript setup>\n  const isOpen = ref(false)\n\n  const toggle = () => {\n    isOpen.value = !isOpen.value\n  }\n\u003C/script>\n",[40,2355,2356,2366,2371,2375,2380,2392,2396],{"__ignoreMap":38},[43,2357,2358,2360,2362,2364],{"class":45,"line":46},[43,2359,126],{"class":125},[43,2361,2040],{"class":129},[43,2363,2043],{"class":49},[43,2365,133],{"class":125},[43,2367,2368],{"class":45,"line":136},[43,2369,2370],{"class":125},"  const isOpen = ref(false)\n",[43,2372,2373],{"class":45,"line":147},[43,2374,311],{"emptyLinePlaceholder":310},[43,2376,2377],{"class":45,"line":160},[43,2378,2379],{"class":125},"  const toggle = () => {\n",[43,2381,2382,2385,2387,2389],{"class":45,"line":170},[43,2383,2384],{"class":125},"    isOpen.value ",[43,2386,402],{"class":295},[43,2388,2316],{"class":295},[43,2390,2391],{"class":125},"isOpen.value\n",[43,2393,2394],{"class":45,"line":338},[43,2395,2174],{"class":125},[43,2397,2398,2400,2402],{"class":45,"line":344},[43,2399,173],{"class":125},[43,2401,2040],{"class":129},[43,2403,133],{"class":125},[25,2405,2407],{"id":2406},"composeables","Composeables",[10,2409,2410],{},"I was rendering the date on my blog posts, videos and podcasts and this method was being used in multiple places.",[33,2412,2414],{"className":286,"code":2413,"language":288,"meta":38,"style":38},"\u003Cscript>\n  export default {\n    methods: {\n      formatDate(date) {\n        const options = { year: 'numeric', month: 'long', day: 'numeric' }\n        return new Date(date).toLocaleDateString('en', options)\n      }\n    }\n  }\n\u003C/script>\n",[40,2415,2416,2424,2428,2432,2445,2475,2500,2504,2508,2512],{"__ignoreMap":38},[43,2417,2418,2420,2422],{"class":45,"line":46},[43,2419,126],{"class":125},[43,2421,2040],{"class":129},[43,2423,133],{"class":125},[43,2425,2426],{"class":45,"line":136},[43,2427,2155],{"class":125},[43,2429,2430],{"class":45,"line":147},[43,2431,2296],{"class":125},[43,2433,2434,2437,2439,2442],{"class":45,"line":160},[43,2435,2436],{"class":49},"      formatDate",[43,2438,411],{"class":125},[43,2440,2441],{"class":389},"date",[43,2443,2444],{"class":125},") {\n",[43,2446,2447,2450,2453,2455,2458,2461,2464,2467,2470,2472],{"class":45,"line":170},[43,2448,2449],{"class":295},"        const",[43,2451,2452],{"class":272}," options",[43,2454,1557],{"class":295},[43,2456,2457],{"class":125}," { year: ",[43,2459,2460],{"class":53},"'numeric'",[43,2462,2463],{"class":125},", month: ",[43,2465,2466],{"class":53},"'long'",[43,2468,2469],{"class":125},", day: ",[43,2471,2460],{"class":53},[43,2473,2474],{"class":125}," }\n",[43,2476,2477,2480,2483,2486,2489,2492,2494,2497],{"class":45,"line":338},[43,2478,2479],{"class":295},"        return",[43,2481,2482],{"class":295}," new",[43,2484,2485],{"class":49}," Date",[43,2487,2488],{"class":125},"(date).",[43,2490,2491],{"class":49},"toLocaleDateString",[43,2493,411],{"class":125},[43,2495,2496],{"class":53},"'en'",[43,2498,2499],{"class":125},", options)\n",[43,2501,2502],{"class":45,"line":344},[43,2503,2287],{"class":125},[43,2505,2506],{"class":45,"line":634},[43,2507,2331],{"class":125},[43,2509,2510],{"class":45,"line":643},[43,2511,2174],{"class":125},[43,2513,2514,2516,2518],{"class":45,"line":784},[43,2515,173],{"class":125},[43,2517,2040],{"class":129},[43,2519,133],{"class":125},[10,2521,2522,2523,2526,2527],{},"I decided to refactor this into a composable and use it in all the places I needed it. I created a new folder called ",[40,2524,2525],{},"composables"," and added a new file called ",[40,2528,2529],{},"utils.ts",[33,2531,2533],{"className":286,"code":2532,"language":288,"meta":38,"style":38},"export function formatDate(string) {\n  const options = { year: 'numeric', month: 'long', day: 'numeric' }\n  const date = new Date(string).toLocaleDateString('en-US', options)\n  return date\n}\n",[40,2534,2535,2552,2575,2600,2608],{"__ignoreMap":38},[43,2536,2537,2539,2542,2545,2547,2550],{"class":45,"line":46},[43,2538,316],{"class":295},[43,2540,2541],{"class":295}," function",[43,2543,2544],{"class":49}," formatDate",[43,2546,411],{"class":125},[43,2548,2549],{"class":389},"string",[43,2551,2444],{"class":125},[43,2553,2554,2557,2559,2561,2563,2565,2567,2569,2571,2573],{"class":45,"line":136},[43,2555,2556],{"class":295},"  const",[43,2558,2452],{"class":272},[43,2560,1557],{"class":295},[43,2562,2457],{"class":125},[43,2564,2460],{"class":53},[43,2566,2463],{"class":125},[43,2568,2466],{"class":53},[43,2570,2469],{"class":125},[43,2572,2460],{"class":53},[43,2574,2474],{"class":125},[43,2576,2577,2579,2582,2584,2586,2588,2591,2593,2595,2598],{"class":45,"line":147},[43,2578,2556],{"class":295},[43,2580,2581],{"class":272}," date",[43,2583,1557],{"class":295},[43,2585,2482],{"class":295},[43,2587,2485],{"class":49},[43,2589,2590],{"class":125},"(string).",[43,2592,2491],{"class":49},[43,2594,411],{"class":125},[43,2596,2597],{"class":53},"'en-US'",[43,2599,2499],{"class":125},[43,2601,2602,2605],{"class":45,"line":160},[43,2603,2604],{"class":295},"  return",[43,2606,2607],{"class":125}," date\n",[43,2609,2610],{"class":45,"line":170},[43,2611,1591],{"class":125},[10,2613,2614,2619,2620,2623],{},[14,2615,2618],{"href":2616,"rel":2617},"https://nuxt.com/docs/guide/directory-structure/composables",[18],"Composeables in Nuxt 3"," are amazing. I could now use this composable in any of my components without importing it thanks to auto imports. Meaning I could just use ",[40,2621,2622],{},"formatDate(date)"," in any of my components or pages. This makes your code much more manageable and reusable.",[25,2625,2627],{"id":2626},"constants","Constants",[10,2629,2630,2631,2634,2635,2638,2639,2641,2642,2645],{},"My navigation links were being used in multiple places and I wanted to refactor this into a constant. This meant I could have the list of links in one place and import them into the components where I needed them such as the Navigation component which contained the main navigation and the Footer component which had the same links but a different style and was not using the ",[40,2632,2633],{},"\u003Cnav>"," element. I created a ",[40,2636,2637],{},"navigation.ts"," file in a folder called ",[40,2640,2626],{}," added the links. I could then import ",[40,2643,2644],{},"NavLinks"," into the components where I needed them. This is not a Nuxt 3 feature, just something I did to keep code more maintainable.",[33,2647,2649],{"className":286,"code":2648,"language":288,"meta":38,"style":38},"export const NavLinks = [\n  {\n    url: '/about',\n    link: 'About',\n  },\n  {\n    url: '/videos',\n    link: 'Videos',\n  },\n  {\n    url: '/podcasts',\n    link: 'Podcasts',\n  },\n  {\n    url: '/courses',\n    link: 'Courses',\n  },\n  {\n    url: '/blog',\n    link: 'Blog',\n  },\n]\n",[40,2650,2651,2666,2671,2681,2691,2695,2699,2708,2717,2721,2725,2734,2743,2747,2751,2760,2769,2773,2777,2787,2797,2802],{"__ignoreMap":38},[43,2652,2653,2655,2658,2661,2663],{"class":45,"line":46},[43,2654,316],{"class":295},[43,2656,2657],{"class":295}," const",[43,2659,2660],{"class":272}," NavLinks",[43,2662,1557],{"class":295},[43,2664,2665],{"class":125}," [\n",[43,2667,2668],{"class":45,"line":136},[43,2669,2670],{"class":125},"  {\n",[43,2672,2673,2676,2679],{"class":45,"line":147},[43,2674,2675],{"class":125},"    url: ",[43,2677,2678],{"class":53},"'/about'",[43,2680,417],{"class":125},[43,2682,2683,2686,2689],{"class":45,"line":160},[43,2684,2685],{"class":125},"    link: ",[43,2687,2688],{"class":53},"'About'",[43,2690,417],{"class":125},[43,2692,2693],{"class":45,"line":170},[43,2694,1244],{"class":125},[43,2696,2697],{"class":45,"line":338},[43,2698,2670],{"class":125},[43,2700,2701,2703,2706],{"class":45,"line":344},[43,2702,2675],{"class":125},[43,2704,2705],{"class":53},"'/videos'",[43,2707,417],{"class":125},[43,2709,2710,2712,2715],{"class":45,"line":634},[43,2711,2685],{"class":125},[43,2713,2714],{"class":53},"'Videos'",[43,2716,417],{"class":125},[43,2718,2719],{"class":45,"line":643},[43,2720,1244],{"class":125},[43,2722,2723],{"class":45,"line":784},[43,2724,2670],{"class":125},[43,2726,2727,2729,2732],{"class":45,"line":813},[43,2728,2675],{"class":125},[43,2730,2731],{"class":53},"'/podcasts'",[43,2733,417],{"class":125},[43,2735,2736,2738,2741],{"class":45,"line":828},[43,2737,2685],{"class":125},[43,2739,2740],{"class":53},"'Podcasts'",[43,2742,417],{"class":125},[43,2744,2745],{"class":45,"line":841},[43,2746,1244],{"class":125},[43,2748,2749],{"class":45,"line":854},[43,2750,2670],{"class":125},[43,2752,2753,2755,2758],{"class":45,"line":869},[43,2754,2675],{"class":125},[43,2756,2757],{"class":53},"'/courses'",[43,2759,417],{"class":125},[43,2761,2762,2764,2767],{"class":45,"line":883},[43,2763,2685],{"class":125},[43,2765,2766],{"class":53},"'Courses'",[43,2768,417],{"class":125},[43,2770,2771],{"class":45,"line":892},[43,2772,1244],{"class":125},[43,2774,2775],{"class":45,"line":1247},[43,2776,2670],{"class":125},[43,2778,2780,2782,2785],{"class":45,"line":2779},19,[43,2781,2675],{"class":125},[43,2783,2784],{"class":53},"'/blog'",[43,2786,417],{"class":125},[43,2788,2790,2792,2795],{"class":45,"line":2789},20,[43,2791,2685],{"class":125},[43,2793,2794],{"class":53},"'Blog'",[43,2796,417],{"class":125},[43,2798,2800],{"class":45,"line":2799},21,[43,2801,1244],{"class":125},[43,2803,2805],{"class":45,"line":2804},22,[43,2806,2807],{"class":125},"]\n",[25,2809,2811],{"id":2810},"typescript","TypeScript",[10,2813,2814],{},"I really wanted to make use of the fact that Nuxt 3 is TypeScript first and I wanted to learn more about TypeScript as I am certainly no expert. It is not exactly easy to get started as the Nuxt docs do not give a lot of TypeScrip examples but I am sure with time these will be improved.",[10,2816,2817,2818,2099,2821,2823],{},"I started by adding the ",[40,2819,2820],{},"lang=\"ts\"",[40,2822,244],{}," tag of one of the components. This meant I could now use TypeScript in this component. The great thing about this is that I could refactor one by one taking my time to make sure I knew what I was doing for each component.",[33,2825,2829],{"className":2826,"code":2827,"language":2828,"meta":38,"style":38},"language-ts shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\n\n\u003C/script>\n","ts",[40,2830,2831,2844,2848],{"__ignoreMap":38},[43,2832,2833,2835,2838,2840,2842],{"class":45,"line":46},[43,2834,126],{"class":295},[43,2836,2837],{"class":125},"script setup lang",[43,2839,402],{"class":295},[43,2841,2051],{"class":53},[43,2843,133],{"class":295},[43,2845,2846],{"class":45,"line":136},[43,2847,311],{"emptyLinePlaceholder":310},[43,2849,2850,2852,2854],{"class":45,"line":147},[43,2851,173],{"class":295},[43,2853,2040],{"class":125},[43,2855,133],{"class":295},[2131,2857,2859],{"id":2858},"types-file","Types file",[10,2861,2862,2863,2866],{},"Instead of adding types to my props direct in the component I created a ",[40,2864,2865],{},"types.ts"," file and added my types here.",[33,2868,2870],{"className":286,"code":2869,"language":288,"meta":38,"style":38},"export type Sections = 'blog' | 'podcasts' | 'videos' | 'courses'\n",[40,2871,2872],{"__ignoreMap":38},[43,2873,2874,2876,2879,2882,2884,2887,2890,2893,2895,2898,2900],{"class":45,"line":46},[43,2875,316],{"class":295},[43,2877,2878],{"class":295}," type",[43,2880,2881],{"class":49}," Sections",[43,2883,1557],{"class":295},[43,2885,2886],{"class":53}," 'blog'",[43,2888,2889],{"class":295}," |",[43,2891,2892],{"class":53}," 'podcasts'",[43,2894,2889],{"class":295},[43,2896,2897],{"class":53}," 'videos'",[43,2899,2889],{"class":295},[43,2901,2902],{"class":53}," 'courses'\n",[10,2904,2905],{},"This meant I could then import the types and use them in various components.",[33,2907,2909],{"className":2826,"code":2908,"language":2828,"meta":38,"style":38},"\u003Cscript setup lang=\"ts\">\nimport type { Sections } from '~/types'\ndefineProps\u003C{\n  section: Sections\n}>()\n\u003C/script>\n",[40,2910,2911,2923,2937,2944,2955,2960],{"__ignoreMap":38},[43,2912,2913,2915,2917,2919,2921],{"class":45,"line":46},[43,2914,126],{"class":295},[43,2916,2837],{"class":125},[43,2918,402],{"class":295},[43,2920,2051],{"class":53},[43,2922,133],{"class":295},[43,2924,2925,2927,2929,2932,2934],{"class":45,"line":136},[43,2926,296],{"class":295},[43,2928,2878],{"class":295},[43,2930,2931],{"class":125}," { Sections } ",[43,2933,302],{"class":295},[43,2935,2936],{"class":53}," '~/types'\n",[43,2938,2939,2941],{"class":45,"line":147},[43,2940,2188],{"class":49},[43,2942,2943],{"class":125},"\u003C{\n",[43,2945,2946,2949,2952],{"class":45,"line":160},[43,2947,2948],{"class":389},"  section",[43,2950,2951],{"class":295},":",[43,2953,2954],{"class":49}," Sections\n",[43,2956,2957],{"class":45,"line":170},[43,2958,2959],{"class":125},"}>()\n",[43,2961,2962,2964,2966],{"class":45,"line":338},[43,2963,173],{"class":295},[43,2965,2040],{"class":125},[43,2967,133],{"class":295},[2131,2969,2971],{"id":2970},"types-for-nuxt-content","Types for nuxt content",[10,2973,2974,2975,2978,2979,2982],{},"The props for my content coming form Nuxt content was a little more complex. I had to import ",[40,2976,2977],{},"ParsedContent"," from ",[40,2980,2981],{},"@nuxt/content"," and then add the type to the props I was using for my blog post.",[33,2984,2986],{"className":2826,"code":2985,"language":2828,"meta":38,"style":38},"import type { ParsedContent } from '@nuxt/content/dist/runtime/types'\nexport type Sections = 'blog' | 'podcasts' | 'videos' | 'courses'\n\nexport interface BlogPost extends ParsedContent {\n  title: string\n  date: string\n  description: string\n  url?: string\n  image: string\n  alt: string\n  ogImage?: string\n  provider: string\n  tags: string[]\n  published?: boolean\n}\n",[40,2987,2988,3002,3026,3030,3048,3058,3067,3076,3086,3095,3104,3113,3122,3135,3145],{"__ignoreMap":38},[43,2989,2990,2992,2994,2997,2999],{"class":45,"line":46},[43,2991,296],{"class":295},[43,2993,2878],{"class":295},[43,2995,2996],{"class":125}," { ParsedContent } ",[43,2998,302],{"class":295},[43,3000,3001],{"class":53}," '@nuxt/content/dist/runtime/types'\n",[43,3003,3004,3006,3008,3010,3012,3014,3016,3018,3020,3022,3024],{"class":45,"line":136},[43,3005,316],{"class":295},[43,3007,2878],{"class":295},[43,3009,2881],{"class":49},[43,3011,1557],{"class":295},[43,3013,2886],{"class":53},[43,3015,2889],{"class":295},[43,3017,2892],{"class":53},[43,3019,2889],{"class":295},[43,3021,2897],{"class":53},[43,3023,2889],{"class":295},[43,3025,2902],{"class":53},[43,3027,3028],{"class":45,"line":147},[43,3029,311],{"emptyLinePlaceholder":310},[43,3031,3032,3034,3037,3040,3043,3046],{"class":45,"line":160},[43,3033,316],{"class":295},[43,3035,3036],{"class":295}," interface",[43,3038,3039],{"class":49}," BlogPost",[43,3041,3042],{"class":295}," extends",[43,3044,3045],{"class":49}," ParsedContent",[43,3047,1304],{"class":125},[43,3049,3050,3053,3055],{"class":45,"line":170},[43,3051,3052],{"class":389},"  title",[43,3054,2951],{"class":295},[43,3056,3057],{"class":272}," string\n",[43,3059,3060,3063,3065],{"class":45,"line":338},[43,3061,3062],{"class":389},"  date",[43,3064,2951],{"class":295},[43,3066,3057],{"class":272},[43,3068,3069,3072,3074],{"class":45,"line":344},[43,3070,3071],{"class":389},"  description",[43,3073,2951],{"class":295},[43,3075,3057],{"class":272},[43,3077,3078,3081,3084],{"class":45,"line":634},[43,3079,3080],{"class":389},"  url",[43,3082,3083],{"class":295},"?:",[43,3085,3057],{"class":272},[43,3087,3088,3091,3093],{"class":45,"line":643},[43,3089,3090],{"class":389},"  image",[43,3092,2951],{"class":295},[43,3094,3057],{"class":272},[43,3096,3097,3100,3102],{"class":45,"line":784},[43,3098,3099],{"class":389},"  alt",[43,3101,2951],{"class":295},[43,3103,3057],{"class":272},[43,3105,3106,3109,3111],{"class":45,"line":813},[43,3107,3108],{"class":389},"  ogImage",[43,3110,3083],{"class":295},[43,3112,3057],{"class":272},[43,3114,3115,3118,3120],{"class":45,"line":828},[43,3116,3117],{"class":389},"  provider",[43,3119,2951],{"class":295},[43,3121,3057],{"class":272},[43,3123,3124,3127,3129,3132],{"class":45,"line":841},[43,3125,3126],{"class":389},"  tags",[43,3128,2951],{"class":295},[43,3130,3131],{"class":272}," string",[43,3133,3134],{"class":125},"[]\n",[43,3136,3137,3140,3142],{"class":45,"line":854},[43,3138,3139],{"class":389},"  published",[43,3141,3083],{"class":295},[43,3143,3144],{"class":272}," boolean\n",[43,3146,3147],{"class":45,"line":869},[43,3148,1591],{"class":125},[10,3150,3151],{},"I could then import this type and use it in pages or components.",[33,3153,3155],{"className":2826,"code":3154,"language":2828,"meta":38,"style":38},"\u003Cscript setup lang=\"ts\">\nimport type { BlogPost } from '~/types'\n\nconst { data: articles } = await useAsyncData(`articles-${slug}`\n  () => queryContent\u003CBlogPost>('blog')\n    .where({ published: { $ne: false } })\n    .sort({ date: -1 })\n    .find(),\n)\n\u003C/script>\n",[40,3156,3157,3169,3182,3186,3215,3233,3245,3259,3267,3271],{"__ignoreMap":38},[43,3158,3159,3161,3163,3165,3167],{"class":45,"line":46},[43,3160,126],{"class":295},[43,3162,2837],{"class":125},[43,3164,402],{"class":295},[43,3166,2051],{"class":53},[43,3168,133],{"class":295},[43,3170,3171,3173,3175,3178,3180],{"class":45,"line":136},[43,3172,296],{"class":295},[43,3174,2878],{"class":295},[43,3176,3177],{"class":125}," { BlogPost } ",[43,3179,302],{"class":295},[43,3181,2936],{"class":53},[43,3183,3184],{"class":45,"line":147},[43,3185,311],{"emptyLinePlaceholder":310},[43,3187,3188,3190,3192,3194,3196,3198,3200,3202,3204,3206,3208,3210,3212],{"class":45,"line":160},[43,3189,383],{"class":295},[43,3191,386],{"class":125},[43,3193,390],{"class":389},[43,3195,393],{"class":125},[43,3197,396],{"class":272},[43,3199,399],{"class":125},[43,3201,402],{"class":295},[43,3203,405],{"class":295},[43,3205,408],{"class":49},[43,3207,411],{"class":125},[43,3209,1359],{"class":53},[43,3211,1315],{"class":125},[43,3213,3214],{"class":53},"}`\n",[43,3216,3217,3219,3221,3223,3225,3227,3229,3231],{"class":45,"line":170},[43,3218,422],{"class":125},[43,3220,425],{"class":295},[43,3222,428],{"class":49},[43,3224,126],{"class":125},[43,3226,1379],{"class":49},[43,3228,1382],{"class":125},[43,3230,433],{"class":53},[43,3232,436],{"class":125},[43,3234,3235,3237,3239,3241,3243],{"class":45,"line":338},[43,3236,441],{"class":125},[43,3238,562],{"class":49},[43,3240,565],{"class":125},[43,3242,568],{"class":272},[43,3244,571],{"class":125},[43,3246,3247,3249,3251,3253,3255,3257],{"class":45,"line":344},[43,3248,441],{"class":125},[43,3250,606],{"class":49},[43,3252,609],{"class":125},[43,3254,612],{"class":295},[43,3256,597],{"class":272},[43,3258,617],{"class":125},[43,3260,3261,3263,3265],{"class":45,"line":634},[43,3262,441],{"class":125},[43,3264,444],{"class":49},[43,3266,1422],{"class":125},[43,3268,3269],{"class":45,"line":643},[43,3270,436],{"class":125},[43,3272,3273,3275,3277],{"class":45,"line":784},[43,3274,173],{"class":295},[43,3276,2040],{"class":125},[43,3278,133],{"class":295},[2131,3280,3282],{"id":3281},"omiting-types","Omiting types",[10,3284,3285,3286,3289,3290,3293,3294,3296],{},"For the preview components where I omit the body tag I created a type called ",[40,3287,3288],{},"BlogPostPreview"," and used the ",[40,3291,3292],{},"Omit"," type to omit the body tag from the ",[40,3295,1379],{}," type.",[33,3298,3300],{"className":2826,"code":3299,"language":2828,"meta":38,"style":38},"export type BlogPostPreview = Omit\u003CBlogPost, 'body'>\n",[40,3301,3302],{"__ignoreMap":38},[43,3303,3304,3306,3308,3311,3313,3316,3318,3320,3322,3324],{"class":45,"line":46},[43,3305,316],{"class":295},[43,3307,2878],{"class":295},[43,3309,3310],{"class":49}," BlogPostPreview",[43,3312,1557],{"class":295},[43,3314,3315],{"class":49}," Omit",[43,3317,126],{"class":125},[43,3319,1379],{"class":49},[43,3321,1912],{"class":125},[43,3323,583],{"class":53},[43,3325,133],{"class":125},[10,3327,3328],{},"Then in my component I could import this type and use it in the props.",[33,3330,3332],{"className":2826,"code":3331,"language":2828,"meta":38,"style":38},"\u003Cscript setup lang=\"ts\">\nimport type { BlogPostPreview } from '~/types'\n\ndefineProps\u003C{\n  item: BlogPostPreview\n}>()\n\u003C/script>\n",[40,3333,3334,3346,3359,3363,3369,3379,3383],{"__ignoreMap":38},[43,3335,3336,3338,3340,3342,3344],{"class":45,"line":46},[43,3337,126],{"class":295},[43,3339,2837],{"class":125},[43,3341,402],{"class":295},[43,3343,2051],{"class":53},[43,3345,133],{"class":295},[43,3347,3348,3350,3352,3355,3357],{"class":45,"line":136},[43,3349,296],{"class":295},[43,3351,2878],{"class":295},[43,3353,3354],{"class":125}," { BlogPostPreview } ",[43,3356,302],{"class":295},[43,3358,2936],{"class":53},[43,3360,3361],{"class":45,"line":147},[43,3362,311],{"emptyLinePlaceholder":310},[43,3364,3365,3367],{"class":45,"line":160},[43,3366,2188],{"class":49},[43,3368,2943],{"class":125},[43,3370,3371,3374,3376],{"class":45,"line":170},[43,3372,3373],{"class":389},"  item",[43,3375,2951],{"class":295},[43,3377,3378],{"class":49}," BlogPostPreview\n",[43,3380,3381],{"class":45,"line":338},[43,3382,2959],{"class":125},[43,3384,3385,3387,3389],{"class":45,"line":344},[43,3386,173],{"class":295},[43,3388,2040],{"class":125},[43,3390,133],{"class":295},[25,3392,3394],{"id":3393},"conclusion","Conclusion",[10,3396,3397,3398,3401],{},"I am still unsure if what I am doing here is entirely correct. All TypeScript errors have gone which is great but if this is the correct way of doing things or not I really don't know and there are not much docs to go by. Sometimes hovering over the the props for my articles gives me the type of ",[40,3399,3400],{},"any"," even though I have defined types so I am not sure if this is an issue with the content module or my lack of knowledge of TypeScript. If anyone else has added types for Nuxt content I would love to hear your feedback.",[10,3403,3404],{},"Either way. Even though it is not perfect I am pretty happy with having moved everything to TypeScript. I don't feel it is that difficult and it ensures I am using the correct types for my props and data and helps me find errors quicker.",[10,3406,3407],{},"Overall I am really happy with the progress I have made with Nuxt 3. I am still learning and I am sure there are many things I can improve on and there are still lots more features I can explore. Send me a pr or DM me if you see anything that needs improving. All feedback is welcome.",[975,3409,3410],{},[10,3411,3412],{},"I am really excited to finally see the release of Nuxt 3. I know how much work has gone into it and I really think the team have done an amazing job.",[2131,3414,3416],{"id":3415},"community-thanks","Community thanks",[10,3418,3419,3420,3422,3423,3428,3429,3432,3433,3436,3437,3442],{},"Special thanks to members of the community who pointed out that my site wasn't working as it should when I wasn't using ",[40,3421,509],{}," for querying my content and ",[14,3424,3427],{"href":3425,"rel":3426},"https://twitter.com/JoshDeltener",[18],"Josh Deltner"," for pointing out that my site had no favicon because I completely forget to copy over the ",[40,3430,3431],{},"static"," folder. Note this is now called the ",[40,3434,3435],{},"public"," folder in Nuxt 3. And of course ",[14,3438,3441],{"href":3439,"rel":3440},"https://twitter.com/danielcroe",[18],"Daniel Roe"," for answering my constant queries on migration, TypeScript and more.",[10,3444,3445,3446,3451],{},"Also the ",[14,3447,3450],{"href":3448,"rel":3449},"https://github.com/nuxt/movies",[18],"movies repo"," was a great reference for me to see how the Nuxt team have implemented Nuxt 3. I highly recommend checking it out.",[2131,3453,3455],{"id":3454},"other-things-not-covered","Other things not covered",[10,3457,3458,3459,3462,3463,3465,3466,3468],{},"Other things I didn't cover in this post were ",[40,3460,3461],{},"useHead"," for meta data which has changed and you can see an example in the ",[40,3464,104],{}," file although I may revert to adding this back to the ",[40,3467,1139],{}," file instead.",[10,3470,3471,3472,3475],{},"Also the 404 page is now created by adding a ",[40,3473,3474],{},"[...slug].vue"," file in the pages folder. This will then catch all routes that are not found and render what is inside this file instead.",[10,3477,3478,3479,3484],{},"Also I added testing with ",[14,3480,3483],{"href":3481,"rel":3482},"https://playwright.dev/",[18],"Playwright"," and generated end to end tests using Codegen, Playwrights test generator, to test my site and ensure everything works. I will cover this in a future post.",[25,3486,3488],{"id":3487},"resources","Resources",[3490,3491,3492,3500,3507,3513],"ul",{},[3493,3494,3495],"li",{},[14,3496,3499],{"href":3497,"rel":3498},"https://v3.nuxtjs.org/",[18],"Nuxt 3 Docs",[3493,3501,3502],{},[14,3503,3506],{"href":3504,"rel":3505},"https://content.nuxtjs.org/",[18],"Nuxt Content",[3493,3508,3509],{},[14,3510,3512],{"href":16,"rel":3511},[18],"My repo",[3493,3514,3515],{},[14,3516,3518],{"href":3448,"rel":3517},[18],"Movies repo",[3520,3521,3522],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":38,"searchDepth":136,"depth":136,"links":3524},[3525,3526,3527,3528,3529,3530,3531,3532,3533,3534,3535,3536,3537,3538,3539,3543,3544,3545,3550,3554],{"id":27,"depth":136,"text":28},{"id":94,"depth":136,"text":95},{"id":180,"depth":136,"text":181},{"id":237,"depth":136,"text":238},{"id":248,"depth":136,"text":249},{"id":962,"depth":136,"text":963},{"id":987,"depth":136,"text":988},{"id":1100,"depth":136,"text":1101},{"id":1252,"depth":136,"text":1253},{"id":1262,"depth":136,"text":1263},{"id":1429,"depth":136,"text":1430},{"id":1509,"depth":136,"text":1510},{"id":1666,"depth":136,"text":1667},{"id":1878,"depth":136,"text":1879},{"id":2091,"depth":136,"text":2092,"children":3540},[3541,3542],{"id":2133,"depth":147,"text":2134},{"id":2230,"depth":147,"text":2231},{"id":2406,"depth":136,"text":2407},{"id":2626,"depth":136,"text":2627},{"id":2810,"depth":136,"text":2811,"children":3546},[3547,3548,3549],{"id":2858,"depth":147,"text":2859},{"id":2970,"depth":147,"text":2971},{"id":3281,"depth":147,"text":3282},{"id":3393,"depth":136,"text":3394,"children":3551},[3552,3553],{"id":3415,"depth":147,"text":3416},{"id":3454,"depth":147,"text":3455},{"id":3487,"depth":136,"text":3488},null,"2022-11-27","My personal website was built many years ago and had collected quite a large amount of code as I used my site to play around and experiment new features of Nuxt. It took me ages to finally decide to migrate cause lets face it, we all hate migrations. But I finally did it and I'm so glad I did. I'm going to share with you the steps I took to migrate my site from Nuxt 2 to Nuxt 3.","md",false,"v1640965793/debbie.codes/blog/2022/nuxt3_q10xtr.png",{"alt":3562},"Nuxt logo with text of Migration to Nuxt 3","https://res.cloudinary.com/debsobrien/image/upload/f_webp,q_80,c_fit,w_480/v1640965793/debbie.codes/blog/2022/nuxt3_q10xtr.png","/blog/migrating-nuxt2-nuxt3","cloudinary",{"title":5,"description":3557},"blog/migrating-nuxt2-nuxt3",[3569],"nuxt","VALFqh-ymrGQttevxW9eHvx0NSL8VHa8wvMMGaUDZCk",[3572,3576],{"title":3573,"path":3574,"stem":3575,"children":-1},"How to locate elements in Playwright","/blog/how-to-locate-elements-in-playwright","blog/how-to-locate-elements-in-playwright",{"title":3577,"path":3578,"stem":3579,"children":-1},"Challenging Yourself","/blog/challenging-yourself","blog/challenging-yourself",1790839747938]