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
510
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
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
10
5.5k
現場のエンジニアから見た採用担当との協働
corocn
7
3k
シリーズAをリファラル採用中心に走り抜ける / leaner-referral-engineer-2024
corocn
3
2k
捨てて加速するプロダクト開発 / sutete-speedup-product-development
corocn
3
670
リファラル採用にフルベットしてみた
corocn
3
3.7k
エンジニアとプロダクトマネージャーを兼任した1年間を振り返る / pdm-furikaeri
corocn
17
7.9k
育休のすゝめ #devsumi 2023
corocn
3
4.8k
GCPでRubyを動かしている話 / ruby on gcp
corocn
0
920
フルリモートワーカーのデスク選定 / how-to-select-remote-work-desk
corocn
1
610
Other Decks in Programming
See All in Programming
Kamal 2 – Get Out of the Cloud
aleksandrov
1
170
小田原でみんなで一句詠みたいな #phpcon_odawara
stefafafan
0
310
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
4
860
Rollupのビルド時間高速化によるプレビュー表示速度改善とバンドラとASTを駆使したプロダクト開発の難しさ
plaidtech
PRO
1
160
サービスレベルを管理してアジャイルを加速しよう!! / slm-accelerate-agility
tomoyakitaura
1
110
PHPのガベージコレクションを深掘りしよう
rinchoku
0
260
Develop Faster With FrankenPHP
dunglas
2
3.2k
新しいPHP拡張モジュールインストール方法「PHP Installer for Extensions (PIE)」を使ってみよう!
cocoeyes02
0
240
DomainException と Result 型で作る型安全なエラーハンドリング
karszawa
0
880
趣味全開のAITuber開発
kokushin
0
180
Building a macOS screen saver with Kotlin (Android Makers 2025)
zsmb
1
140
Deoptimization: How YJIT Speeds Up Ruby by Slowing Down / RubyKaigi 2025
k0kubun
0
170
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
103
19k
How STYLIGHT went responsive
nonsquared
99
5.5k
Building an army of robots
kneath
304
45k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Embracing the Ebb and Flow
colly
85
4.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
118
51k
4 Signs Your Business is Dying
shpigford
183
22k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Cost Of JavaScript in 2023
addyosmani
48
7.7k
Done Done
chrislema
183
16k
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
αΠτ੍࡞Ͱ ΞϓϦέʔγϣϯ։ൃͰ ͍͖ͬͯ·͠ΐ͏ʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠