[{"data":1,"prerenderedAt":944},["ShallowReactive",2],{"content-\u002Fcontents\u002Fnuxt-3nuxt-content-v2":3,"surroundPost-\u002Fcontents\u002Fnuxt-3nuxt-content-v2":935},{"id":4,"title":5,"body":6,"createdAt":918,"description":919,"draft":920,"extension":921,"meta":922,"navigation":923,"path":924,"seo":925,"stem":926,"tags":927,"thumbnail":932,"updatedAt":933,"__hash__":934},"contents\u002Fcontents\u002Fnuxt-3nuxt-content-v2.md","Nuxt 3、Tailwind、Nuxt content v2によるブログ作成のための基本設定",{"type":7,"value":8,"toc":910},"minimark",[9,13,16,32,35,38,42,50,85,96,246,257,272,277,284,291,349,352,356,359,373,380,469,483,492,514,527,533,537,552,568,597,603,670,676,679,682,693,699,735,738,751,760,830,833,837,840,843,858,861,865,872,880,887,890,897,900,903,906],[10,11,12],"p",{},"元々ブログ作成に使っていたNext.jsのシステムを変更したかったので、新しくNuxt 3を使用したシステムに構築し直しました。",[10,14,15],{},"新ブログ移行の要件は以下の通りです。",[17,18,19,23,26,29],"ul",{},[20,21,22],"li",{},"既存のURLをそのままにできる",[20,24,25],{},"Markdownで記事が書ける",[20,27,28],{},"自分である程度ブログデザインをコントロールできる",[20,30,31],{},"Nuxt 3で作れる",[10,33,34],{},"Nuxt 3は最近出たばかりで自身の学習のために採用することにしました。以上の要件を踏まえて調べてみると、Nuxtには Nuxt content v2という静的サイト作成用のパッケージがありました。どうやらこれを使えば要件にあったサイトが作れそうです。",[10,36,37],{},"ということで、今回はNuxt content v2とどのようにブログを構築したかを説明していきます。長くなるのでいくつかの投稿に分けたいと思います。今回はまず第一弾です。",[39,40,41],"h2",{"id":41},"必要なもの",[10,43,44,45,49],{},"下記コマンドを利用すると必要最低限のものがセットされたプロジェクトが作成されます。",[46,47,48],"code",{},"content-app","部分がプロジェクト名です。",[51,52,57],"pre",{"className":53,"code":54,"language":55,"meta":56,"style":56},"language-bash shiki shiki-themes github-dark","npx nuxi@latest init content-app -t content\n","bash","",[46,58,59],{"__ignoreMap":56},[60,61,64,68,72,75,78,82],"span",{"class":62,"line":63},"line",1,[60,65,67],{"class":66},"svObZ","npx",[60,69,71],{"class":70},"sU2Wk"," nuxi@latest",[60,73,74],{"class":70}," init",[60,76,77],{"class":70}," content-app",[60,79,81],{"class":80},"sDLfK"," -t",[60,83,84],{"class":70}," content\n",[10,86,87,88,91,92,95],{},"以下の",[46,89,90],{},"nuxt","と",[46,93,94],{},"@nuxt\u002Fcontent","が最低限必要なパッケージです。Nodeは18.13.0のバージョンを利用しています。",[51,97,101],{"className":98,"code":99,"language":100,"meta":56,"style":56},"language-json shiki shiki-themes github-dark","{\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"build\": \"nuxt build\",\n    \"dev\": \"nuxt dev\",\n    \"generate\": \"nuxt generate\",\n    \"preview\": \"nuxt preview\"\n  },\n  \"devDependencies\": {\n    \"@nuxt\u002Fcontent\": \"^2.8.2\",\n    \"nuxt\": \"^3.7.3\"\n  }\n}\n","json",[46,102,103,109,124,137,146,159,172,185,196,202,210,223,234,240],{"__ignoreMap":56},[60,104,105],{"class":62,"line":63},[60,106,108],{"class":107},"s95oV","{\n",[60,110,112,115,118,121],{"class":62,"line":111},2,[60,113,114],{"class":80},"  \"private\"",[60,116,117],{"class":107},": ",[60,119,120],{"class":80},"true",[60,122,123],{"class":107},",\n",[60,125,127,130,132,135],{"class":62,"line":126},3,[60,128,129],{"class":80},"  \"type\"",[60,131,117],{"class":107},[60,133,134],{"class":70},"\"module\"",[60,136,123],{"class":107},[60,138,140,143],{"class":62,"line":139},4,[60,141,142],{"class":80},"  \"scripts\"",[60,144,145],{"class":107},": {\n",[60,147,149,152,154,157],{"class":62,"line":148},5,[60,150,151],{"class":80},"    \"build\"",[60,153,117],{"class":107},[60,155,156],{"class":70},"\"nuxt build\"",[60,158,123],{"class":107},[60,160,162,165,167,170],{"class":62,"line":161},6,[60,163,164],{"class":80},"    \"dev\"",[60,166,117],{"class":107},[60,168,169],{"class":70},"\"nuxt dev\"",[60,171,123],{"class":107},[60,173,175,178,180,183],{"class":62,"line":174},7,[60,176,177],{"class":80},"    \"generate\"",[60,179,117],{"class":107},[60,181,182],{"class":70},"\"nuxt generate\"",[60,184,123],{"class":107},[60,186,188,191,193],{"class":62,"line":187},8,[60,189,190],{"class":80},"    \"preview\"",[60,192,117],{"class":107},[60,194,195],{"class":70},"\"nuxt preview\"\n",[60,197,199],{"class":62,"line":198},9,[60,200,201],{"class":107},"  },\n",[60,203,205,208],{"class":62,"line":204},10,[60,206,207],{"class":80},"  \"devDependencies\"",[60,209,145],{"class":107},[60,211,213,216,218,221],{"class":62,"line":212},11,[60,214,215],{"class":80},"    \"@nuxt\u002Fcontent\"",[60,217,117],{"class":107},[60,219,220],{"class":70},"\"^2.8.2\"",[60,222,123],{"class":107},[60,224,226,229,231],{"class":62,"line":225},12,[60,227,228],{"class":80},"    \"nuxt\"",[60,230,117],{"class":107},[60,232,233],{"class":70},"\"^3.7.3\"\n",[60,235,237],{"class":62,"line":236},13,[60,238,239],{"class":107},"  }\n",[60,241,243],{"class":62,"line":242},14,[60,244,245],{"class":107},"}\n",[10,247,248,249,256],{},"（参考：",[250,251,255],"a",{"href":252,"rel":253},"https:\u002F\u002Fcontent.nuxt.com\u002Fget-started\u002Finstallation",[254],"nofollow","公式サイト","）",[10,258,259,260,263,264,267,268,271],{},"これらをインストールし、",[46,261,262],{},"yarn dev","を実行すると",[46,265,266],{},"localhost: 3000","で以下のように",[46,269,270],{},"index.md","に記述されたマークダウンがHTMLに変換されて表示されているはずです。",[273,274],"img",{"alt":275,"img-src":276},"tailwind-apply","\u002Fimg\u002F\u002Fnuxt-content-v2\u002Fdefault-page.png",[10,278,279,280,283],{},"Nuxt Contentではプロジェクトフォルダに",[46,281,282],{},"content","フォルダを作成し、そこにマークダウンファイルを置いていきます。",[10,285,286,287,290],{},"vueファイルは一旦",[46,288,289],{},"pages\u002F[...slug].vue","だけです。中身は以下のようになっています。",[51,292,296],{"className":293,"code":294,"language":295,"meta":56,"style":56},"language-vue shiki shiki-themes github-dark","\u003Ctemplate>\n  \u003Cmain>\n    \u003CContentDoc \u002F>\n  \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n","vue",[46,297,298,310,320,331,340],{"__ignoreMap":56},[60,299,300,303,307],{"class":62,"line":63},[60,301,302],{"class":107},"\u003C",[60,304,306],{"class":305},"s4JwU","template",[60,308,309],{"class":107},">\n",[60,311,312,315,318],{"class":62,"line":111},[60,313,314],{"class":107},"  \u003C",[60,316,317],{"class":305},"main",[60,319,309],{"class":107},[60,321,322,325,328],{"class":62,"line":126},[60,323,324],{"class":107},"    \u003C",[60,326,327],{"class":305},"ContentDoc",[60,329,330],{"class":107}," \u002F>\n",[60,332,333,336,338],{"class":62,"line":139},[60,334,335],{"class":107},"  \u003C\u002F",[60,337,317],{"class":305},[60,339,309],{"class":107},[60,341,342,345,347],{"class":62,"line":148},[60,343,344],{"class":107},"\u003C\u002F",[60,346,306],{"class":305},[60,348,309],{"class":107},[10,350,351],{},"まずは細かいところはおいて置いてそのほかの設定をやっていきます。",[39,353,355],{"id":354},"typescriptの設定","TypeScriptの設定",[10,357,358],{},"Nuxt 3ではデフォルトでTypeScriptのサポートが提供されています。\nしたがって特に自分で設定したくなければそのままTypeScriptの記法が使えます。",[10,360,361,362,367,368,256],{},"今回は開発中の型チェックのサポートが欲しかったので以下のような設定を行いました。\n（参考：",[250,363,366],{"href":364,"rel":365},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fguide\u002Fconcepts\u002Ftypescript",[254],"Type-Checking","、",[250,369,372],{"href":370,"rel":371},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fapi\u002Fconfiguration\u002Fnuxt-config#typescript",[254],"nuxt-config#typescript",[10,374,375,376,379],{},"defaultの",[46,377,378],{},"nuxt.config.ts","を以下のようにします。",[51,381,385],{"className":382,"code":383,"language":384,"meta":56,"style":56},"language-ts shiki shiki-themes github-dark","\u002F\u002F https:\u002F\u002Fv3.nuxtjs.org\u002Fapi\u002Fconfiguration\u002Fnuxt.config\nexport default defineNuxtConfig({\n  modules: ['@nuxt\u002Fcontent'],\n  typescript: {\n    shim: false, \u002F\u002F VScodeの拡張機能を使うためにfalse\n    strict: true, \u002F\u002F 型チェックの厳格化\n    typeCheck: true \u002F\u002F 開発、build時の型チェックを有効に。vue-tscとtypescriptのインストールが必要\n  },\n})\n","ts",[46,386,387,393,408,419,424,438,450,460,464],{"__ignoreMap":56},[60,388,389],{"class":62,"line":63},[60,390,392],{"class":391},"sAwPA","\u002F\u002F https:\u002F\u002Fv3.nuxtjs.org\u002Fapi\u002Fconfiguration\u002Fnuxt.config\n",[60,394,395,399,402,405],{"class":62,"line":111},[60,396,398],{"class":397},"snl16","export",[60,400,401],{"class":397}," default",[60,403,404],{"class":66}," defineNuxtConfig",[60,406,407],{"class":107},"({\n",[60,409,410,413,416],{"class":62,"line":126},[60,411,412],{"class":107},"  modules: [",[60,414,415],{"class":70},"'@nuxt\u002Fcontent'",[60,417,418],{"class":107},"],\n",[60,420,421],{"class":62,"line":139},[60,422,423],{"class":107},"  typescript: {\n",[60,425,426,429,432,435],{"class":62,"line":148},[60,427,428],{"class":107},"    shim: ",[60,430,431],{"class":80},"false",[60,433,434],{"class":107},", ",[60,436,437],{"class":391},"\u002F\u002F VScodeの拡張機能を使うためにfalse\n",[60,439,440,443,445,447],{"class":62,"line":161},[60,441,442],{"class":107},"    strict: ",[60,444,120],{"class":80},[60,446,434],{"class":107},[60,448,449],{"class":391},"\u002F\u002F 型チェックの厳格化\n",[60,451,452,455,457],{"class":62,"line":174},[60,453,454],{"class":107},"    typeCheck: ",[60,456,120],{"class":80},[60,458,459],{"class":391}," \u002F\u002F 開発、build時の型チェックを有効に。vue-tscとtypescriptのインストールが必要\n",[60,461,462],{"class":62,"line":187},[60,463,201],{"class":107},[60,465,466],{"class":62,"line":198},[60,467,468],{"class":107},"})\n",[10,470,471,472,475,476,478,479,482],{},"型チェックを有効にしたい場合は",[46,473,474],{},"vue-tsc","が必要です。",[46,477,474],{},"はTypeScriptのtscのラッパーだそうです。\n特徴としてはSingle File Component（シングルファイルコンポーネント）の",[46,480,481],{},"\u003Ctemplate>\u003C\u002Ftemplate>","内部についても型チェックをしてくれることです。",[10,484,485,487,488,491],{},[46,486,474],{},"を使うには",[46,489,490],{},"package.json","にTypeScriptの記載が必要らしくインストールする必要があります。",[51,493,495],{"className":53,"code":494,"language":55,"meta":56,"style":56},"yarn add -D typescript vue-tsc\n",[46,496,497],{"__ignoreMap":56},[60,498,499,502,505,508,511],{"class":62,"line":63},[60,500,501],{"class":66},"yarn",[60,503,504],{"class":70}," add",[60,506,507],{"class":80}," -D",[60,509,510],{"class":70}," typescript",[60,512,513],{"class":70}," vue-tsc\n",[10,515,516,518,519,522,523,526],{},[46,517,474],{},"のコマンドは",[46,520,521],{},"vue-tsc --noEmit && vite build","です。試してみると、確かに",[46,524,525],{},"\u003Ctempalte>","内のtypeエラーを指摘してくれます。\n一方で、VSCodeの拡張機能を有効にしていると開発中に同様の型エラーは気づけます。typecheckが不要な方はインストールの必要はないかもです。",[10,528,248,529,256],{},[250,530,474],{"href":531,"rel":532},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Flanguage-tools\u002Ftree\u002Fmaster\u002Fpackages\u002Fvue-tsc",[254],[39,534,536],{"id":535},"tailwind-cssの設定","Tailwind CSSの設定",[10,538,539,540,543,544,547,548,551],{},"続いてTailwind CSSの設定を行います。Nuxtの場合は",[46,541,542],{},"@nuxtjs\u002Ftailwindcss","をインストールします。\nインストール後、",[46,545,546],{},"npx tailwindcss init","で",[46,549,550],{},"tailwind.config.js","を作成します。",[10,553,554,555,558,559,562,563,256],{},"その後",[46,556,557],{},".\u002Fassets\u002Fcss\u002Ftailwind.css","のようにフォルダとファイルを作成します。",[46,560,561],{},"tailwind.css","には以下を書きます。\n（参考: ",[250,564,567],{"href":565,"rel":566},"https:\u002F\u002Ftailwindcss.nuxtjs.org\u002Ftailwind\u002Fconfig",[254],"Config",[51,569,573],{"className":570,"code":571,"language":572,"meta":56,"style":56},"language-css shiki shiki-themes github-dark","@tailwind base;\n@tailwind components;\n@tailwind utilities;\n","css",[46,574,575,583,590],{"__ignoreMap":56},[60,576,577,580],{"class":62,"line":63},[60,578,579],{"class":397},"@tailwind",[60,581,582],{"class":107}," base;\n",[60,584,585,587],{"class":62,"line":111},[60,586,579],{"class":397},[60,588,589],{"class":107}," components;\n",[60,591,592,594],{"class":62,"line":126},[60,593,579],{"class":397},[60,595,596],{"class":107}," utilities;\n",[10,598,599,600,602],{},"最後に",[46,601,378],{},"にモジュールを追加して以下のようにします。",[51,604,606],{"className":382,"code":605,"language":384,"meta":56,"style":56},"\u002F\u002F https:\u002F\u002Fv3.nuxtjs.org\u002Fapi\u002Fconfiguration\u002Fnuxt.config\nexport default defineNuxtConfig({\n  modules: ['@nuxt\u002Fcontent', '@nuxtjs\u002Ftailwindcss'],\n  typescript: {\n    shim: false,\n    strict: true,\n    typeCheck: true\n  },\n})\n",[46,607,608,612,622,635,639,647,655,662,666],{"__ignoreMap":56},[60,609,610],{"class":62,"line":63},[60,611,392],{"class":391},[60,613,614,616,618,620],{"class":62,"line":111},[60,615,398],{"class":397},[60,617,401],{"class":397},[60,619,404],{"class":66},[60,621,407],{"class":107},[60,623,624,626,628,630,633],{"class":62,"line":126},[60,625,412],{"class":107},[60,627,415],{"class":70},[60,629,434],{"class":107},[60,631,632],{"class":70},"'@nuxtjs\u002Ftailwindcss'",[60,634,418],{"class":107},[60,636,637],{"class":62,"line":139},[60,638,423],{"class":107},[60,640,641,643,645],{"class":62,"line":148},[60,642,428],{"class":107},[60,644,431],{"class":80},[60,646,123],{"class":107},[60,648,649,651,653],{"class":62,"line":161},[60,650,442],{"class":107},[60,652,120],{"class":80},[60,654,123],{"class":107},[60,656,657,659],{"class":62,"line":174},[60,658,454],{"class":107},[60,660,661],{"class":80},"true\n",[60,663,664],{"class":62,"line":187},[60,665,201],{"class":107},[60,667,668],{"class":62,"line":198},[60,669,468],{"class":107},[10,671,672,673,675],{},"ここまで来て",[46,674,262],{},"を走らせると、元のスタイルが失われます。",[273,677],{"alt":275,"img-src":678},"\u002Fimg\u002Fnuxt-content-v2\u002Ftailwind-apply.png",[10,680,681],{},"はい、h1などのスタイルが効かなくなってしまうのです。",[10,683,684,685,689,690,692],{},"こちら",[250,686,255],{"href":687,"rel":688},"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fpreflight#headings-are-unstyled",[254],"に記載があり、上記の",[46,691,561],{},"を適用すると各種HTMLタグの余白がなくなり見出しのスタイルが通常のテキストと同様のフォントサイズになります。",[10,694,695,696,698],{},"一応、以下の内容を",[46,697,550],{},"に記載することで無効化することもできます。ある程度デフォルトのものを使いたい場合は無効にした方が楽かもです。",[51,700,702],{"className":570,"code":701,"language":572,"meta":56,"style":56},"module.exports = {\n  corePlugins: {\n    preflight: false,\n  }\n}\n",[46,703,704,715,722,727,731],{"__ignoreMap":56},[60,705,706,709,712],{"class":62,"line":63},[60,707,708],{"class":107},"module",[60,710,711],{"class":66},".exports",[60,713,714],{"class":107}," = {\n",[60,716,717,720],{"class":62,"line":111},[60,718,719],{"class":80},"  corePlugins",[60,721,145],{"class":107},[60,723,724],{"class":62,"line":126},[60,725,726],{"class":107},"    preflight: false,\n",[60,728,729],{"class":62,"line":139},[60,730,239],{"class":107},[60,732,733],{"class":62,"line":148},[60,734,245],{"class":107},[10,736,737],{},"ただ開発を進めてみると結局自分で細かく設定したくなりました。Nuxt Content v2ではh1タグをはじめ各種基本的なHTMLの要素を上書きできるのでその機能を使い上書きしていくことにします。",[10,739,740,741,91,744,747,748,750],{},"またtypographyを使う手もあります。候補は",[46,742,743],{},"@nuxt-themes\u002Ftypography",[46,745,746],{},"@tailwindcss\u002Ftypography","でした。前者の方は",[46,749,474],{},"で大量のエラーが出たので採用しませんでした。",[10,752,753,754,756,757,759],{},"後者の方は上で紹介したTailwindの設定をした上で、",[46,755,746],{},"をインストールし、",[46,758,550],{},"に下記のpluginを追加すると使えます。",[51,761,765],{"className":762,"code":763,"language":764,"meta":56,"style":56},"language-js shiki shiki-themes github-dark","\u002F** @type {import('tailwindcss').Config} *\u002F\nexport default {\n  content: [],\n  theme: {\n    extend: {},\n  },\n  plugins: [require('@tailwindcss\u002Ftypography')]\n}\n","js",[46,766,767,781,790,795,800,805,809,826],{"__ignoreMap":56},[60,768,769,772,775,778],{"class":62,"line":63},[60,770,771],{"class":391},"\u002F** ",[60,773,774],{"class":397},"@type",[60,776,777],{"class":66}," {import('tailwindcss').Config}",[60,779,780],{"class":391}," *\u002F\n",[60,782,783,785,787],{"class":62,"line":111},[60,784,398],{"class":397},[60,786,401],{"class":397},[60,788,789],{"class":107}," {\n",[60,791,792],{"class":62,"line":126},[60,793,794],{"class":107},"  content: [],\n",[60,796,797],{"class":62,"line":139},[60,798,799],{"class":107},"  theme: {\n",[60,801,802],{"class":62,"line":148},[60,803,804],{"class":107},"    extend: {},\n",[60,806,807],{"class":62,"line":161},[60,808,201],{"class":107},[60,810,811,814,817,820,823],{"class":62,"line":174},[60,812,813],{"class":107},"  plugins: [",[60,815,816],{"class":66},"require",[60,818,819],{"class":107},"(",[60,821,822],{"class":70},"'@tailwindcss\u002Ftypography'",[60,824,825],{"class":107},")]\n",[60,827,828],{"class":62,"line":187},[60,829,245],{"class":107},[10,831,832],{},"このようにするとちょっとオシャレなスタイルに変わります。",[273,834],{"alt":835,"img-src":836},"tailwind-typography","\u002Fimg\u002Fnuxt-content-v2\u002Ftailwind-typography.png",[10,838,839],{},"今回のブログ構築では基本的にはtypographyのデザインを使いつつ自分が変えたいところだけ上書きします。",[39,841,842],{"id":842},"デプロイ",[10,844,845,846,849,850,853,854,857],{},"静的サイトとしてデプロイする際は",[46,847,848],{},"yarn generate","を実行します。実行すると、プロジェクト直下に",[46,851,852],{},".output","フォルダが作成されるので、",[46,855,856],{},".output\u002Fpublic","をサイトをホストする場所におけばOKです。",[10,859,860],{},"Netlifyであれば先ほどのpublicフォルダ内を手動アップロードすることで簡単に動作確認ができます。",[39,862,864],{"id":863},"documentdrivenモードについて","documentDrivenモードについて",[10,866,867,868,871],{},"documentDrivenモードとはNuxt Contentが推している？",[46,869,870],{},".md","を主体としたモードです。この設定をオンにすると記事の Markdownを管理するだけでブログができてしまうというもの（たぶん）。",[10,873,874,875],{},"参考：",[250,876,879],{"href":877,"rel":878},"https:\u002F\u002Fcontent.nuxt.com\u002Fdocument-driven\u002Fintroduction",[254],"Document Driven",[10,881,882,883,886],{},"documentDrivenモードは今回採用しませんでした。\n理由は情報が公式サイト含め少なすぎるのと、Nuxtの",[46,884,885],{},"pages","の仕組みを使った方がブログのユースケースでよくあるページングなどを実現しやすかったからです。",[10,888,889],{},"日本語だと以下の情報がわかりやすいです。",[10,891,874,892],{},[250,893,896],{"href":894,"rel":895},"https:\u002F\u002Fspeakerdeck.com\u002Fryuhei373\u002Fdocument-driven-gai-nian-wozhi-ritai",[254],"Document-Driven 概念を知りたい",[39,898,899],{"id":899},"まとめ",[10,901,902],{},"本記事ではとりあえずNuxt 3、Nuxt Content v2、TypeScript、Tailwindcssを使ったブログ構築の土台を紹介しました。",[10,904,905],{},"次以降の記事ではここから一般的なブログに必要な要素をNuxt Contentのお作法に沿って構築していく方法を書いていきます。",[907,908,909],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}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 .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}",{"title":56,"searchDepth":111,"depth":111,"links":911},[912,913,914,915,916,917],{"id":41,"depth":111,"text":41},{"id":354,"depth":111,"text":355},{"id":535,"depth":111,"text":536},{"id":842,"depth":111,"text":842},{"id":863,"depth":111,"text":864},{"id":899,"depth":111,"text":899},"2023-09-24","Nuxt 3とNuxt content v2を使用してブログを構築する方法を紹介します。本記事では、Nuxt 3、Nuxt Content v2、TypeScript、Tailwind CSSの基本的な設定方法を説明し、ブログ構築の土台を作ります。",false,"md",{},true,"\u002Fcontents\u002Fnuxt-3nuxt-content-v2",{"title":5,"description":919},"contents\u002Fnuxt-3nuxt-content-v2",[928,929,930,931],"Nuxt","Vue","Blog","Nuxt Content v2","\u002Fimg\u002Ftwitter-card.png","2023-09-26","K-tU_UhOxIbx21YzSo7sx8PkfFqGgfhPj90YyX2mEX0",[936,940],{"title":937,"path":938,"stem":939,"children":-1},"初心者が学ぶNext.js + Typescriptの使い方","\u002Fcontents\u002Fnextjs-typescript","contents\u002Fnextjs-typescript",{"title":941,"path":942,"stem":943,"children":-1},"Nuxt Content v2を利用したMarkdownによるブログ記事の作成方法","\u002Fcontents\u002Fnuxt-content-v2","contents\u002Fnuxt-content-v2",1784936719045]