[{"data":1,"prerenderedAt":689},["ShallowReactive",2],{"category-data-nuxt":3},[4,217,286],{"id":5,"title":6,"body":7,"description":203,"extension":204,"meta":205,"navigation":212,"ogImage":207,"path":213,"seo":214,"stem":215,"__hash__":216},"content/blogs/2. fix-tailwindcss-intellisense-in-nuxt3.md","How To Fix TailwindCSS Intellisense In Nuxt3 Project",{"type":8,"value":9,"toc":198},"minimark",[10,15,27,31,50,54,63,90,191,194],[11,12,14],"h3",{"id":13},"problems","Problems",[16,17,18,19,26],"p",{},"I had a Nuxt3 and TailwindCSS project. which was opened in VsCode. But the problem was, in my project the tailwind intellisense didn't working properly. I tried to reinstall the vscode tailwind extension but the problem didn't solve properly. Later after doing some research I found a ",[20,21,25],"a",{"href":22,"rel":23},"https://github.com/tailwindlabs/tailwindcss-intellisense/issues/663#issuecomment-1316788128",[24],"nofollow","workaround",", That I am sharing here today.",[11,28,30],{"id":29},"why-its-not-working","Why It's Not working",[16,32,33,34,38,39,42,43,46,47,49],{},"In our nuxt project we have a ",[35,36,37],"code",{},".nuxt"," directory. Nuxt uses the ",[35,40,41],{},".nuxt/"," directory in development to generate your Vue application. And if we try to look properly there is also a file called ",[35,44,45],{},".nuxt/tailwind.config.cjs",", So tailwind find to config file in the same project, one is in your root directory and another one is in you ",[35,48,37],{}," directory.",[11,51,53],{"id":52},"possible-workaround","Possible Workaround",[16,55,56,57,59,60,62],{},"One possible solution is, In your project we call tell the extension to exclude the ",[35,58,37],{}," directory. To exclude the ",[35,61,37],{}," directory in your workspace,",[64,65,66,74,85],"ul",{},[67,68,69,70,73],"li",{},"Create a ",[35,71,72],{},"/.vscode"," folder in your project's root level.",[67,75,76,77,80,81,84],{},"Inside ",[35,78,79],{},".vscode"," folder add a ",[35,82,83],{},"settings.json"," file",[67,86,87,88,84],{},"Copy the below code to ",[35,89,83],{},[91,92,97],"pre",{"className":93,"code":94,"language":95,"meta":96,"style":96},"language-json shiki shiki-themes dracula","// /.vscode/settings.json\n{\n  \"tailwindCSS.files.exclude\": [\"**/.git/**\", \"**/node_modules/**\", \"**/.hg/**\", \"**/.svn/**\", \"**/.nuxt/**\"]\n}\n","json","",[35,98,99,108,115,185],{"__ignoreMap":96},[100,101,104],"span",{"class":102,"line":103},"line",1,[100,105,107],{"class":106},"shSDL","// /.vscode/settings.json\n",[100,109,111],{"class":102,"line":110},2,[100,112,114],{"class":113},"sCdxs","{\n",[100,116,118,122,126,129,133,136,139,143,145,148,150,153,155,157,159,162,164,166,168,171,173,175,177,180,182],{"class":102,"line":117},3,[100,119,121],{"class":120},"sY8FZ","  \"",[100,123,125],{"class":124},"sLL85","tailwindCSS.files.exclude",[100,127,128],{"class":120},"\"",[100,130,132],{"class":131},"s0Tla",":",[100,134,135],{"class":113}," [",[100,137,128],{"class":138},"seVfx",[100,140,142],{"class":141},"s-mGx","**/.git/**",[100,144,128],{"class":138},[100,146,147],{"class":113},", ",[100,149,128],{"class":138},[100,151,152],{"class":141},"**/node_modules/**",[100,154,128],{"class":138},[100,156,147],{"class":113},[100,158,128],{"class":138},[100,160,161],{"class":141},"**/.hg/**",[100,163,128],{"class":138},[100,165,147],{"class":113},[100,167,128],{"class":138},[100,169,170],{"class":141},"**/.svn/**",[100,172,128],{"class":138},[100,174,147],{"class":113},[100,176,128],{"class":138},[100,178,179],{"class":141},"**/.nuxt/**",[100,181,128],{"class":138},[100,183,184],{"class":113},"]\n",[100,186,188],{"class":102,"line":187},4,[100,189,190],{"class":113},"}\n",[16,192,193],{},"Hopefully now tailwind intellisense start working properly.",[195,196,197],"style",{},"html pre.shiki code .shSDL, html code.shiki .shSDL{--shiki-default:#6272A4}html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .sY8FZ, html code.shiki .sY8FZ{--shiki-default:#8BE9FE}html pre.shiki code .sLL85, html code.shiki .sLL85{--shiki-default:#8BE9FD}html pre.shiki code .s0Tla, html code.shiki .s0Tla{--shiki-default:#FF79C6}html pre.shiki code .seVfx, html code.shiki .seVfx{--shiki-default:#E9F284}html pre.shiki code .s-mGx, html code.shiki .s-mGx{--shiki-default:#F1FA8C}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);}",{"title":96,"searchDepth":110,"depth":110,"links":199},[200,201,202],{"id":13,"depth":117,"text":14},{"id":29,"depth":117,"text":30},{"id":52,"depth":117,"text":53},"In Nuxt3 project tailwind css intellisense doesn't seems to work properly. In this blog I will share a workaround to fix this issue.","md",{"date":206,"image":207,"alt":208,"tags":209,"published":212},"26th Jan 2023","/blogs-img/blog2.jpg","Hwo to fix tailwind intellisense in nuxt3 project",[210,211],"nuxt","tailwindcss",true,"/blogs/fix-tailwindcss-intellisense-in-nuxt3",{"title":6,"description":203},"blogs/2. fix-tailwindcss-intellisense-in-nuxt3","7ZGcJhWiVqLVOv2RrI7i56paOO-EQuvfqBkBlJrh6uE",{"id":218,"title":219,"body":220,"description":275,"extension":204,"meta":276,"navigation":212,"ogImage":278,"path":282,"seo":283,"stem":284,"__hash__":285},"content/blogs/3. create-namespace-subdomain-connect-to-vercel.md","How To Create Namespace Subdomain & Connect To Vercel App",{"type":8,"value":221,"toc":267},[222,226,229,233,236,239,243,246,250,253,257,260,264],[11,223,225],{"id":224},"introduction","Introduction",[16,227,228],{},"Creating a subdomain on Namecheap and connecting it with a Vercel deployed app is a straightforward process. In this blog, we will guide you through the steps required to create a subdomain on Namecheap and connect it to your Vercel deployed app.",[11,230,232],{"id":231},"step-1-create-a-subdomain-on-namecheap","Step 1: Create a subdomain on Namecheap",[16,234,235],{},"The first step is to create a subdomain on Namecheap. To do this, log in to your Namecheap account and go to your domain dashboard. Click on the \"Advanced DNS\" tab and then click on \"Add New Record\".",[16,237,238],{},"Select \"CNAME (Alias)\" from the \"Type\" dropdown menu. In the \"Host\" field, enter the name of your subdomain (for example, \"app\" if you want your subdomain to be \"app.yourdomain.com\"). In the \"Value\" field, enter the URL of your Vercel deployed app (for example, \"yourapp.vercel.app\").",[11,240,242],{"id":241},"step-2-verify-the-subdomain","Step 2: Verify the subdomain",[16,244,245],{},"After creating the subdomain, you need to verify that it has been set up correctly. To do this, go to your Vercel deployed app dashboard and click on the \"Domains\" tab. Click on \"Add Domain\" and enter the name of your subdomain. Vercel will verify the subdomain and confirm that it has been set up correctly.",[11,247,249],{"id":248},"step-3-add-the-subdomain-to-your-vercel-deployed-app","Step 3: Add the subdomain to your Vercel deployed app",[16,251,252],{},"Now that your subdomain has been verified, you need to add it to your Vercel deployed app. To do this, go to your app dashboard and click on \"Settings\". Click on \"Domains\" and then click on \"Add Domain\". Enter the name of your subdomain and click on \"Add\".",[11,254,256],{"id":255},"step-4-verify-the-subdomain-in-vercel","Step 4: Verify the subdomain in Vercel",[16,258,259],{},"After adding the subdomain to your Vercel deployed app, you need to verify that it has been set up correctly. To do this, click on the subdomain in your Vercel deployed app dashboard. Click on \"Verify DNS Configuration\". Vercel will check that the subdomain has been set up correctly and confirm that it is connected to your Vercel deployed app.",[11,261,263],{"id":262},"conclusion","Conclusion",[16,265,266],{},"Connecting a subdomain on Namecheap to your Vercel deployed app is a simple process that can be done in a few steps. By following the steps outlined in this blog, you can easily create a subdomain on Namecheap and connect it to your Vercel deployed app. Remember to verify your subdomain in both Namecheap and Vercel to ensure that it has been set up correctly. If you encounter any issues, reach out to Vercel support for assistance.",{"title":96,"searchDepth":110,"depth":110,"links":268},[269,270,271,272,273,274],{"id":224,"depth":117,"text":225},{"id":231,"depth":117,"text":232},{"id":241,"depth":117,"text":242},{"id":248,"depth":117,"text":249},{"id":255,"depth":117,"text":256},{"id":262,"depth":117,"text":263},"Here we will learn, How To Create Namespace Subdomain & Connect To Vercel App",{"date":277,"image":278,"alt":219,"tags":279,"published":212},"1st Mar 2023","/blogs-img/blog3.jpg",[210,280,281],"vercel","namecheap","/blogs/create-namespace-subdomain-connect-to-vercel",{"title":219,"description":275},"blogs/3. create-namespace-subdomain-connect-to-vercel","KlwXEABuKr1OOvtC55Cv8maXXicSrq8jiU1W1Mdh3dU",{"id":287,"title":288,"body":289,"description":680,"extension":204,"meta":681,"navigation":212,"ogImage":682,"path":685,"seo":686,"stem":687,"__hash__":688},"content/blogs/4. fetch-content-data-render-pages.md","How To Properly Fetch Nuxt Content Data and Render It in Nuxt Pages",{"type":8,"value":290,"toc":673},[291,293,296,300,303,330,334,337,385,388,392,398,440,443,447,450,670],[11,292,225],{"id":224},[16,294,295],{},"Nuxt.js is a popular open-source framework for building Vue.js applications. With the release of Nuxt 3, developers have access to new features and improvements to streamline the development process. One of these features is Nuxt Content v2, which allows you to create and manage content in a simple and efficient way. In this blog post, we will guide you through the steps to connect Nuxt Content v2 with Nuxt 3.",[11,297,299],{"id":298},"step-1-install-the-necessary-dependencies","Step 1: Install the necessary dependencies",[16,301,302],{},"The first step is to install the necessary dependencies for Nuxt Content v2. To do this, run the following command:",[91,304,308],{"className":305,"code":306,"language":307,"meta":96,"style":96},"language-js shiki shiki-themes dracula","npm install @nuxt/content@next\n\n","js",[35,309,310],{"__ignoreMap":96},[100,311,312,315,318,321,324,327],{"class":102,"line":103},[100,313,314],{"class":113},"npm install @",[100,316,210],{"class":317},"sY_PY",[100,319,320],{"class":131},"/",[100,322,323],{"class":317},"content",[100,325,326],{"class":113},"@",[100,328,329],{"class":317},"next\n",[11,331,333],{"id":332},"step-2-configure-nuxt-content-v2","Step 2: Configure Nuxt Content v2",[16,335,336],{},"Once the dependencies are installed, you need to configure Nuxt Content v2 in your Nuxt 3 project. To do this, create a new file named nuxt.config.js in the root directory of your project and add the following code:",[91,338,340],{"className":305,"code":339,"language":307,"meta":96,"style":96},"export default {\n  // Enable Nuxt Content module\n  modules: [\n    '@nuxt/content'\n  ],\n\n",[35,341,342,353,358,368,379],{"__ignoreMap":96},[100,343,344,347,350],{"class":102,"line":103},[100,345,346],{"class":131},"export",[100,348,349],{"class":131}," default",[100,351,352],{"class":113}," {\n",[100,354,355],{"class":102,"line":110},[100,356,357],{"class":106},"  // Enable Nuxt Content module\n",[100,359,360,363,365],{"class":102,"line":117},[100,361,362],{"class":113},"  modules",[100,364,132],{"class":131},[100,366,367],{"class":113}," [\n",[100,369,370,373,376],{"class":102,"line":187},[100,371,372],{"class":138},"    '",[100,374,375],{"class":141},"@nuxt/content",[100,377,378],{"class":138},"'\n",[100,380,382],{"class":102,"line":381},5,[100,383,384],{"class":113},"  ],\n",[16,386,387],{},"In the above code, we have enabled the Nuxt Content module and set the directory where your content will be stored.",[11,389,391],{"id":390},"step-3-create-content-files","Step 3: Create content files",[16,393,394,395,397],{},"Once Nuxt Content v2 is configured, you can create content files in the specified directory. By default, Nuxt Content v2 supports Markdown and YAML file formats. You can create a new file in the ",[35,396,323],{}," directory with the following structure:",[91,399,402],{"className":400,"code":401,"language":204,"meta":96,"style":96},"language-md shiki shiki-themes dracula","---\ntitle: 'Hello, world!'\n---\n\n# Welcome to Nuxt Content v2\n\nThis is an example of a Markdown file created using Nuxt Content v2.\n",[35,403,404,409,414,419,424,429,434],{"__ignoreMap":96},[100,405,406],{"class":102,"line":103},[100,407,408],{"class":106},"---\n",[100,410,411],{"class":102,"line":110},[100,412,413],{"class":113},"title: 'Hello, world!'\n",[100,415,416],{"class":102,"line":117},[100,417,408],{"class":418},"sMMmS",[100,420,421],{"class":102,"line":187},[100,422,423],{"emptyLinePlaceholder":212},"\n",[100,425,426],{"class":102,"line":381},[100,427,428],{"class":418},"# Welcome to Nuxt Content v2\n",[100,430,432],{"class":102,"line":431},6,[100,433,423],{"emptyLinePlaceholder":212},[100,435,437],{"class":102,"line":436},7,[100,438,439],{"class":113},"This is an example of a Markdown file created using Nuxt Content v2.\n",[16,441,442],{},"In the above code, we have created a Markdown file with a title and a sample content.",[11,444,446],{"id":445},"step-4-display-content-on-a-page","Step 4: Display content on a page",[16,448,449],{},"Now that we have created content files, we can display the content on a page. To do this, create a new Vue component in the components directory with the following code:",[91,451,455],{"className":452,"code":453,"language":454,"meta":96,"style":96},"language-vue shiki shiki-themes dracula","\u003Cscript setup lang=\"ts\">\nconst { path } = useRoute()\nconst articles = await queryContent(path).findOne()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cmain>\n    \u003Cdiv>\n      \u003CContentRenderer :value=\"articles\">\n        \u003Ctemplate #empty>\n          \u003Cp>No content found.\u003C/p>\n        \u003C/template>\n      \u003C/ContentRenderer>\n    \u003C/div>\n  \u003C/main>\n\u003C/template>\n","vue",[35,456,457,484,501,524,533,537,546,556,567,590,606,621,631,641,651,661],{"__ignoreMap":96},[100,458,459,462,465,468,471,474,476,479,481],{"class":102,"line":103},[100,460,461],{"class":113},"\u003C",[100,463,464],{"class":131},"script",[100,466,467],{"class":317}," setup",[100,469,470],{"class":317}," lang",[100,472,473],{"class":131},"=",[100,475,128],{"class":138},[100,477,478],{"class":141},"ts",[100,480,128],{"class":138},[100,482,483],{"class":113},">\n",[100,485,486,489,492,494,498],{"class":102,"line":110},[100,487,488],{"class":131},"const",[100,490,491],{"class":113}," { path } ",[100,493,473],{"class":131},[100,495,497],{"class":496},"sAOxA"," useRoute",[100,499,500],{"class":113},"()\n",[100,502,503,505,508,510,513,516,519,522],{"class":102,"line":117},[100,504,488],{"class":131},[100,506,507],{"class":113}," articles ",[100,509,473],{"class":131},[100,511,512],{"class":131}," await",[100,514,515],{"class":496}," queryContent",[100,517,518],{"class":113},"(path).",[100,520,521],{"class":496},"findOne",[100,523,500],{"class":113},[100,525,526,529,531],{"class":102,"line":187},[100,527,528],{"class":113},"\u003C/",[100,530,464],{"class":131},[100,532,483],{"class":113},[100,534,535],{"class":102,"line":381},[100,536,423],{"emptyLinePlaceholder":212},[100,538,539,541,544],{"class":102,"line":431},[100,540,461],{"class":113},[100,542,543],{"class":131},"template",[100,545,483],{"class":113},[100,547,548,551,554],{"class":102,"line":436},[100,549,550],{"class":113},"  \u003C",[100,552,553],{"class":131},"main",[100,555,483],{"class":113},[100,557,559,562,565],{"class":102,"line":558},8,[100,560,561],{"class":113},"    \u003C",[100,563,564],{"class":131},"div",[100,566,483],{"class":113},[100,568,570,573,576,579,581,583,586,588],{"class":102,"line":569},9,[100,571,572],{"class":113},"      \u003C",[100,574,575],{"class":131},"ContentRenderer",[100,577,578],{"class":317}," :value",[100,580,473],{"class":131},[100,582,128],{"class":138},[100,584,585],{"class":141},"articles",[100,587,128],{"class":138},[100,589,483],{"class":113},[100,591,593,596,598,601,604],{"class":102,"line":592},10,[100,594,595],{"class":113},"        \u003C",[100,597,543],{"class":131},[100,599,600],{"class":113}," #",[100,602,603],{"class":317},"empty",[100,605,483],{"class":113},[100,607,609,612,614,617,619],{"class":102,"line":608},11,[100,610,611],{"class":113},"          \u003C",[100,613,16],{"class":131},[100,615,616],{"class":113},">No content found.\u003C/",[100,618,16],{"class":131},[100,620,483],{"class":113},[100,622,624,627,629],{"class":102,"line":623},12,[100,625,626],{"class":113},"        \u003C/",[100,628,543],{"class":131},[100,630,483],{"class":113},[100,632,634,637,639],{"class":102,"line":633},13,[100,635,636],{"class":113},"      \u003C/",[100,638,575],{"class":131},[100,640,483],{"class":113},[100,642,644,647,649],{"class":102,"line":643},14,[100,645,646],{"class":113},"    \u003C/",[100,648,564],{"class":131},[100,650,483],{"class":113},[100,652,654,657,659],{"class":102,"line":653},15,[100,655,656],{"class":113},"  \u003C/",[100,658,553],{"class":131},[100,660,483],{"class":113},[100,662,664,666,668],{"class":102,"line":663},16,[100,665,528],{"class":113},[100,667,543],{"class":131},[100,669,483],{"class":113},[195,671,672],{},"html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .sY_PY, html code.shiki .sY_PY{--shiki-default:#50FA7B;--shiki-default-font-style:italic}html pre.shiki code .s0Tla, html code.shiki .s0Tla{--shiki-default:#FF79C6}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 pre.shiki code .shSDL, html code.shiki .shSDL{--shiki-default:#6272A4}html pre.shiki code .seVfx, html code.shiki .seVfx{--shiki-default:#E9F284}html pre.shiki code .s-mGx, html code.shiki .s-mGx{--shiki-default:#F1FA8C}html pre.shiki code .sMMmS, html code.shiki .sMMmS{--shiki-default:#BD93F9;--shiki-default-font-weight:bold}html pre.shiki code .sAOxA, html code.shiki .sAOxA{--shiki-default:#50FA7B}",{"title":96,"searchDepth":110,"depth":110,"links":674},[675,676,677,678,679],{"id":224,"depth":117,"text":225},{"id":298,"depth":117,"text":299},{"id":332,"depth":117,"text":333},{"id":390,"depth":117,"text":391},{"id":445,"depth":117,"text":446},"Here we will learn How To Properly Fetch Nuxt Content Data and Render It in Nuxt Pages",{"date":277,"image":682,"alt":288,"tags":683,"published":212},"/blogs-img/blog4.jpg",[210,684],"nuxt-content","/blogs/fetch-content-data-render-pages",{"title":288,"description":680},"blogs/4. fetch-content-data-render-pages","FZUR4FWpcPh10Y5pZ-zDdemFmAyR9lYAEE-591z8f10",1770700754615]