[{"data":1,"prerenderedAt":613},["ShallowReactive",2],{"blog-nuxt-content-example":3},{"id":4,"title":5,"author":6,"body":7,"date":591,"description":13,"extension":592,"meta":593,"navigation":594,"path":595,"seo":596,"slug":603,"status":604,"stem":605,"summary":606,"tags":607,"__hash__":612},"blog\u002Fblog\u002Fnuxt-content-example.md","Getting Started with Folio","Sharique",{"type":8,"value":9,"toc":574},"minimark",[10,14,19,27,37,49,53,56,227,234,239,246,250,257,418,422,441,445,459,463,466,470,487,491,494,514,518,538,542,551,555,570],[11,12,13],"p",{},"This post walks through how Folio is built — how posts are written, what the frontmatter schema looks like, and how SEO and social sharing tags are generated automatically for every post.",[15,16,18],"h2",{"id":17},"writing-a-post","Writing a Post",[11,20,21,22,26],{},"Every blog post is a plain Markdown file stored in ",[23,24,25],"code",{},"content\u002Fblog\u002F",". The filename becomes the URL slug:",[28,29,34],"pre",{"className":30,"code":32,"language":33},[31],"language-text","content\u002Fblog\u002Fmy-post-title.md  →  \u002Fblog\u002Fmy-post-title\n","text",[23,35,32],{"__ignoreMap":36},"",[11,38,39,40,44,45,48],{},"At the top of each file is a ",[41,42,43],"strong",{},"frontmatter block"," — a YAML section wrapped in ",[23,46,47],{},"---"," that provides metadata about the post.",[15,50,52],{"id":51},"frontmatter-schema","Frontmatter Schema",[11,54,55],{},"Here is the full schema this blog supports:",[28,57,61],{"className":58,"code":59,"language":60,"meta":36,"style":36},"language-yaml shiki shiki-themes github-light github-dark","---\ntitle: \"My Post Title\"        # required — shown in the page heading and browser tab\ndate: 2025-01-15              # required — used for sorting and displayed on the post\nsummary: \"Short description\"  # required — shown on the blog listing card\ntags: [\"Vue\", \"Nuxt\"]         # optional — displayed as pills at the bottom of the post\nauthor: \"Your Name\"           # optional — defaults to \"Unknown\"\nstatus: \"published\"           # \"draft\" | \"published\" — drafts are hidden from the listing\nseo:\n  description: \"Custom text for search engines and social previews\"\n  keywords: [\"keyword1\", \"keyword2\"]\n  og:image: \"https:\u002F\u002Fexample.com\u002Fcover.jpg\"\n---\n","yaml",[23,62,63,72,91,106,120,144,158,172,181,192,211,222],{"__ignoreMap":36},[64,65,68],"span",{"class":66,"line":67},"line",1,[64,69,71],{"class":70},"sScJk","---\n",[64,73,75,79,83,87],{"class":66,"line":74},2,[64,76,78],{"class":77},"s9eBZ","title",[64,80,82],{"class":81},"sVt8B",": ",[64,84,86],{"class":85},"sZZnC","\"My Post Title\"",[64,88,90],{"class":89},"sJ8bj","        # required — shown in the page heading and browser tab\n",[64,92,94,97,99,103],{"class":66,"line":93},3,[64,95,96],{"class":77},"date",[64,98,82],{"class":81},[64,100,102],{"class":101},"sj4cs","2025-01-15",[64,104,105],{"class":89},"              # required — used for sorting and displayed on the post\n",[64,107,109,112,114,117],{"class":66,"line":108},4,[64,110,111],{"class":77},"summary",[64,113,82],{"class":81},[64,115,116],{"class":85},"\"Short description\"",[64,118,119],{"class":89},"  # required — shown on the blog listing card\n",[64,121,123,126,129,132,135,138,141],{"class":66,"line":122},5,[64,124,125],{"class":77},"tags",[64,127,128],{"class":81},": [",[64,130,131],{"class":85},"\"Vue\"",[64,133,134],{"class":81},", ",[64,136,137],{"class":85},"\"Nuxt\"",[64,139,140],{"class":81},"]         ",[64,142,143],{"class":89},"# optional — displayed as pills at the bottom of the post\n",[64,145,147,150,152,155],{"class":66,"line":146},6,[64,148,149],{"class":77},"author",[64,151,82],{"class":81},[64,153,154],{"class":85},"\"Your Name\"",[64,156,157],{"class":89},"           # optional — defaults to \"Unknown\"\n",[64,159,161,164,166,169],{"class":66,"line":160},7,[64,162,163],{"class":77},"status",[64,165,82],{"class":81},[64,167,168],{"class":85},"\"published\"",[64,170,171],{"class":89},"           # \"draft\" | \"published\" — drafts are hidden from the listing\n",[64,173,175,178],{"class":66,"line":174},8,[64,176,177],{"class":77},"seo",[64,179,180],{"class":81},":\n",[64,182,184,187,189],{"class":66,"line":183},9,[64,185,186],{"class":77},"  description",[64,188,82],{"class":81},[64,190,191],{"class":85},"\"Custom text for search engines and social previews\"\n",[64,193,195,198,200,203,205,208],{"class":66,"line":194},10,[64,196,197],{"class":77},"  keywords",[64,199,128],{"class":81},[64,201,202],{"class":85},"\"keyword1\"",[64,204,134],{"class":81},[64,206,207],{"class":85},"\"keyword2\"",[64,209,210],{"class":81},"]\n",[64,212,214,217,219],{"class":66,"line":213},11,[64,215,216],{"class":77},"  og:image",[64,218,82],{"class":81},[64,220,221],{"class":85},"\"https:\u002F\u002Fexample.com\u002Fcover.jpg\"\n",[64,223,225],{"class":66,"line":224},12,[64,226,71],{"class":70},[11,228,229,230,233],{},"All fields are validated at build time using ",[41,231,232],{},"Zod",". If a required field is missing, the build will fail with a clear error.",[235,236,238],"h3",{"id":237},"draft-vs-published","Draft vs Published",[11,240,241,242,245],{},"Setting ",[23,243,244],{},"status: \"draft\""," hides the post from the blog listing and sitemap. It is still accessible by direct URL during development, making it easy to preview before publishing.",[15,247,249],{"id":248},"seo-and-open-graph-tags","SEO and Open Graph Tags",[11,251,252,253,256],{},"Every page on this blog sets meta tags automatically using Nuxt's built-in ",[23,254,255],{},"useSeoMeta()"," composable. On post pages, the tags are populated from the frontmatter:",[28,258,262],{"className":259,"code":260,"language":261,"meta":36,"style":36},"language-ts shiki shiki-themes github-light github-dark","useSeoMeta({\n  title: () => post.value?.title,\n  description: () => post.value?.seo?.description || post.value?.summary,\n  \u002F\u002F Open Graph — controls previews on LinkedIn, Slack, iMessage, etc.\n  ogTitle: () => post.value?.title,\n  ogDescription: () => post.value?.seo?.description || post.value?.summary,\n  ogImage: () => post.value?.seo?.[\"og:image\"] || \"\",\n  ogType: \"article\",\n  \u002F\u002F Twitter \u002F X Card\n  twitterCard: \"summary_large_image\",\n  twitterTitle: () => post.value?.title,\n  twitterDescription: () => post.value?.seo?.description || post.value?.summary,\n});\n","ts",[23,263,264,272,287,304,309,320,335,361,371,376,386,397,412],{"__ignoreMap":36},[64,265,266,269],{"class":66,"line":67},[64,267,268],{"class":70},"useSeoMeta",[64,270,271],{"class":81},"({\n",[64,273,274,277,280,284],{"class":66,"line":74},[64,275,276],{"class":70},"  title",[64,278,279],{"class":81},": () ",[64,281,283],{"class":282},"szBVR","=>",[64,285,286],{"class":81}," post.value?.title,\n",[64,288,289,291,293,295,298,301],{"class":66,"line":93},[64,290,186],{"class":70},[64,292,279],{"class":81},[64,294,283],{"class":282},[64,296,297],{"class":81}," post.value?.seo?.description ",[64,299,300],{"class":282},"||",[64,302,303],{"class":81}," post.value?.summary,\n",[64,305,306],{"class":66,"line":108},[64,307,308],{"class":89},"  \u002F\u002F Open Graph — controls previews on LinkedIn, Slack, iMessage, etc.\n",[64,310,311,314,316,318],{"class":66,"line":122},[64,312,313],{"class":70},"  ogTitle",[64,315,279],{"class":81},[64,317,283],{"class":282},[64,319,286],{"class":81},[64,321,322,325,327,329,331,333],{"class":66,"line":146},[64,323,324],{"class":70},"  ogDescription",[64,326,279],{"class":81},[64,328,283],{"class":282},[64,330,297],{"class":81},[64,332,300],{"class":282},[64,334,303],{"class":81},[64,336,337,340,342,344,347,350,353,355,358],{"class":66,"line":160},[64,338,339],{"class":70},"  ogImage",[64,341,279],{"class":81},[64,343,283],{"class":282},[64,345,346],{"class":81}," post.value?.seo?.[",[64,348,349],{"class":85},"\"og:image\"",[64,351,352],{"class":81},"] ",[64,354,300],{"class":282},[64,356,357],{"class":85}," \"\"",[64,359,360],{"class":81},",\n",[64,362,363,366,369],{"class":66,"line":174},[64,364,365],{"class":81},"  ogType: ",[64,367,368],{"class":85},"\"article\"",[64,370,360],{"class":81},[64,372,373],{"class":66,"line":183},[64,374,375],{"class":89},"  \u002F\u002F Twitter \u002F X Card\n",[64,377,378,381,384],{"class":66,"line":194},[64,379,380],{"class":81},"  twitterCard: ",[64,382,383],{"class":85},"\"summary_large_image\"",[64,385,360],{"class":81},[64,387,388,391,393,395],{"class":66,"line":213},[64,389,390],{"class":70},"  twitterTitle",[64,392,279],{"class":81},[64,394,283],{"class":282},[64,396,286],{"class":81},[64,398,399,402,404,406,408,410],{"class":66,"line":224},[64,400,401],{"class":70},"  twitterDescription",[64,403,279],{"class":81},[64,405,283],{"class":282},[64,407,297],{"class":81},[64,409,300],{"class":282},[64,411,303],{"class":81},[64,413,415],{"class":66,"line":414},13,[64,416,417],{"class":81},"});\n",[235,419,421],{"id":420},"fallback-chain-for-description","Fallback chain for description",[11,423,424,425,428,429,431,432,434,435,437,438,440],{},"The ",[23,426,427],{},"seo.description"," field is optional. When it is absent, ",[23,430,268],{}," falls back to the post's ",[23,433,111],{},". This means every post gets a meaningful social preview as long as ",[23,436,111],{}," is set — even without a dedicated ",[23,439,177],{}," block.",[235,442,444],{"id":443},"ogimage","og:image",[11,446,447,448,450,451,454,455,458],{},"If you provide an ",[23,449,444],{}," URL in the frontmatter, it will appear as the preview image when the post is shared on social platforms. The URL must be ",[41,452,453],{},"absolute"," (e.g. ",[23,456,457],{},"https:\u002F\u002Fexample.com\u002Fcover.jpg",") — relative paths are not fetched by social crawlers.",[15,460,462],{"id":461},"markdown-features","Markdown Features",[11,464,465],{},"Standard Markdown is fully supported inside the post body:",[235,467,469],{"id":468},"headings","Headings",[28,471,475],{"className":472,"code":473,"language":474,"meta":36,"style":36},"language-markdown shiki shiki-themes github-light github-dark","## H2 heading\n### H3 heading (also appears in the table of contents)\n","markdown",[23,476,477,482],{"__ignoreMap":36},[64,478,479],{"class":66,"line":67},[64,480,481],{},"## H2 heading\n",[64,483,484],{"class":66,"line":74},[64,485,486],{},"### H3 heading (also appears in the table of contents)\n",[235,488,490],{"id":489},"code-blocks","Code Blocks",[11,492,493],{},"Fenced code blocks with language hints get syntax highlighting automatically:",[28,495,497],{"className":472,"code":496,"language":474,"meta":36,"style":36},"```ts\nconst greeting = (name: string) => `Hello, ${name}!`\n```\n",[23,498,499,504,509],{"__ignoreMap":36},[64,500,501],{"class":66,"line":67},[64,502,503],{},"```ts\n",[64,505,506],{"class":66,"line":74},[64,507,508],{},"const greeting = (name: string) => `Hello, ${name}!`\n",[64,510,511],{"class":66,"line":93},[64,512,513],{},"```\n",[235,515,517],{"id":516},"lists-bold-italic","Lists, Bold, Italic",[28,519,521],{"className":472,"code":520,"language":474,"meta":36,"style":36},"- item one\n- **bold text**\n- _italic text_\n",[23,522,523,528,533],{"__ignoreMap":36},[64,524,525],{"class":66,"line":67},[64,526,527],{},"- item one\n",[64,529,530],{"class":66,"line":74},[64,531,532],{},"- **bold text**\n",[64,534,535],{"class":66,"line":93},[64,536,537],{},"- _italic text_\n",[235,539,541],{"id":540},"links","Links",[28,543,545],{"className":472,"code":544,"language":474,"meta":36,"style":36},"[Link text](https:\u002F\u002Fexample.com)\n",[23,546,547],{"__ignoreMap":36},[64,548,549],{"class":66,"line":67},[64,550,544],{},[15,552,554],{"id":553},"sitemap","Sitemap",[11,556,557,558,561,562,565,566,569],{},"Published posts are included in ",[23,559,560],{},"\u002Fsitemap.xml"," automatically. A server endpoint queries all posts with ",[23,563,564],{},"status: \"published\""," and passes them to ",[23,567,568],{},"@nuxtjs\u002Fsitemap",", which pre-renders the sitemap file at build time. Draft posts are excluded.",[571,572,573],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":36,"searchDepth":74,"depth":93,"links":575},[576,577,580,584,590],{"id":17,"depth":74,"text":18},{"id":51,"depth":74,"text":52,"children":578},[579],{"id":237,"depth":93,"text":238},{"id":248,"depth":74,"text":249,"children":581},[582,583],{"id":420,"depth":93,"text":421},{"id":443,"depth":93,"text":444},{"id":461,"depth":74,"text":462,"children":585},[586,587,588,589],{"id":468,"depth":93,"text":469},{"id":489,"depth":93,"text":490},{"id":516,"depth":93,"text":517},{"id":540,"depth":93,"text":541},{"id":553,"depth":74,"text":554},"2026-03-22","md",{},true,"\u002Fblog\u002Fnuxt-content-example",{"description":597,"keywords":598,"title":5},"Learn how this Nuxt 4 blog works — Markdown posts, frontmatter schema, Zod validation, and automatic Open Graph and Twitter Card meta tags via useSeoMeta.",[599,600,601,268,602],"Nuxt Content","Markdown blog","Open Graph","frontmatter","nuxt-content-example","published","blog\u002Fnuxt-content-example","A practical walkthrough of how this blog works — writing posts in Markdown, the frontmatter schema, and how SEO and Open Graph tags are generated automatically from post metadata.",[608,609,610,611],"Nuxt","Vue","Content Management","SEO","0U4u9FLqde-XiMBfzMtlSRokC1NaN55sN0oITa9wQLI",1778492224479]