How to do it…

We will write a simple web portfolio composed of two pages: a home page and an about me page.

For this recipe, we will need to add Axios as a dependency.

The basic layout is clear from the following HTML 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>

In the JavaScript, you can start building your AboutMe component:

const AboutMe = {  template: `<div>Name:{{name}}<br>Phone:{{phone}}</div>`}

It will display only a name and a telephone number. Let's declare the two variables in the data option of the component, as follows:

data () {  return {    name: undefined, phone: undefined ...

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.