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
vue-cli 3.0時代のNuxt.js
Search
andoshin11
March 27, 2018
Programming
3
6k
vue-cli 3.0時代のNuxt.js
vue-cli 3.0からプロジェクトのカスタマイズがtemplate方式からplugin方式に変わったので、Nuxt starter pluginを作りました
andoshin11
March 27, 2018
Tweet
Share
More Decks by andoshin11
See All by andoshin11
カーナベルにおけるProtobuf二次利用例
andoshin11
0
110
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
640
カーナベル株式会社2024年2月 エンジニアイベント資料
andoshin11
0
340
Private Cloudを支える最高のユーザーガイド運用技術
andoshin11
0
300
TS CompilerがVueを喋れても良いじゃないか
andoshin11
0
740
ain't giving up type-safe Express
andoshin11
2
440
Type Safe "Everything"
andoshin11
0
250
Hack your Nuxt router!
andoshin11
0
1.3k
GatewayパターンとSchema駆動開発
andoshin11
7
1.4k
Other Decks in Programming
See All in Programming
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
120
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Porting a visionOS App to Android XR
akkeylab
0
470
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
Is Xcode slowly dying out in 2025?
uetyo
1
270
5つのアンチパターンから学ぶLT設計
narihara
1
170
ふつうの技術スタックでアート作品を作ってみる
akira888
1
860
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Visualization
eitanlees
146
16k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
A Tale of Four Properties
chriscoyier
160
23k
Designing for humans not robots
tammielis
253
25k
Unsuck your backbone
ammeep
671
58k
Done Done
chrislema
184
16k
The Invisible Side of Design
smashingmag
301
51k
Code Reviewing Like a Champion
maltzj
524
40k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Transcript
Nuxt Meetup #1 株式会社 merpay Software Engineer (Frontend) Shin Ando
(@andoshin11) vue-cli 3.0時代のNuxt.js
自己紹介 • Shin Ando (@andoshin11) • Software Engineer (Frontend) •
merpay, Inc (2018/3〜) • Skills • Vue.js • React Native • Rails
信用を創造して、なめらかな社会を創る
Vue conf Amsterdam参加してきました!!
vue-cli 3.0がやってくる!! • Plugin Based Architecture • Zero config by
default • Everything configurable without need for eject still in beta 6...
vue-cli 3.0がやってくる!! $ vue init <template> my-app $ vue create
my-app $ vue add <plugin> // add custom plugin Legacy way... Modern way (^3.0.0)
ところでみなさん... Nuxt、やっていますか?
ところでみなさん... Nuxt、どうやっていますか??
公式によると... https://nuxtjs.org/guide/installation
None
Pluginを作るぞ :muscle: https://github.com/vuejs/vue-cli/blob/dev/docs/plugin-dev.md
Pluginの作成: $ vue add されたときにgeneratorが実行される
Pluginの作成:/generator • /template 以下にプロジェクトにつっこみ たいファイルを用意する
Pluginの作成:/generator/index.js • /template 以下にプロジェクトにつっこみ たいファイルを用意する • index.jsでpackage.jsonを拡張
Pluginの作成:/generator/index.js • /template 以下にプロジェクトにつっこみ たいファイルを用意する • Index.jsでpackage.jsonを拡張 • index.js にtemplateの書き込み処理を記
述
Pluginの作成:/generator/index.js 元々 /src に存在したファイルは /src/legacy 以下に移動する(力技)
出来ました :clap: :clap: https://github.com/andoshin11/vue-cli-plugin-nuxt-starter-template
DEMO
ハマりどころ Babelのpreset指定しないと死ぬ (inside nuxt.config.js)
ハマりどころ Generator APIのhookが少ない。 除外リスト作成 ↓ /src にtemplate書き込み ↓ /src のファイルスキャン(postProcessFiles)
↓ 除外リストになければファイル移動 という4度手間に...
ハマりどころ 既存ファイルとの衝突
まとめ • vue-cli 3.0はいいぞ! • ボイラープレートはvue-cli。そこにNuxtをのっける • Nuxtの立ち位置が変化 「Vuexやvue-routerの設定まとめてやってくれる。ついでにSSRもできる」 ↓
「SSRのためのフレームワーク」
Thanks, and Happy Nuxt Life!! @andoshin11