Your Choice JavaScript News

Vue-router configuration, Page component, Serverside rendering & more… Vue News Monday, February 26

Vue News TLDR / Table of Contents

  • Custom routes with Nuxt.js – Francesco Greppi –
    • Nuxt.js is a framework for Vue.js developers which minimises the work required to setup a Vue application and provides at the same time the freedom to extend or customise its core functionalities. In…
    • vue-router configuration, page component, single page component, routes, automatic routes generation
  • dotboris/vuejs-serverside-template-xss
    • vuejs-serverside-template-xss – Demo of a Vue.js app that mixes both clientside templates and serverside templates leading to an XSS vulnerability
    • serverside rendering, Vue.js, template data, clientside rendering, user input
  • Authentication Best Practices for Vue
    • Learn how to easily implement authentication in your Vue.js application. You will learn how to isolate auth logic from the app and other libraries, handle unauthenticated API calls, have auto authentication, have restricted routes access and more. Implement authentication in your Vue.js app today.
    • token DELETE request, user token session, CSRF, authorization Axios header, client-side token-based authentication
  • Introduction to Vue.js
    • Get started quickly with the Vue.js JavaScript framework! Learn how to build custom, reusable components and animate them. Use props, slots, and scoped styles to create flexible components. Plus learn …
    • Sarah, Sarah reviews methods, single page application, Sarah Drasner, Vue.js
  • gocanto/vuemit
    • vuemit – The smallest Vue.js events handler.
    • package.json version Feb, refactor, README.md typo Sep, Initial commit Jan, install vue vuemit
  • Secondly Ill present a case, or rather localised paths, where it is required to switch off automatic routes generation and to manually create the vue-router configuration through a Nuxt module.
  • During the build Nuxt will check what is inside the pages directory and for each file found a route will be added to the vue-router configuration.
  • vue it is required to I like to keep Nuxt handling the routes for me, then I could create different files within the pages directory, each one with its localised name, and import in any of them a component responsible for the template and the i18n part.
  • Since Nuxt generates the vue-router configuration by looking at the files names in the page directory, there is no way to communicate the intention of having aliases.
  • This will disable the parsing of the pages components for the creation of routes and will indicate the router.js file in the main directory as the one responsible for the vue-router configuration.

Tags: vue-router configuration, page component, single page component, routes, automatic routes generation

  • This repository demonstrates how web apps that use both serverside rendering and Vue.js can be vulnerable to XSS even if they take precautions.
  • One way of using Vue.js is to write a template in the HTML of your page and then tell Vue.js to render it through javascript.
  • When the page makes it into the browser, Vue.js takes part of this HTML and renders it like a template.
  • When it’s able to tell the difference between user input and template code, Vue.js does an amazing job at preventing XSS.
  • I think that it’s pretty reasonable for a developer to add Vue.js to their existing serverside rendering app and think that everything is going to be fine.

Tags: serverside rendering, Vue.js, template data, clientside rendering, user input

  • Lets now look at this auth module: – – We will have the token field (using local storage stored token if present) and a status field, representing the status of the API call ( , or ).
  • By having this getter, youseparate data from app logic making it futur proof – – A fairly simple API call from a module.
  • You can also add a token DELETE request in your action to delete your user token session when logging out.
  • Now after login, all the Axios calls have the authorization header set to your token.
  • Note 1: If you do not wish to use Vuex, you can still check for token presence in the local storage rather than looking at the store getters – – Note 2: Ed @posva, maintainer of vue-router also advises the usage of meta attributes, check it out – – …but…

Tags: token DELETE request, user token session, CSRF, authorization Axios header, client-side token-based authentication

  • Get started quickly with the Vue.js JavaScript framework!
  • Learn how to build custom, reusable components and animate them.
  • Get a single page application up and running fast with the Vue-CLI and learn how to work with Vuex to manage the state of larger-scale applications.
  • This course is for developers with an intermediate knowledge of JavaScript who want to learn how to build and maintain complex applications quickly and efficiently.
  • This course and others like it are available as part of our Frontend Masters video subscription.

Tags: Sarah, Sarah reviews methods, single page application, Sarah Drasner, Vue.js

  • Vuemit is a tiny library to work with events on Vue.js.
  • Require the library within your entry point or your bootstrap file.
  • Now you will have a global Vuemit variable which you can use anywhere in your app.
  • Please see License File for more information.
  • Don’t forget to follow me on twitter!

Tags: package.json version Feb, refactor, README.md typo Sep, Initial commit Jan, install vue vuemit

Top Vue Courses

Vue JS 2: From Beginner to Professional (includes Vuex) (1,798 students enrolled)

By Bo Andersen
  • How to build advanced Vue.js applications
  • How to build single page applications (SPA)
  • Understand the theory and how Vue works under the hood
  • How to manage state in large applications with Vuex
  • Communicating with servers with HTTP
  • Use modern tools for developing and building applications (e.g. webpack)

Learn more.


Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) (38,295 students enrolled)

By Maximilian Schwarzmüller
  • Build amazing Vue.js Applications - all the Way from Small and Simple Ones up to Large Enterprise-level Ones
  • Understand the Theory behind Vue.js and use it in Real Projects
  • Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)

Learn more.


The Ultimate Vue JS 2 Developers Course (3,882 students enrolled)

By Anthony Gore
  • Understand all Vue concepts from beginner to advanced
  • Build three real world applications using Vue.js utilising every Vue feature
  • Use the Vuex statement management library
  • Write basic Vue with ES5 and also modern Vue with ES6
  • Setup VueJS environment with development tools including Webpack
  • Create a universal application with server-side rendering
  • Use popular plugins from the Vue ecosystem like vue-router and vue-resource
  • Cutting-edge features like Single File Components, Render functions and Server-Side Rendering

Learn more.


Vue JS 2.0 - Mastering Web Apps (52,495 students enrolled)

By David Katz
  • Build entire Vue JS, VueRouter, and Vuex applications from scratch.
  • Develop apps that deal with APIs and web requests.
  • Create web apps with a full authentication service, and real-time database.

Learn more.


Learn by Doing: Vue JS 2.0 the Right Way (1,437 students enrolled)

By Dejan Stošić
  • Build your own VueJS application of any size
  • Plan and structure your project
  • Write maintainable code
  • Use smart development tools like vue-cli

Learn more.