Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Awesome Nuxt.js
Search
Takahiro Tsuchiya
July 30, 2018
Programming
1
450
Awesome Nuxt.js
Vue.js Night Nagoya #1でNuxt.jsの紹介をしました。
Takahiro Tsuchiya
July 30, 2018
Tweet
Share
More Decks by Takahiro Tsuchiya
See All by Takahiro Tsuchiya
捨てて加速するプロダクト開発 / sutete-speedup-product-development
corocn
3
530
リファラル採用にフルベットしてみた
corocn
3
3.1k
エンジニアとプロダクトマネージャーを兼任した1年間を振り返る / pdm-furikaeri
corocn
14
6.7k
育休のすゝめ #devsumi 2023
corocn
3
4.3k
GCPでRubyを動かしている話 / ruby on gcp
corocn
0
780
フルリモートワーカーのデスク選定 / how-to-select-remote-work-desk
corocn
1
540
Auth0イントロダクション / corocn_auth0_day_recap_in_osaka
corocn
1
930
Ruby meets passwordlress world
corocn
0
730
Webサービス開発とSPAの認証の話 / spa-and-identity
corocn
9
2.7k
Other Decks in Programming
See All in Programming
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
280
甘い香りに誘われてVanilla Extractを1年間運用してみた
miyahkun
1
110
Git Rebase
bkuhlmann
11
1.6k
Ruby GitHub Packages
bkuhlmann
0
620
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
340
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
180
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
22
15k
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
180
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
230
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
440
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
160
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
420
Featured
See All Featured
Building Your Own Lightsaber
phodgson
98
5.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Embracing the Ebb and Flow
colly
79
4.1k
Web Components: a chance to create the future
zenorocha
305
41k
Designing for humans not robots
tammielis
247
25k
Done Done
chrislema
178
15k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Code Review Best Practice
trishagee
54
15k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.5k
Designing with Data
zakiwarfel
95
4.8k
Transcript
Awesome Nuxt.js Vue.js Night Nagoya #1 2018/07/30ʢ݄ʣ Takahiro Tsuchiya /
@corocn
ࠓNuxt.jsͷ հΛ͠·͢
ϓϩϑΟʔϧ • @corocn / Takahiro Tsuchiya / و༟ • Application
Engineer @ Misoca Inc. • https://www.misoca.jp/ • Auth0 Ambassador • https://auth0.com/
Nuxt.js • Vue.jsͰWebsite / Web ApplicationΛ࡞Δͨ ΊͷFramework • ಡΈํʮnʌkstʯͰφΫετ •
https://github.com/nuxt/nuxt.js ⭐13784 • https://nuxtjs.org/
ಛ •SSRʢαʔόʔαΠυϨϯμϦϯάʣରԠ • SEOରࡦʢΫϩʔϥʔରࡦʣ • ॳճͷදࣔͷ্ • ΞΠσΞNext.jsʢReactʣ͔Β • SPAʢSingle
Page Applicationʣ։ൃͰ༗ೳ
ΈࠐΈࡁϥΠϒϥϦ • VueʢCoreʣ • Vue-RouterʢRoutingʣ • VuexʢState Managementʣ • WebpackʢBundlerʣ
• Vue Server RendererʢSSRʣ • Vue-MetaʢMeta Tagʣ SPA SSR, SEO
͍͍ͱ͜Ζ
։ൃͷΓग़͕͠ ͱʹ͔͍͘
͍ํ
ॳظԽˠ্ཱͪ͛ • ςϯϓϨʔτΛͬͯॳظԽ • $ vue init nuxt-community/starter-template my-project •
※ v1.0.0ϕʔε͔ͩΒҙʂ • ϞδϡʔϧೖΕΔ • $ cd my-project && yarn install OR npm install • ্ཱͪ͛ • $ yarn dev
ϙʔτม͑ΕΔ RailsͱόοςΟϯά͢ΔͷͰΑ͘ม͑Δ
None
্ཱͪ͛·Ͱ 1͔͔Βͳ͍
ߏΛݟ͍ͯ͘
ߏ Ϗϧυ݁Ռ ஔ͚ͩ͘Ͱ Page͕Ճ͞ΕΔ ઃఆ
ઃఆ / nuxt.config.js ઃఆ΄΅͜ͷϑΝΠϧΛ࿔Δ
ϖʔδΛՃ͢Δ
PagesҎԼʹSFC※Λஔ͘ pages/hoge.vueΛ࡞Δͱɾɾɾ ※ Single File Component
දࣔ͞ΕΔ ϑΝΠϧ໊͔Β ϧʔςΟϯά͕ ࣗಈੜ͞ΕΔʂ .nuxt/router.js ʹग़ྗ݁Ռ
ઃఆΑΓن Railsͷເ͕ݟ͑Δ
ΤίγεςϜΛࢧ͑Δ Modules
https://github.com/ nuxt-community/awesome-nuxt
Ϗϧυ
SSR͢Δ߹ • yarn build → start Ͱαʔόʔ্ཱ͕͕ͪΔ • yarn generate
Ͱ੩తϏϧυग़ྗ • ੩తϏϧυ࣌distҎԼʹग़ྗ͞ΕΔ
SPAͷ߹ • mode: ‘spa’ • yarn build Ͱ੩తϑΝΠϧग़ྗ͞ΕΔ
࠷ۙͷར༻ࣄྫ
https://note.mu/konpyu/n/ n9b7bf4343514
https://twitter.com/fladdict/status/ 803382240076070913
υΩϡϝϯτ
• Vue.jsಉ༷ʹ΄΅༁͞Ε͍ͯΔ ☺ ༁ঢ়گ
Φεεϝͷຊ https://booth.pm/ja/items/824745
ϘΫͷຊͰͬͨ https://booth.pm/ja/items/830458
͏͙͢v2͕ ϦϦʔε͞ΕΔͧʂ
None
αΠτ੍࡞Ͱ ΞϓϦέʔγϣϯ։ൃͰ ͍͖ͬͯ·͠ΐ͏ʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠