JSFoo: round the year submissions

JSFoo: round the year submissions

Submit talks on JavaScript and full stack engineering round the year

Hassan Djirdeh


Understanding client side routing, with Vue.js

Submitted Mar 20, 2018

What does it actually take to construct a client side router? I’ll show you how to build a basic fully functional client-side router in Vue in under 50 lines of code.

By doing so, we’ll gather an understanding of the relevance/importance of client-side routing and where potential shortcomings can exist.


In web development, routing often refers to splitting an application’s UI based on rules derived from the browser URL. Numerous tools/libraries exist that allow us to enable routing both on the client and server side of applications.

But what does it actually take to construct a client side router? First, I’ll use the most basic tools that the Vue framework already provides to build a fully functional custom client side router. We’ll then switch over to using the official vue-router library to understand all the benefits that it adds such as nested routes, navigation guards, transition effects, etc.

This talk will be a more defined, extrapolated version of this CSS-Tricks blog post I published - https://css-tricks.com/build-a-custom-vue-router/.

Speaker bio

An engineering graduate and a self-taught web developer, Hassan is currently a Front End Engineer for the App Platform team within Shopify. Prior to being at Shopify, Hassan wore different hats as a Technology Consultant within Deloitte Digital, helping different clients build and scale their front-end applications. Hassan is also the lead author of Fullstack Vue, an in-depth book into building real world Vue.js applications.



{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}