template after script

frontend/src/App.vue

@@ -1,21 +1,9 @@
-<template>
-	<div v-for="route in routes" class="button">
-		<a :href="'#' + (routes[route] || '/')"> {{ route }}</a>
-	</div>
-	<div>
-		<label>Files
-			<input id="fileUpload" type="file" @change="handleFilesUpload($event as InputFileEvent)" />
-		</label>
-		<button :class="sent ? 'green' : 'normal'" @click="submitImage()">{{ sent ? 'Sent' : 'Submit' }}</button>
-	</div>
-	<component :is="currentView" :key="sent" :images="images" @delete="deleteFile" />
-</template>
 <script setup lang="ts">
 import Home from './components/Home.vue'
 import Gallery from './components/Gallery.vue';
 import NotFound from './components/NotFound.vue'
 import { defineComponent } from 'vue'
-import { api } from './http-api'
+import { api } from '@/http-api'
 import { ImageType, ImageClass } from './image';
 </script>
 <script lang="ts">
@@ -85,6 +73,18 @@ export default defineComponent({
 	}
 })
 </script>
+<template>
+	<div v-for="route in routes" class="button">
+		<a :href="'#' + (routes[route] || '/')"> {{ route }}</a>
+	</div>
+	<div>
+		<label>Files
+			<input id="fileUpload" type="file" @change="handleFilesUpload($event as InputFileEvent)" />
+		</label>
+		<button :class="sent ? 'green' : 'normal'" @click="submitImage()">{{ sent ? 'Sent' : 'Submit' }}</button>
+	</div>
+	<component :is="currentView" :key="sent" :images="images" @delete="deleteFile" />
+</template>
 <style scoped>
 .button {
 	display: inline-block;

frontend/src/components/Gallery.vue

@@ -1,9 +1,3 @@
-<template>
-	<div class="flex" v-if="images.keys != null">
-		<Image v-for="[id, image] in images" :key="id" :id="id" />
-	</div>
-	<h1 v-else>No image found</h1>
-</template>
 <script setup lang="ts">
 import { defineComponent } from 'vue'
 import { ImageType } from '@/image'
@@ -21,6 +15,12 @@ export default defineComponent({
 })
 </script>
 
+<template>
+	<div class="flex" v-if="images.keys != null">
+		<Image v-for="[id, image] in images" :key="id" :id="id" />
+	</div>
+	<h1 v-else>No image found</h1>
+</template>
 <style scoped>
 .flex {
 	display: flex;

frontend/src/components/Home.vue

@@ -1,15 +1,3 @@
-<template>
-	<div class="flex" v-if="images.keys != null">
-		<div>
-			<select v-model="imageSelectedId" style="width: min-content;margin: 15px;">
-				<option v-for="[id, image] in images" :key="id" :value="id">{{ image.name }}</option>
-			</select>
-			<button @click="$emit('delete', imageSelectedId)">Delete</button>
-		</div>
-		<Image :id="imageSelectedId"></Image>
-	</div>
-	<h1 v-else>No images found</h1>
-</template>
 <script setup lang="ts">
 import Image from '@/components/Image.vue'
 import { defineComponent } from 'vue'
@@ -48,6 +36,18 @@ export default defineComponent({
 	}
 })
 </script>
+<template>
+	<div class="flex" v-if="images.keys != null">
+		<div>
+			<select v-model="imageSelectedId" style="width: min-content;margin: 15px;">
+				<option v-for="[id, image] in images" :key="id" :value="id">{{ image.name }}</option>
+			</select>
+			<button @click="$emit('delete', imageSelectedId)">Delete</button>
+		</div>
+		<Image :id="imageSelectedId"></Image>
+	</div>
+	<h1 v-else>No images found</h1>
+</template>
 <style scoped>
 .flex {
 	display: flex;