Slide 1

Slide 1 text

Nuxt Studio を使ってみた GEEKERS NITE #3 - Kazuyuki Miyake

Slide 2

Slide 2 text

About Me 三宅 和之 / Kazuyuki Miyake 株式会社ゼンアーキテクツ 代表 ZEN: Azure, GitHub, Nuxt のスペシャリスト集団 Microsoft Regional Director / Microsoft MVP Vue.js ⽇本ユーザーグループコアスタッフ X: @kazuyukimiyake

Slide 3

Slide 3 text

NuxtLabs Japan やってます

Slide 4

Slide 4 text

Nuxt Studio とは Nuxt3 アプリケーションの開発⽤プラットフォーム GitHub 上に Nuxt Stuio ⽤のワークスペースが作られる 現在はベータ期間中で、無料で利⽤が可能 正式リリース後の価格体系は不明 現時点(2023 年 9 ⽉)では CMS 機能に特化している Nuxt Content 2 の機能が ブラウザから使えるイメージ

Slide 5

Slide 5 text

Nuxt Studio の特⻑ ブラウザ上で CMS 運⽤が完結する dev server 不要でブラウザ上からプレビューができる コンテンツ編集中でもリアルタイムにプレビューが更新 Nuxt がベースなので Vue/Nuxt の資産がそのまま使える Nuxt Studio は Git ベースの CMS をカバーしている CMS で運⽤するサイトの新規構築 CMS で運⽤するサイトのデプロイ CMS のコンテンツ管理(記事の追加、修正など)

Slide 6

Slide 6 text

ブラウザで Markdown の編集とプレビューが可能

Slide 7

Slide 7 text

Nuxt Studio のはじめ⽅ GitHub の個⼈アカウントで Nuxt Studio に接続する GitHub Apps として Nuxt Studio がインストールされる チームを作成して共同作業することも可能 テーマを選択する GitHub リポジトリを選択する 既存のリポジトリに追加も可能 DEMO >>>

Slide 8

Slide 8 text

GitHub Pages へのデプロイ Studio から 1 クリックで GitHub Pages にデプロイ可能 .github/workflows に GitHub Actions の設定が追加される {project-name}.nuxt.space でアクセス可能 カスタムドメインも設定可能 セルフホスティングへのデプロイも可能 実体は Nuxt アプリなので任意の⽅法でデプロイ可能 Vercel, Cloudflare Pages, Azure Static Web Apps など DEMO >>>

Slide 9

Slide 9 text

テーマ(デザイン) テーマがいくつか⽤意されている(現在は 3 つ) Alpine: ブログ⽤ Content Wind: ポートフォリオ⽤ Docus: ドキュメントサイト⽤ テーマ開発も可能 スターターテンプレート がある Nuxt の UI 開発は Nuxt UI もおすすめ

Slide 10

Slide 10 text

Studio 上でのコンテンツ更新(1/2) Nuxt Studio の Edit 機能を使う Studio 上で Markdown を直接編集できる Markdown は Nuxt Content の MDC Syntax をサポート Vue コンポーネントを Markdown に埋め込める DEMO >>>

Slide 11

Slide 11 text

Studio 上でのコンテンツ更新(2/2) 編集中の内容は⾃動的に DRAFT として保存される 発⾏する場合に DRAFT の内容をリポジトリにコミットする 更新⽤の GUI が⽤意されている(開発者じゃなくても使える) ブランチを変えることもできる 直接マージ / PR 作成が選択できる DEMO >>>

Slide 12

Slide 12 text

コンテンツ開発(1/2) フロントエンドアプリケーション Git ベース CMS の機能は Nuxt Content が使われている Nuxt Content の流儀にしたがって⾃由にカスタマイズが可能 メディア管理 画像ファイルのアップロードが可能 メディアファイルはデフォルトで Markdown ⽤のファイルパスを取得できる

Slide 13

Slide 13 text

コンテンツ開発(2/2) アプリケーション設定 アイコンやテーマに関する設定が Studio からできる app.config.ts を編集して Nuxt の設定を変更している デザイン設定(Design Tokens) 外観を設定できるメニュー Pinceau というスタイル設定ライブラリを使っている 画⾯のサイズやフォント、⾊などを Studio から設定できる

Slide 14

Slide 14 text

まとめ Nuxt Studio は Nuxt Content をベースにした CMS 環境 Git ベースの CMS をブラウザのみで完結できる 開発者ではない⼈でもコンテンツの更新などに参加できる Nuxt ベースなので開発の⾃由度が⾼い

Slide 15

Slide 15 text

ご清聴ありがとうございました DJ タイムもお楽しみに︕