add WeatherForecast.vue in views folder:
<template> <div> <table className='table table-striped' aria-labelledby="tabelLabel"> <thead> <tr> <th>Date</th> <th>Temp. (C)</th> <th>Temp. (F)</th> <th>Summary</th> </tr> </thead> <tbody> <tr v-for="(forecast,index) in forecasts" :key="forecast.date"> <td>{{forecast.date}}</td> <td>{{forecast.temperatureC}}</td> <td>{{forecast.temperatureF}}</td> <td>{{forecast.summary}}</td> </tr> </tbody> </table> </div> </template> <script> export default { name: 'WeatherForecast', data() { return { forecasts:[] }; }, created() { this.axios.get("/weatherforecast").then(res => { // console.log(res.data); this.forecasts = res.data; }); } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> body{ text-align:center; } .weather { margin: 0 auto; } </style>Add a new router:
export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ ... { path: '/weather', name: 'weather', component: () => import('./views/WeatherForecast.vue') } ] })Run to view the last result: