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
530
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
11
6.2k
現場のエンジニアから見た採用担当との協働
corocn
7
3k
シリーズAをリファラル採用中心に走り抜ける / leaner-referral-engineer-2024
corocn
3
2.1k
捨てて加速するプロダクト開発 / sutete-speedup-product-development
corocn
3
700
リファラル採用にフルベットしてみた
corocn
3
3.8k
エンジニアとプロダクトマネージャーを兼任した1年間を振り返る / pdm-furikaeri
corocn
17
8k
育休のすゝめ #devsumi 2023
corocn
3
4.9k
GCPでRubyを動かしている話 / ruby on gcp
corocn
0
940
フルリモートワーカーのデスク選定 / how-to-select-remote-work-desk
corocn
1
630
Other Decks in Programming
See All in Programming
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1.1k
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
750
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
2
740
新世界の理解
koriym
0
130
一人でAIプロダクトを作るならAIにはもっと働いてもらいたい / I want AI to work harder
rkaga
1
170
画像コンペでのベースラインモデルの育て方
tattaka
3
1k
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
0
190
Go製CLIツールをnpmで配布するには
syumai
2
1.1k
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
430
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
36
11k
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
320
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Optimizing for Happiness
mojombo
379
70k
Navigating Team Friction
lara
188
15k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
A better future with KSS
kneath
238
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Gamification - CAS2011
davidbonilla
81
5.4k
Done Done
chrislema
185
16k
The Language of Interfaces
destraynor
158
25k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
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
αΠτ੍࡞Ͱ ΞϓϦέʔγϣϯ։ൃͰ ͍͖ͬͯ·͠ΐ͏ʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠