Vue.js 2 Design Patterns and Best Practices

Creating a detail page

In order to create a detail page, we can create UserDetail.vue and follow steps similar to the previous component:

<template>  <div class="container">    <div class="user">      <div class="user__name">        <h1>{{userInfo.name}}</h1>        <p>Person ID {{$route.params.userId}}</p>        <p>Username: {{userInfo.username}}</p>        <p>Email: {{userInfo.email}}</p>      </div>      <div class="user__address" v-if="userInfo && userInfo.address">        <h1>Address</h1>        <p>Street: {{userInfo.address.street}}</p>        <p>Suite: {{userInfo.address.suite}}</p>        <p>City: {{userInfo.address.city}}</p>        <p>Zipcode: {{userInfo.address.zipcode}}</p>        <p>Lat: {{userInfo.address.geo.lat}} Lng:         {{userInfo.address.geo.lng}} </p>      </div>      <div class="user__other" >        <h1>Other</h1> <p>Phone: ...