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
120
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
660
カーナベル株式会社2024年2月 エンジニアイベント資料
andoshin11
0
350
Private Cloudを支える最高のユーザーガイド運用技術
andoshin11
0
300
TS CompilerがVueを喋れても良いじゃないか
andoshin11
0
740
ain't giving up type-safe Express
andoshin11
2
450
Type Safe "Everything"
andoshin11
0
250
Hack your Nuxt router!
andoshin11
0
1.3k
GatewayパターンとSchema駆動開発
andoshin11
7
1.5k
Other Decks in Programming
See All in Programming
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
What's new in Adaptive Android development
fornewid
0
110
リッチエディターを安全に開発・運用するために
unachang113
1
260
Reactの歴史を振り返る
tutinoko
1
140
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
Gemini CLI のはじめ方
ttnyt8701
1
110
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
480
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
650
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
520
TypeScriptでDXを上げろ! Hono編
yusukebe
3
870
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
130
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
720
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Agile that works and the tools we love
rasmusluckow
329
21k
Six Lessons from altMBA
skipperchong
28
3.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Side Projects
sachag
455
43k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
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