Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Single Page Applications Chapter 15

How to do it...

As said, we will edit the resulting code from the Fetching data before switching route recipe to

manage errors. Just so you remember, when going to the /aboutme page, we were loading

information from the Internet. We want to avoid going to that page in case the information

is not available.

For this recipe, add Axios as a dependency, as done in the previous recipes.

First, enrich the HTML layout with the highlighted code:

<div id="app">

<h1>My Portfolio</h1>

<ul>

<li><router-link to="/" exact>Home</router-link></li>

<li><router-link to="/aboutme">About Me</router-link></li>

</ul>

<router-view></router-view>

<div class="toast" v-show="showError">

There was an error

</div>

</div>

This is a toast message that will appear on the screen whenever there is an error. Add some
style to it with this CSS rule:

div.toast {

width: 15em;

height: 1em;

position: fixed;

bottom: 1em;

background-color: red;

color: white;

padding: 1em;

text-align: center;

}

The next thing you want to do is have a global mechanism to set showError to true. At

the top of the JavaScript code, declare the vm variable:

let vm