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
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
Cosmos DB で持続可能な RAG を実現しよう!~ AOAI Dev Day ふりかえりを添えて / Sustainable RAG with Cosmos DB with recap AOAI Dev Day
miyake
0
300
Mirroring Azure Cosmos DB in Microsoft Fabric
miyake
2
210
LLM 時代におさえておきたい Azure Serverless ファミリーまとめ / serverlessdaystokyo2023-llm-aoai
miyake
9
2.7k
Microsoft Build 2023 で発表された Cosmos DB の注目アップデート / Microsoft Build 2023 Cosmos DB update
miyake
1
860
祝 🎉 両方とも正式リリース! GitHub Codespaces と Nuxt3 で次世代開発体験 / codespaces-nuxt3
miyake
0
1.5k
Static Site Generator でサイト構築 / building sites with static site generator
miyake
1
380
Design and implementation of Cosmos DB Change Feed-centric architecture
miyake
0
1k
Well-Architected Framework を活用した Azure 設計パターン / azure-well-architected-framework
miyake
2
1.5k
2020 年下半期 Cosmos DB の更新まとめ
miyake
0
650
Other Decks in Technology
See All in Technology
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
310
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
160
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
OPENLOGI Company Profile for engineer
hr01
1
34k
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
520
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.8k
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
16k
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
230
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
140
Operating Operator
shhnjk
1
590
What’s new in Android development tools
yanzm
0
310
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
Featured
See All Featured
Bash Introduction
62gerente
613
210k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Mobile First: as difficult as doing things right
swwweet
223
9.7k
The Invisible Side of Design
smashingmag
301
51k
How STYLIGHT went responsive
nonsquared
100
5.6k
How GitHub (no longer) Works
holman
314
140k
Building Adaptive Systems
keathley
43
2.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Side Projects
sachag
455
42k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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 タイムもお楽しみに︕