Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Hack your Nuxt router!
andoshin11
December 11, 2019
Technology
0
880
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
Private Cloudを支える最高のユーザーガイド運用技術
andoshin11
0
190
TS CompilerがVueを喋れても良いじゃないか
andoshin11
0
480
ain't giving up type-safe Express
andoshin11
2
310
Type Safe "Everything"
andoshin11
0
160
GatewayパターンとSchema駆動開発
andoshin11
8
1.2k
Catch up Nuxt.js 2019.02
andoshin11
0
1.4k
The future of Nuxt.js with TypeScript
andoshin11
0
55
Clean Architecture with Vue
andoshin11
13
7.8k
vue-cli 3.0時代のNuxt.js
andoshin11
3
5.4k
Other Decks in Technology
See All in Technology
SI企業が「アジャイル推し」になったら 幸せになれますか?/Can SI company be happy if it becomes “Agile stan” ?
chinmo
1
1k
OpsJAWS Meetup21 システム運用アンチパターンのすすめ
yoshiiryo1
0
1.4k
1人目QAエンジニアよもやま話 / QA Test Talk Vol.1
nametake
4
220
ROS再入門-はじめてのSLAM-
miura55
0
370
越境チャレンジの現在地 〜Epic大臣制度の今〜
yousak
0
700
会社訪問アプリ「Wantedly Visit」における推薦システム開発事例
hakubishin3
2
490
Scrum Fest Osaka 2022 段階的スクラムマスターのススメ
orimomo
0
670
JSAI 2022チュートリアル講演 AI哲学マップ / JSAI 2022 Tutorial "AI Philosophy Map"
ykiyota
0
390
Build 2022で発表されたWindowsアプリ開発のあれこれ振り返ろう
hatsunea
1
350
LINEのB2Bプラットフォームにおけるトラブルシューティング2選
line_developers
PRO
3
280
機械学習システムアーキテクチャ入門 #1
asei
3
1.2k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
3
8.9k
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
4
2.2k
Adopting Sorbet at Scale
ufuk
63
7.6k
Bash Introduction
62gerente
597
210k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Infographics Made Easy
chrislema
233
17k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
Why Our Code Smells
bkeepers
PRO
324
55k
Automating Front-end Workflow
addyosmani
1351
200k
Gamification - CAS2011
davidbonilla
75
3.9k
Designing with Data
zakiwarfel
91
3.9k
Typedesign – Prime Four
hannesfritz
33
1.3k
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!