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
96
Private Cloudを支える最高のユーザーガイド運用技術
andoshin11
0
260
TS CompilerがVueを喋れても良いじゃないか
andoshin11
0
680
ain't giving up type-safe Express
andoshin11
2
390
Type Safe "Everything"
andoshin11
0
210
GatewayパターンとSchema駆動開発
andoshin11
8
1.3k
Catch up Nuxt.js 2019.02
andoshin11
0
1.8k
The future of Nuxt.js with TypeScript
andoshin11
0
78
Clean Architecture with Vue
andoshin11
13
8.6k
Other Decks in Technology
See All in Technology
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
960
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
960
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
170
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
Featured
See All Featured
Clear Off the Table
cherdarchuk
89
320k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Git: the NoSQL Database
bkeepers
PRO
423
64k
What's new in Ruby 2.0
geeforr
338
31k
Typedesign – Prime Four
hannesfritz
37
2.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Rails Girls Zürich Keynote
gr2m
93
13k
How GitHub (no longer) Works
holman
305
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
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!