Tweet
Tweet

Slide 1

Slide 1 text

Awesome Nuxt.js Vue.js Night Nagoya #1 2018/07/30ʢ݄ʣ Takahiro Tsuchiya / @corocn

Slide 2

Slide 2 text

ࠓ໷͸Nuxt.jsͷ
 ঺հΛ͠·͢

Slide 3

Slide 3 text

ϓϩϑΟʔϧ • @corocn / Takahiro Tsuchiya / ౔԰و༟ • Application Engineer @ Misoca Inc. • https://www.misoca.jp/ • Auth0 Ambassador • https://auth0.com/

Slide 4

Slide 4 text

Nuxt.js • Vue.jsͰWebsite / Web ApplicationΛ࡞Δͨ ΊͷFramework • ಡΈํ͸ʮnʌkstʯͰφΫετ • https://github.com/nuxt/nuxt.js ⭐13784 • https://nuxtjs.org/

Slide 5

Slide 5 text

ಛ௃ •SSRʢαʔόʔαΠυϨϯμϦϯάʣରԠ • SEOରࡦʢΫϩʔϥʔରࡦʣ • ॳճͷදࣔ଎౓ͷ޲্ • ΞΠσΞ͸Next.jsʢReactʣ͔Β • SPAʢSingle Page Applicationʣ։ൃͰ΋༗ೳ

Slide 6

Slide 6 text

૊ΈࠐΈࡁϥΠϒϥϦ • VueʢCoreʣ • Vue-RouterʢRoutingʣ • VuexʢState Managementʣ • WebpackʢBundlerʣ • Vue Server RendererʢSSRʣ • Vue-MetaʢMeta Tagʣ SPA SSR, SEO

Slide 7

Slide 7 text

͍͍ͱ͜Ζ

Slide 8

Slide 8 text

։ൃͷ૸Γग़͕͠ ͱʹ͔͘͸΍͍

Slide 9

Slide 9 text

࢖͍ํ

Slide 10

Slide 10 text

ॳظԽˠ্ཱͪ͛ • ςϯϓϨʔτΛ࢖ͬͯॳظԽ • $ vue init nuxt-community/starter-template my-project • ※ v1.0.0ϕʔε͔ͩΒ஫ҙʂ • ϞδϡʔϧೖΕΔ • $ cd my-project && yarn install OR npm install • ্ཱͪ͛ • $ yarn dev

Slide 11

Slide 11 text

ϙʔτ͸ม͑ΕΔ RailsͱόοςΟϯά͢ΔͷͰΑ͘ม͑Δ

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

্ཱͪ͛·Ͱ 1෼͔͔Βͳ͍

Slide 14

Slide 14 text

ߏ੒Λݟ͍ͯ͘

Slide 15

Slide 15 text

ߏ੒ Ϗϧυ݁Ռ ஔ͚ͩ͘Ͱ Page͕௥Ճ͞ΕΔ ઃఆ

Slide 16

Slide 16 text

ઃఆ / nuxt.config.js ઃఆ͸΄΅͜ͷϑΝΠϧΛ࿔Δ

Slide 17

Slide 17 text

ϖʔδΛ௥Ճ͢Δ

Slide 18

Slide 18 text

PagesҎԼʹSFC※Λஔ͘ pages/hoge.vueΛ࡞Δͱɾɾɾ ※ Single File Component

Slide 19

Slide 19 text

දࣔ͞ΕΔ ϑΝΠϧ໊͔Β ϧʔςΟϯά͕ ࣗಈੜ੒͞ΕΔʂ .nuxt/router.js ʹग़ྗ݁Ռ

Slide 20

Slide 20 text

ઃఆΑΓن໿ Railsͷເ͕ݟ͑Δ

Slide 21

Slide 21 text

ΤίγεςϜΛࢧ͑Δ Modules

Slide 22

Slide 22 text

https://github.com/
 nuxt-community/awesome-nuxt

Slide 23

Slide 23 text

Ϗϧυ

Slide 24

Slide 24 text

SSR͢Δ৔߹ • yarn build → start Ͱαʔόʔ্ཱ͕͕ͪΔ • yarn generate Ͱ੩తϏϧυग़ྗ • ੩తϏϧυ࣌͸distҎԼʹग़ྗ͞ΕΔ

Slide 25

Slide 25 text

SPAͷ৔߹ • mode: ‘spa’ • yarn build Ͱ੩తϑΝΠϧग़ྗ͞ΕΔ

Slide 26

Slide 26 text

࠷ۙͷར༻ࣄྫ

Slide 27

Slide 27 text

https://note.mu/konpyu/n/ n9b7bf4343514

Slide 28

Slide 28 text

https://twitter.com/fladdict/status/ 803382240076070913

Slide 29

Slide 29 text

υΩϡϝϯτ

Slide 30

Slide 30 text

• Vue.jsಉ༷ʹ΄΅༁͞Ε͍ͯΔ ☺ ຋༁ঢ়گ

Slide 31

Slide 31 text

Φεεϝͷຊ https://booth.pm/ja/items/824745

Slide 32

Slide 32 text

ϘΫͷຊͰ΋࢖ͬͨ https://booth.pm/ja/items/830458

Slide 33

Slide 33 text

΋͏͙͢v2͕ ϦϦʔε͞ΕΔͧʂ

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

͋Γ͕ͱ͏͍͟͝·ͨ͠