ブログを作るなら Nuxt Content v2はいいぞ

Vue Fes Japan 2022 のLT内容です

https://vuefes.jp/2022/sessions/FurusawaKaoru

Transcript

1. ブログを作るなら Nuxt Content v2はいいぞ Vue Fes Japan 2022
2. 自己紹介 Furusawa Kaoru ユアマイスター株式会社 フロントエンドエンジニア Twitter: @firirice
3. ブログを作るって大変だと思いませんか？
4. 例えば、〇〇ヘッドレスCMSを使うとして • API仕様を確認してからNuxtからAPIを呼ぶように実装する • APIの仕様変更や他のCMSへの移行を考慮しながらComposable 設計を行う
5. ファイルを置くだけで静的コンテンツが作れる contentディレクトリを作って、記事ファイルを置くだけで静的コンテンツを作れる。 （ファイルの対応形式は Markdown、YML、CSV、 JSON） # Hello ## Nuxt Contentはいいぞ content/index.md <template> <main> <ContentDoc /> </main> </template> pages/index.vue
6. ファイルを置くだけで静的コンテンツが作れる contentディレクトリを作って、記事ファイルを置くだけで静的コンテンツを作れる。 対応している形式は Markdown、YML、CSV、 JSON。 # Hello ## Nuxt Contentはいいぞ content/index.md
7. 自動でパースされるものって装飾が大変じゃない？
8. Prose Componentsで各タグの装飾ができる Nuxt Content内部にあるComponentと同じ名前のComponentを配置することでオーバーライドして、各タグ の装飾ができる。 https://content.nuxtjs.org/api/components/prose#prose-components
9. 使用例① <script setup lang="ts"> defineProps<{ id: string }>() </script> <template> <h1 :id="id" class="mb-8 border-b pb-2 text-4xl font-bold"> <a :href="`#${id}`" class="group relative"> <slot /> <font-awesome-icon icon="link" class="absolute text-base opacity-0 group-hover:opacity-100" /> </a> </h1> </template> components/content/ProseH1.vue
10. 使用例② <template> <div class="bg-gray-100 p-4 relative"> <slot /> <font-awesome-icon icon="copy" class="absolute bottom-2 right-2 opacity-0 hover:opacity-100" @click="copy" /> </div> </template> components/content/ProseCode.vue
11. MDC(MarkDown Components) Syntax markdownから任意のVue Componentを使うことができる。 # Hello ## Nuxt Content はいいぞ ::card The content of the card :: content/index.md <template> <div class="rounded border bg-white p-6"> <slot /> </div> </template> components/content/Card.vue
12. • markdownで書いた記事をディレクトリに置くだけで静的コンテンツを作れます • Prose Components: 各タグを簡単にカスタマイズできる • MDC Syntax: markdownからVue Componentが使える • 他にも便利な機能がある ◦ nuxt.configに設定するだけでcodeのHigh Lightができる ◦ Mongo DBライクにデータを取得できるAPI Nuxt Contentはいいぞ
13. ご清聴ありがとうございました
14. Coming Soon