Book Image

Vue.js: Understanding its Tools and Ecosystem

By : Dave Berning
Book Image

Vue.js: Understanding its Tools and Ecosystem

By: Dave Berning

Overview of this book

Vue.js is one of the top three “go-to” JavaScript frameworks and is used by organizations such as Nintendo, NASA, and Expedia. This book is primarily focused on the ecosystem of Vue.js and its development tools. Understanding the basics of the technology behind the Vue.js ecosystem will improve your skills and make you a better problem solver. The book begins with a brief overview of Vue.js. You’ll learn to work your way through the Vue command line interface CLI 3, and use the Vue Router library to navigate between the different views of your application. As you advance through the topics, you’ll explore the use of DevTools to improve the quality of your applications and how to implement server-side rendering in your application through the Nuxt.js framework. Toward the end of the book, you’ll read about the future of Vue.js and its growing popularity. After reading this book, you’ll be able to create industry-grade applications using Vue.js and its tools.
Table of Contents (11 chapters)

Adding Middleware

Middleware is a bit interesting. If you do not know what Middleware is, it’s scripts that you want to run before your layouts or pages get rendered. For example, this is useful if you want to run a script to authenticate a user before the page is rendered. Or maybe you need to fetch critical data before the Nuxt.js even renders the rest of the pages.

Nuxt has a middleware directory that all of your JavaScript files must live in if you want them executed before layouts or pages are rendered. Let’s say you need to fetch some data for whatever reason. Let’s say that data is the weather and you want it committed to the Vuex store. Create a new file and name it, weather.js. Let’s fetch the wind conditions of Chicago, IL.

middleware/weather.js

import axios from 'axios';

export default ({ store }) {
  const endpoint = 'https://query.yahooapis.com/v1/public/yql?q=select%20wind%20from%20weather.forecast%20where%20woeid%20in%20(select...