[Vue] Optimize components for about page

aleksis/core/assets/components/about/About.vue

 <template>
   <div class="mt-4 mb-4">
-    <v-row class="mb-3">
-      <v-col cols="12">
-        <v-card class="d-flex flex-column">
-          <v-card-title>{{ $t("about.about_aleksis") }}</v-card-title>
-          <v-card-text>
-            <p class="text-body-1">
-              {{ $t("about.about_aleksis_1") }}
-            </p>
-            <p class="text-body-1">
-              {{ $t("about.about_aleksis_2") }}
-            </p>
-          </v-card-text>
-          <v-spacer></v-spacer>
-          <v-card-actions>
-            <v-btn text color="primary" href="https://aleksis.org/">{{ $t("about.website_of_aleksis") }}</v-btn>
-            <v-btn text color="primary" href="https://edugit.org/AlekSIS/">{{ $t("about.source_code") }}</v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-col>
-      <v-col cols="12">
-        <v-card class="d-flex flex-column">
-          <v-card-title>{{ $t("about.licence_information") }}</v-card-title>
-          <v-card-text>
-            <p>
-              {{ $t("about.licence_information_1") }}
-            </p>
-            <p>
-              <v-chip color="green" text-color="white" small>{{ $t("about.free_open_source_licence") }}</v-chip>
-              <v-chip color="orange" text-color="white" small>{{ $t("about.other_licence") }}</v-chip>
-            </p>
-          </v-card-text>
-          <v-spacer></v-spacer>
-          <v-card-actions>
-            <v-btn text color="primary" href="https://eupl.eu">{{ $t("about.full_licence_text") }}</v-btn>
-            <v-btn text color="primary"
-                   href="https://joinup.ec.europa.eu/collection/eupl/guidelines-users-and-developers">
-              {{ $t("about.more_information_eupl") }}
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-col>
-    </v-row>
+    <about-aleksis></about-aleksis>
     <installed-apps-list/>
   </div>
 </template>
 
 <script>
 import InstalledAppsList from "./InstalledAppsList.vue";
+import AboutAleksis from "./AboutAleksis.vue";
 
 export default {
   name: "About",
-  components: {InstalledAppsList}
+  components: {AboutAleksis, InstalledAppsList}
 }
 </script>
 

aleksis/core/assets/components/about/AboutAleksis.vue

+<template>
+  <v-row class="mb-3">
+    <v-col cols="12">
+      <v-card class="d-flex flex-column">
+        <v-card-title>{{ $t("about.about_aleksis") }}</v-card-title>
+        <v-card-text>
+          <p class="text-body-1">
+            {{ $t("about.about_aleksis_1") }}
+          </p>
+          <p class="text-body-1">
+            {{ $t("about.about_aleksis_2") }}
+          </p>
+        </v-card-text>
+        <v-spacer></v-spacer>
+        <v-card-actions>
+          <v-btn text color="primary" href="https://aleksis.org/">{{ $t("about.website_of_aleksis") }}</v-btn>
+          <v-btn text color="primary" href="https://edugit.org/AlekSIS/">{{ $t("about.source_code") }}</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-col>
+    <v-col cols="12">
+      <v-card class="d-flex flex-column">
+        <v-card-title>{{ $t("about.licence_information") }}</v-card-title>
+        <v-card-text>
+          <p>
+            {{ $t("about.licence_information_1") }}
+          </p>
+          <p>
+            <v-chip color="green" text-color="white" small>{{ $t("about.free_open_source_licence") }}</v-chip>
+            <v-chip color="orange" text-color="white" small>{{ $t("about.other_licence") }}</v-chip>
+          </p>
+        </v-card-text>
+        <v-spacer></v-spacer>
+        <v-card-actions>
+          <v-btn text color="primary" href="https://eupl.eu">{{ $t("about.full_licence_text") }}</v-btn>
+          <v-btn text color="primary"
+                 href="https://joinup.ec.europa.eu/collection/eupl/guidelines-users-and-developers">
+            {{ $t("about.more_information_eupl") }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+export default {
+  name: "AboutAleksis"
+}
+</script>
+
+<style scoped>
+
+</style>

aleksis/core/assets/components/about/InstalledAppCard.vue

@@ -60,6 +60,7 @@
             color="primary"
             text
             :href="url.url"
+            :key="url.url"
         >
           {{ url.name }}
         </v-btn>

aleksis/core/assets/components/about/InstalledAppsList.vue

@@ -4,7 +4,7 @@
   >
     <template v-slot="{ result: { error, data }, isLoading }">
       <v-row>
-        <v-col v-if="isLoading" v-for="idx in 3" cols="12" md="6" lg="6" xl="4" class="d-flex align-stretch">
+        <v-col v-if="isLoading" v-for="idx in 3" :key="idx" cols="12" md="6" lg="6" xl="4" class="d-flex align-stretch">
           <v-card class="d-flex flex-column flex-grow-1 pa-4">
             <v-skeleton-loader
                 type="heading, actions, text@5"
@@ -12,7 +12,7 @@
           </v-card>
         </v-col>
 
-        <InstalledAppCard
+        <installed-app-card
             v-for="app in data.installedApps"
             :key="app.name"
             :app="app"