vue-cli 3.0時代のNuxt.js

vue-cli 3.0からプロジェクトのカスタマイズがtemplate方式からplugin方式に変わったので、Nuxt starter pluginを作りました

Transcript

1. Nuxt Meetup #1 株式会社 merpay Software Engineer (Frontend) Shin Ando (@andoshin11) vue-cli 3.0時代のNuxt.js
2. 自己紹介 • Shin Ando (@andoshin11) • Software Engineer (Frontend) • merpay, Inc (2018/3〜) • Skills • Vue.js • React Native • Rails
3. 信用を創造して、なめらかな社会を創る
4. Vue conf Amsterdam参加してきました!!
5. vue-cli 3.0がやってくる!! • Plugin Based Architecture • Zero config by default • Everything configurable without need for eject still in beta 6...
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)
7. ところでみなさん... Nuxt、やっていますか？
8. ところでみなさん... Nuxt、どうやっていますか？?
9. 公式によると... https://nuxtjs.org/guide/installation
11. Pluginを作るぞ :muscle: https://github.com/vuejs/vue-cli/blob/dev/docs/plugin-dev.md
12. Pluginの作成： $ vue add されたときにgeneratorが実行される
13. Pluginの作成：/generator • /template 以下にプロジェクトにつっこみ たいファイルを用意する
14. Pluginの作成：/generator/index.js • /template 以下にプロジェクトにつっこみ たいファイルを用意する • index.jsでpackage.jsonを拡張
15. Pluginの作成：/generator/index.js • /template 以下にプロジェクトにつっこみ たいファイルを用意する • Index.jsでpackage.jsonを拡張 • index.js にtemplateの書き込み処理を記 述
16. Pluginの作成：/generator/index.js 元々 /src に存在したファイルは /src/legacy 以下に移動する(力技)
17. 出来ました :clap: :clap: https://github.com/andoshin11/vue-cli-plugin-nuxt-starter-template
18. DEMO
19. ハマりどころ Babelのpreset指定しないと死ぬ (inside nuxt.config.js)
20. ハマりどころ Generator APIのhookが少ない。 除外リスト作成 ↓ /src にtemplate書き込み ↓ /src のファイルスキャン(postProcessFiles) ↓ 除外リストになければファイル移動 という4度手間に...
21. ハマりどころ 既存ファイルとの衝突
22. まとめ • vue-cli 3.0はいいぞ！ • ボイラープレートはvue-cli。そこにNuxtをのっける • Nuxtの立ち位置が変化 「Vuexやvue-routerの設定まとめてやってくれる。ついでにSSRもできる」 ↓ 「SSRのためのフレームワーク」
23. Thanks, and Happy Nuxt Life!! @andoshin11