refactor(all): use proper TypeScript component syntax

components/LoginForm.vue

@@ -28,14 +28,16 @@
         >submit</v-btn
       >
     </v-form>
-    <v-snackbar color="red" bottom left v-model="errorMessageSnackbar">
+    <v-snackbar v-model="errorMessageSnackbar" color="red" bottom left>
       {{ errorMessage }}
     </v-snackbar>
   </div>
 </template>
 
 <script lang="ts">
-export default {
+import Vue from 'vue';
+
+export default Vue.extend({
   data() {
     return {
       serverUrl: '',
@@ -71,7 +73,6 @@ export default {
         );
         this.$auth.setUser(response.data.User);
       } catch (error) {
-        console.error('Failed to login:', error);
         if (!error.response) {
           this.errorMessage = 'Server Not Found';
         } else if (error.response.status === 500) {
@@ -85,7 +86,7 @@ export default {
       }
     }
   }
-};
+});
 </script>
 
 <style scoped>

components/UserButton.vue

@@ -19,7 +19,9 @@
 </template>
 
 <script lang="ts">
-export default {
+import Vue from 'vue';
+
+export default Vue.extend({
   data() {
     return {
       menuItems: [
@@ -43,5 +45,5 @@ export default {
       }
     }
   }
-};
+});
 </script>

layouts/default.vue

@@ -76,6 +76,7 @@
 </template>
 
 <script lang="ts">
+import Vue from 'vue';
 import { BaseItemDto } from '../api/api';
 import UserButton from '../components/UserButton.vue';
 import { getLibraryIcon } from '../utils/items';
@@ -86,7 +87,7 @@ interface NavigationDrawerItem {
   to: string;
 }
 
-export default {
+export default Vue.extend({
   components: {
     UserButton
   },
@@ -118,17 +119,21 @@ export default {
       userId: this.$auth.user.Id
     });
 
-    const userViews = userViewsRequest.data.Items.map(
-      (view: BaseItemDto): NavigationDrawerItem => {
-        return {
-          icon: getLibraryIcon(view.CollectionType),
-          title: view.Name,
-          to: `/library/${view.Id}`
-        };
-      }
-    );
+    let userViews: Array<NavigationDrawerItem> = [];
+
+    if (userViewsRequest.data.Items) {
+      userViews = userViewsRequest.data.Items.map(
+        (view: BaseItemDto): NavigationDrawerItem => {
+          return {
+            icon: getLibraryIcon(view.CollectionType),
+            title: view.Name,
+            to: `/library/${view.Id}`
+          };
+        }
+      );
+    }
 
     this.libraries = userViews;
   }
-};
+});
 </script>

pages/login.vue

@@ -10,12 +10,13 @@
 </template>
 
 <script lang="ts">
+import Vue from 'vue';
 import LoginForm from '../components/LoginForm.vue';
 
-export default {
+export default Vue.extend({
   layout: 'fullpage',
   components: {
-    'login-form': LoginForm
+    LoginForm
   }
-};
+});
 </script>