[{"data":1,"prerenderedAt":1207},["ShallowReactive",2],{"i-heroicons:moon-20-solid":3,"i-simple-icons:bluesky":8,"i-simple-icons:github":11,"i-simple-icons:x":13,"i-simple-icons:linkedin":15,"i-heroicons:chevron-right-20-solid":18,"i-heroicons:bars-3-center-left-20-solid":20,"i-heroicons:home-20-solid":22,"i-heroicons:rss-solid":24,"i-heroicons:code-bracket-square-20-solid":26,"\u002Fblog\u002Fnuxt-content-with-remote-markdown":28,"i-heroicons:chevron-down-20-solid":1205},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,20,false,"\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M7.455 2.004a.75.75 0 0 1 .26.77a7 7 0 0 0 9.958 7.967a.75.75 0 0 1 1.067.853A8.5 8.5 0 1 1 6.647 1.921a.75.75 0 0 1 .808.083\" clip-rule=\"evenodd\"\u002F>",{"left":4,"top":4,"width":9,"height":9,"rotate":4,"vFlip":6,"hFlip":6,"body":10},24,"\u003Cpath fill=\"currentColor\" d=\"M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037c-.856 3.061-3.978 3.842-6.755 3.37c4.854.826 6.089 3.562 3.422 6.299c-5.065 5.196-7.28-1.304-7.847-2.97c-.104-.305-.152-.448-.153-.327c0-.121-.05.022-.153.327c-.568 1.666-2.782 8.166-7.847 2.97c-2.667-2.737-1.432-5.473 3.422-6.3c-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026\"\u002F>",{"left":4,"top":4,"width":9,"height":9,"rotate":4,"vFlip":6,"hFlip":6,"body":12},"\u003Cpath fill=\"currentColor\" d=\"M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\u002F>",{"left":4,"top":4,"width":9,"height":9,"rotate":4,"vFlip":6,"hFlip":6,"body":14},"\u003Cpath fill=\"currentColor\" d=\"M14.234 10.162L22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299l-.929-1.329L3.076 1.56h3.182l5.965 8.532l.929 1.329l7.754 11.09h-3.182z\"\u002F>",{"left":4,"top":4,"width":9,"height":9,"rotate":4,"vFlip":6,"hFlip":6,"body":16,"hidden":17},"\u003Cpath fill=\"currentColor\" d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z\"\u002F>",true,{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":19},"\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10L8.22 6.28a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":21},"\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75m0 10.5a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75M2 10a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 2 10\" clip-rule=\"evenodd\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":23},"\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707z\" clip-rule=\"evenodd\"\u002F>",{"left":4,"top":4,"width":9,"height":9,"rotate":4,"vFlip":6,"hFlip":6,"body":25},"\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M3.75 4.5a.75.75 0 0 1 .75-.75h.75c8.284 0 15 6.716 15 15v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75C18 11.708 12.292 6 5.25 6H4.5a.75.75 0 0 1-.75-.75zm0 6.75a.75.75 0 0 1 .75-.75h.75a8.25 8.25 0 0 1 8.25 8.25v.75a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75v-.75a6 6 0 0 0-6-6H4.5a.75.75 0 0 1-.75-.75zm0 7.5a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0\" clip-rule=\"evenodd\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":27},"\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4.25 2A2.25 2.25 0 0 0 2 4.25v11.5A2.25 2.25 0 0 0 4.25 18h11.5A2.25 2.25 0 0 0 18 15.75V4.25A2.25 2.25 0 0 0 15.75 2zm4.03 6.28a.75.75 0 0 0-1.06-1.06L4.97 9.47a.75.75 0 0 0 0 1.06l2.25 2.25a.75.75 0 0 0 1.06-1.06L6.56 10zm4.5-1.06a.75.75 0 1 0-1.06 1.06L13.44 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06l2.25-2.25a.75.75 0 0 0 0-1.06z\" clip-rule=\"evenodd\"\u002F>",{"id":29,"title":30,"body":31,"description":1177,"extension":329,"featured":17,"meta":1178,"navigation":17,"path":1200,"published_on":1201,"seo":1202,"stem":1203,"__hash__":1204},"blog\u002Fblog\u002FNuxt Content with Remote Markdown.md","Using Nuxt Content: Working with Remote Markdown Files",{"type":32,"value":33,"toc":1172},"minimark",[34,38,41,46,51,67,88,92,95,98,102,111,147,158,174,215,219,229,232,241,308,314,317,325,397,404,473,488,491,495,498,501,511,550,560,706,713,730,748,754,779,800,803,812,902,910,1069,1077,1133,1136,1139,1168],[35,36,37],"p",{},"This article discusses how to get started with Nuxt Content (v2) to create a minimal blog, and how to work with remote Markdown files.",[35,39,40],{},"The first section goes over how to set up a project with Nuxt Content, and the second cover working with Markdown files. If you are already familiar with the setup steps, feel free to skip the first section.",[42,43,45],"h2",{"id":44},"get-started","Get Started",[47,48,50],"h3",{"id":49},"what-is-nuxt","What is Nuxt?",[35,52,53,60,61,66],{},[54,55,59],"a",{"href":56,"rel":57},"https:\u002F\u002Fnuxt.com",[58],"nofollow","Nuxt"," is an open-source framework for building performant websites and full-stack applications using ",[54,62,65],{"href":63,"rel":64},"https:\u002F\u002Fvuejs.org\u002F",[58],"Vue.js",". It provides performance and SEO benefits, and adds full-stack capabilities for Vue apps.",[35,68,69,70,75,76,81,82,87],{},"Nuxt is an appealing framework to work with, partly because of its robust module ecosystem. Popular UI libraries, headless CMS tools, and databases can be easily integrated with a single line of code. Among other third-party modules, ",[54,71,74],{"href":72,"rel":73},"https:\u002F\u002Fimage.nuxt.com\u002F",[58],"Nuxt Image",", ",[54,77,80],{"href":78,"rel":79},"https:\u002F\u002Fcontent.nuxt.com\u002F",[58],"Nuxt Content",", and ",[54,83,86],{"href":84,"rel":85},"https:\u002F\u002Fui.nuxt.com\u002F",[58],"Nuxt UI"," are some of the official modules developed by the Nuxt team.",[47,89,91],{"id":90},"what-is-nuxt-content","What is Nuxt Content?",[35,93,94],{},"Nuxt Content is a file-based CMS that makes working with content easier for Vue developers. Using this module, it is possible to create fully content-driven websites using just Markdown files. It provides syntax highlighting for code snippets in Markdown, interactive Vue components inside content and different utilities including a MongoDB-like API for querying content.",[35,96,97],{},"The Nuxt team also offers Nuxt Studio - a pro version of Nuxt Content - with features like collaborative editing, live previews and a UI for working with media assets.",[47,99,101],{"id":100},"setup","Setup",[35,103,104,105,110],{},"To start a fresh Nuxt Content project, we can do so right in the browser using ",[54,106,109],{"href":107,"rel":108},"https:\u002F\u002Fnuxt.new\u002F",[58],"nuxt.new",", or locally by running the following command:",[112,113,118],"pre",{"className":114,"code":115,"language":116,"meta":117,"style":117},"language-bash shiki shiki-themes github-dark","npx nuxi@latest init -t content my-minimal-blog\n","bash","",[119,120,121],"code",{"__ignoreMap":117},[122,123,126,130,134,137,141,144],"span",{"class":124,"line":125},"line",1,[122,127,129],{"class":128},"svObZ","npx",[122,131,133],{"class":132},"sU2Wk"," nuxi@latest",[122,135,136],{"class":132}," init",[122,138,140],{"class":139},"sDLfK"," -t",[122,142,143],{"class":132}," content",[122,145,146],{"class":132}," my-minimal-blog\n",[35,148,149,150,153,154,157],{},"To integrate the module to an existing project, we need to first install it and add it to the ",[119,151,152],{},"modules"," property in our ",[119,155,156],{},"nuxt.config.js",":",[112,159,161],{"className":114,"code":160,"language":116,"meta":117,"style":117},"npm install @nuxt\u002Fcontent\n",[119,162,163],{"__ignoreMap":117},[122,164,165,168,171],{"class":124,"line":125},[122,166,167],{"class":128},"npm",[122,169,170],{"class":132}," install",[122,172,173],{"class":132}," @nuxt\u002Fcontent\n",[112,175,179],{"className":176,"code":177,"language":178,"meta":117,"style":117},"language-js shiki shiki-themes github-dark","export default defineNuxtConfig({\n  modules: ['@nuxt\u002Fcontent']\n});\n","js",[119,180,181,197,209],{"__ignoreMap":117},[122,182,183,187,190,193],{"class":124,"line":125},[122,184,186],{"class":185},"snl16","export",[122,188,189],{"class":185}," default",[122,191,192],{"class":128}," defineNuxtConfig",[122,194,196],{"class":195},"s95oV","({\n",[122,198,200,203,206],{"class":124,"line":199},2,[122,201,202],{"class":195},"  modules: [",[122,204,205],{"class":132},"'@nuxt\u002Fcontent'",[122,207,208],{"class":195},"]\n",[122,210,212],{"class":124,"line":211},3,[122,213,214],{"class":195},"});\n",[47,216,218],{"id":217},"basics","Basics",[35,220,221,222,224,225,228],{},"We can configure multiple sources for content in ",[119,223,156],{},". By default, all content files are stored in the ",[119,226,227],{},"content\u002F"," folder, and can be in the form of Markdown, YAML, JSON or CSV.",[35,230,231],{},"To get started, let's create some content, and ensure we have a catch-all route set up.",[35,233,234,235,240],{},"A ",[54,236,239],{"href":237,"rel":238},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Fpages\u002F#catch-all-route",[58],"catch-all route"," should already be created by default if we are setting up a Nuxt Content project from scratch, and here is what it looks like initially:",[112,242,246],{"className":243,"code":244,"language":245,"meta":117,"style":117},"language-vue shiki shiki-themes github-dark","\u003C!-- pages\u002F[...slug].vue -->\n\u003Ctemplate>\n  \u003Cmain>\n    \u003CContentDoc \u002F>\n  \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n","vue",[119,247,248,254,266,276,288,298],{"__ignoreMap":117},[122,249,250],{"class":124,"line":125},[122,251,253],{"class":252},"sAwPA","\u003C!-- pages\u002F[...slug].vue -->\n",[122,255,256,259,263],{"class":124,"line":199},[122,257,258],{"class":195},"\u003C",[122,260,262],{"class":261},"s4JwU","template",[122,264,265],{"class":195},">\n",[122,267,268,271,274],{"class":124,"line":211},[122,269,270],{"class":195},"  \u003C",[122,272,273],{"class":261},"main",[122,275,265],{"class":195},[122,277,279,282,285],{"class":124,"line":278},4,[122,280,281],{"class":195},"    \u003C",[122,283,284],{"class":261},"ContentDoc",[122,286,287],{"class":195}," \u002F>\n",[122,289,291,294,296],{"class":124,"line":290},5,[122,292,293],{"class":195},"  \u003C\u002F",[122,295,273],{"class":261},[122,297,265],{"class":195},[122,299,301,304,306],{"class":124,"line":300},6,[122,302,303],{"class":195},"\u003C\u002F",[122,305,262],{"class":261},[122,307,265],{"class":195},[35,309,310,313],{},[119,311,312],{},"\u003CContentDoc>"," is a built-in component that takes care of all the fetching and rendering functionality for a single piece of content such as a blog post.",[35,315,316],{},"Next, let's create some Markdown files with some content:",[35,318,319],{},[320,321,322],"strong",{},[119,323,324],{},"content\u002FNuxt.md",[112,326,330],{"className":327,"code":328,"language":329,"meta":117,"style":117},"language-md shiki shiki-themes github-dark","---\ntitle: Nuxt\ndescription: What is Nuxt?\n---\n\n# What is Nuxt?\n\nNuxt is an open source framework that makes web development intuitive and powerful.\n\n[Learn More](https:\u002F\u002Fnuxt.com)\n","md",[119,331,332,338,343,348,352,357,362,367,373,378],{"__ignoreMap":117},[122,333,334],{"class":124,"line":125},[122,335,337],{"class":336},"sIZOC","---\n",[122,339,340],{"class":124,"line":199},[122,341,342],{"class":195},"title: Nuxt\n",[122,344,345],{"class":124,"line":211},[122,346,347],{"class":195},"description: What is Nuxt?\n",[122,349,350],{"class":124,"line":278},[122,351,337],{"class":336},[122,353,354],{"class":124,"line":290},[122,355,356],{"emptyLinePlaceholder":17},"\n",[122,358,359],{"class":124,"line":300},[122,360,361],{"class":336},"# What is Nuxt?\n",[122,363,365],{"class":124,"line":364},7,[122,366,356],{"emptyLinePlaceholder":17},[122,368,370],{"class":124,"line":369},8,[122,371,372],{"class":195},"Nuxt is an open source framework that makes web development intuitive and powerful.\n",[122,374,376],{"class":124,"line":375},9,[122,377,356],{"emptyLinePlaceholder":17},[122,379,381,384,388,391,394],{"class":124,"line":380},10,[122,382,383],{"class":195},"[",[122,385,387],{"class":386},"sSArK","Learn More",[122,389,390],{"class":195},"](",[122,392,56],{"class":393},"sKT0L",[122,395,396],{"class":195},")\n",[35,398,399],{},[320,400,401],{},[119,402,403],{},"content\u002FNuxt Content.md",[112,405,407],{"className":327,"code":406,"language":329,"meta":117,"style":117},"---\ntitle: Nuxt Content\ndescription: What is Nuxt Content?\n---\n\nWe can also access our front-matter data in our Markdown.\n\n# {{ $doc.description }}\n\nNuxt Content makes working with content easy for Vue Developers.\n\n[What is Nuxt?](\u002Fnuxt)\n",[119,408,409,413,418,423,427,431,436,440,445,449,454,459],{"__ignoreMap":117},[122,410,411],{"class":124,"line":125},[122,412,337],{"class":336},[122,414,415],{"class":124,"line":199},[122,416,417],{"class":195},"title: Nuxt Content\n",[122,419,420],{"class":124,"line":211},[122,421,422],{"class":195},"description: What is Nuxt Content?\n",[122,424,425],{"class":124,"line":278},[122,426,337],{"class":336},[122,428,429],{"class":124,"line":290},[122,430,356],{"emptyLinePlaceholder":17},[122,432,433],{"class":124,"line":300},[122,434,435],{"class":195},"We can also access our front-matter data in our Markdown.\n",[122,437,438],{"class":124,"line":364},[122,439,356],{"emptyLinePlaceholder":17},[122,441,442],{"class":124,"line":369},[122,443,444],{"class":336},"# {{ $doc.description }}\n",[122,446,447],{"class":124,"line":375},[122,448,356],{"emptyLinePlaceholder":17},[122,450,451],{"class":124,"line":380},[122,452,453],{"class":195},"Nuxt Content makes working with content easy for Vue Developers.\n",[122,455,457],{"class":124,"line":456},11,[122,458,356],{"emptyLinePlaceholder":17},[122,460,462,464,466,468,471],{"class":124,"line":461},12,[122,463,383],{"class":195},[122,465,50],{"class":386},[122,467,390],{"class":195},[122,469,470],{"class":393},"\u002Fnuxt",[122,472,396],{"class":195},[35,474,475,476,478,479,75,481,483,484,487],{},"Nuxt Content will then automatically process our content folder, and generate file-based routes for each content. The file located at ",[119,477,324],{}," will be available at ",[119,480,470],{},[119,482,403],{}," at ",[119,485,486],{},"\u002Fnuxt-content",", and so on.",[35,489,490],{},"That's it. We now have a minimal yet fully-functioning blog built with Nuxt Content.",[42,492,494],{"id":493},"remote-content","Remote Content",[35,496,497],{},"This section will go over how to configure Nuxt Content to work with remote content, specifically with Markdown files from a GitHub repo.",[35,499,500],{},"Nuxt Content provides some useful configuration options for fetching, parsing and rendering content. We can configure our Markdown content to have a table of contents and anchor links for our headings. We can add plugins for customizing parsing behavior. We can customize syntax highlighting for our code snippets. We can even set different sources for our content.",[35,502,503,504,507,508,510],{},"Content-related configurations can be set using the ",[119,505,506],{},"content"," property in ",[119,509,156],{}," file.",[112,512,514],{"className":176,"code":513,"language":178,"meta":117,"style":117},"\u002F\u002F nuxt.config.js\nexport default defineNuxtConfig({\n  content: {\n    \u002F\u002F Custom Configurations\n  }\n});\n",[119,515,516,521,531,536,541,546],{"__ignoreMap":117},[122,517,518],{"class":124,"line":125},[122,519,520],{"class":252},"\u002F\u002F nuxt.config.js\n",[122,522,523,525,527,529],{"class":124,"line":199},[122,524,186],{"class":185},[122,526,189],{"class":185},[122,528,192],{"class":128},[122,530,196],{"class":195},[122,532,533],{"class":124,"line":211},[122,534,535],{"class":195},"  content: {\n",[122,537,538],{"class":124,"line":278},[122,539,540],{"class":252},"    \u002F\u002F Custom Configurations\n",[122,542,543],{"class":124,"line":290},[122,544,545],{"class":195},"  }\n",[122,547,548],{"class":124,"line":300},[122,549,214],{"class":195},[35,551,552,553,555,556,559],{},"By default, Nuxt Content is configured to look for local files inside the ",[119,554,227],{}," directory. But, using the ",[119,557,558],{},"sources"," option, we can tell the module to look for files in different places, which can either be other local files or files hosted on a remote server. Although it's not recommended, we can also override the default content location for local files.",[112,561,563],{"className":176,"code":562,"language":178,"meta":117,"style":117},"export default defineNuxtConfig({\n  content: {\n    sources: {\n      blog: {\n        driver: 'fs',\n        prefix: '\u002Fblog',\n        base: resolve(__dirname, 'articles')\n      },\n      github: {\n        driver: 'github',\n        prefix: '\u002Fnotes',\n        repo: 'oneminch\u002Fnotes',\n        branch: 'main',\n        dir: 'Glossary'\n      }\n    }\n  }\n});\n",[119,564,565,575,579,584,589,600,610,626,631,636,645,654,664,675,684,690,696,701],{"__ignoreMap":117},[122,566,567,569,571,573],{"class":124,"line":125},[122,568,186],{"class":185},[122,570,189],{"class":185},[122,572,192],{"class":128},[122,574,196],{"class":195},[122,576,577],{"class":124,"line":199},[122,578,535],{"class":195},[122,580,581],{"class":124,"line":211},[122,582,583],{"class":195},"    sources: {\n",[122,585,586],{"class":124,"line":278},[122,587,588],{"class":195},"      blog: {\n",[122,590,591,594,597],{"class":124,"line":290},[122,592,593],{"class":195},"        driver: ",[122,595,596],{"class":132},"'fs'",[122,598,599],{"class":195},",\n",[122,601,602,605,608],{"class":124,"line":300},[122,603,604],{"class":195},"        prefix: ",[122,606,607],{"class":132},"'\u002Fblog'",[122,609,599],{"class":195},[122,611,612,615,618,621,624],{"class":124,"line":364},[122,613,614],{"class":195},"        base: ",[122,616,617],{"class":128},"resolve",[122,619,620],{"class":195},"(__dirname, ",[122,622,623],{"class":132},"'articles'",[122,625,396],{"class":195},[122,627,628],{"class":124,"line":369},[122,629,630],{"class":195},"      },\n",[122,632,633],{"class":124,"line":375},[122,634,635],{"class":195},"      github: {\n",[122,637,638,640,643],{"class":124,"line":380},[122,639,593],{"class":195},[122,641,642],{"class":132},"'github'",[122,644,599],{"class":195},[122,646,647,649,652],{"class":124,"line":456},[122,648,604],{"class":195},[122,650,651],{"class":132},"'\u002Fnotes'",[122,653,599],{"class":195},[122,655,656,659,662],{"class":124,"line":461},[122,657,658],{"class":195},"        repo: ",[122,660,661],{"class":132},"'oneminch\u002Fnotes'",[122,663,599],{"class":195},[122,665,667,670,673],{"class":124,"line":666},13,[122,668,669],{"class":195},"        branch: ",[122,671,672],{"class":132},"'main'",[122,674,599],{"class":195},[122,676,678,681],{"class":124,"line":677},14,[122,679,680],{"class":195},"        dir: ",[122,682,683],{"class":132},"'Glossary'\n",[122,685,687],{"class":124,"line":686},15,[122,688,689],{"class":195},"      }\n",[122,691,693],{"class":124,"line":692},16,[122,694,695],{"class":195},"    }\n",[122,697,699],{"class":124,"line":698},17,[122,700,545],{"class":195},[122,702,704],{"class":124,"line":703},18,[122,705,214],{"class":195},[35,707,708,709,712],{},"In the above snippet, we have added two new sources for our content: one local source and one remote (GitHub). The type of source added is indicated by the ",[119,710,711],{},"driver"," option in our source object:",[714,715,716,724],"ul",{},[717,718,719,720,723],"li",{},"The ",[119,721,722],{},"fs"," driver stands for filesystem and indicates our content source is local to the project.",[717,725,719,726,729],{},[119,727,728],{},"github"," driver allows us to map files from a remote GitHub repo to our local project.",[35,731,732,735,736,741,742,747],{},[320,733,734],{},"Side Note",": Nuxt Content uses ",[54,737,740],{"href":738,"rel":739},"https:\u002F\u002Funstorage.unjs.io\u002F",[58],"unstorage"," under the hood to make this possible. Other types of drivers can be configured according to ",[54,743,746],{"href":744,"rel":745},"https:\u002F\u002Funstorage.unjs.io\u002Fdrivers",[58],"the unstorage documentation",".",[35,749,750,751,753],{},"Let's see what the ",[119,752,728],{}," configuration above does in action.",[35,755,756,757,762,763,766,767,770,771,774,775,778],{},"Nuxt Content will parse all the markdown files located in the GitHub repo ",[54,758,761],{"href":759,"rel":760},"https:\u002F\u002Fgithub.com\u002Foneminch\u002Fnotes",[58],"oneminch\u002Fnotes"," under the ",[119,764,765],{},"Glossary"," folder (given by the ",[119,768,769],{},"dir"," property), and make all files available under the ",[119,772,773],{},"\u002Fnotes"," path (indicated by the ",[119,776,777],{},"prefix"," property).",[35,780,781,782,785,786,789,790,792,793,785,796,799],{},"For instance, in the repo, I have Markdown files titled ",[119,783,784],{},"Hoisting.md"," and ",[119,787,788],{},"Server-Side Rendering.md"," in the ",[119,791,765],{}," folder. According to our configuration, the contents of these files will be available at the paths ",[119,794,795],{},"\u002Fnotes\u002Fhoisting",[119,797,798],{},"\u002Fnotes\u002Fserver-side-rendering"," respectively, just as working with local content.",[35,801,802],{},"We can also use our prefix in different parts of our code that require a path for fetching data.",[35,804,805,157],{},[320,806,807,808,811],{},"Using the ",[119,809,810],{},"queryContent()"," composable",[112,813,815],{"className":243,"code":814,"language":245,"meta":117,"style":117},"\u003Cscript setup>\n  const { data: notes } = await useLazyAsyncData('my-notes', () =>\n    queryContent('\u002Fnotes').find()\n  );\n\u003C\u002Fscript>\n",[119,816,817,829,871,889,894],{"__ignoreMap":117},[122,818,819,821,824,827],{"class":124,"line":125},[122,820,258],{"class":195},[122,822,823],{"class":261},"script",[122,825,826],{"class":128}," setup",[122,828,265],{"class":195},[122,830,831,834,837,841,844,847,850,853,856,859,862,865,868],{"class":124,"line":199},[122,832,833],{"class":185},"  const",[122,835,836],{"class":195}," { ",[122,838,840],{"class":839},"s9osk","data",[122,842,843],{"class":195},": ",[122,845,846],{"class":139},"notes",[122,848,849],{"class":195}," } ",[122,851,852],{"class":185},"=",[122,854,855],{"class":185}," await",[122,857,858],{"class":128}," useLazyAsyncData",[122,860,861],{"class":195},"(",[122,863,864],{"class":132},"'my-notes'",[122,866,867],{"class":195},", () ",[122,869,870],{"class":185},"=>\n",[122,872,873,876,878,880,883,886],{"class":124,"line":211},[122,874,875],{"class":128},"    queryContent",[122,877,861],{"class":195},[122,879,651],{"class":132},[122,881,882],{"class":195},").",[122,884,885],{"class":128},"find",[122,887,888],{"class":195},"()\n",[122,890,891],{"class":124,"line":278},[122,892,893],{"class":195},"  );\n",[122,895,896,898,900],{"class":124,"line":290},[122,897,303],{"class":195},[122,899,823],{"class":261},[122,901,265],{"class":195},[35,903,904],{},[320,905,807,906,909],{},[119,907,908],{},"\u003CContentList>"," component:",[112,911,913],{"className":243,"code":912,"language":245,"meta":117,"style":117},"\u003Ctemplate>\n  \u003CContentList path=\"\u002Fnotes\">\n    \u003Ctemplate #default=\"{ list }\">\n      \u003Ca v-for=\"note in list\" :key=\"note._path\" :href=\"note._path\">\n                  {{ note.title }}        \n      \u003C\u002Fa>\n    \u003C\u002Ftemplate>\n    \u003Ctemplate #not-found>\n      \u003Cp>No notes found.\u003C\u002Fp>\n    \u003C\u002Ftemplate>\n  \u003C\u002FContentList>\n\u003C\u002Ftemplate>\n",[119,914,915,923,940,964,996,1001,1010,1019,1032,1045,1053,1061],{"__ignoreMap":117},[122,916,917,919,921],{"class":124,"line":125},[122,918,258],{"class":195},[122,920,262],{"class":261},[122,922,265],{"class":195},[122,924,925,927,930,933,935,938],{"class":124,"line":199},[122,926,270],{"class":195},[122,928,929],{"class":261},"ContentList",[122,931,932],{"class":128}," path",[122,934,852],{"class":195},[122,936,937],{"class":132},"\"\u002Fnotes\"",[122,939,265],{"class":195},[122,941,942,944,946,949,952,954,957,960,962],{"class":124,"line":211},[122,943,281],{"class":195},[122,945,262],{"class":261},[122,947,948],{"class":195}," #",[122,950,951],{"class":128},"default",[122,953,852],{"class":195},[122,955,956],{"class":132},"\"",[122,958,959],{"class":195},"{ list }",[122,961,956],{"class":132},[122,963,265],{"class":195},[122,965,966,969,971,974,976,979,982,984,987,990,992,994],{"class":124,"line":278},[122,967,968],{"class":195},"      \u003C",[122,970,54],{"class":261},[122,972,973],{"class":128}," v-for",[122,975,852],{"class":195},[122,977,978],{"class":132},"\"note in list\"",[122,980,981],{"class":128}," :key",[122,983,852],{"class":195},[122,985,986],{"class":132},"\"note._path\"",[122,988,989],{"class":128}," :href",[122,991,852],{"class":195},[122,993,986],{"class":132},[122,995,265],{"class":195},[122,997,998],{"class":124,"line":290},[122,999,1000],{"class":195},"                  {{ note.title }}        \n",[122,1002,1003,1006,1008],{"class":124,"line":300},[122,1004,1005],{"class":195},"      \u003C\u002F",[122,1007,54],{"class":261},[122,1009,265],{"class":195},[122,1011,1012,1015,1017],{"class":124,"line":364},[122,1013,1014],{"class":195},"    \u003C\u002F",[122,1016,262],{"class":261},[122,1018,265],{"class":195},[122,1020,1021,1023,1025,1027,1030],{"class":124,"line":369},[122,1022,281],{"class":195},[122,1024,262],{"class":261},[122,1026,948],{"class":195},[122,1028,1029],{"class":128},"not-found",[122,1031,265],{"class":195},[122,1033,1034,1036,1038,1041,1043],{"class":124,"line":375},[122,1035,968],{"class":195},[122,1037,35],{"class":261},[122,1039,1040],{"class":195},">No notes found.\u003C\u002F",[122,1042,35],{"class":261},[122,1044,265],{"class":195},[122,1046,1047,1049,1051],{"class":124,"line":380},[122,1048,1014],{"class":195},[122,1050,262],{"class":261},[122,1052,265],{"class":195},[122,1054,1055,1057,1059],{"class":124,"line":456},[122,1056,293],{"class":195},[122,1058,929],{"class":261},[122,1060,265],{"class":195},[122,1062,1063,1065,1067],{"class":124,"line":461},[122,1064,303],{"class":195},[122,1066,262],{"class":261},[122,1068,265],{"class":195},[35,1070,1071,1072,747],{},"One thing to note is that since Nuxt Content is basically making API calls to GitHub every time we are fetching content, our requests might get rate limited by GitHub. So, it's generally recommended to add a GitHub API token to our configuration following ",[54,1073,1076],{"href":1074,"rel":1075},"https:\u002F\u002Funstorage.unjs.io\u002Fdrivers\u002Fgithub#usage",[58],"the unstorage configuration options",[112,1078,1080],{"className":176,"code":1079,"language":178,"meta":117,"style":117},"export default defineNuxtConfig({\n  content: {\n    sources: {\n      github: {\n        \u002F* ... *\u002F\n        token: process.env.GH_TOKEN\n      }\n    }\n  }\n});\n",[119,1081,1082,1092,1096,1100,1104,1109,1117,1121,1125,1129],{"__ignoreMap":117},[122,1083,1084,1086,1088,1090],{"class":124,"line":125},[122,1085,186],{"class":185},[122,1087,189],{"class":185},[122,1089,192],{"class":128},[122,1091,196],{"class":195},[122,1093,1094],{"class":124,"line":199},[122,1095,535],{"class":195},[122,1097,1098],{"class":124,"line":211},[122,1099,583],{"class":195},[122,1101,1102],{"class":124,"line":278},[122,1103,635],{"class":195},[122,1105,1106],{"class":124,"line":290},[122,1107,1108],{"class":252},"        \u002F* ... *\u002F\n",[122,1110,1111,1114],{"class":124,"line":300},[122,1112,1113],{"class":195},"        token: process.env.",[122,1115,1116],{"class":139},"GH_TOKEN\n",[122,1118,1119],{"class":124,"line":364},[122,1120,689],{"class":195},[122,1122,1123],{"class":124,"line":369},[122,1124,695],{"class":195},[122,1126,1127],{"class":124,"line":375},[122,1128,545],{"class":195},[122,1130,1131],{"class":124,"line":380},[122,1132,214],{"class":195},[35,1134,1135],{},"That's it. If you would like to learn more, check out the resources below. Thanks for reading.",[42,1137,387],{"id":1138},"learn-more",[714,1140,1141,1148,1155,1162],{},[717,1142,1143],{},[54,1144,1147],{"href":1145,"rel":1146},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=o9e12WbKrd8",[58],"Nuxt Content in 3 minutes (YouTube)",[717,1149,1150],{},[54,1151,1154],{"href":1152,"rel":1153},"https:\u002F\u002Fcontent.nuxt.com\u002Fusage\u002Fcontent-directory",[58],"Nuxt Content (Documentation)",[717,1156,1157],{},[54,1158,1161],{"href":1159,"rel":1160},"https:\u002F\u002Fcontent.nuxt.com\u002Fget-started\u002Fconfiguration#sources",[58],"sources - Configuration (Nuxt Content)",[717,1163,1164],{},[54,1165,1167],{"href":744,"rel":1166},[58],"unstorage Drivers",[1169,1170,1171],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#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 pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sIZOC, html code.shiki .sIZOC{--shiki-default:#79B8FF;--shiki-default-font-weight:bold}html pre.shiki code .sSArK, html code.shiki .sSArK{--shiki-default:#DBEDFF;--shiki-default-text-decoration:underline}html pre.shiki code .sKT0L, html code.shiki .sKT0L{--shiki-default:#E1E4E8;--shiki-default-text-decoration:underline}",{"title":117,"searchDepth":199,"depth":125,"links":1173},[1174,1175,1176],{"id":44,"depth":199,"text":45},{"id":493,"depth":199,"text":494},{"id":1138,"depth":199,"text":387},"This post goes over how to get started with Nuxt Content to create a minimal blog, and how to work with remote markdown files.",{"tags":1179,"image":1183,"cover_image":1184,"canonical_url":1185,"head":1186,"published":17},[1180,1181,1182,245,728],"nuxt","nuxt-content","markdown","\u002Fcontent\u002Fcover\u002Fnuxt-content-with-remote-markdown.png","https:\u002F\u002Fraw.githubusercontent.com\u002Foneminch\u002Fportfolio\u002Fmain\u002Fpublic\u002Fcontent\u002Fcover\u002Fnuxt-content-with-remote-markdown.png","https:\u002F\u002Fminch.dev\u002Fblog\u002Fnuxt-content-with-remote-markdown",{"meta":1187},[1188,1191,1194,1197],{"name":1189,"content":1190},"robots","index, follow",{"name":1192,"content":1193},"author","Dawit (@oneminch)",{"property":1195,"content":1196},"og:type","article",{"name":1198,"content":1199},"twitter:card","summary_large_image","\u002Fblog\u002Fnuxt-content-with-remote-markdown","2024-04-15",{"title":30,"description":1177},"blog\u002FNuxt Content with Remote Markdown","IrZ-lZZEa8OpwmoQ2CsDSZa8O2CIcCYXe9B88MT4qh4",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1206},"\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"\u002F>",1789149638900]