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