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
630
カーナベル株式会社2024年2月 エンジニアイベント資料
andoshin11
0
340
Private Cloudを支える最高のユーザーガイド運用技術
andoshin11
0
300
TS CompilerがVueを喋れても良いじゃないか
andoshin11
0
730
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
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
280
童醫院敏捷轉型的實踐經驗
cclai999
0
150
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
800
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
260
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
44
29k
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
120
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
780
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
540
C++20 射影変換
faithandbrave
0
500
Is Xcode slowly dying out in 2025?
uetyo
1
180
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
220
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Typedesign – Prime Four
hannesfritz
42
2.7k
Code Review Best Practice
trishagee
68
18k
Designing for Performance
lara
609
69k
A better future with KSS
kneath
239
17k
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