Routing with vue.js

the cli, the single file components and the vue-router

04.2018

dragosh, I build stuff

https://unsplash.com/photos/N2HtDFA-AgM

The Command Line Interface

vue init [template name] [project]

npm i -g vue-cli

simple

  • no build process
  • no project.json
  • no dependencies

lite-server/live-server will just start the index.html

vue init simple simple-prj

whats included:

webpack simple

vue init webpack-simple wp-simple-prj

whats included:

  • npm run dev: Webpack + vue-loader with proper config for source maps & hot-reload.
  • npm run build: build with HTML/CSS/JS minification.

webpack (prd ready)

vue init webpack wp-simple-prj

whats included:

  • npm run dev: first-in-class development experience.
  • npm run build: Production ready build.
  • npm run unit: Unit tests.
  • npm run e2e: End-to-end tests with Nightwatch.

pwa

vue init pwa pwa-prj

whats included:

  • Service Worker precaching of application shell + static assets 
  • Script (async chunk) preloading using <link rel="preload">
  • Web Application Manifest + favicons
  • Mobile-friendly meta-viewport
  • Lighthouse score of 90+/100

The single file components

vue's way of doing web components

 Vue Loader to the resque

vue-loader is a loader for webpack that can transform Vue components written in a specific format into a plain JavaScript module.

  • ES2015 enabled by default;
  • Allows using other webpack loaders for each part of a Vue component, for example Sass for <style> and Jade for <template>;
  • Allows custom sections in a .vue file that can have custom loader chains applied to them
  • Treat static assets referenced in <style> and <template> as module dependencies and handle them with webpack loaders;
  • Can simulate scoped CSS for each component (PostCSS);
  • Supports component hot-reloading during development.

File structure

supported langs

We can also use preprocessors such as Pug, Babel (with ES2015 modules), and Stylus for cleaner and more feature-rich components.

You could as easily use Bublé, TypeScript, SCSS, PostCSS - or whatever other preprocessors that help you be productive. If using Webpack with vue-loader, it also has first-class support for CSS Modules.

The vue-router

vue's way of doing SPA navigation

Getting started

Dynamic routes

Programatic navigation

Named routes

Named views

props & route components

Navigation guards

Navigation guards provided by vue-router are primarily used to guard navigations either by redirecting it or canceling it. There are a number of ways to hook into the route navigation process: globally, per-route, or in-component.

Params or query changes won't trigger enter/leave navigation guards. You can either watch the $route object to react to those changes, or use the beforeRouteUpdate in-component guard.

Global Guards

  • to: Route: the target Route Object being navigated to.

  • from: Route: the current route being navigated away from.

  • next: Function: this function must be called to resolve the hook. 

next(), next(false),next('/'), next({ path: '/' }), next(error)(transfer to router.onError())

Per-Route Guard

In-Component Guards

Data fetching

Fetching After Navigation: perform the navigation first, and fetch data in the incoming component's lifecycle hook. 

Fetching Before Navigation: Fetch data before navigation in the route enter guard, and perform the navigation after data has been fetched.

Fetching After Navigation

Fetching Before Navigation

Lazy loading routes

let's see some code!

vue.js

spring rest api

postgresql (docker)

Thank you for your time & attention!

@imhotepp

04.2018

Dragos Stefanescu

Made with Slides.com