Nuxt3 + microCMS + Vuetifyでブログテンプレート作ってみた

Nuxt3のベータ版のリリースに伴い、練習ついでにブログテンプレート作りました。

機能
▪ Nuxt3▪ MicroCMS ▪ Vuetify ▪ Netlify ▪ SSR ▪ Volar ▪ TypeScript ▪ Prettier/ESlint ▪ Stylelint ▪ Husky ▪ GA4

Transcript

1. Nuxt3 + microCMS + Vuetifyで ブログテンプレート作ってみた kawa @kinomama_engine
2. 自己紹介 name: kawa belonging: 筑波大学 修士2年 research: グラフニューラルネットワークを用いた群集シミュレーション interest: Nuxt 3 favorite: 盆栽画像眺め
3. 制作物 ▪ Nuxt 3 + microCMS + Vuetify で作ったブログテンプレート
4. 制作物 ▪ Nuxt 3 + microCMS + Vuetify で作ったブログテンプレート ▪ GitHubのテンプレートリポジトリを利用 引用: https://github.com/kawa-work/nuxt3-microcms-blog
5. Features ▪ Nuxt 3 ▪ MicroCMS ▪ Vuetify ▪ Netlify ▪ SSR ▪ Volar ▪ TypeScript ▪ Prettier/ESlint ▪ Stylelint ▪ Husky ▪ GA4
6. 動機 ▪ Nuxt 3の利用 ▪ microCMSの利用
7. Nuxt 3について
8. Nuxt 3 Roadmap ▪ Oct 12, 2021: Nuxt 3 Beta ▪ April 20, 2022: Nuxt 3 Release Candidate ▪ June, 2022: Nuxt 3 Stable Release Today: May 26, 2022 参照: https://v3.nuxtjs.org/community/roadmap/
9. 注意 Full staticはRC版で未実装 今回はSSRで実装してます... 引用: https://v3.nuxtjs.org/guide/deploy/static-hosting#static-hosting
10. Nuxt 3の機能 引用: https://v3.nuxtjs.org/
11. Nuxt 3のメリット ▪ TypeScriptのネイティブサポート ▪ server/apiディレクトリを利用して 簡単にサーバサイドでデータフェッチ
12. Nuxt 3のメリット ▪ TypeScriptのネイティブサポート ▪ Server/apiディレクトリを利用して 簡単にサーバサイドでデータフェッチ
13. Nuxt 3のメリット ▪ TypeScriptのネイティブサポート ▪ Server/apiディレクトリを利用して 簡単にサーバサイドでデータフェッチ
14. Nuxt 3のメリット ▪ TypeScriptのネイティブサポート ▪ Server/apiディレクトリを利用して 簡単にサーバサイドでデータフェッチ ▪ NetlifyでSSRホスティングができる
15. microCMSのメリット ▪ スキーマをjson形式でexport/importできるので テンプレートリポジトリと相性が良い
16. microCMSのメリット ▪ スキーマをjson形式でexport/importできるので テンプレートリポジトリと相性が良い
17. microCMSのメリット ▪ スキーマをjson形式でexport/importできるので テンプレートリポジトリと相性が良い ▪ 管理画面が直感的でわかりやすい
18. Vuetifyのメリット ▪ マテリアルデザインに準拠したUIフレームワーク ▪ プロトタイプを作るときにデザインモックなしでも それなりに見栄えの良いものができる ▪ UIコンポーネントが豊富 引用: https://vuetifyjs.com/ja/
19. デモ動画
20. 今後 ▪ リッチエディタ内のcodeタグやimgタグを綺麗に表示できていないので データ加工の改善 ▪ microCMSに保存してある一枚の画像から各OGP画像の生成
21. ご清聴ありがとうございました！ @kinomama_engine