Awesome Nuxt.js

Awesome Nuxt.js

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

6b7ca499772f1ea867f6133778c77bbe?s=128

Takahiro Tsuchiya

July 30, 2018
Tweet

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠