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
5.9k
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
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
240
カーナベル株式会社2024年2月 エンジニアイベント資料
andoshin11
0
110
Private Cloudを支える最高のユーザーガイド運用技術
andoshin11
0
260
TS CompilerがVueを喋れても良いじゃないか
andoshin11
0
680
ain't giving up type-safe Express
andoshin11
2
400
Type Safe "Everything"
andoshin11
0
220
Hack your Nuxt router!
andoshin11
0
1.2k
GatewayパターンとSchema駆動開発
andoshin11
8
1.3k
Catch up Nuxt.js 2019.02
andoshin11
0
1.9k
Other Decks in Programming
See All in Programming
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
170
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
640
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
530
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
A New Era of Testing
mannodermaus
2
490
AndroidアプリのUIバリエーションをあの手この手で確認する / Check UI variations of Android apps by various means
tkmnzm
1
140
開発を加速する共有Swift Package実践
elmetal
PRO
0
410
Some more adventure of Happy Eyeballs
coe401_
2
180
あなたのアプリ、ログはでてますか?あるいはログをだしてますか? (Funabashi.dev用 軽量版)
uzulla
2
120
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
200
マイグレーションコード自作して File-Based Routing に自動移行!! ~250 ページの歴史的経緯を添えて~
cut0
1
260
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
670
Featured
See All Featured
Unsuck your backbone
ammeep
667
57k
Facilitating Awesome Meetings
lara
49
5.9k
GraphQLとの向き合い方2022年版
quramy
43
13k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
How STYLIGHT went responsive
nonsquared
93
5.1k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Navigating Team Friction
lara
183
13k
Statistics for Hackers
jakevdp
794
220k
Designing with Data
zakiwarfel
98
5k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
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