How to do it...

You will build a clone of the popular Xkcd website. Actually, it will be a wrapper more than a real clone, since we will reuse the panels from the website.

Create a Vue project based on the Webpack template with vue init webpack. The first thing we will do is wire up the API to the Xkcd website in the index.js inside the config folder. Put the following lines inside the proxyTable object:

module.exports = {  ...  dev: {    proxyTable: {      '/comic': {        target: 'https://xkcd.com',        changeOrigin: true,        pathRewrite: (path, req) => {          const num = path.split('/')[2]          return `/${num}/info.0.json`        }      }    },  ...

This will redirect all the requests we make to /comic to the Xkcd website.

Inside src, make a new store directory and an index.js inside ...

Get Vue.js 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.