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.3k
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
カーナベルにおけるProtobuf二次利用例
andoshin11
0
100
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
590
カーナベル株式会社2024年2月 エンジニアイベント資料
andoshin11
0
330
Private Cloudを支える最高のユーザーガイド運用技術
andoshin11
0
290
TS CompilerがVueを喋れても良いじゃないか
andoshin11
0
730
ain't giving up type-safe Express
andoshin11
2
440
Type Safe "Everything"
andoshin11
0
250
GatewayパターンとSchema駆動開発
andoshin11
7
1.4k
Catch up Nuxt.js 2019.02
andoshin11
0
2.1k
Other Decks in Technology
See All in Technology
令和トラベルQAのAI活用
seigaitakahiro
0
520
CSSDay, Amsterdam
brucel
0
140
CloudBruteによる外部からのS3バケットの探索・公開の発見について / 20250605 Kumiko Hennmi
shift_evolve
3
190
うちの会社の評判は?SNSの投稿分析にAIを使ってみた
doumae
0
270
[zh-TW] DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!(machine translation)
martin_lover
1
650
テストを実施する前に考えるべきテストの話 / Thinking About Testing Before You Test
nihonbuson
PRO
14
2.1k
mnt_data_とは?ChatGPTコード実行環境を深堀りしてみた
icck
0
210
大事なのは、AIの精度だけじゃない!〜1円のズレも許されない経理領域とAI〜
jun_nemoto
11
5.2k
AIの電力問題を概観する
rmaruy
1
220
RDRA3.0を知ろう
kanzaki
2
430
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.6k
GitHub Coding Agent 概要
kkamegawa
1
1.7k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
For a Future-Friendly Web
brad_frost
178
9.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
15
890
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
A designer walks into a library…
pauljervisheath
205
24k
Producing Creativity
orderedlist
PRO
346
40k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
The Cost Of JavaScript in 2023
addyosmani
49
8.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
The Language of Interfaces
destraynor
158
25k
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!