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
Hack your Nuxt router!
Search
andoshin11
December 11, 2019
Technology
0
1.1k
Hack your Nuxt router!
Enhance your Nuxt application by extracting the router object and hacking it!
Here's how.
andoshin11
December 11, 2019
Tweet
Share
More Decks by andoshin11
See All by andoshin11
カーナベル株式会社2024年2月 エンジニアイベント資料
andoshin11
0
78
Private Cloudを支える最高のユーザーガイド運用技術
andoshin11
0
250
TS CompilerがVueを喋れても良いじゃないか
andoshin11
0
660
ain't giving up type-safe Express
andoshin11
2
380
Type Safe "Everything"
andoshin11
0
200
GatewayパターンとSchema駆動開発
andoshin11
8
1.2k
Catch up Nuxt.js 2019.02
andoshin11
0
1.8k
The future of Nuxt.js with TypeScript
andoshin11
0
77
Clean Architecture with Vue
andoshin11
13
8.4k
Other Decks in Technology
See All in Technology
Hands-on Gemini, the Google DeepMind LLM
meteatamel
1
110
VS CodeでAWSを操作しよう
smt7174
7
1.6k
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
180
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
620
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
420
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
430
継続的な改善 x ⾮連続的な進化
sansantech
PRO
3
140
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
200
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.7k
アクセス制御にまつわる改善 / Improving access control
itkq
0
520
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
230
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
KATA
mclloyd
15
12k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Designing for humans not robots
tammielis
248
25k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
120
39k
Design by the Numbers
sachag
274
18k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
Statistics for Hackers
jakevdp
789
220k
Transcript
Hack your Nuxt router! @andoshin11 Sample Code :https://github.com/andoshin11/studio-andy/pull/119
Routing in Nuxt.js • Place a file inside the pages
directory • Instantly becomes a new route • Incredibly simple and easy! • However...
By extracting router object • Easier to overlook route-meta •
Easier to type-check • Easier to make a url-builder • Easier to generate breadcrumbs
Using router module @nuxtjs/router
Quick Setup! • Install router-module
Quick Setup! • Install router-module • Register the module
Quick Setup! • Install router-module • Register the module •
Create router file
Tips: migrate from default router Step 1 $ nuxt build
Step 2 router.js will be generated Step 3 Copy and paste contents
Override RouteMeta type def
Making url-builder (preparation) • First we need a route resolver
to retrieve the entire ancestors
Making url-builder
Generate Breadcrumbs
Generate Breadcrumbs
Generate Breadcrumbs
Generate Breadcrumbs
Thank you!