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...