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
6.1k
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
140
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
750
カーナベル株式会社2024年2月 エンジニアイベント資料
andoshin11
0
390
Private Cloudを支える最高のユーザーガイド運用技術
andoshin11
0
300
TS CompilerがVueを喋れても良いじゃないか
andoshin11
0
750
ain't giving up type-safe Express
andoshin11
2
460
Type Safe "Everything"
andoshin11
0
260
Hack your Nuxt router!
andoshin11
0
1.3k
GatewayパターンとSchema駆動開発
andoshin11
7
1.5k
Other Decks in Programming
See All in Programming
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
170
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.7k
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
240
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
ALL CODE BASE ARE BELONG TO STUDY
uzulla
25
6.1k
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
1
500
Six and a half ridiculous things to do with Quarkus
hollycummins
0
180
Cursorハンズオン実践!
eltociear
2
1.1k
CSC305 Lecture 06
javiergs
PRO
0
240
Devoxx BE - Local Development in the AI Era
kdubois
0
130
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
Featured
See All Featured
Balancing Empowerment & Direction
lara
4
690
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
33
2.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
8
910
How STYLIGHT went responsive
nonsquared
100
5.8k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Mobile First: as difficult as doing things right
swwweet
224
10k
Done Done
chrislema
185
16k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
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