Awesome 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ͱόοςΟϯά͢ΔͷͰΑ͘ม͑Δ

12. None

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͕ ϦϦʔε͞ΕΔͧʂ

34. None

35. αΠτ੍࡞Ͱ΋ ΞϓϦέʔγϣϯ։ൃͰ΋ ࢖͍͖ͬͯ·͠ΐ͏ʂ

36. ͋Γ͕ͱ͏͍͟͝·ͨ͠