Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt Studio を使ってみた / nuxt-studio-intro
Search
miyake
September 06, 2023
Technology
1
1.1k
Nuxt Studio を使ってみた / nuxt-studio-intro
GEEKERS NITE #3 で発表したスライドです。
https://geekersnites.connpass.com/event/294145/
miyake
September 06, 2023
Tweet
Share
More Decks by miyake
See All by miyake
Azure Serverless × AI Agent × MCP アーキテクチャ最前線 / Azure Serverless Agent Architecture
miyake
12
3k
Cosmos DB で持続可能な RAG を実現しよう!~ AOAI Dev Day ふりかえりを添えて / Sustainable RAG with Cosmos DB with recap AOAI Dev Day
miyake
1
330
Mirroring Azure Cosmos DB in Microsoft Fabric
miyake
2
240
LLM 時代におさえておきたい Azure Serverless ファミリーまとめ / serverlessdaystokyo2023-llm-aoai
miyake
9
2.8k
Microsoft Build 2023 で発表された Cosmos DB の注目アップデート / Microsoft Build 2023 Cosmos DB update
miyake
1
870
祝 🎉 両方とも正式リリース! GitHub Codespaces と Nuxt3 で次世代開発体験 / codespaces-nuxt3
miyake
0
1.5k
Static Site Generator でサイト構築 / building sites with static site generator
miyake
1
390
Design and implementation of Cosmos DB Change Feed-centric architecture
miyake
0
1.1k
Well-Architected Framework を活用した Azure 設計パターン / azure-well-architected-framework
miyake
2
1.5k
Other Decks in Technology
See All in Technology
日経が挑戦するデータ民主化 ~ セルフサービス基盤がもたらす利点と苦悩~/nikkei-tech-talk-37
nikkei_engineer_recruiting
0
190
Geospatialの世界最前線を探る [2025年版]
dayjournal
2
400
Go Conference 2025: GoのinterfaceとGenericsの内部構造と進化 / Go type system internals
ryokotmng
3
410
全てGoで作るP2P対戦ゲーム入門
ponyo877
3
970
“Custom App”という選択肢──App Store配布の第三の道とその可能性 / iOSDC Japan 2025
genda
0
110
LLMを浸透させるための泥臭い話
oprstchn
3
810
AI時代に活躍できるエンジニアとは #弁護士ドットコム
bengo4com
0
220
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
160
Sidekiq その前に:Webアプリケーションにおける非同期ジョブ設計原則
morihirok
16
5.5k
みん強のこれまでとこれから
genshun9
1
350
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
140
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
280
Featured
See All Featured
It's Worth the Effort
3n
187
28k
Embracing the Ebb and Flow
colly
87
4.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
600
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Statistics for Hackers
jakevdp
799
220k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
GitHub's CSS Performance
jonrohan
1032
460k
Transcript
Nuxt Studio を使ってみた GEEKERS NITE #3 - Kazuyuki Miyake
About Me 三宅 和之 / Kazuyuki Miyake 株式会社ゼンアーキテクツ 代表 ZEN:
Azure, GitHub, Nuxt のスペシャリスト集団 Microsoft Regional Director / Microsoft MVP Vue.js ⽇本ユーザーグループコアスタッフ X: @kazuyukimiyake
NuxtLabs Japan やってます
Nuxt Studio とは Nuxt3 アプリケーションの開発⽤プラットフォーム GitHub 上に Nuxt Stuio ⽤のワークスペースが作られる
現在はベータ期間中で、無料で利⽤が可能 正式リリース後の価格体系は不明 現時点(2023 年 9 ⽉)では CMS 機能に特化している Nuxt Content 2 の機能が ブラウザから使えるイメージ
Nuxt Studio の特⻑ ブラウザ上で CMS 運⽤が完結する dev server 不要でブラウザ上からプレビューができる コンテンツ編集中でもリアルタイムにプレビューが更新
Nuxt がベースなので Vue/Nuxt の資産がそのまま使える Nuxt Studio は Git ベースの CMS をカバーしている CMS で運⽤するサイトの新規構築 CMS で運⽤するサイトのデプロイ CMS のコンテンツ管理(記事の追加、修正など)
ブラウザで Markdown の編集とプレビューが可能
Nuxt Studio のはじめ⽅ GitHub の個⼈アカウントで Nuxt Studio に接続する GitHub Apps
として Nuxt Studio がインストールされる チームを作成して共同作業することも可能 テーマを選択する GitHub リポジトリを選択する 既存のリポジトリに追加も可能 DEMO >>>
GitHub Pages へのデプロイ Studio から 1 クリックで GitHub Pages にデプロイ可能
.github/workflows に GitHub Actions の設定が追加される {project-name}.nuxt.space でアクセス可能 カスタムドメインも設定可能 セルフホスティングへのデプロイも可能 実体は Nuxt アプリなので任意の⽅法でデプロイ可能 Vercel, Cloudflare Pages, Azure Static Web Apps など DEMO >>>
テーマ(デザイン) テーマがいくつか⽤意されている(現在は 3 つ) Alpine: ブログ⽤ Content Wind: ポートフォリオ⽤ Docus:
ドキュメントサイト⽤ テーマ開発も可能 スターターテンプレート がある Nuxt の UI 開発は Nuxt UI もおすすめ
Studio 上でのコンテンツ更新(1/2) Nuxt Studio の Edit 機能を使う Studio 上で Markdown
を直接編集できる Markdown は Nuxt Content の MDC Syntax をサポート Vue コンポーネントを Markdown に埋め込める DEMO >>>
Studio 上でのコンテンツ更新(2/2) 編集中の内容は⾃動的に DRAFT として保存される 発⾏する場合に DRAFT の内容をリポジトリにコミットする 更新⽤の GUI
が⽤意されている(開発者じゃなくても使える) ブランチを変えることもできる 直接マージ / PR 作成が選択できる DEMO >>>
コンテンツ開発(1/2) フロントエンドアプリケーション Git ベース CMS の機能は Nuxt Content が使われている Nuxt
Content の流儀にしたがって⾃由にカスタマイズが可能 メディア管理 画像ファイルのアップロードが可能 メディアファイルはデフォルトで Markdown ⽤のファイルパスを取得できる
コンテンツ開発(2/2) アプリケーション設定 アイコンやテーマに関する設定が Studio からできる app.config.ts を編集して Nuxt の設定を変更している デザイン設定(Design
Tokens) 外観を設定できるメニュー Pinceau というスタイル設定ライブラリを使っている 画⾯のサイズやフォント、⾊などを Studio から設定できる
まとめ Nuxt Studio は Nuxt Content をベースにした CMS 環境 Git
ベースの CMS をブラウザのみで完結できる 開発者ではない⼈でもコンテンツの更新などに参加できる Nuxt ベースなので開発の⾃由度が⾼い
ご清聴ありがとうございました DJ タイムもお楽しみに︕