Awesome Nuxt.js

Vue.js Night Nagoya #1でNuxt.jsの紹介をしました。

Transcript

1. Awesome Nuxt.js Vue.js Night Nagoya #1 2018/07/30ʢ݄ʣ Takahiro Tsuchiya / @corocn
2. ࠓ໷͸Nuxt.jsͷ
 ঺հΛ͠·͢
3. ϓϩϑΟʔϧ • @corocn / Takahiro Tsuchiya / ౔԰و༟ • Application Engineer @ Misoca Inc. • https://www.misoca.jp/ • Auth0 Ambassador • https://auth0.com/
4. Nuxt.js • Vue.jsͰWebsite / Web ApplicationΛ࡞Δͨ ΊͷFramework • ಡΈํ͸ʮnʌkstʯͰφΫετ • https://github.com/nuxt/nuxt.js ⭐13784 • https://nuxtjs.org/
5. ಛ௃ •SSRʢαʔόʔαΠυϨϯμϦϯάʣରԠ • SEOରࡦʢΫϩʔϥʔରࡦʣ • ॳճͷදࣔ଎౓ͷ޲্ • ΞΠσΞ͸Next.jsʢReactʣ͔Β • SPAʢSingle Page Applicationʣ։ൃͰ΋༗ೳ
6. ૊ΈࠐΈࡁϥΠϒϥϦ • VueʢCoreʣ • Vue-RouterʢRoutingʣ • VuexʢState Managementʣ • WebpackʢBundlerʣ • Vue Server RendererʢSSRʣ • Vue-MetaʢMeta Tagʣ SPA SSR, SEO
7. ͍͍ͱ͜Ζ
8. ։ൃͷ૸Γग़͕͠ ͱʹ͔͘͸΍͍
9. ࢖͍ํ
10. ॳظԽˠ্ཱͪ͛ • ςϯϓϨʔτΛ࢖ͬͯॳظԽ • $ vue init nuxt-community/starter-template my-project • ※ v1.0.0ϕʔε͔ͩΒ஫ҙʂ • ϞδϡʔϧೖΕΔ • $ cd my-project && yarn install OR npm install • ্ཱͪ͛ • $ yarn dev
11. ϙʔτ͸ม͑ΕΔ RailsͱόοςΟϯά͢ΔͷͰΑ͘ม͑Δ
13. ্ཱͪ͛·Ͱ 1෼͔͔Βͳ͍
14. ߏ੒Λݟ͍ͯ͘
15. ߏ੒ Ϗϧυ݁Ռ ஔ͚ͩ͘Ͱ Page͕௥Ճ͞ΕΔ ઃఆ
16. ઃఆ / nuxt.config.js ઃఆ͸΄΅͜ͷϑΝΠϧΛ࿔Δ
17. ϖʔδΛ௥Ճ͢Δ
18. PagesҎԼʹSFC※Λஔ͘ pages/hoge.vueΛ࡞Δͱɾɾɾ ※ Single File Component
19. දࣔ͞ΕΔ ϑΝΠϧ໊͔Β ϧʔςΟϯά͕ ࣗಈੜ੒͞ΕΔʂ .nuxt/router.js ʹग़ྗ݁Ռ
20. ઃఆΑΓن໿ Railsͷເ͕ݟ͑Δ
21. ΤίγεςϜΛࢧ͑Δ Modules
22. https://github.com/
 nuxt-community/awesome-nuxt
23. Ϗϧυ
24. SSR͢Δ৔߹ • yarn build → start Ͱαʔόʔ্ཱ͕͕ͪΔ • yarn generate Ͱ੩తϏϧυग़ྗ • ੩తϏϧυ࣌͸distҎԼʹग़ྗ͞ΕΔ
25. SPAͷ৔߹ • mode: ‘spa’ • yarn build Ͱ੩తϑΝΠϧग़ྗ͞ΕΔ
26. ࠷ۙͷར༻ࣄྫ
27. https://note.mu/konpyu/n/ n9b7bf4343514
28. https://twitter.com/fladdict/status/ 803382240076070913
29. υΩϡϝϯτ
30. • Vue.jsಉ༷ʹ΄΅༁͞Ε͍ͯΔ ☺ ຋༁ঢ়گ
31. Φεεϝͷຊ https://booth.pm/ja/items/824745
32. ϘΫͷຊͰ΋࢖ͬͨ https://booth.pm/ja/items/830458
33. ΋͏͙͢v2͕ ϦϦʔε͞ΕΔͧʂ
35. αΠτ੍࡞Ͱ΋ ΞϓϦέʔγϣϯ։ൃͰ΋ ࢖͍͖ͬͯ·͠ΐ͏ʂ
36. ͋Γ͕ͱ͏͍͟͝·ͨ͠