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
950
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
200
TS CompilerがVueを喋れても良いじゃないか
andoshin11
0
560
ain't giving up type-safe Express
andoshin11
2
340
Type Safe "Everything"
andoshin11
0
180
GatewayパターンとSchema駆動開発
andoshin11
8
1.2k
Catch up Nuxt.js 2019.02
andoshin11
0
1.5k
The future of Nuxt.js with TypeScript
andoshin11
0
65
Clean Architecture with Vue
andoshin11
13
8k
vue-cli 3.0時代のNuxt.js
andoshin11
3
5.5k
Other Decks in Technology
See All in Technology
cdk deployに必要な権限ってなんだ?
kinyok
0
220
JAWS-UG 横浜 #54 資料
takakuni
0
220
AI Services 概要 / AI Services overview
oracle4engineer
PRO
0
180
re:Inventで発表があったIoT事例の紹介と考察
kizawa2020
0
200
Stripe / Okta Customer Identity Cloud(旧Auth0) の採用に至った理由 〜モリサワの SaaS 戦略〜
tomuro
0
140
230125 古いタブレットの活用 かーでぃさん
comucal
PRO
0
17k
NGINXENG JP#2 - 2-NGINXの動作の詳細
hiropo20
1
150
SignalR を使ったアプリケーション開発をより快適に!
nenonaninu
0
720
OCI技術資料 : ロード・バランサー 詳細 / Load Balancer 200
ocise
2
7.2k
岐路に立つ若手がAmazonianの仕事術を学んできました / learning amazonian productivity hacks as a junior engineer
yayoi_dd
0
230
CSS Variable をもっと活用する / Kyoto.js 18
spring_raining
2
1.1k
イ良い日ンマを作る(USBストレージ容量偽装の手法) / USB Storage Capacity Faking Techniques
shutingrz
0
570
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Build your cross-platform service in a week with App Engine
jlugia
221
17k
A better future with KSS
kneath
230
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
Writing Fast Ruby
sferik
613
58k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
32
6.8k
Learning to Love Humans: Emotional Interface Design
aarron
263
38k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
24
4.7k
Embracing the Ebb and Flow
colly
75
3.6k
Designing with Data
zakiwarfel
91
4.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
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!