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
130
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
720
カーナベル株式会社2024年2月 エンジニアイベント資料
andoshin11
0
390
Private Cloudを支える最高のユーザーガイド運用技術
andoshin11
0
300
TS CompilerがVueを喋れても良いじゃないか
andoshin11
0
750
ain't giving up type-safe Express
andoshin11
2
450
Type Safe "Everything"
andoshin11
0
260
GatewayパターンとSchema駆動開発
andoshin11
7
1.5k
Catch up Nuxt.js 2019.02
andoshin11
0
2.1k
Other Decks in Technology
See All in Technology
Bedrock で検索エージェントを再現しようとした話
ny7760
2
140
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
240
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
460
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
200
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
3
390
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
slog.Handlerのよくある実装ミス
sakiengineer
4
490
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
270
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
570
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
400
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
260
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Music & Morning Musume
bryan
46
6.8k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Why Our Code Smells
bkeepers
PRO
339
57k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Into the Great Unknown - MozCon
thekraken
40
2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Producing Creativity
orderedlist
PRO
347
40k
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!