Add Vue template

templates/VueSpa/ClientApp/components/fetchdata/fetchdata.ts

@@ -0,0 +1,22 @@
+import Vue from 'vue';
+import { Component, Lifecycle } from 'av-ts';
+
+interface WeatherForecast {
+    dateFormatted: string;
+    temperatureC: number;
+    temperatureF: number;
+    summary: string;
+}
+
+@Component
+export default class FetchDataComponent extends Vue {
+    forecasts: WeatherForecast[] = [];
+
+    @Lifecycle mounted() {
+        fetch('/api/SampleData/WeatherForecasts')
+            .then(response => response.json() as Promise<WeatherForecast[]>)
+            .then(data => {
+                this.forecasts = data;
+            });
+    }
+}

templates/VueSpa/ClientApp/components/fetchdata/fetchdata.vue.html

@@ -0,0 +1,30 @@
+<template>
+    <div>
+        <h1>Weather forecast</h1>
+
+        <p>This component demonstrates fetching data from the server.</p>
+
+        <table v-if="forecasts.length" class="table">
+            <thead>
+                <tr>
+                    <th>Date</th>
+                    <th>Temp. (C)</th>
+                    <th>Temp. (F)</th>
+                    <th>Summary</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="item in forecasts">
+                    <td>{{ item.dateFormatted }}</td>
+                    <td>{{ item.temperatureC }}</td>
+                    <td>{{ item.temperatureF }}</td>
+                    <td>{{ item.summary }}</td>
+                </tr>
+            </tbody>
+        </table>
+
+        <p v-else><em>Loading...</em></p>
+    </div>
+</template>
+
+<script src="./fetchdata.ts"></script>