diff --git a/client/src/components/AddContentButton.vue b/client/src/components/AddContentButton.vue
index 529c2578..a948808c 100644
--- a/client/src/components/AddContentButton.vue
+++ b/client/src/components/AddContentButton.vue
@@ -1,98 +1,105 @@
 <template>
   <div class="add-content">
-    <a class="add-content__button" @click="addContent">
+    <a
+      class="add-content__button"
+      @click="addContent"
+    >
       <add-pointer class="add-content__icon" />
     </a>
   </div>
 </template>
 
 <script>
-import { CREATE_CONTENT_BLOCK_AFTER_PAGE, CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE } from '@/router/module.names';
+  import {
+    CREATE_CONTENT_BLOCK_AFTER_PAGE,
+    CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
+  } from '@/router/module.names';
+  import {defineAsyncComponent} from 'vue';
 
-const AddPointer = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddPointer');
+  const AddPointer = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/AddPointer'));
 
-export default {
-  props: {
-    where: {
-      type: Object,
-      validator(prop) {
-        return (
-          Object.prototype.hasOwnProperty.call(prop, 'after') || Object.prototype.hasOwnProperty.call(prop, 'parent')
-        );
+  export default {
+    props: {
+      where: {
+        type: Object,
+        validator(prop) {
+          return Object.prototype.hasOwnProperty.call(prop, 'after' )
+            || Object.prototype.hasOwnProperty.call(prop, 'parent');
+        }
       },
     },
-  },
 
-  components: {
-    AddPointer,
-  },
+    components: {
+      AddPointer
+    },
 
-  computed: {
-    parent() {
-      return this.where.parent;
-    },
-    after() {
-      return this.where.after;
-    },
-    isObjectiveGroup() {
-      return this.parent && this.parent.__typename === 'ObjectiveGroupNode';
-    },
-    slug() {
-      return this.$route.params.slug;
-    },
-  },
-
-  methods: {
-    addContent() {
-      if (this.isObjectiveGroup) {
-        this.$modal.open('new-objective-wizard', { parent: this.parent.id });
-      } else {
-        let route;
-        if (this.after && this.after.id) {
-          route = {
-            name: CREATE_CONTENT_BLOCK_AFTER_PAGE,
-            params: {
-              after: this.after.id,
-              slug: this.slug,
-            },
-          };
-        } else {
-          route = {
-            name: CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
-            params: {
-              parent: this.parent.id,
-            },
-          };
-        }
-        this.$router.push(route);
+    computed: {
+      parent() {
+        return this.where.parent;
+      },
+      after() {
+        return this.where.after;
+      },
+      isObjectiveGroup() {
+        return this.parent && this.parent.__typename === 'ObjectiveGroupNode';
+      },
+      slug() {
+        return this.$route.params.slug;
       }
     },
-  },
-};
+
+
+    methods: {
+      addContent() {
+        if (this.isObjectiveGroup) {
+          this.$modal.open('new-objective-wizard', {parent: this.parent.id});
+        } else {
+          let route;
+          if (this.after && this.after.id) {
+             route = {
+              name: CREATE_CONTENT_BLOCK_AFTER_PAGE,
+              params: {
+                after: this.after.id,
+                slug: this.slug
+              }
+            };
+          } else {
+            route = {
+              name: CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
+              params: {
+                parent: this.parent.id
+              }
+            };
+          }
+          this.$router.push(route);
+        }
+      }
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.add-content {
-  display: none;
-  position: relative;
-  @include desktop {
-    display: flex;
+  .add-content {
+    display: none;
+    position: relative;
+    @include desktop {
+      display: flex;
+    }
+    z-index: 1;
+
+    justify-content: flex-end;
+
+    &__button {
+      margin-right: -85px;
+      cursor: pointer;
+      display: inline-grid;
+    }
+
+    &__icon {
+      width: 40px;
+      fill: $color-silver-dark;
+    }
   }
-  z-index: 1;
-
-  justify-content: flex-end;
-
-  &__button {
-    margin-right: -85px;
-    cursor: pointer;
-    display: inline-grid;
-  }
-
-  &__icon {
-    width: 40px;
-    fill: $color-silver-dark;
-  }
-}
 </style>
diff --git a/client/src/components/AddContentElement.vue b/client/src/components/AddContentElement.vue
index 5afa10e8..bd917b94 100644
--- a/client/src/components/AddContentElement.vue
+++ b/client/src/components/AddContentElement.vue
@@ -1,38 +1,42 @@
 <template>
-  <div class="add-content-element" @click="$emit('add-element', index)">
+  <div
+    class="add-content-element"
+    @click="$emit('add-element', index)"
+  >
     <add-icon class="add-content-element__icon" />
   </div>
 </template>
 
 <script>
-const AddIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddIcon');
+  import {defineAsyncComponent} from 'vue';
+  const AddIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/AddIcon'));
 
-export default {
-  props: ['index'],
+  export default {
+    props: ['index'],
 
-  components: {
-    AddIcon,
-  },
-};
+    components: {
+      AddIcon
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
+  @import "@/styles/_variables.scss";
 
-.add-content-element {
-  display: flex;
-  justify-content: center;
-  border-bottom: 2px solid $color-silver-dark;
-  margin-bottom: 21px + 25px;
-  cursor: pointer;
+  .add-content-element {
+    display: flex;
+    justify-content: center;
+    border-bottom: 2px solid $color-silver-dark;
+    margin-bottom: 21px + 25px;
+    cursor: pointer;
 
-  &__icon {
-    width: 40px;
-    height: 40px;
-    fill: $color-silver-dark;
-    margin-bottom: -21px;
-    background-color: $color-white;
-    border-radius: 50px;
+    &__icon {
+      width: 40px;
+      height: 40px;
+      fill: $color-silver-dark;
+      margin-bottom: -21px;
+      background-color: $color-white;
+      border-radius: 50px;
+    }
   }
-}
 </style>
diff --git a/client/src/components/AddWidget.vue b/client/src/components/AddWidget.vue
index 2856a11e..4ee2a0e7 100644
--- a/client/src/components/AddWidget.vue
+++ b/client/src/components/AddWidget.vue
@@ -11,71 +11,69 @@
 </template>
 
 <script>
-const AddIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddIcon.vue');
+  import {defineAsyncComponent} from 'vue';
+  const AddIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/AddIcon.vue'));
 
-export default {
-  props: {
-    route: {
-      type: String,
-      default: null,
+  export default {
+    props: {
+      route: {
+        type: String,
+        default: null
+      },
+      reverse: { // use reverse colors
+        type: Boolean,
+        default: false
+      },
+      click: {
+        type: Function,
+        default: null
+      }
     },
-    reverse: {
-      // use reverse colors
-      type: Boolean,
-      default: false,
-    },
-    click: {
-      type: Function,
-      default: null,
-    },
-  },
 
-  components: {
-    AddIcon,
-  },
+    components: {
+      AddIcon
+    },
 
-  computed: {
-    component() {
-      // only use the router link if the route prop is provided, otherwise render a normal anchor tag
-      return this.route ? 'router-link' : 'a';
+    computed: {
+      component() {
+        // only use the router link if the route prop is provided, otherwise render a normal anchor tag
+        return this.route ? 'router-link' : 'a';
+      },
+      properties() {
+        return this.route ? {
+          to: this.route,
+          tag: 'div'
+        } : {};
+      }
     },
-    properties() {
-      return this.route
-        ? {
-            to: this.route,
-            tag: 'div',
-          }
-        : {};
-    },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.add-widget {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  @include widget-shadow;
-  cursor: pointer;
+  .add-widget {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    @include widget-shadow;
+    cursor: pointer;
 
-  @include desktop {
-    display: flex;
+    @include desktop {
+      display: flex;
+    }
+
+    &__add {
+      width: 80px;
+      fill: $color-silver-dark;
+    }
+
+    &--reverse {
+      @include widget-shadow-reverse;
+    }
+
+    &--reverse &__add {
+      fill: white;
+    }
   }
-
-  &__add {
-    width: 80px;
-    fill: $color-silver-dark;
-  }
-
-  &--reverse {
-    @include widget-shadow-reverse;
-  }
-
-  &--reverse &__add {
-    fill: white;
-  }
-}
 </style>
diff --git a/client/src/components/BackLink.vue b/client/src/components/BackLink.vue
index 89613070..70fe125f 100644
--- a/client/src/components/BackLink.vue
+++ b/client/src/components/BackLink.vue
@@ -12,8 +12,9 @@
   import { MODULE_PAGE } from '@/router/module.names';
   import { ROOMS_PAGE } from '@/router/room.names';
   import { PROJECTS_PAGE } from '@/router/portfolio.names';
+  import {defineAsyncComponent} from 'vue';
 
-  const ChevronLeft = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronLeft');
+  const ChevronLeft = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronLeft'));
 
   export default {
     props: {
diff --git a/client/src/components/ColorChooser.vue b/client/src/components/ColorChooser.vue
index 498a212e..b5d65abf 100644
--- a/client/src/components/ColorChooser.vue
+++ b/client/src/components/ColorChooser.vue
@@ -1,86 +1,93 @@
 <template>
   <div class="color-chooser">
     <div
-      :class="{ 'color-chooser__color-wrapper--selected': selectedColor === color.name }"
+      :class="{'color-chooser__color-wrapper--selected': selectedColor === color.name}"
       class="color-chooser__color-wrapper"
       data-cy="color-select"
       v-for="(color, index) in colors"
       :key="index"
       @click="$emit('input', color.name)"
     >
-      <div :class="'color-chooser__color--' + color.name" class="color-chooser__color">
-        <tick class="color-chooser__selected-icon" v-if="selectedColor === color.name" />
+      <div
+        :class="'color-chooser__color--' + color.name"
+        class="color-chooser__color"
+      >
+        <tick
+          class="color-chooser__selected-icon"
+          v-if="selectedColor === color.name"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-const Tick = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Tick');
+  import {defineAsyncComponent} from 'vue';
+  const Tick = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Tick'));
 
-export default {
-  props: ['selectedColor'],
+  export default {
+    props: ['selectedColor'],
 
-  components: {
-    Tick,
-  },
+    components: {
+      Tick
+    },
 
-  data() {
-    return {
-      colors: [
-        {
-          name: 'yellow',
-        },
-        {
-          name: 'blue',
-        },
-        {
-          name: 'red',
-        },
-        {
-          name: 'green',
-        },
-      ],
-    };
-  },
-};
+    data() {
+      return {
+        colors: [
+          {
+            name: 'yellow'
+          },
+          {
+            name: 'blue'
+          },
+          {
+            name: 'red'
+          },
+          {
+            name: 'green'
+          }
+        ]
+      };
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
-@import '@/styles/_mixins.scss';
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
-.color-chooser {
-  display: flex;
-
-  &__color-wrapper {
-    margin-right: 10px;
-    border-radius: 50px;
-    padding: 10px;
-
-    &--selected {
-      border: 1px solid $color-charcoal-dark;
-    }
-  }
-
-  &__selected-icon {
-    width: 17px;
-    fill: $color-charcoal-dark;
-  }
-
-  &__color {
-    width: 46px;
-    height: 46px;
-    border-radius: 23px;
+  .color-chooser {
     display: flex;
-    justify-content: center;
-    @supports (display: grid) {
-      display: grid;
-    }
-    justify-items: center;
-    align-items: center;
 
-    @include skillbox-colors;
+    &__color-wrapper {
+      margin-right: 10px;
+      border-radius: 50px;
+      padding: 10px;
+
+      &--selected {
+        border: 1px solid $color-charcoal-dark;
+      }
+    }
+
+    &__selected-icon {
+      width: 17px;
+      fill: $color-charcoal-dark;
+    }
+
+    &__color {
+      width: 46px;
+      height: 46px;
+      border-radius: 23px;
+      display: flex;
+      justify-content: center;
+      @supports (display: grid) {
+        display: grid
+      }
+      justify-items: center;
+      align-items: center;
+
+      @include skillbox-colors;
+    }
   }
-}
 </style>
diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index 9571dbab..e2c1bcab 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -1,20 +1,38 @@
 <template>
   <div
-    :class="{ 'hideable-element--greyed-out': hidden }"
+    :class="{'hideable-element--greyed-out': hidden}"
     class="content-block__container hideable-element content-list__parent"
   >
-    <div :class="specialClass" :style="instrumentStyle" class="content-block" data-cy="content-block">
-      <div class="block-actions" v-if="canEditModule && !isInstrumentBlock">
-        <user-widget v-bind="me" class="block-actions__user-widget content-block__user-widget" v-if="isMine" />
+    <div
+      :class="specialClass"
+      :style="instrumentStyle"
+      class="content-block"
+      data-cy="content-block"
+    >
+      <div
+        class="block-actions"
+        v-if="canEditModule && !isInstrumentBlock"
+      >
+        <user-widget
+          v-bind="me"
+          class="block-actions__user-widget content-block__user-widget"
+          v-if="isMine"
+        />
         <more-options-widget>
-          <li class="popover-links__link" v-if="!isInstrumentBlock">
+          <li
+            class="popover-links__link"
+            v-if="!isInstrumentBlock"
+          >
             <popover-link
               data-cy="duplicate-content-block-link"
               text="Duplizieren"
               @link-action="duplicateContentBlock(contentBlock)"
             />
           </li>
-          <li class="popover-links__link" v-if="isMine">
+          <li
+            class="popover-links__link"
+            v-if="isMine"
+          >
             <popover-link
               data-cy="delete-content-block-link"
               text="Löschen"
@@ -22,13 +40,22 @@
             />
           </li>
 
-          <li class="popover-links__link" v-if="isMine">
-            <popover-link text="Bearbeiten" @link-action="editContentBlock(contentBlock)" />
+          <li
+            class="popover-links__link"
+            v-if="isMine"
+          >
+            <popover-link
+              text="Bearbeiten"
+              @link-action="editContentBlock(contentBlock)"
+            />
           </li>
         </more-options-widget>
       </div>
       <div class="content-block__visibility">
-        <visibility-action :block="contentBlock" v-if="canEditModule" />
+        <visibility-action
+          :block="contentBlock"
+          v-if="canEditModule"
+        />
       </div>
 
       <h3
@@ -39,7 +66,10 @@
       >
         {{ instrumentLabel }}
       </h3>
-      <h4 class="content-block__title" v-if="!contentBlock.indent">
+      <h4
+        class="content-block__title"
+        v-if="!contentBlock.indent"
+      >
         {{ contentBlock.title }}
       </h4>
 
@@ -55,107 +85,110 @@
       />
     </div>
 
-    <add-content-button :where="{ after: contentBlock }" v-if="canEditModule" />
+    <add-content-button
+      :where="{after: contentBlock}"
+      v-if="canEditModule"
+    />
   </div>
 </template>
 
 <script>
-import AddContentButton from '@/components/AddContentButton';
-import MoreOptionsWidget from '@/components/MoreOptionsWidget';
-import UserWidget from '@/components/UserWidget';
-import VisibilityAction from '@/components/visibility/VisibilityAction';
+  import AddContentButton from '@/components/AddContentButton';
+  import MoreOptionsWidget from '@/components/MoreOptionsWidget';
+  import UserWidget from '@/components/UserWidget';
+  import VisibilityAction from '@/components/visibility/VisibilityAction';
 
-import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
-import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
-import DUPLICATE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/duplicateContentBlock.gql';
+  import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
+  import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
+  import DUPLICATE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/duplicateContentBlock.gql';
 
-import me from '@/mixins/me';
+  import me from '@/mixins/me';
 
-import { hidden } from '@/helpers/visibility';
-import { CONTENT_TYPE } from '@/consts/types';
-import PopoverLink from '@/components/ui/PopoverLink';
-import { insertAtIndex, removeAtIndex } from '@/graphql/immutable-operations';
-import { EDIT_CONTENT_BLOCK_PAGE } from '@/router/module.names';
-import { instrumentCategory } from '@/helpers/instrumentType';
+  import {hidden} from '@/helpers/visibility';
+  import {CONTENT_TYPE} from '@/consts/types';
+  import PopoverLink from '@/components/ui/PopoverLink';
+  import {insertAtIndex, removeAtIndex} from '@/graphql/immutable-operations';
+  import {EDIT_CONTENT_BLOCK_PAGE} from '@/router/module.names';
+  import {defineAsyncComponent} from 'vue';
+  import {instrumentCategory} from '@/helpers/instrumentType';
 
-const ContentComponent = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ContentComponent');
+  const ContentComponent = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentComponent'));
 
-export default {
-  name: 'ContentBlock',
-  props: {
-    contentBlock: {
-      type: Object,
-      default: () => ({}),
-    },
-    parent: {
-      type: Object,
-      default: () => ({}),
-    },
-    editMode: {
-      type: Boolean,
-      default: true,
-    },
-  },
 
-  mixins: [me],
+  export default {
+    name: 'ContentBlock',
+    props: {
+      contentBlock: {
+        type: Object,
+        default: () => ({}),
+      },
+      parent: {
+        type: Object,
+        default: () => ({}),
+      },
+      editMode: {
+        type: Boolean,
+        default: true,
+      },
+    },
 
-  components: {
-    PopoverLink,
-    ContentComponent,
-    AddContentButton,
-    VisibilityAction,
-    MoreOptionsWidget,
-    UserWidget,
-  },
+    mixins: [me],
 
-  computed: {
-    canEditModule() {
-      return !this.contentBlock.indent && this.editMode;
+    components: {
+      PopoverLink,
+      ContentComponent,
+      AddContentButton,
+      VisibilityAction,
+      MoreOptionsWidget,
+      UserWidget,
     },
-    specialClass() {
-      return `content-block--${this.contentBlock.type.toLowerCase()}`;
-    },
-    isInstrumentBlock() {
-      return !!this.contentBlock.instrumentCategory;
-    },
-    // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
-    instrumentStyle() {
-      if (this.isInstrumentBlock) {
-        return {
-          backgroundColor: this.contentBlock.instrumentCategory.background,
-        };
-      }
-      return {};
-    },
-    instrumentLabel() {
-      const contentType = this.contentBlock.type.toLowerCase();
-      if (contentType.startsWith('base')) {
-        // all legacy instruments start with `base`
-        return instrumentCategory(contentType);
-      }
-      if (this.isInstrumentBlock) {
-        return instrumentCategory(this.contentBlock.instrumentCategory.name);
-      }
-      return '';
-    },
-    // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
-    instrumentLabelStyle() {
-      if (this.isInstrumentBlock) {
-        return {
-          color: this.contentBlock.instrumentCategory.foreground,
-        };
-      }
-      return {};
-    },
-    canEditContentBlock() {
-      return this.isMine && !this.contentBlock.indent;
-    },
-    isMine() {
-      return this.contentBlock.mine;
-    },
-    contentBlocksWithContentLists() {
-      /*
+
+    computed: {
+      canEditModule() {
+        return !this.contentBlock.indent && this.editMode;
+      },
+      specialClass() {
+        return `content-block--${this.contentBlock.type.toLowerCase()}`;
+      },
+      isInstrumentBlock() {
+        return !!this.contentBlock.instrumentCategory;
+      },
+      // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
+      instrumentStyle() {
+        if (this.isInstrumentBlock) {
+          return {
+            backgroundColor: this.contentBlock.instrumentCategory.background
+          };
+        }
+        return {};
+      },
+      instrumentLabel() {
+        const contentType = this.contentBlock.type.toLowerCase();
+        if (contentType.startsWith('base')) { // all legacy instruments start with `base`
+          return instrumentCategory(contentType);
+        }
+        if (this.isInstrumentBlock) {
+          return instrumentCategory(this.contentBlock.instrumentCategory.name);
+        }
+        return '';
+      },
+      // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
+      instrumentLabelStyle() {
+        if (this.isInstrumentBlock) {
+          return {
+            color: this.contentBlock.instrumentCategory.foreground
+          };
+        }
+        return {};
+      },
+      canEditContentBlock() {
+        return this.isMine && !this.contentBlock.indent;
+      },
+      isMine() {
+        return this.contentBlock.mine;
+      },
+      contentBlocksWithContentLists() {
+        /*
         collects all content_list_items in content_lists:
         {
           text_block,
@@ -169,238 +202,221 @@ export default {
           text_block
         }
         */
-      let contentList = [];
-      let newContent = this.contentBlock.contents.reduce((newContents, content, index) => {
-        // collect content_list_items
-        if (content.type === 'content_list_item') {
-          contentList = [...contentList, content];
-          if (index === this.contentBlock.contents.length - 1) {
-            // content is last element of contents array
-            let updatedContent = [...newContents, ...this.createContentListOrBlocks(contentList)];
-            return updatedContent;
-          }
-          return newContents;
-        } else {
-          // handle all other items and reset current content_list if necessary
-          if (contentList.length !== 0) {
-            newContents = [...newContents, ...this.createContentListOrBlocks(contentList), content];
-            contentList = [];
+        let contentList = [];
+        let newContent = this.contentBlock.contents.reduce((newContents, content, index) => {
+          // collect content_list_items
+          if (content.type === 'content_list_item') {
+            contentList = [...contentList, content];
+            if (index === this.contentBlock.contents.length - 1) { // content is last element of contents array
+              let updatedContent = [...newContents, ...this.createContentListOrBlocks(contentList)];
+              return updatedContent;
+            }
             return newContents;
           } else {
-            return [...newContents, content];
+            // handle all other items and reset current content_list if necessary
+            if (contentList.length !== 0) {
+              newContents = [...newContents, ...this.createContentListOrBlocks(contentList), content];
+              contentList = [];
+              return newContents;
+            } else {
+              return [...newContents, content];
+            }
           }
-        }
-      }, []);
-      return Object.assign({}, this.contentBlock, {
-        contents: newContent,
-      });
+        }, []);
+        return Object.assign({}, this.contentBlock, {
+          contents: newContent,
+        });
+      },
+      hidden() {
+        return hidden({
+          block: this.contentBlock,
+          schoolClass: this.schoolClass,
+          type: CONTENT_TYPE,
+        });
+      },
+      root() {
+        // we need the root content block id, not the generated content block if inside a content list block
+        return this.contentBlock.root ? this.contentBlock.root : this.contentBlock.id;
+      },
     },
-    hidden() {
-      return hidden({
-        block: this.contentBlock,
-        schoolClass: this.schoolClass,
-        type: CONTENT_TYPE,
-      });
-    },
-    root() {
-      // we need the root content block id, not the generated content block if inside a content list block
-      return this.contentBlock.root ? this.contentBlock.root : this.contentBlock.id;
-    },
-  },
-  methods: {
-    duplicateContentBlock({ id }) {
-      const parent = this.parent;
-      this.$apollo.mutate({
-        mutation: DUPLICATE_CONTENT_BLOCK_MUTATION,
-        variables: {
-          input: {
-            id,
-          },
-        },
-        update(
-          store,
-          {
-            data: {
-              duplicateContentBlock: { contentBlock },
+    methods: {
+      duplicateContentBlock({id}) {
+        const parent = this.parent;
+        this.$apollo.mutate({
+          mutation: DUPLICATE_CONTENT_BLOCK_MUTATION,
+          variables: {
+            input: {
+              id,
             },
-          }
-        ) {
-          if (contentBlock) {
-            const query = CHAPTER_QUERY;
-            const variables = {
-              id: parent.id,
-            };
-            const { chapter } = store.readQuery({ query, variables });
-            const index = chapter.contentBlocks.findIndex((contentBlock) => contentBlock.id === id);
-            const contentBlocks = insertAtIndex(chapter.contentBlocks, index, contentBlock);
-            const data = {
-              chapter: {
-                ...chapter,
-                contentBlocks,
-              },
-            };
-            store.writeQuery({ query, variables, data });
-          }
-        },
-      });
-    },
-    editContentBlock(contentBlock) {
-      const route = {
-        name: EDIT_CONTENT_BLOCK_PAGE,
-        params: {
-          id: contentBlock.id,
-        },
-      };
-      this.$router.push(route);
-    },
-    deleteContentBlock(contentBlock) {
-      this.$modal
-        .open('confirm')
-        .then(() => {
-          this.doDeleteContentBlock(contentBlock);
-        })
-        .catch();
-    },
-    doDeleteContentBlock(contentBlock) {
-      const parent = this.parent;
-      const id = contentBlock.id;
-      this.$apollo.mutate({
-        mutation: DELETE_CONTENT_BLOCK_MUTATION,
-        variables: {
-          input: {
-            id,
           },
-        },
-        update(
-          store,
-          {
-            data: {
-              deleteContentBlock: { success },
+          update(store, {data: {duplicateContentBlock: {contentBlock}}}) {
+            if (contentBlock) {
+              const query = CHAPTER_QUERY;
+              const variables = {
+                id: parent.id,
+              };
+              const {chapter} = store.readQuery({query, variables});
+              const index = chapter.contentBlocks.findIndex(contentBlock => contentBlock.id === id);
+              const contentBlocks = insertAtIndex(chapter.contentBlocks, index, contentBlock);
+              const data = {
+                chapter: {
+                  ...chapter,
+                  contentBlocks,
+                },
+              };
+              store.writeQuery({query, variables, data});
+            }
+          },
+        });
+
+      },
+      editContentBlock(contentBlock) {
+        const route = {
+          name: EDIT_CONTENT_BLOCK_PAGE,
+          params: {
+            id: contentBlock.id,
+          },
+        };
+        this.$router.push(route);
+      },
+      deleteContentBlock(contentBlock) {
+        this.$modal.open('confirm').then(() => {
+            this.doDeleteContentBlock(contentBlock);
+          })
+          .catch();
+      },
+      doDeleteContentBlock(contentBlock) {
+        const parent = this.parent;
+        const id = contentBlock.id;
+        this.$apollo.mutate({
+          mutation: DELETE_CONTENT_BLOCK_MUTATION,
+          variables: {
+            input: {
+              id,
             },
-          }
-        ) {
-          if (success) {
-            const query = CHAPTER_QUERY;
-            const variables = {
-              id: parent.id,
-            };
-            const { chapter } = store.readQuery({ query, variables });
-            const index = chapter.contentBlocks.findIndex((contentBlock) => contentBlock.id === id);
-            const contentBlocks = removeAtIndex(chapter.contentBlocks, index);
-            const data = {
-              chapter: {
-                ...chapter,
-                contentBlocks,
-              },
-            };
-            store.writeQuery({ query, variables, data });
-          }
-        },
-      });
-    },
-    createContentListOrBlocks(contentList) {
-      return [
-        {
+          },
+          update(store, {data: {deleteContentBlock: {success}}}) {
+            if (success) {
+              const query = CHAPTER_QUERY;
+              const variables = {
+                id: parent.id,
+              };
+              const {chapter} = store.readQuery({query, variables});
+              const index = chapter.contentBlocks.findIndex(contentBlock => contentBlock.id === id);
+              const contentBlocks = removeAtIndex(chapter.contentBlocks, index);
+              const data = {
+                chapter: {
+                  ...chapter,
+                  contentBlocks,
+                },
+              };
+              store.writeQuery({query, variables, data});
+            }
+          },
+        });
+      },
+      createContentListOrBlocks(contentList) {
+        return [{
           type: 'content_list',
           contents: contentList,
           id: contentList[0].id,
-        },
-      ];
+        }];
+      },
     },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.content-block {
-  margin-bottom: $section-spacing;
-  position: relative;
-
-  &__container {
+  .content-block {
+    margin-bottom: $section-spacing;
     position: relative;
-  }
 
-  &__title {
-    line-height: 1.5;
-    margin-top: -0.5rem; // to offset the 1.5 line height, it leaves a padding on top
-  }
-
-  &__instrument-label {
-    margin-bottom: $medium-spacing;
-    @include regular-text();
-  }
-
-  &__action-button {
-    cursor: pointer;
-  }
-
-  &__user-widget {
-    margin-right: 0;
-  }
-
-  &--base_communication {
-    @include content-box($color-accent-1-list);
-
-    .content-block__instrument-label {
-      color: $color-accent-1-dark;
+    &__container {
+      position: relative;
     }
-  }
 
-  &--task {
-    @include light-border(bottom);
+    &__title {
+      line-height: 1.5;
+      margin-top: -0.5rem; // to offset the 1.5 line height, it leaves a padding on top
+    }
 
-    .content-block__title {
-      color: $color-brand;
-      margin-top: $default-padding;
-      margin-bottom: $large-spacing;
-      @include light-border(bottom);
+    &__instrument-label {
+      margin-bottom: $medium-spacing;
+      @include regular-text();
+    }
 
-      @include desktop {
-        margin-top: 0;
+    &__action-button {
+      cursor: pointer;
+    }
+
+    &__user-widget {
+      margin-right: 0;
+    }
+
+    &--base_communication {
+      @include content-box($color-accent-1-list);
+
+      .content-block__instrument-label {
+        color: $color-accent-1-dark;
       }
     }
-  }
 
-  &--base_society {
-    @include content-box($color-accent-2-list);
+    &--task {
+      @include light-border(bottom);
 
-    .content-block__instrument-label {
-      color: $color-accent-2-dark;
-    }
-  }
+      .content-block__title {
+        color: $color-brand;
+        margin-top: $default-padding;
+        margin-bottom: $large-spacing;
+        @include light-border(bottom);
 
-  &--base_interdisciplinary {
-    @include content-box($color-accent-4-list);
-
-    .content-block__instrument-label {
-      color: $color-accent-4-dark;
-    }
-  }
-
-  &--instrument {
-    @include content-box-base;
-  }
-
-  :deep(p) {
-    line-height: 1.5;
-    margin-bottom: 1em;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  :deep(.text-block) {
-    ul {
-      @include list-parent;
+        @include desktop {
+          margin-top: 0;
+        }
+      }
     }
 
-    li {
-      @include list-child;
+    &--base_society {
+      @include content-box($color-accent-2-list);
+
+      .content-block__instrument-label {
+        color: $color-accent-2-dark;
+      }
+    }
+
+    &--base_interdisciplinary {
+      @include content-box($color-accent-4-list);
+
+      .content-block__instrument-label {
+        color: $color-accent-4-dark;
+      }
+    }
+
+    &--instrument {
+      @include content-box-base;
+    }
+
+    /deep/ p {
       line-height: 1.5;
+      margin-bottom: 1em;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
+
+    /deep/ .text-block {
+      ul {
+        @include list-parent;
+      }
+
+      li {
+        @include list-child;
+        line-height: 1.5;
+      }
+    }
+
   }
-}
 </style>
diff --git a/client/src/components/FullscreenInfographic.vue b/client/src/components/FullscreenInfographic.vue
index 2197ebc2..d024973e 100644
--- a/client/src/components/FullscreenInfographic.vue
+++ b/client/src/components/FullscreenInfographic.vue
@@ -1,35 +1,37 @@
 <template>
   <modal :fullscreen="true">
-    <component :value="value" :is="type" />
+    <component
+      :value="value"
+      :is="type"
+    />
   </modal>
 </template>
 
 <script>
-import Modal from '@/components/Modal';
-const InfogramBlock = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/InfogramBlock');
-const GeniallyBlock = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/GeniallyBlock');
+  import Modal from '@/components/Modal';
+  import {defineAsyncComponent} from 'vue';
+  const InfogramBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/InfogramBlock'));
+  const GeniallyBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/GeniallyBlock'));
 
-export default {
-  components: {
-    Modal,
-    InfogramBlock,
-    GeniallyBlock,
-  },
+  export default {
+    components: {
+      Modal,
+      InfogramBlock,
+      GeniallyBlock
+    },
 
-  computed: {
-    id() {
-      return this.$store.state.infographic.id;
-    },
-    type() {
-      return this.$store.state.infographic.type;
-    },
-    value() {
-      return {
-        id: this.id,
-      };
-    },
-  },
-};
+    computed: {
+      id() {
+        return this.$store.state.infographic.id;
+      },
+      type() {
+        return this.$store.state.infographic.type;
+      },
+      value() {
+        return {
+          id: this.id
+        };
+      }
+    }
+  };
 </script>
diff --git a/client/src/components/HeaderBar.vue b/client/src/components/HeaderBar.vue
index 8f6e725c..8e6fcde4 100644
--- a/client/src/components/HeaderBar.vue
+++ b/client/src/components/HeaderBar.vue
@@ -1,4 +1,10 @@
-    <a class="header-bar__sidebar-link" data-cy="open-sidebar-link" @click.stop="openSidebar('navigation')">
+<template>
+  <header class="header-bar">
+    <a
+      class="header-bar__sidebar-link"
+      data-cy="open-sidebar-link"
+      @click.stop="openSidebar('navigation')"
+    >
       <hamburger class="header-bar__sidebar-icon" />
     </a>
     <content-navigation class="header-bar__content-navigation" />
@@ -22,112 +28,113 @@
 </template>
 
 <script>
-import ContentNavigation from '@/components/book-navigation/ContentNavigation.vue';
-import UserWidget from '@/components/UserWidget.vue';
-import CurrentClass from '@/components/school-class/CurrentClass';
+  import ContentNavigation from '@/components/book-navigation/ContentNavigation.vue';
+  import UserWidget from '@/components/UserWidget.vue';
+  import CurrentClass from '@/components/school-class/CurrentClass';
 
-import openSidebar from '@/mixins/open-sidebar';
-import me from '@/mixins/me';
+  import openSidebar from '@/mixins/open-sidebar';
+  import me from '@/mixins/me';
+  import {defineAsyncComponent} from 'vue';
 
-const Hamburger = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Hamburger');
+  const Hamburger = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Hamburger'));
 
-export default {
-  mixins: [openSidebar, me],
+  export default {
+    mixins: [openSidebar, me],
 
-  components: {
-    ContentNavigation,
-    UserWidget,
-    CurrentClass,
-    Hamburger,
-  },
-};
+    components: {
+      ContentNavigation,
+      UserWidget,
+      CurrentClass,
+      Hamburger,
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.header-bar {
-  display: flex;
-  flex-direction: row;
-  @supports (display: grid) {
-    display: grid;
-  }
-  align-items: center;
-  justify-content: space-between;
-  background-color: $color-white;
-  grid-auto-rows: 50px;
-  width: 100%;
-  max-width: 100vw;
-
-  grid-template-columns: 1fr 1fr 1fr;
-
-  @include desktop {
-    grid-template-columns: 50px 1fr auto;
-    grid-template-rows: 50px;
-    grid-auto-rows: auto;
-  }
-
-  /*
-     * For IE10+
-     */
-  -ms-grid-columns: 1fr 1fr 1fr;
-  -ms-grid-rows: 50px 50px;
-
-  /*
-    * For IE10+
-    */
-  & > :nth-child(1) {
-    -ms-grid-column: 1;
-    -ms-grid-row-align: center;
-  }
-
-  &__content-navigation {
-    grid-column: 2;
+  .header-bar {
+    display: flex;
+    flex-direction: row;
+    @supports (display: grid) {
+      display: grid;
+    }
+    align-items: center;
     justify-content: space-between;
-  }
+    background-color: $color-white;
+    grid-auto-rows: 50px;
+    width: 100%;
+    max-width: 100vw;
 
-  &__sidebar-link {
-    padding: $small-spacing;
-    cursor: pointer;
-  }
-
-  &__sidebar-icon {
-    width: 30px;
-    height: 30px;
-  }
-
-  /*
-    * For IE10+
-    */
-  & > :nth-child(3) {
-    -ms-grid-column: 3;
-    -ms-grid-row-align: center;
-    -ms-grid-column-align: end;
-
-    justify-self: end;
-  }
-
-  & > :nth-child(4) {
-    -ms-grid-row: 2;
-    -ms-grid-column: 1;
-    -ms-grid-column-span: 3;
-  }
-}
-
-.user-header {
-  display: flex;
-
-  &__current-class {
-    margin-right: $large-spacing;
-  }
-
-  &__sidebar-link {
-    cursor: pointer;
-    display: none;
+    grid-template-columns: 1fr 1fr 1fr;
 
     @include desktop {
-      display: flex;
+      grid-template-columns: 50px 1fr auto;
+      grid-template-rows: 50px;
+      grid-auto-rows: auto;
+    }
+
+    /*
+     * For IE10+
+     */
+    -ms-grid-columns: 1fr 1fr 1fr;
+    -ms-grid-rows: 50px 50px;
+
+    /*
+    * For IE10+
+    */
+    & > :nth-child(1) {
+      -ms-grid-column: 1;
+      -ms-grid-row-align: center;
+    }
+
+    &__content-navigation {
+      grid-column: 2;
+      justify-content: space-between;
+    }
+
+    &__sidebar-link {
+      padding: $small-spacing;
+      cursor: pointer;
+    }
+
+    &__sidebar-icon {
+      width: 30px;
+      height: 30px;
+    }
+
+    /*
+    * For IE10+
+    */
+    & > :nth-child(3) {
+      -ms-grid-column: 3;
+      -ms-grid-row-align: center;
+      -ms-grid-column-align: end;
+
+      justify-self: end;
+    }
+
+    & > :nth-child(4) {
+      -ms-grid-row: 2;
+      -ms-grid-column: 1;
+      -ms-grid-column-span: 3;
+    }
+  }
+
+  .user-header {
+    display: flex;
+
+    &__current-class {
+      margin-right: $large-spacing;
+    }
+
+    &__sidebar-link {
+      cursor: pointer;
+      display: none;
+
+      @include desktop {
+        display: flex;
+      }
     }
   }
-}
 </style>
diff --git a/client/src/components/HelpfulTooltip.vue b/client/src/components/HelpfulTooltip.vue
index 01d24917..74cc397c 100644
--- a/client/src/components/HelpfulTooltip.vue
+++ b/client/src/components/HelpfulTooltip.vue
@@ -10,65 +10,67 @@
 </template>
 
 <script>
-const InfoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon');
+  import {defineAsyncComponent} from 'vue';
+  const InfoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon'));
 
-export default {
-  props: ['text'],
+  export default {
+    props: ['text'],
 
-  components: {
-    InfoIcon,
-  },
-};
+    components: {
+      InfoIcon
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
-@import '@/styles/_mixins.scss';
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
-.helpful-tooltip {
-  position: relative;
+  .helpful-tooltip {
+    position: relative;
 
-  &__icon {
-    width: 20px;
-    height: 20px;
-    fill: $color-silver-dark;
-  }
+    &__icon {
+      width: 20px;
+      height: 20px;
+      fill: $color-silver-dark;
+    }
 
-  &__tooltip {
-    visibility: hidden;
-    position: absolute;
-    left: 30px;
-    top: 0px;
-    width: 400px;
-  }
-
-  &__text {
-    display: inline-table;
-    width: auto;
-
-    background-color: $color-white;
-    border: 1px solid $color-silver-dark;
-    border-radius: 5px;
-    padding: $small-spacing;
-    @include small-text;
-
-    &::before {
-      content: '';
+    &__tooltip {
+      visibility: hidden;
       position: absolute;
-      left: 0;
-      top: 18px;
-      margin-left: -1px;
-      border-left: 1px solid $color-silver-dark;
-      border-top: 1px solid $color-silver-dark;
+      left: 30px;
+      top: 0px;
+      width: 400px;
+    }
+
+    &__text {
+      display: inline-table;
+      width: auto;
+
       background-color: $color-white;
-      width: 10px;
-      height: 10px;
-      transform: rotate(-45deg) translateY(-50%);
+      border: 1px solid $color-silver-dark;
+      border-radius: 5px;
+      padding: $small-spacing;
+      @include small-text;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 18px;
+        margin-left: -1px;
+        border-left: 1px solid $color-silver-dark;
+        border-top: 1px solid $color-silver-dark;
+        background-color: $color-white;
+        width: 10px;
+        height: 10px;
+        transform: rotate(-45deg) translateY(-50%);
+      }
+
+    }
+
+    &:hover &__tooltip {
+      visibility: visible;
     }
   }
-
-  &:hover &__tooltip {
-    visibility: visible;
-  }
-}
 </style>
diff --git a/client/src/components/LoadingButton.vue b/client/src/components/LoadingButton.vue
index 390d16b7..6b1bfa7e 100644
--- a/client/src/components/LoadingButton.vue
+++ b/client/src/components/LoadingButton.vue
@@ -1,51 +1,58 @@
 <template>
-  <button :disabled="loading || disabled" class="loading-button button button--primary button--big">
+  <button
+    :disabled="loading || disabled"
+    class="loading-button button button--primary button--big"
+  >
     <template v-if="!loading">
       {{ label }}
     </template>
-    <loading-icon class="loading-button__icon" v-else />
+    <loading-icon
+      class="loading-button__icon"
+      v-else
+    />
   </button>
 </template>
 
 <script>
-const LoadingIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/LoadingIcon');
+  import {defineAsyncComponent} from 'vue';
+  const LoadingIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/LoadingIcon'));
 
-export default {
-  props: {
-    loading: {
-      type: Boolean,
-      default: false,
+  export default {
+    props: {
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      label: {
+        type: String,
+        default: ''
+      }
     },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-  },
-  components: {
-    LoadingIcon,
-  },
-};
+    components: {
+      LoadingIcon
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.loading-button {
-  height: 52px;
-  min-width: 100px;
-  display: inline-flex;
-  justify-content: center;
+  .loading-button {
+    height: 52px;
+    min-width: 100px;
+    display: inline-flex;
+    justify-content: center;
 
-  &__icon {
-    width: 14px;
-    height: 14px;
-    margin: 0 auto;
-    @include spin;
-    fill: $color-brand;
+    &__icon {
+      width: 14px;
+      height: 14px;
+      margin: 0 auto;
+      @include spin;
+      fill: $color-brand;
+    }
   }
-}
 </style>
diff --git a/client/src/components/MobileHeader.vue b/client/src/components/MobileHeader.vue
index 21fc9fa5..99ed4535 100644
--- a/client/src/components/MobileHeader.vue
+++ b/client/src/components/MobileHeader.vue
@@ -4,59 +4,66 @@
       <hamburger class="mobile-header__hamburger" />
     </a>
 
-    <router-link to="/" data-cy="mobile-home-link">
+    <router-link
+      to="/"
+      data-cy="mobile-home-link"
+    >
       <logo />
     </router-link>
 
-    <user-widget v-bind="me" @click.stop="openSidebar('profile')" />
+    <user-widget
+      v-bind="me"
+      @click.stop="openSidebar('profile')"
+    />
   </div>
 </template>
 
 <script>
-import UserWidget from '@/components/UserWidget';
+  import UserWidget from '@/components/UserWidget';
 
-import me from '@/mixins/me';
-import openSidebar from '@/mixins/open-sidebar';
+  import me from '@/mixins/me';
+  import openSidebar from '@/mixins/open-sidebar';
+  import {defineAsyncComponent} from 'vue';
 
-const Logo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo');
-const Hamburger = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Hamburger');
+  const Logo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Logo'));
+  const Hamburger = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Hamburger'));
 
-export default {
-  mixins: [me, openSidebar],
+  export default {
+    mixins: [me, openSidebar],
 
-  components: {
-    Logo,
-    Hamburger,
-    UserWidget,
-  },
-
-  methods: {
-    showMobileNavigation() {
-      this.$store.dispatch('showMobileNavigation', true);
+    components: {
+      Logo,
+      Hamburger,
+      UserWidget,
     },
-  },
-};
+
+    methods: {
+      showMobileNavigation() {
+        this.$store.dispatch('showMobileNavigation', true);
+      },
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.mobile-header {
-  justify-content: space-between;
-  align-items: center;
+  .mobile-header {
+    justify-content: space-between;
+    align-items: center;
 
-  display: flex;
+    display: flex;
 
-  @include desktop {
-    display: none;
+    @include desktop {
+      display: none;
+    }
+
+    padding: 0 $medium-spacing;
+
+    &__hamburger {
+      width: 30px;
+      height: 30px;
+      fill: $color-silver-dark;
+    }
   }
-
-  padding: 0 $medium-spacing;
-
-  &__hamburger {
-    width: 30px;
-    height: 30px;
-    fill: $color-silver-dark;
-  }
-}
 </style>
diff --git a/client/src/components/Modal.vue b/client/src/components/Modal.vue
index 9757bd2e..badc8229 100644
--- a/client/src/components/Modal.vue
+++ b/client/src/components/Modal.vue
@@ -1,11 +1,7 @@
 <template>
   <div class="modal__backdrop">
     <div
-      :class="{
-        'modal--hide-header': hideHeader || fullscreen,
-        'modal--fullscreen': fullscreen,
-        'modal--small': small,
-      }"
+      :class="{'modal--hide-header': hideHeader || fullscreen, 'modal--fullscreen': fullscreen, 'modal--small': small}"
       class="modal"
     >
       <div class="modal__header">
@@ -13,14 +9,20 @@
       </div>
       <div class="modal__body">
         <slot />
-        <div class="modal__close-button" @click="hideModal">
+        <div
+          class="modal__close-button"
+          @click="hideModal"
+        >
           <cross class="modal__close-icon" />
         </div>
       </div>
       <div class="modal__footer">
         <slot name="footer">
           <!--<a class="button button&#45;&#45;active">Speichern</a>-->
-          <a class="button" @click="hideModal">Abbrechen</a>
+          <a
+            class="button"
+            @click="hideModal"
+          >Abbrechen</a>
         </slot>
       </div>
     </div>
@@ -28,158 +30,160 @@
 </template>
 
 <script>
-const Cross = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon');
+  import {defineAsyncComponent} from 'vue';
+  const Cross = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon'));
 
-export default {
-  props: {
-    hideHeader: {
-      type: Boolean,
-      default: false,
+  export default {
+    props: {
+      hideHeader: {
+        type: Boolean,
+        default: false
+      },
+      fullscreen: {
+        type: Boolean,
+        default: false
+      },
+      small: {
+        type: Boolean,
+        default: false
+      }
     },
-    fullscreen: {
-      type: Boolean,
-      default: false,
-    },
-    small: {
-      type: Boolean,
-      default: false,
-    },
-  },
 
-  components: {
-    Cross,
-  },
-
-  methods: {
-    hideModal() {
-      this.$store.dispatch('hideModal');
+    components: {
+      Cross
     },
-  },
-};
+
+    methods: {
+      hideModal() {
+        this.$store.dispatch('hideModal');
+      }
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
+  @import "@/styles/_variables.scss";
 
-.modal {
-  align-self: center;
-  justify-self: center;
-  width: 700px;
-  height: 80vh;
-  background-color: $color-white;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
-  border: 1px solid $color-silver-light;
-  display: -ms-grid;
-  @supports (display: grid) {
-    display: grid;
-  }
-  grid-template-rows: auto 1fr 65px;
-  grid-template-areas: 'header' 'body' 'footer';
-  -ms-grid-rows: auto 1fr 65px;
-  position: relative;
-
-  &__backdrop {
-    display: flex;
-    justify-content: center;
+  .modal {
+    align-self: center;
+    justify-self: center;
+    width: 700px;
+    height: 80vh;
+    background-color: $color-white;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
+    border: 1px solid $color-silver-light;
+    display: -ms-grid;
     @supports (display: grid) {
       display: grid;
     }
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background-color: rgba($color-white, 0.8);
-    z-index: 90;
-  }
+    grid-template-rows: auto 1fr 65px;
+    grid-template-areas: "header" "body" "footer";
+    -ms-grid-rows: auto 1fr 65px;
+    position: relative;
 
-  &__header {
-    grid-area: header;
-    -ms-grid-row: 1;
-    padding: 10px $modal-lateral-padding;
-    border-bottom: 1px solid $color-silver-light;
-  }
+    &__backdrop {
+      display: flex;
+      justify-content: center;
+      @supports (display: grid) {
+        display: grid;
+      }
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      background-color: rgba($color-white, 0.8);
+      z-index: 90;
+    }
 
-  &__body {
-    grid-area: body;
-    -ms-grid-row: 2;
-    padding: 10px $modal-lateral-padding;
-    overflow: auto;
-    box-sizing: border-box;
-    min-height: 30vh;
-  }
+    &__header {
+      grid-area: header;
+      -ms-grid-row: 1;
+      padding: 10px $modal-lateral-padding;
+      border-bottom: 1px solid $color-silver-light;
+    }
 
-  &__close-button {
-    display: none;
-    cursor: pointer;
-    position: absolute;
-    right: 15px;
-    top: 15px;
-    background: rgba($color-white, 0.5);
-    border-radius: 40px;
-    padding: 10px;
-    align-content: center;
-  }
+    &__body {
+      grid-area: body;
+      -ms-grid-row: 2;
+      padding: 10px $modal-lateral-padding;
+      overflow: auto;
+      box-sizing: border-box;
+      min-height: 30vh;
+    }
 
-  &__footer {
-    grid-area: footer;
-    -ms-grid-row: 3;
-    border-top: 1px solid $color-silver-light;
-    padding: 16px $modal-lateral-padding;
-  }
-
-  $parent: &;
-
-  &--hide-header {
-    grid-template-rows: 1fr 65px;
-    grid-template-areas: 'body' 'footer';
-
-    #{$parent}__header {
+    &__close-button {
       display: none;
+      cursor: pointer;
+      position: absolute;
+      right: 15px;
+      top: 15px;
+      background: rgba($color-white, 0.5);
+      border-radius: 40px;
+      padding: 10px;
+      align-content: center;
     }
 
-    #{$parent}__body {
-      padding: $default-padding;
-    }
-  }
-
-  &--fullscreen {
-    width: 95vw;
-    height: auto;
-    grid-template-rows: 1fr;
-    -ms-grid-rows: 1fr;
-    grid-template-areas: 'body';
-    overflow: hidden;
-
-    #{$parent}__footer {
-      display: none;
+    &__footer {
+      grid-area: footer;
+      -ms-grid-row: 3;
+      border-top: 1px solid $color-silver-light;
+      padding: 16px $modal-lateral-padding;
     }
 
-    #{$parent}__body {
-      padding: 0;
-      scrollbar-width: none;
-      margin-right: -5px;
+    $parent: &;
 
-      height: auto;
-      max-height: 95vh;
+    &--hide-header {
+      grid-template-rows: 1fr 65px;
+      grid-template-areas: "body" "footer";
 
-      &::-webkit-scrollbar {
+      #{$parent}__header {
         display: none;
       }
+
+      #{$parent}__body {
+        padding: $default-padding;
+      }
+
+    }
+
+    &--fullscreen {
+      width: 95vw;
+      height: auto;
+      grid-template-rows: 1fr;
+      -ms-grid-rows: 1fr;
+      grid-template-areas: "body";
+      overflow: hidden;
+
+      #{$parent}__footer {
+        display: none;
+      }
+
+      #{$parent}__body {
+        padding: 0;
+        scrollbar-width: none;
+        margin-right: -5px;
+
+        height: auto;
+        max-height: 95vh;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+
+      #{$parent}__close-button {
+        display: flex;
+      }
     }
 
-    #{$parent}__close-button {
-      display: flex;
+    &--small {
+      height: auto;
+
+      #{$parent}__body {
+        min-height: 0;
+      }
     }
   }
-
-  &--small {
-    height: auto;
-
-    #{$parent}__body {
-      min-height: 0;
-    }
-  }
-}
 </style>
diff --git a/client/src/components/MoreOptionsWidget.vue b/client/src/components/MoreOptionsWidget.vue
index 74e092c1..3e97ec48 100644
--- a/client/src/components/MoreOptionsWidget.vue
+++ b/client/src/components/MoreOptionsWidget.vue
@@ -1,59 +1,68 @@
 <template>
   <div class="more-options">
-    <a class="more-options__more-link" data-cy="more-options-link" @click.stop="showMenu = !showMenu">
+    <a
+      class="more-options__more-link"
+      data-cy="more-options-link"
+      @click.stop="showMenu = !showMenu"
+    >
       <ellipses class="more-options__ellipses" />
     </a>
-    <widget-popover class="more-options__popover" v-if="showMenu" @hide-me="showMenu = false">
+    <widget-popover
+      class="more-options__popover"
+      v-if="showMenu"
+      @hide-me="showMenu = false"
+    >
       <slot />
     </widget-popover>
   </div>
 </template>
 
 <script>
-import WidgetPopover from '@/components/ui/WidgetPopover';
+  import WidgetPopover from '@/components/ui/WidgetPopover';
+  import {defineAsyncComponent} from 'vue';
 
-const Ellipses = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Ellipses.vue');
+  const Ellipses = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Ellipses.vue'));
 
-export default {
-  components: {
-    WidgetPopover,
-    Ellipses,
-  },
+  export default {
+    components: {
+      WidgetPopover,
+      Ellipses
+    },
 
-  data() {
-    return {
-      showMenu: false,
-    };
-  },
-};
+    data() {
+      return {
+        showMenu: false
+      };
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.more-options {
-  display: flex;
-  justify-content: flex-end;
-
-  &__ellipses {
-    width: 30px;
-    height: 30px;
-    fill: $color-charcoal-dark;
-    margin-top: -7px;
-  }
-
-  &__more-link {
-    background-color: rgba($color-white, 0.9);
-    width: 35px;
-    height: 15px;
-    border-radius: 15px;
+  .more-options {
     display: flex;
-    justify-content: center;
-  }
+    justify-content: flex-end;
 
-  &__popover {
-    min-width: 200px;
-    @include popover-defaults();
+    &__ellipses {
+      width: 30px;
+      height: 30px;
+      fill: $color-charcoal-dark;
+      margin-top: -7px;
+    }
+
+    &__more-link {
+      background-color: rgba($color-white, 0.9);
+      width: 35px;
+      height: 15px;
+      border-radius: 15px;
+      display: flex;
+      justify-content: center;
+    }
+
+    &__popover {
+      min-width: 200px;
+      @include popover-defaults();
+    }
   }
-}
 </style>
diff --git a/client/src/components/ScrollUp.vue b/client/src/components/ScrollUp.vue
index b031cdef..315663ef 100644
--- a/client/src/components/ScrollUp.vue
+++ b/client/src/components/ScrollUp.vue
@@ -11,7 +11,8 @@
 </template>
 
 <script>
-  const ArrowUp = () => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowUp');
+  import {defineAsyncComponent} from 'vue';
+  const ArrowUp = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowUp'));
 
   export default {
     components: {
diff --git a/client/src/components/StudentSubmissionDocument.vue b/client/src/components/StudentSubmissionDocument.vue
index 0498ecf9..a18d4ada 100644
--- a/client/src/components/StudentSubmissionDocument.vue
+++ b/client/src/components/StudentSubmissionDocument.vue
@@ -1,40 +1,44 @@
 <template>
   <div class="submission-document">
-    <p class="submission-document__content content" v-if="document && document.length > 0">
+    <p
+      class="submission-document__content content"
+      v-if="document && document.length > 0"
+    >
       <document-icon class="content__icon" /><span class="content__text">{{ filename }}</span>
     </p>
   </div>
 </template>
 
 <script>
-import filenameFromUrl from '@/helpers/urls';
-const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
+  import {defineAsyncComponent} from 'vue';
+  import filenameFromUrl from '@/helpers/urls';
+  const DocumentIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon'));
 
-export default {
-  name: 'StudentSubmissionDocument',
-  props: ['document'],
-  components: { DocumentIcon },
+  export default {
+    name: 'StudentSubmissionDocument',
+    props: ['document'],
+    components: { DocumentIcon },
 
-  computed: {
-    filename() {
-      return filenameFromUrl(this.document);
+    computed: {
+      filename() {
+        return filenameFromUrl(this.document);
+      }
     },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-.content {
-  display: flex;
+  .content {
+    display: flex;
 
-  &__icon {
-    width: 25px;
-    align-self: center;
-  }
+    &__icon {
+      width: 25px;
+      align-self: center;
+    }
 
-  &__text {
-    align-self: center;
-    padding-left: 5px;
+    &__text {
+      align-self: center;
+      padding-left: 5px;
+    }
   }
-}
 </style>
diff --git a/client/src/components/book-navigation/ContentNavigation.vue b/client/src/components/book-navigation/ContentNavigation.vue
index dd1d171d..cdcfeac4 100644
--- a/client/src/components/book-navigation/ContentNavigation.vue
+++ b/client/src/components/book-navigation/ContentNavigation.vue
@@ -1,9 +1,12 @@
 <template>
-  <nav :class="{ 'content-navigation--sidebar': isSidebar }" class="content-navigation">
+  <nav
+    :class="{'content-navigation--sidebar': isSidebar}"
+    class="content-navigation"
+  >
     <div class="content-navigation__primary">
       <div class="content-navigation__item">
         <router-link
-          :class="{ 'content-navigation__link--active': isActive('book') }"
+          :class="{'content-navigation__link--active': isActive('book')}"
           :to="topicRoute"
           active-class="content-navigation__link--active"
           class="content-navigation__link"
@@ -12,7 +15,9 @@
           {{ $flavor.textTopics }}
         </router-link>
 
-        <topic-navigation v-if="isSidebar" />
+        <topic-navigation
+          v-if="isSidebar"
+        />
       </div>
 
       <div class="content-navigation__item">
@@ -28,7 +33,7 @@
 
       <div class="content-navigation__item">
         <router-link
-          :to="{ name: 'news' }"
+          :to="{name: 'news'}"
           active-class="content-navigation__link--active"
           class="content-navigation__link"
           data-cy="news-navigation-link"
@@ -40,14 +45,19 @@
       </div>
     </div>
 
-    <router-link to="/" class="content-navigation__logo" data-cy="home-link" v-if="!isSidebar">
+    <router-link
+      to="/"
+      class="content-navigation__logo"
+      data-cy="home-link"
+      v-if="!isSidebar"
+    >
       <logo class="content-navigation__logo-icon" />
     </router-link>
 
     <div class="content-navigation__secondary">
       <div class="content-navigation__item content-navigation__item--secondary">
         <router-link
-          :class="{ 'content-navigation__link--active': isRoomUrl() }"
+          :class="{'content-navigation__link--active': isRoomUrl()}"
           to="/rooms"
           active-class="content-navigation__link--active"
           class="content-navigation__link content-navigation__link--secondary"
@@ -57,7 +67,10 @@
         </router-link>
       </div>
 
-      <div class="content-navigation__item content-navigation__item--secondary" v-if="showPortfolio">
+      <div
+        class="content-navigation__item content-navigation__item--secondary"
+        v-if="showPortfolio"
+      >
         <router-link
           to="/portfolio"
           active-class="content-navigation__link--active"
@@ -67,13 +80,16 @@
           Portfolio
         </router-link>
       </div>
-      <div class="content-navigation__item content-navigation__item--secondary" v-if="isSidebar">
+      <div
+        class="content-navigation__item content-navigation__item--secondary"
+        v-if="isSidebar"
+      >
         <a
           :href="$flavor.supportLink"
           target="_blank"
           class="content-navigation__link content-navigation__link--secondary"
           @click="close"
-          >Support
+        >Support
         </a>
       </div>
     </div>
@@ -81,142 +97,142 @@
 </template>
 
 <script>
-import TopicNavigation from '@/components/book-navigation/TopicNavigation';
+  import TopicNavigation from '@/components/book-navigation/TopicNavigation';
 
-import sidebarMixin from '@/mixins/sidebar';
-import meMixin from '@/mixins/me';
+  import sidebarMixin from '@/mixins/sidebar';
+  import meMixin from '@/mixins/me';
+  import {defineAsyncComponent} from 'vue';
 
-const Logo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo');
+  const Logo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Logo'));
 
-export default {
-  props: {
-    isSidebar: {
-      default: false,
+  export default {
+    props: {
+      isSidebar: {
+        default: false
+      }
     },
-  },
 
-  mixins: [sidebarMixin, meMixin],
+    mixins: [sidebarMixin, meMixin],
 
-  components: {
-    TopicNavigation,
-    Logo,
-  },
+    components: {
+      TopicNavigation,
+      Logo
+    },
 
-  computed: {
-    showPortfolio() {
-      return this.$flavor.showPortfolio;
+    computed: {
+      showPortfolio() {
+        return this.$flavor.showPortfolio;
+      }
     },
-  },
 
-  methods: {
-    isActive(linkName) {
-      return linkName === 'book' && this.$route.path.indexOf('module') > -1;
-    },
-    isRoomUrl() {
-      return this.$route.path.indexOf('room') > -1;
-    },
-    close() {
-      this.closeSidebar('navigation');
-    },
-  },
-};
+    methods: {
+      isActive(linkName) {
+        return linkName === 'book' && this.$route.path.indexOf('module') > -1;
+      },
+      isRoomUrl() {
+        return this.$route.path.indexOf('room') > -1;
+      },
+      close() {
+        this.closeSidebar('navigation');
+      }
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
-@import '@/styles/_mixins.scss';
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
-.content-navigation {
-  display: flex;
-  align-items: center;
-
-  &__link {
-    padding: 0 24px;
-    @include navigation-link;
-  }
-
-  &__primary,
-  &__secondary {
-    display: none;
-    flex-direction: row;
-
-    @include desktop {
-      display: flex;
-    }
-  }
-
-  &__logo {
-    color: #17a887;
-    font-size: 36px;
-    font-weight: 800;
-    font-family: $sans-serif-font-family;
+  .content-navigation {
     display: flex;
-    justify-self: center;
+    align-items: center;
 
-    /*
-      * For IE10+
-      */
-    -ms-grid-column: 2;
-    -ms-grid-row-align: center;
-    -ms-grid-column-align: center;
-  }
-
-  &__logo-icon {
-    width: auto;
-    height: 31px;
-  }
-
-  &__link {
-    &--secondary {
-      @include regular-text;
+    &__link {
+      padding: 0 24px;
+      @include navigation-link;
     }
 
-    &--active {
-      color: $color-brand;
-    }
-  }
+    &__primary, &__secondary {
+      display: none;
+      flex-direction: row;
 
-  $parent: &;
-
-  &--sidebar {
-    flex-direction: column;
-
-    #{$parent}__primary,
-    #{$parent}__secondary {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-    }
-
-    #{$parent}__link {
-      @include heading-4;
-      line-height: 2.5em;
-      padding: 0;
-      display: block;
-      margin-bottom: 0.5 * $small-spacing;
-
-      &:only-child {
-        margin-bottom: 0;
+      @include desktop {
+        display: flex;
       }
     }
 
-    #{$parent}__item {
-      width: 100%;
-      //border-bottom: 1px solid $color-white;
+    &__logo {
+      color: #17A887;
+      font-size: 36px;
+      font-weight: 800;
+      font-family: $sans-serif-font-family;
+      display: flex;
+      justify-self: center;
 
-      /*&:nth-child(1) {*/
-      /*  order: 3;*/
-      /*  border-bottom: 0;*/
-      /*}*/
+      /*
+      * For IE10+
+      */
+      -ms-grid-column: 2;
+      -ms-grid-row-align: center;
+      -ms-grid-column-align: center;
+    }
 
-      /*&:nth-child(2) {*/
-      /*  order: 1;*/
-      /*}*/
+    &__logo-icon {
+      width: auto;
+      height: 31px;
+    }
 
-      /*&:nth-child(3) {*/
-      /*  order: 2;*/
-      /*}*/
+    &__link {
+      &--secondary {
+        @include regular-text;
+      }
+
+      &--active {
+        color: $color-brand;
+      }
+    }
+
+    $parent: &;
+
+    &--sidebar {
+      flex-direction: column;
+
+      #{$parent}__primary, #{$parent}__secondary {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      }
+
+      #{$parent}__link {
+        @include heading-4;
+        line-height: 2.5em;
+        padding: 0;
+        display: block;
+        margin-bottom: 0.5*$small-spacing;
+
+        &:only-child {
+          margin-bottom: 0;
+        }
+
+      }
+
+      #{$parent}__item {
+        width: 100%;
+        //border-bottom: 1px solid $color-white;
+
+        /*&:nth-child(1) {*/
+        /*  order: 3;*/
+        /*  border-bottom: 0;*/
+        /*}*/
+
+        /*&:nth-child(2) {*/
+        /*  order: 1;*/
+        /*}*/
+
+        /*&:nth-child(3) {*/
+        /*  order: 2;*/
+        /*}*/
+      }
     }
   }
-}
 </style>
diff --git a/client/src/components/book-navigation/NavigationSidebar.vue b/client/src/components/book-navigation/NavigationSidebar.vue
index 6b015508..40a3c0e4 100644
--- a/client/src/components/book-navigation/NavigationSidebar.vue
+++ b/client/src/components/book-navigation/NavigationSidebar.vue
@@ -23,8 +23,9 @@
   import ContentNavigation from '@/components/book-navigation/ContentNavigation';
 
   import sidebarMixin from '@/mixins/sidebar';
+  import {defineAsyncComponent} from 'vue';
 
-  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
+  const Cross = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon'));
 
   export default {
     mixins: [sidebarMixin],
diff --git a/client/src/components/book-navigation/SubNavigationItem.vue b/client/src/components/book-navigation/SubNavigationItem.vue
index 347d1755..47c7ef0e 100644
--- a/client/src/components/book-navigation/SubNavigationItem.vue
+++ b/client/src/components/book-navigation/SubNavigationItem.vue
@@ -1,44 +1,55 @@
 <template>
-  <div :class="{ 'sub-navigation-item--active': show }" class="sub-navigation-item" v-click-outside="close">
-    <div class="sub-navigation-item__title" @click="show = !show">
+  <div
+    :class="{ 'sub-navigation-item--active': show}"
+    class="sub-navigation-item"
+    v-click-outside="close"
+  >
+    <div
+      class="sub-navigation-item__title"
+      @click="show = !show"
+    >
       {{ title }}
       <chevron-down class="sub-navigation-item__icon sub-navigation-item__chevron-down" />
       <chevron-up class="sub-navigation-item__icon sub-navigation-item__chevron-up" />
     </div>
-    <div class="sub-navigation-item__nav-items book-subnavigation" v-if="show">
+    <div
+      class="sub-navigation-item__nav-items book-subnavigation"
+      v-if="show"
+    >
       <slot />
     </div>
   </div>
 </template>
 
 <script>
-const ChevronDown = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronDown');
-const ChevronUp = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronUp');
+  import {defineAsyncComponent} from 'vue';
+  const ChevronDown = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronDown'));
+  const ChevronUp = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronUp'));
 
-export default {
-  props: ['title'],
+  export default {
+    props: ['title'],
 
-  components: {
-    ChevronDown,
-    ChevronUp,
-  },
-
-  data() {
-    return {
-      show: false,
-    };
-  },
-
-  watch: {
-    $route() {
-      this.show = false;
+    components: {
+      ChevronDown,
+      ChevronUp
     },
-  },
 
-  methods: {
-    close() {
-      this.show = false;
+    data() {
+      return {
+        show: false
+      };
     },
-  },
-};
+
+    watch: {
+      $route() {
+        this.show = false;
+      }
+    },
+
+    methods: {
+      close() {
+        this.show = false;
+      }
+    }
+  };
 </script>
diff --git a/client/src/components/content-block-form/ContentElement.vue b/client/src/components/content-block-form/ContentElement.vue
index 05df19db..88a8a074 100644
--- a/client/src/components/content-block-form/ContentElement.vue
+++ b/client/src/components/content-block-form/ContentElement.vue
@@ -26,10 +26,14 @@
           :class="['content-element__component']"
           v-bind="element"
           :is="component"
+
           @change-text="changeText"
+
           @link-change-url="changeUrl"
           @change-url="changeUrl"
+
           @switch-to-document="switchToDocument"
+
           @assignment-change-title="changeAssignmentTitle"
           @assignment-change-assignment="changeAssignmentAssignment"
         />
@@ -39,321 +43,313 @@
 </template>
 
 <script>
-import ContentFormSection from '@/components/content-block-form/ContentFormSection';
-import ContentElementActions from '@/components/content-block-form/ContentElementActions';
+  import ContentFormSection from '@/components/content-block-form/ContentFormSection';
+  import ContentElementActions from '@/components/content-block-form/ContentElementActions';
+  import {defineAsyncComponent} from 'vue';
 
-const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
-const ContentBlockElementChooserWidget = () =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/ContentBlockElementChooserWidget');
-const LinkForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/LinkForm');
-const VideoForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/VideoForm');
-const ImageForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/ImageForm');
-const DocumentForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/DocumentForm');
-const AssignmentForm = () =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/AssignmentForm');
-const TextForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/TipTap.vue');
-const SubtitleForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/SubtitleForm');
-// readonly blocks
-const Assignment = () =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/assignment/Assignment');
-const SurveyBlock = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/SurveyBlock');
-const Solution = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/Solution');
-const ImageBlock = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/ImageBlock');
-const Instruction = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/Instruction');
-const ModuleRoomSlug = () =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/ModuleRoomSlug');
-const CmsDocumentBlock = () =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/CmsDocumentBlock');
-const ThinglinkBlock = () =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/ThinglinkBlock');
-const InfogramBlock = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/InfogramBlock');
+  const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon'));
+  const ContentBlockElementChooserWidget = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/ContentBlockElementChooserWidget'));
+  const LinkForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/LinkForm'));
+  const VideoForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/VideoForm'));
+  const ImageForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/ImageForm'));
+  const DocumentForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/DocumentForm'));
+  const AssignmentForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/AssignmentForm'));
+  const TextForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/TipTap.vue'));
+  const SubtitleForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/SubtitleForm'));
+  // readonly blocks
+  const Assignment = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/assignment/Assignment'));
+  const SurveyBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/SurveyBlock'));
+  const Solution = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/Solution'));
+  const ImageBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/ImageBlock'));
+  const Instruction = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/Instruction'));
+  const ModuleRoomSlug = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/ModuleRoomSlug'));
+  const CmsDocumentBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/CmsDocumentBlock'));
+  const ThinglinkBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/ThinglinkBlock'));
+  const InfogramBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/InfogramBlock'));
 
-const CHOOSER = 'content-block-element-chooser-widget';
+  const CHOOSER = 'content-block-element-chooser-widget';
 
-export default {
-  props: {
-    element: {
-      type: Object,
-      default: null,
+  export default {
+    props: {
+      element: {
+        type: Object,
+        default: null,
+      },
+      // is this element at the top level, or is it nested? we assume top level
+      topLevel: {
+        type: Boolean,
+        default: true,
+      },
+      firstElement: {
+        type: Boolean,
+        required: true,
+      },
+      lastElement: {
+        type: Boolean,
+        required: true,
+      },
     },
-    // is this element at the top level, or is it nested? we assume top level
-    topLevel: {
-      type: Boolean,
-      default: true,
-    },
-    firstElement: {
-      type: Boolean,
-      required: true,
-    },
-    lastElement: {
-      type: Boolean,
-      required: true,
-    },
-  },
 
-  components: {
-    ContentElementActions,
-    ContentFormSection,
-    TrashIcon,
-    ContentBlockElementChooserWidget,
-    LinkForm,
-    VideoForm,
-    ImageForm,
-    DocumentForm,
-    AssignmentForm,
-    TextForm,
-    SubtitleForm,
-    SurveyBlock,
-    Solution,
-    ImageBlock,
-    Instruction,
-    ModuleRoomSlug,
-    CmsDocumentBlock,
-    InfogramBlock,
-    ThinglinkBlock,
-    Assignment,
-  },
+    components: {
+      ContentElementActions,
+      ContentFormSection,
+      TrashIcon,
+      ContentBlockElementChooserWidget,
+      LinkForm,
+      VideoForm,
+      ImageForm,
+      DocumentForm,
+      AssignmentForm,
+      TextForm,
+      SubtitleForm,
+      SurveyBlock,
+      Solution,
+      ImageBlock,
+      Instruction,
+      ModuleRoomSlug,
+      CmsDocumentBlock,
+      InfogramBlock,
+      ThinglinkBlock,
+      Assignment
+    },
 
-  computed: {
-    actions() {
-      return {
-        up: !this.firstElement,
-        down: !this.lastElement,
-        extended: this.topLevel,
-      };
+    computed: {
+      actions() {
+        return {
+          up: !this.firstElement,
+          down: !this.lastElement,
+          extended: this.topLevel,
+        };
+      },
+      isChooser() {
+        return this.component === CHOOSER;
+      },
+      type() {
+        return this.getType(this.element);
+      },
+      component() {
+        return this.type.component;
+      },
+      title() {
+        return this.type.title;
+      },
+      icon() {
+        return this.type.icon;
+      },
     },
-    isChooser() {
-      return this.component === CHOOSER;
-    },
-    type() {
-      return this.getType(this.element);
-    },
-    component() {
-      return this.type.component;
-    },
-    title() {
-      return this.type.title;
-    },
-    icon() {
-      return this.type.icon;
-    },
-  },
 
-  methods: {
-    getType(element) {
-      switch (element.type) {
-        case 'subtitle':
-          return {
-            component: 'subtitle-form',
-            title: 'Untertitel',
-            icon: 'title-icon',
-          };
-        case 'link_block':
-          return {
-            component: 'link-form',
-            title: 'Link',
-            icon: 'link-icon',
-          };
-        case 'video_block':
-          return {
-            component: 'video-form',
-            title: 'Video',
-            icon: 'video-icon',
-          };
-        case 'image_url_block':
-          return {
-            component: 'image-form',
-            title: 'Bild',
-            icon: 'image-icon',
-          };
-        case 'text_block':
-          return {
-            component: 'text-form',
-            title: 'Text',
-            icon: 'text-icon',
-          };
-        case 'assignment':
-          return {
-            component: element.id ? 'assignment' : 'assignment-form', // prevent editing of existing assignments
-            title: 'Aufgabe & Ergebnis',
-            icon: 'speech-bubble-icon',
-          };
-        case 'document_block':
-          return {
-            component: 'document-form',
-            title: 'Dokument',
-            icon: 'document-icon',
-          };
-        case 'survey':
-          return {
-            component: 'survey-block',
-            title: 'Übung',
-          };
-        case 'solution':
-          return {
-            component: 'solution',
-            title: 'Lösung',
-          };
-        case 'image_block':
-          return {
-            component: 'image-block',
-            title: 'Bild',
-          };
-        case 'instruction':
-          return {
-            component: 'instruction',
-            title: 'Instruktion',
-          };
-        case 'module_room_slug':
-          return {
-            component: 'module-room-slug',
-            title: 'Raum',
-          };
-        case 'cms_document_block':
-          return {
-            component: 'cms-document-block',
-            title: 'Dokument',
-          };
-        case 'thinglink_block':
-          return {
-            component: 'thinglink-block',
-            title: 'Interaktive Grafik',
-          };
-        case 'infogram_block':
-          return {
-            component: 'infogram-block',
-            title: 'Interaktive Grafik',
-          };
-      }
-      return {
-        component: CHOOSER,
-        title: '',
-        icon: '',
-      };
-    },
-    _updateProperty(value, key) {
-      // const content = this.localContentBlock.contents[index];
-      const content = this.element;
-      this.update({
-        ...content,
-        value: {
-          ...content.value,
-          [key]: value,
-        },
-      });
-    },
-    changeUrl(value) {
-      this._updateProperty(value, 'url');
-    },
-    changeText(value) {
-      this._updateProperty(value, 'text');
-    },
-    changeAssignmentTitle(value) {
-      this._updateProperty(value, 'title');
-    },
-    changeAssignmentAssignment(value) {
-      this._updateProperty(value, 'assignment');
-    },
-    changeType({ type, convertToList }, value) {
-      let el = {
-        type: type,
-        value: Object.assign({}, value),
-      };
-      switch (type) {
-        case 'subtitle':
-          el = {
-            ...el,
-            value: {
-              text: '',
-            },
-          };
-          break;
-        case 'text_block':
-          el = {
-            ...el,
-            value: {
-              text: '',
-            },
-          };
-          break;
-        case 'link_block':
-          el = {
-            ...el,
-            value: {
-              text: '',
-              url: '',
-            },
-          };
-          break;
-        case 'video_block':
-          el = {
-            ...el,
-            value: {
-              url: '',
-            },
-          };
-          break;
-        case 'document_block':
-          el = {
-            ...el,
-            value: Object.assign(
-              {
+    methods: {
+      getType(element) {
+        switch (element.type) {
+          case 'subtitle':
+            return {
+              component: 'subtitle-form',
+              title: 'Untertitel',
+              icon: 'title-icon',
+            };
+          case 'link_block':
+            return {
+              component: 'link-form',
+              title: 'Link',
+              icon: 'link-icon',
+            };
+          case 'video_block':
+            return {
+              component: 'video-form',
+              title: 'Video',
+              icon: 'video-icon',
+            };
+          case 'image_url_block':
+            return {
+              component: 'image-form',
+              title: 'Bild',
+              icon: 'image-icon',
+            };
+          case 'text_block':
+            return {
+              component: 'text-form',
+              title: 'Text',
+              icon: 'text-icon',
+            };
+          case 'assignment':
+            return {
+              component: element.id ? 'assignment' : 'assignment-form', // prevent editing of existing assignments
+              title: 'Aufgabe & Ergebnis',
+              icon: 'speech-bubble-icon',
+            };
+          case 'document_block':
+            return {
+              component: 'document-form',
+              title: 'Dokument',
+              icon: 'document-icon',
+            };
+          case 'survey':
+            return {
+              component: 'survey-block',
+              title: 'Übung',
+            };
+          case 'solution':
+            return {
+              component: 'solution',
+              title: 'Lösung',
+            };
+          case 'image_block':
+            return {
+              component: 'image-block',
+              title: 'Bild',
+            };
+          case 'instruction':
+            return {
+              component: 'instruction',
+              title: 'Instruktion',
+            };
+          case 'module_room_slug':
+            return {
+              component: 'module-room-slug',
+              title: 'Raum',
+            };
+          case 'cms_document_block':
+            return {
+              component: 'cms-document-block',
+              title: 'Dokument',
+            };
+          case 'thinglink_block':
+            return {
+              component: 'thinglink-block',
+              title: 'Interaktive Grafik'
+            };
+          case 'infogram_block':
+            return {
+              component: 'infogram-block',
+              title: 'Interaktive Grafik'
+            };
+        }
+        return {
+          component: CHOOSER,
+          title: '',
+          icon: '',
+        };
+      },
+      _updateProperty(value, key) {
+        // const content = this.localContentBlock.contents[index];
+        const content = this.element;
+        this.update({
+          ...content,
+          value: {
+            ...content.value,
+            [key]: value,
+          },
+        });
+      },
+      changeUrl(value) {
+        this._updateProperty(value, 'url');
+      },
+      changeText(value) {
+        this._updateProperty(value, 'text');
+      },
+      changeAssignmentTitle(value) {
+        this._updateProperty(value, 'title');
+      },
+      changeAssignmentAssignment(value) {
+        this._updateProperty(value, 'assignment');
+      },
+      changeType({type, convertToList}, value) {
+        let el = {
+          type: type,
+          value: Object.assign({}, value),
+        };
+        switch (type) {
+          case 'subtitle':
+            el = {
+              ...el,
+              value: {
+                text: '',
+              },
+            };
+            break;
+          case 'text_block':
+            el = {
+              ...el,
+              value: {
+                text: '',
+              },
+            };
+            break;
+          case 'link_block':
+            el = {
+              ...el,
+              value: {
+                text: '',
                 url: '',
               },
-              value
-            ),
-          };
-          break;
-        case 'image_url_block':
-          el = {
-            ...el,
-            value: {
-              url: '',
-            },
-          };
-          break;
-      }
+            };
+            break;
+          case 'video_block':
+            el = {
+              ...el,
+              value: {
+                url: '',
+              },
+            };
+            break;
+          case 'document_block':
+            el = {
+              ...el,
+              value: Object.assign({
+                url: '',
+              }, value),
+            };
+            break;
+          case 'image_url_block':
+            el = {
+              ...el,
+              value: {
+                url: '',
+              },
+            };
+            break;
+        }
 
-      if (convertToList) {
-        el = {
-          type: 'content_list_item',
-          contents: [el],
-        };
-      }
-      this.update(el);
+        if (convertToList) {
+          el = {
+            type: 'content_list_item',
+            contents: [el],
+          };
+        }
+        this.update(el);
+      },
+      update(element) {
+        this.$emit('update', element);
+      },
+      switchToDocument(value) {
+        this.changeType('document_block', value);
+      },
     },
-    update(element) {
-      this.$emit('update', element);
-    },
-    switchToDocument(value) {
-      this.changeType('document_block', value);
-    },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.content-element {
-  display: flex;
-  flex-direction: column;
+  .content-element {
+    display: flex;
+    flex-direction: column;
 
-  &__actions {
-    display: inline-flex;
-    justify-self: flex-end;
-    align-self: flex-end;
+    &__actions {
+      display: inline-flex;
+      justify-self: flex-end;
+      align-self: flex-end;
+    }
+
+    &__section {
+      display: grid;
+      //grid-template-columns: 1fr 50px;
+      grid-auto-rows: auto;
+      /*width: 95%; // reserve space for scrollbar*/
+    }
+
+    &__chooser {
+      grid-column: 1 / span 2;
+    }
   }
-
-  &__section {
-    display: grid;
-    //grid-template-columns: 1fr 50px;
-    grid-auto-rows: auto;
-    /*width: 95%; // reserve space for scrollbar*/
-  }
-
-  &__chooser {
-    grid-column: 1 / span 2;
-  }
-}
 </style>
diff --git a/client/src/components/content-block-form/ContentsForm.vue b/client/src/components/content-block-form/ContentsForm.vue
index 930969f4..ab47ca0c 100644
--- a/client/src/components/content-block-form/ContentsForm.vue
+++ b/client/src/components/content-block-form/ContentsForm.vue
@@ -18,150 +18,167 @@
       />
     </template>
 
-    <add-content-element :index="-1" class="contents-form__add" @add-element="addElement" />
-    <div class="contents-form__element" v-for="(element, index) in localContentBlock.contents" :key="index">
-      <content-element :element="element" @update="update(index, $event)" @remove="remove(index)" />
+    <add-content-element
+      :index="-1"
+      class="contents-form__add"
+      @add-element="addElement"
+    />
+    <div
+      class="contents-form__element"
+      v-for="(element, index) in localContentBlock.contents"
+      :key="index"
+    >
+      <content-element
+        :element="element"
+        @update="update(index, $event)"
+        @remove="remove(index)"
+      />
 
-      <add-content-element :index="index" class="contents-form__add" @add-element="addElement" />
+      <add-content-element
+        :index="index"
+        class="contents-form__add"
+        @add-element="addElement"
+      />
     </div>
 
     <template #footer>
       <div>
         <a
-          :class="{ 'button--disabled': disableSave }"
+          :class="{'button--disabled': disableSave}"
           class="button button--primary"
           data-cy="modal-save-button"
           @click="save"
-          >Speichern</a
-        >
-        <a class="button" @click="$emit('hide')">Abbrechen</a>
+        >Speichern</a>
+        <a
+          class="button"
+          @click="$emit('hide')"
+        >Abbrechen</a>
       </div>
     </template>
   </modal>
 </template>
 
 <script>
-import { meQuery } from '@/graphql/queries';
+  import {defineAsyncComponent} from 'vue';
+  import {meQuery} from '@/graphql/queries';
 
-const ModalInput = () => import(/* webpackChunkName: "content-forms" */ '@/components/ModalInput');
-const AddContentElement = () => import(/* webpackChunkName: "content-forms" */ '@/components/AddContentElement');
-const ContentElement = () =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-block-form/ContentElement');
+  const ModalInput = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/ModalInput'));
+  const AddContentElement = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/AddContentElement'));
+  const ContentElement = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-block-form/ContentElement'));
 
-const Modal = () => import('@/components/Modal.vue');
-const Checkbox = () => import('@/components/ui/Checkbox.vue');
+  const Modal = defineAsyncComponent(() => import('@/components/Modal'));
+  const Checkbox = defineAsyncComponent(() => import('@/components/ui/Checkbox'));
 
-export default {
-  props: {
-    contentBlock: Object,
-    blockType: {
-      type: String,
-      default: 'ContentBlock',
+  export default {
+    props: {
+      contentBlock: Object,
+      blockType: {
+        type: String,
+        default: 'ContentBlock',
+      },
+      showTaskSelection: {
+        type: Boolean,
+        default: false,
+      },
+      disableSave: {
+        type: Boolean,
+        default: false,
+      },
     },
-    showTaskSelection: {
-      type: Boolean,
-      default: false,
-    },
-    disableSave: {
-      type: Boolean,
-      default: false,
-    },
-  },
 
-  components: {
-    ContentElement,
-    Modal,
-    ModalInput,
-    AddContentElement,
-    Checkbox,
-  },
+    components: {
+      ContentElement,
+      Modal,
+      ModalInput,
+      AddContentElement,
+      Checkbox,
+    },
 
-  data() {
-    return {
-      error: false,
-      localContentBlock: Object.assign(
-        {},
-        {
+    data() {
+      return {
+        error: false,
+        localContentBlock: Object.assign({}, {
           title: this.contentBlock.title,
           contents: [...this.contentBlock.contents],
           id: this.contentBlock.id || undefined,
           isAssignment: this.contentBlock.type && this.contentBlock.type.toLowerCase() === 'task',
+        }),
+        me: {},
+      };
+    },
+
+    apollo: {
+      me: meQuery,
+    },
+
+    computed: {
+      titlePlaceholder() {
+        return this.blockType === 'RoomEntry' ? 'Titel für Raumeintrag erfassen' : 'Titel für Inhaltsblock erfassen';
+      },
+      taskSelection() {
+        return this.showTaskSelection && this.me.permissions.includes('users.can_manage_school_class_content');
+      },
+    },
+
+    methods: {
+      setContentBlockType(checked) {
+        this.localContentBlock.isAssignment = checked;
+      },
+      update(index, element) {
+        this.localContentBlock.contents.splice(index, 1, element);
+      },
+      save() {
+        if (!this.disableSave) {
+          if (!this.localContentBlock.title) {
+            this.error = true;
+            return false;
+          }
+          this.$emit('save', this.localContentBlock);
         }
-      ),
-      me: {},
-    };
-  },
+      },
+      updateTitle(title) {
+        this.localContentBlock.title = title;
+        this.error = false;
+      },
+      addElement(index) {
+        this.localContentBlock.contents.splice(index + 1, 0, {
+          hideAssignment: this.blockType !== 'ContentBlock',
+        });
+      },
+      remove(index) {
+        this.localContentBlock.contents.splice(index, 1);
+      },
 
-  apollo: {
-    me: meQuery,
-  },
-
-  computed: {
-    titlePlaceholder() {
-      return this.blockType === 'RoomEntry' ? 'Titel für Raumeintrag erfassen' : 'Titel für Inhaltsblock erfassen';
     },
-    taskSelection() {
-      return this.showTaskSelection && this.me.permissions.includes('users.can_manage_school_class_content');
-    },
-  },
-
-  methods: {
-    setContentBlockType(checked) {
-      this.localContentBlock.isAssignment = checked;
-    },
-    update(index, element) {
-      this.localContentBlock.contents.splice(index, 1, element);
-    },
-    save() {
-      if (!this.disableSave) {
-        if (!this.localContentBlock.title) {
-          this.error = true;
-          return false;
-        }
-        this.$emit('save', this.localContentBlock);
-      }
-    },
-    updateTitle(title) {
-      this.localContentBlock.title = title;
-      this.error = false;
-    },
-    addElement(index) {
-      this.localContentBlock.contents.splice(index + 1, 0, {
-        hideAssignment: this.blockType !== 'ContentBlock',
-      });
-    },
-    remove(index) {
-      this.localContentBlock.contents.splice(index, 1);
-    },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.contents-form {
-  /* top level does not exist, because of the modal */
+  .contents-form {
+    /* top level does not exist, because of the modal */
 
-  &__element {
+    &__element {
+
+    }
+
+    &__element-component {
+      margin-bottom: 25px;
+    }
+
+    &__remove {
+    }
+
+    &__trash-icon {
+    }
+
+    &__add {
+      grid-column: 1 / span 2;
+    }
+
+    &__task {
+      margin: 15px 0 10px;
+    }
   }
-
-  &__element-component {
-    margin-bottom: 25px;
-  }
-
-  &__remove {
-  }
-
-  &__trash-icon {
-  }
-
-  &__add {
-    grid-column: 1 / span 2;
-  }
-
-  &__task {
-    margin: 15px 0 10px;
-  }
-}
 </style>
diff --git a/client/src/components/content-blocks/ContentListBlock.vue b/client/src/components/content-blocks/ContentListBlock.vue
index eaaab5bb..a2fa7346 100644
--- a/client/src/components/content-blocks/ContentListBlock.vue
+++ b/client/src/components/content-blocks/ContentListBlock.vue
@@ -1,40 +1,43 @@
 <template>
-  <content-list :items="contentBlocks">
+  <content-list
+    :items="contentBlocks"
+  >
     <template #default="{ item }">
-      <content-block :content-block="item" :parent="parent" />
+      <content-block
+        :content-block="item"
+        :parent="parent"
+      />
     </template>
   </content-list>
 </template>
 
 <script>
-import ContentList from '@/components/content-blocks/ContentList.vue';
-export default {
-  name: 'ContentBlockList',
-  props: ['contents', 'parent'],
+  import {defineAsyncComponent} from 'vue';
+  const ContentList = defineAsyncComponent(() => import('@/components/content-blocks/ContentList'));
+  const ContentBlock = defineAsyncComponent(() => import('@/components/ContentBlock'));
 
-  components: {
-    ContentList,
-    // https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
-    ContentBlock: () => import('@/components/ContentBlock.vue'),
-  },
+  export default {
+    name: 'ContentBlockList',
+    props: ['contents', 'parent'],
 
-  computed: {
-    contentBlocks() {
-      return this.contents.map((contentBlock) => {
-        const contents = contentBlock.value ? [...contentBlock.value] : [];
-        return Object.assign({}, contentBlock, {
-          contents,
-          indent: true,
-          bookmarks: this.parent.bookmarks,
-          notes: this.parent.notes,
-          root: this.parent.id,
-        });
-      });
+    components: {
+      ContentList,
+      ContentBlock
     },
-  },
-};
-</script>
 
-<style scoped lang="scss">
-@import '~styles/helpers';
-</style>
+    computed: {
+      contentBlocks() {
+        return this.contents.map(contentBlock => {
+          const contents = contentBlock.value ? [...contentBlock.value] : [];
+          return Object.assign({}, contentBlock, {
+            contents,
+            indent: true,
+            bookmarks: this.parent.bookmarks,
+            notes: this.parent.notes,
+            root: this.parent.id
+          });
+        });
+      }
+    }
+  };
+</script>
diff --git a/client/src/components/content-blocks/DocumentBlock.vue b/client/src/components/content-blocks/DocumentBlock.vue
index d31b6797..447ac2f3 100644
--- a/client/src/components/content-blocks/DocumentBlock.vue
+++ b/client/src/components/content-blocks/DocumentBlock.vue
@@ -1,71 +1,80 @@
 <template>
   <div class="document-block">
     <document-icon class="document-block__icon" />
-    <a :href="value.url" class="document-block__link" target="_blank">{{ urlName }}</a>
-    <a class="document-block__remove" v-if="showTrashIcon" @click="$emit('trash')">
+    <a
+      :href="value.url"
+      class="document-block__link"
+      target="_blank"
+    >{{ urlName }}</a>
+    <a
+      class="document-block__remove"
+      v-if="showTrashIcon"
+      @click="$emit('trash')"
+    >
       <trash-icon class="document-block__trash-icon" />
     </a>
   </div>
 </template>
 
 <script>
-const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
-const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
+  import {defineAsyncComponent} from 'vue';
+  const DocumentIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon'));
+  const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon'));
 
-export default {
-  props: {
-    value: Object,
-    showTrashIcon: Boolean,
-  },
-
-  components: {
-    DocumentIcon,
-    TrashIcon,
-  },
-
-  computed: {
-    urlName: function () {
-      if (this.value && this.value.url) {
-        const parts = this.value.url.split('/');
-        return parts[parts.length - 1];
-      }
-      return null;
+  export default {
+    props: {
+      value: Object,
+      showTrashIcon: Boolean,
     },
-  },
-};
+
+    components: {
+      DocumentIcon,
+      TrashIcon,
+    },
+
+    computed: {
+      urlName: function() {
+        if (this.value && this.value.url) {
+          const parts = this.value.url.split('/');
+          return parts[parts.length - 1];
+        }
+        return null;
+      }
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.document-block {
-  display: grid;
-  grid-template-columns: 50px 1fr 50px;
-  align-items: center;
-
-  &__icon {
-    width: 30px;
-    height: 30px;
-  }
-
-  &__link {
-    text-decoration: underline;
-  }
-
-  &__remove {
-    display: flex;
-    justify-content: center;
+  .document-block {
+    display: grid;
+    grid-template-columns: 50px 1fr 50px;
     align-items: center;
-    width: 50px;
-    height: 50px;
-  }
 
-  &__trash-icon {
-    width: 25px;
-    height: 25px;
-    fill: $color-silver-dark;
-    cursor: pointer;
-    justify-self: center;
+    &__icon {
+      width: 30px;
+      height: 30px;
+    }
+
+    &__link {
+      text-decoration: underline;
+    }
+
+    &__remove {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 50px;
+      height: 50px;
+    }
+
+    &__trash-icon {
+      width: 25px;
+      height: 25px;
+      fill: $color-silver-dark;
+      cursor: pointer;
+      justify-self: center;
+    }
   }
-}
 </style>
diff --git a/client/src/components/content-blocks/Instruction.vue b/client/src/components/content-blocks/Instruction.vue
index a07b54d8..00f3786c 100644
--- a/client/src/components/content-blocks/Instruction.vue
+++ b/client/src/components/content-blocks/Instruction.vue
@@ -1,50 +1,57 @@
 <template>
-  <div class="instruction" v-if="me.isTeacher">
+  <div
+    class="instruction"
+    v-if="me.isTeacher"
+  >
     <bulb-icon class="instruction__icon" />
-    <a :href="url" class="instruction__link">{{ text }}</a>
+    <a
+      :href="url"
+      class="instruction__link"
+    >{{ text }}</a>
   </div>
 </template>
 
 <script>
-import me from '@/mixins/me';
-const BulbIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/BulbIcon');
+  import me from '@/mixins/me';
+  import {defineAsyncComponent} from 'vue';
+  const BulbIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/BulbIcon'));
 
-export default {
-  props: ['value'],
+  export default {
+    props: ['value'],
 
-  mixins: [me],
+    mixins: [me],
 
-  components: {
-    BulbIcon,
-  },
-
-  computed: {
-    text() {
-      return this.value.text ? this.value.text : 'Anweisungen';
+    components: {
+      BulbIcon
     },
-    url() {
-      return this.value.document ? this.value.document.url : this.value.url;
-    },
-  },
-};
+
+    computed: {
+      text() {
+        return this.value.text ? this.value.text : 'Anweisungen';
+      },
+      url() {
+        return this.value.document ? this.value.document.url : this.value.url;
+      }
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_mixins.scss';
+  @import "@/styles/_mixins.scss";
 
-.instruction {
-  margin-bottom: 1rem;
-  display: flex;
-  align-items: center;
+  .instruction {
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
 
-  &__icon {
-    width: 40px;
-    height: 40px;
-    margin-right: $small-spacing;
+    &__icon {
+      width: 40px;
+      height: 40px;
+      margin-right: $small-spacing;
+    }
+
+    &__link {
+      @include heading-3;
+    }
   }
-
-  &__link {
-    @include heading-3;
-  }
-}
 </style>
diff --git a/client/src/components/content-blocks/LinkBlock.vue b/client/src/components/content-blocks/LinkBlock.vue
index 423d955a..821c0880 100644
--- a/client/src/components/content-blocks/LinkBlock.vue
+++ b/client/src/components/content-blocks/LinkBlock.vue
@@ -1,52 +1,60 @@
 <template>
-  <div :class="{ 'link-block--no-margin': noMargin }" class="link-block">
+  <div
+    :class="{ 'link-block--no-margin': noMargin}"
+    class="link-block"
+  >
     <link-icon class="link-block__icon" />
-    <a :href="href" class="link-block__link" target="_blank">{{ value.text }}</a>
+    <a
+      :href="href"
+      class="link-block__link"
+      target="_blank"
+    >{{ value.text }}</a>
   </div>
 </template>
 
 <script>
-const LinkIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/LinkIcon');
+  import {defineAsyncComponent} from 'vue';
+  const LinkIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/LinkIcon'));
 
-export default {
-  props: {
-    value: Object,
-    noMargin: {
-      default: false,
+  export default {
+    props: {
+      value: Object,
+      noMargin: {
+        default: false
+      }
     },
-  },
 
-  components: {
-    LinkIcon,
-  },
-
-  computed: {
-    href() {
-      const url = this.value.url;
-      return url.startsWith('http') ? this.value.url : `http://${this.value.url}`;
+    components: {
+      LinkIcon
     },
-  },
-};
+
+    computed: {
+      href() {
+        const url = this.value.url;
+        return url.startsWith('http') ? this.value.url : `http://${this.value.url}`;
+      }
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-.link-block {
-  margin-bottom: 30px;
-  display: grid;
-  grid-template-columns: 50px 1fr;
-  align-items: center;
+  .link-block {
+    margin-bottom: 30px;
+    display: grid;
+    grid-template-columns: 50px 1fr;
+    align-items: center;
 
-  &--no-margin {
-    margin-bottom: 0;
-  }
+    &--no-margin {
+      margin-bottom: 0;
+    }
 
-  &__icon {
-    width: 30px;
-    height: 30px;
-  }
+    &__icon {
+      width: 30px;
+      height: 30px;
+    }
 
-  &__link {
-    text-decoration: underline;
+    &__link {
+      text-decoration: underline;
+    }
   }
-}
 </style>
diff --git a/client/src/components/content-blocks/assignment/Assignment.vue b/client/src/components/content-blocks/assignment/Assignment.vue
index f268a07f..6f0453e3 100644
--- a/client/src/components/content-blocks/assignment/Assignment.vue
+++ b/client/src/components/content-blocks/assignment/Assignment.vue
@@ -1,9 +1,19 @@
 <template>
   <!-- eslint-disable vue/no-v-html -->
-  <div :data-scrollto="value.id" class="assignment">
-    <p class="assignment__main-text" data-cy="assignment-main-text" v-html="assignment.assignment" />
+  <div
+    :data-scrollto="value.id"
+    class="assignment"
+  >
+    <p
+      class="assignment__main-text"
+      data-cy="assignment-main-text"
+      v-html="assignment.assignment"
+    />
 
-    <solution :value="solution" v-if="assignment.solution" />
+    <solution
+      :value="solution"
+      v-if="assignment.solution"
+    />
 
     <template v-if="isStudent">
       <submission-form
@@ -23,92 +33,101 @@
         @spellcheck="spellcheck"
       />
 
-      <spell-check :corrections="corrections" :text="submission.text" />
+      <spell-check
+        :corrections="corrections"
+        :text="submission.text"
+      />
 
-      <p class="assignment__feedback" v-if="assignment.submission.submissionFeedback" v-html="feedbackText" />
+      <p
+        class="assignment__feedback"
+        v-if="assignment.submission.submissionFeedback"
+        v-html="feedbackText"
+      />
     </template>
     <template v-if="!isStudent">
-      <router-link :to="{ name: 'submissions', params: { id: assignment.id } }" class="button button--primary">
-        Zu den Ergebnissen
+      <router-link
+        :to="{name: 'submissions', params: { id: assignment.id }}"
+        class="button button--primary"
+      >
+        Zu den
+        Ergebnissen
       </router-link>
     </template>
   </div>
 </template>
 
 <script>
-import { mapActions, mapGetters } from 'vuex';
-import ASSIGNMENT_QUERY from '@/graphql/gql/queries/assignmentQuery.gql';
-import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
-import UPDATE_ASSIGNMENT_MUTATION from '@/graphql/gql/mutations/updateAssignmentMutation.gql';
-import UPDATE_ASSIGNMENT_MUTATION_WITH_SUCCESS from '@/graphql/gql/mutations/updateAssignmentMutationWithSuccess.gql';
-import SPELL_CHECK_MUTATION from '@/graphql/gql/mutations/spellCheck.gql';
-import debounce from 'lodash/debounce';
-import cloneDeep from 'lodash/cloneDeep';
-import { sanitize } from '@/helpers/text';
+  import {mapActions, mapGetters} from 'vuex';
+  import ASSIGNMENT_QUERY from '@/graphql/gql/queries/assignmentQuery.gql';
+  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+  import UPDATE_ASSIGNMENT_MUTATION from '@/graphql/gql/mutations/updateAssignmentMutation.gql';
+  import UPDATE_ASSIGNMENT_MUTATION_WITH_SUCCESS from '@/graphql/gql/mutations/updateAssignmentMutationWithSuccess.gql';
+  import SPELL_CHECK_MUTATION from '@/graphql/gql/mutations/spellCheck.gql';
+  import debounce from 'lodash/debounce';
+  import cloneDeep from 'lodash/cloneDeep';
+  import {sanitize} from '@/helpers/text';
+  import {defineAsyncComponent} from 'vue';
 
-const SubmissionForm = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/assignment/SubmissionForm');
-const Solution = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/Solution');
-const SpellCheck = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/assignment/SpellCheck');
+  const SubmissionForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/SubmissionForm'));
+  const Solution = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution'));
+  const SpellCheck = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/SpellCheck'));
 
-export default {
-  props: ['value'],
+  export default {
+    props: ['value'],
 
-  components: {
-    Solution,
-    SubmissionForm,
-    SpellCheck,
-  },
-
-  data() {
-    return {
-      assignment: {
-        submission: this.initialSubmission(),
-      },
-      me: {
-        permissions: [],
-      },
-      inputType: 'text',
-      unsaved: false,
-      saving: 0,
-      corrections: '',
-      spellcheckLoading: false,
-    };
-  },
-
-  computed: {
-    ...mapGetters(['scrollToAssignmentId']),
-    final() {
-      return !!this.submission && this.submission.final;
+    components: {
+      Solution,
+      SubmissionForm,
+      SpellCheck,
     },
-    submission() {
-      return this.assignment.submission ? this.assignment.submission : {};
-    },
-    isStudent() {
-      return !this.me.permissions.includes('users.can_manage_school_class_content');
-    },
-    solution() {
+
+    data() {
       return {
-        text: this.assignment.solution,
+        assignment: {
+          submission: this.initialSubmission(),
+        },
+        me: {
+          permissions: [],
+        },
+        inputType: 'text',
+        unsaved: false,
+        saving: 0,
+        corrections: '',
+        spellcheckLoading: false,
       };
     },
-    id() {
-      return this.assignment.id ? this.assignment.id.replace(/=/g, '') : '';
-    },
-    feedbackText() {
-      let feedback = this.assignment.submission.submissionFeedback;
-      let sanitizedFeedbackText = sanitize(feedback.text);
-      return `<span class="inline-title">Feedback von ${feedback.teacher.firstName} ${feedback.teacher.lastName}:</span> ${sanitizedFeedbackText}`;
-    },
-  },
 
-  methods: {
-    ...mapActions(['scrollToAssignmentReady']),
-    _save: debounce(function (submission) {
-      this.saving++;
-      this.$apollo
-        .mutate({
+    computed: {
+      ...mapGetters(['scrollToAssignmentId']),
+      final() {
+        return !!this.submission && this.submission.final;
+      },
+      submission() {
+        return this.assignment.submission ? this.assignment.submission : {};
+      },
+      isStudent() {
+        return !this.me.permissions.includes('users.can_manage_school_class_content');
+      },
+      solution() {
+        return {
+          text: this.assignment.solution,
+        };
+      },
+      id() {
+        return this.assignment.id ? this.assignment.id.replace(/=/g, '') : '';
+      },
+      feedbackText() {
+        let feedback = this.assignment.submission.submissionFeedback;
+        let sanitizedFeedbackText = sanitize(feedback.text);
+        return `<span class="inline-title">Feedback von ${feedback.teacher.firstName} ${feedback.teacher.lastName}:</span> ${sanitizedFeedbackText}`;
+      },
+    },
+
+    methods: {
+      ...mapActions(['scrollToAssignmentReady']),
+      _save: debounce(function (submission) {
+        this.saving++;
+        this.$apollo.mutate({
           mutation: UPDATE_ASSIGNMENT_MUTATION_WITH_SUCCESS,
           variables: {
             input: {
@@ -119,14 +138,7 @@ export default {
               },
             },
           },
-          update(
-            store,
-            {
-              data: {
-                updateAssignment: { successful, updatedAssignment },
-              },
-            }
-          ) {
+          update(store, {data: {updateAssignment: {successful, updatedAssignment}}}) {
             try {
               if (successful) {
                 const query = ASSIGNMENT_QUERY;
@@ -137,82 +149,80 @@ export default {
                   submission,
                 });
                 const data = {
-                  assignment,
+                  assignment
                 };
-                store.writeQuery({ query, variables, data });
+                store.writeQuery({query, variables, data});
               }
             } catch (e) {
               console.error(e);
               // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
             }
           },
-        })
-        .then(() => {
+        }).then(() => {
           this.saving--;
           if (this.saving === 0) {
             this.unsaved = false;
           }
         });
-    }, 500),
-    saveInput: function (answer) {
-      // reset corrections on input
-      this.corrections = '';
-      this.unsaved = true;
-      /*
+      }, 500),
+      saveInput: function (answer) {
+        // reset corrections on input
+        this.corrections = '';
+        this.unsaved = true;
+        /*
           We update the assignment on this component, so the changes are reflected on it. The server does not return
           the updated entity, to prevent the UI to update when the user is entering his input
          */
-      this.assignment.submission.text = answer;
-      this._save(this.assignment.submission);
-    },
-    changeDocumentUrl(documentUrl) {
-      this.assignment.submission.document = documentUrl;
-      this._save(this.assignment.submission);
-    },
-    turnIn() {
-      // reset corrections on turn in
-      this.corrections = '';
-      this.$apollo.mutate({
-        mutation: UPDATE_ASSIGNMENT_MUTATION,
-        variables: {
-          input: {
-            assignment: {
-              id: this.assignment.id,
-              answer: this.assignment.submission.text,
-              document: this.assignment.submission.document,
-              final: true,
+        this.assignment.submission.text = answer;
+        this._save(this.assignment.submission);
+      },
+      changeDocumentUrl(documentUrl) {
+        this.assignment.submission.document = documentUrl;
+        this._save(this.assignment.submission);
+      },
+      turnIn() {
+        // reset corrections on turn in
+        this.corrections = '';
+        this.$apollo.mutate({
+          mutation: UPDATE_ASSIGNMENT_MUTATION,
+          variables: {
+            input: {
+              assignment: {
+                id: this.assignment.id,
+                answer: this.assignment.submission.text,
+                document: this.assignment.submission.document,
+                final: true,
+              },
             },
           },
-        },
-      });
-    },
-    reopen() {
-      this.$apollo.mutate({
-        mutation: UPDATE_ASSIGNMENT_MUTATION,
-        variables: {
-          input: {
-            assignment: {
-              id: this.assignment.id,
-              answer: this.assignment.submission.text,
-              document: this.assignment.submission.document,
-              final: false,
+        });
+      },
+      reopen() {
+        this.$apollo.mutate({
+          mutation: UPDATE_ASSIGNMENT_MUTATION,
+          variables: {
+            input: {
+              assignment: {
+                id: this.assignment.id,
+                answer: this.assignment.submission.text,
+                document: this.assignment.submission.document,
+                final: false,
+              },
             },
           },
-        },
-      });
-    },
-    initialSubmission() {
-      return {
-        text: '',
-        document: '',
-        final: false,
-      };
-    },
-    spellcheck() {
-      let self = this;
-      this.spellcheckLoading = true;
-      this.$apollo
-        .mutate({
+        });
+      },
+      initialSubmission() {
+        return {
+          text: '',
+          document: '',
+          final: false,
+        };
+      },
+      spellcheck() {
+        let self = this;
+        this.spellcheckLoading = true;
+        this.$apollo.mutate({
           mutation: SPELL_CHECK_MUTATION,
           variables: {
             input: {
@@ -220,96 +230,90 @@ export default {
               text: this.assignment.submission.text,
             },
           },
-          update(
-            store,
-            {
-              data: {
-                spellCheck: { results },
-              },
-            }
-          ) {
+          update(store, {data: {spellCheck: {results}}}) {
             self.corrections = results;
           },
-        })
-        .then(() => {
+        }).then(() => {
           this.spellcheckLoading = false;
         });
+      },
     },
-  },
 
-  apollo: {
-    assignment: {
-      query: ASSIGNMENT_QUERY,
-      variables() {
-        return {
-          id: this.value.id,
-        };
+    apollo: {
+      assignment: {
+        query: ASSIGNMENT_QUERY,
+        variables() {
+          return {
+            id: this.value.id,
+          };
+        },
+        result(response) {
+          const data = response.data;
+          this.assignment = cloneDeep(data.assignment);
+          this.assignment.submission = Object.assign(this.initialSubmission(), this.assignment.submission);
+          if (this.assignment.id === this.scrollToAssignmentId && 'stale' in response) {
+            this.$nextTick(() => this.scrollToAssignmentReady(true));
+          }
+        },
       },
-      result(response) {
-        const data = response.data;
-        this.assignment = cloneDeep(data.assignment);
-        this.assignment.submission = Object.assign(this.initialSubmission(), this.assignment.submission);
-        if (this.assignment.id === this.scrollToAssignmentId && 'stale' in response) {
-          this.$nextTick(() => this.scrollToAssignmentReady(true));
-        }
+      me: {
+        query: ME_QUERY,
       },
     },
-    me: {
-      query: ME_QUERY,
-    },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
-@import '@/styles/_functions.scss';
-@import '@/styles/_mixins.scss';
+  @import '@/styles/_variables.scss';
+  @import '@/styles/_functions.scss';
+  @import '@/styles/_mixins.scss';
 
-.assignment {
-  margin-bottom: 3rem;
-  position: relative;
+  .assignment {
+    margin-bottom: 3rem;
+    position: relative;
 
-  &__title {
-    font-size: toRem(17px);
-    margin-bottom: 1rem;
-  }
-
-  &__main-text {
-    :deep(ul) {
-      @include list-parent;
+    &__title {
+      font-size: toRem(17px);
+      margin-bottom: 1rem;
     }
 
-    :deep(li) {
-      @include list-child;
+    &__main-text {
+      /deep/ ul{
+        @include list-parent
+      }
+
+      /deep/ li {
+        @include list-child;
+      }
     }
-  }
 
-  &__toggle-input-container {
-    display: flex;
-    margin-bottom: 15px;
-  }
-
-  &__toggle-input {
-    border: 0;
-    font-family: $sans-serif-font-family;
-    background: transparent;
-    font-size: toRem(14px);
-    padding: 5px 0;
-    margin-right: 15px;
-    outline: 0;
-    color: $color-silver-dark;
-    cursor: pointer;
-    border-bottom: 2px solid transparent;
-
-    &--active {
-      border-bottom-color: $color-charcoal-dark;
-      color: $color-charcoal-dark;
+    &__toggle-input-container {
+      display: flex;
+      margin-bottom: 15px;
     }
+
+    &__toggle-input {
+      border: 0;
+      font-family: $sans-serif-font-family;
+      background: transparent;
+      font-size: toRem(14px);
+      padding: 5px 0;
+      margin-right: 15px;
+      outline: 0;
+      color: $color-silver-dark;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+
+      &--active {
+        border-bottom-color: $color-charcoal-dark;
+        color: $color-charcoal-dark;
+      }
+    }
+
+    &__feedback {
+      @include regular-text;
+    }
+
   }
 
-  &__feedback {
-    @include regular-text;
-  }
-}
 </style>
diff --git a/client/src/components/content-blocks/assignment/FinalSubmission.vue b/client/src/components/content-blocks/assignment/FinalSubmission.vue
index dbb8c56b..0cf04327 100644
--- a/client/src/components/content-blocks/assignment/FinalSubmission.vue
+++ b/client/src/components/content-blocks/assignment/FinalSubmission.vue
@@ -1,99 +1,109 @@
 <template>
-  <div class="final-submission" data-cy="final-submission">
-    <document-block :value="{ url: userInput.document }" class="final-submission__document" v-if="userInput.document" />
+  <div
+    class="final-submission"
+    data-cy="final-submission"
+  >
+    <document-block
+      :value="{url: userInput.document}"
+      class="final-submission__document"
+      v-if="userInput.document"
+    />
     <div class="final-submission__explanation">
       <info-icon class="final-submission__explanation-icon" />
       <span class="final-submission__explanation-text">{{ sharedMsg }}</span>
-      <a class="final-submission__reopen" data-cy="final-submission-reopen" v-if="showReopen" @click="$emit('reopen')"
-        >Bearbeiten</a
-      >
+      <a
+        class="final-submission__reopen"
+        data-cy="final-submission-reopen"
+        v-if="showReopen"
+        @click="$emit('reopen')"
+      >Bearbeiten</a>
     </div>
   </div>
 </template>
 
 <script>
-import { newLineToParagraph } from '@/helpers/text';
-const DocumentBlock = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock');
+  import {newLineToParagraph} from '@/helpers/text';
+  import {defineAsyncComponent} from 'vue';
+  const DocumentBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock'));
 
-const InfoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon');
+  const InfoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon'));
 
-export default {
-  props: {
-    userInput: {
-      type: Object,
-      default: () => ({}),
+  export default {
+    props: {
+      userInput: {
+        type: Object,
+        default: () => ({})
+      },
+      showReopen: {
+        type: Boolean,
+        default: true
+      },
+      sharedMsg: {
+        type: String,
+        default: ''
+      }
     },
-    showReopen: {
-      type: Boolean,
-      default: true,
-    },
-    sharedMsg: {
-      type: String,
-      default: '',
-    },
-  },
 
-  components: {
-    InfoIcon,
-    DocumentBlock,
-  },
-
-  computed: {
-    text() {
-      return newLineToParagraph(this.userInput.text);
+    components: {
+      InfoIcon,
+      DocumentBlock,
     },
-  },
-};
+
+    computed: {
+      text() {
+        return newLineToParagraph(this.userInput.text);
+      }
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.final-submission {
-  &__text {
-    background-color: $color-white;
-    @include input-box-shadow;
-    border-radius: $input-border-radius;
-    padding: 15px;
-    font-size: toRem(17px);
-    font-family: $sans-serif-font-family;
-    margin-bottom: 20px;
-    font-weight: $font-weight-regular;
+  .final-submission {
+    &__text {
+      background-color: $color-white;
+      @include input-box-shadow;
+      border-radius: $input-border-radius;
+      padding: 15px;
+      font-size: toRem(17px);
+      font-family: $sans-serif-font-family;
+      margin-bottom: 20px;
+      font-weight: $font-weight-regular;
 
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    hyphens: auto;
-    word-break: break-word;
+      overflow-wrap: break-word;
+      word-wrap: break-word;
+      hyphens: auto;
+      word-break: break-word;
+    }
+
+    &__document {
+      margin-bottom: $small-spacing;
+    }
+
+    &__explanation {
+      display: flex;
+      align-items: center;
+    }
+
+    &__explanation-icon {
+      width: 40px;
+      height: 40px;
+      fill: $color-brand;
+      margin-right: 8px;
+    }
+
+    &__explanation-text {
+      color: $color-brand;
+      font-family: $sans-serif-font-family;
+      font-weight: $font-weight-regular;
+      margin-right: $medium-spacing;
+    }
+
+    &__reopen {
+      @include small-text;
+      cursor: pointer;
+      color: $color-charcoal-light;
+    }
   }
-
-  &__document {
-    margin-bottom: $small-spacing;
-  }
-
-  &__explanation {
-    display: flex;
-    align-items: center;
-  }
-
-  &__explanation-icon {
-    width: 40px;
-    height: 40px;
-    fill: $color-brand;
-    margin-right: 8px;
-  }
-
-  &__explanation-text {
-    color: $color-brand;
-    font-family: $sans-serif-font-family;
-    font-weight: $font-weight-regular;
-    margin-right: $medium-spacing;
-  }
-
-  &__reopen {
-    @include small-text;
-    cursor: pointer;
-    color: $color-charcoal-light;
-  }
-}
 </style>
diff --git a/client/src/components/content-blocks/assignment/SubmissionForm.vue b/client/src/components/content-blocks/assignment/SubmissionForm.vue
index 621296df..e5c89470 100644
--- a/client/src/components/content-blocks/assignment/SubmissionForm.vue
+++ b/client/src/components/content-blocks/assignment/SubmissionForm.vue
@@ -10,7 +10,10 @@
       />
     </div>
 
-    <div class="submission-form-container__actions" v-if="!isFinalOrReadOnly">
+    <div
+      class="submission-form-container__actions"
+      v-if="!isFinalOrReadOnly"
+    >
       <button
         class="submission-form-container__submit button button--primary button--white-bg"
         data-cy="submission-form-submit"
@@ -26,7 +29,11 @@
       >
         {{ spellcheckText }}
       </button>
-      <file-upload :document="userInput.document" v-if="allowsDocuments" @change-document-url="changeDocumentUrl" />
+      <file-upload
+        :document="userInput.document"
+        v-if="allowsDocuments"
+        @change-document-url="changeDocumentUrl"
+      />
       <slot />
     </div>
 
@@ -41,112 +48,116 @@
 </template>
 
 <script>
-const SubmissionInput = () => import('@/components/content-blocks/assignment/SubmissionInput.vue');
-const FinalSubmission = () => import('@/components/content-blocks/assignment/FinalSubmission.vue');
-const FileUpload = () => import('@/components/ui/file-upload/FileUpload.vue');
+  import {defineAsyncComponent} from 'vue';
+  const SubmissionInput = defineAsyncComponent(() => import('@/components/content-blocks/assignment/SubmissionInput'));
+  const FinalSubmission = defineAsyncComponent(() => import('@/components/content-blocks/assignment/FinalSubmission'));
+  const FileUpload = defineAsyncComponent(() => import('@/components/ui/file-upload/FileUpload'));
 
-export default {
-  props: {
-    userInput: Object,
-    saved: Boolean,
-    placeholder: String,
-    action: String,
-    reopen: Function,
-    document: String,
-    readOnly: {
-      type: Boolean,
-      default: false,
-    },
-    spellcheck: {
-      type: Boolean,
-      default: false,
-    },
-    spellcheckLoading: {
-      type: Boolean,
-      default: false,
-    },
-    sharedMsg: String,
-  },
 
-  components: {
-    FileUpload,
-    SubmissionInput,
-    FinalSubmission,
-  },
+  export default {
+    props: {
+      userInput: Object,
+      saved: Boolean,
+      placeholder: String,
+      action: String,
+      reopen: Function,
+      document: String,
+      readOnly: {
+        type: Boolean,
+        default: false,
+      },
+      spellcheck: {
+        type: Boolean,
+        default: false,
+      },
+      spellcheckLoading: {
+        type: Boolean,
+        default: false,
+      },
+      sharedMsg: String,
+    },
 
-  computed: {
-    final() {
-      return !!this.userInput && this.userInput.final;
+    components: {
+      FileUpload,
+      SubmissionInput,
+      FinalSubmission,
     },
-    isFinalOrReadOnly() {
-      return this.final || this.readOnly;
-    },
-    allowsDocuments() {
-      return 'document' in this.userInput;
-    },
-    showSpellcheckButton() {
-      return this.spellcheck && process.env.VUE_APP_ENABLE_SPELLCHECK;
-    },
-    spellcheckText() {
-      if (!this.spellcheckLoading) {
-        return 'Rechtschreibung prüfen';
-      } else {
-        return 'Wird geprüft...';
-      }
-    },
-  },
 
-  methods: {
-    reopenSubmission() {
-      this.$emit('reopen');
+    computed: {
+      final() {
+        return !!this.userInput && this.userInput.final;
+      },
+      isFinalOrReadOnly() {
+        return this.final || this.readOnly;
+      },
+      allowsDocuments() {
+        return 'document' in this.userInput;
+      },
+      showSpellcheckButton() {
+        return this.spellcheck && process.env.VUE_APP_ENABLE_SPELLCHECK;
+      },
+      spellcheckText() {
+        if (!this.spellcheckLoading) {
+          return 'Rechtschreibung prüfen';
+        } else {
+          return 'Wird geprüft...';
+        }
+      },
     },
-    saveInput(input) {
-      this.$emit('saveInput', input);
+
+    methods: {
+      reopenSubmission() {
+        this.$emit('reopen');
+      },
+      saveInput(input) {
+        this.$emit('saveInput', input);
+      },
+      changeDocumentUrl(documentUrl) {
+        this.$emit('changeDocumentUrl', documentUrl);
+      },
     },
-    changeDocumentUrl(documentUrl) {
-      this.$emit('changeDocumentUrl', documentUrl);
-    },
-  },
-};
+
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.submission-form-container {
-  @include form-with-border;
+  .submission-form-container {
+    @include form-with-border;
 
-  margin-bottom: $medium-spacing;
+    margin-bottom: $medium-spacing;
 
-  display: none;
-  @include desktop {
-    display: block;
-  }
+    display: none;
+    @include desktop {
+      display: block;
+    }
 
-  &__inputs {
-    margin-bottom: 12px;
-  }
+    &__inputs {
+      margin-bottom: 12px;
+    }
 
-  &__submit {
-    margin-right: $medium-spacing;
-  }
+    &__submit {
+      margin-right: $medium-spacing;
+    }
 
-  &__actions {
-    display: flex;
-    align-items: center;
-  }
+    &__actions {
+      display: flex;
+      align-items: center;
+    }
 
-  &__document {
-    &:hover {
-      cursor: pointer;
+    &__document {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    &__spellcheck {
+      /* so the button does not change size when changing the text */
+      width: 235px;
+      text-align: center;
+      display: inline-block;
     }
   }
 
-  &__spellcheck {
-    /* so the button does not change size when changing the text */
-    width: 235px;
-    text-align: center;
-    display: inline-block;
-  }
-}
 </style>
diff --git a/client/src/components/content-blocks/assignment/SubmissionInput.vue b/client/src/components/content-blocks/assignment/SubmissionInput.vue
index 3176fa49..867480bf 100644
--- a/client/src/components/content-blocks/assignment/SubmissionInput.vue
+++ b/client/src/components/content-blocks/assignment/SubmissionInput.vue
@@ -4,68 +4,75 @@
       :placeholder="placeholder"
       :readonly="readonly"
       :value="inputText"
-      :class="{ 'submission-form__textarea--readonly': readonly }"
+      :class="{'submission-form__textarea--readonly': readonly}"
       data-cy="submission-textarea"
       rows="1"
       class="submission-form__textarea"
       v-auto-grow
       @input="$emit('input', $event.target.value)"
     />
-    <div class="submission-form__save-status submission-form__save-status--saved" v-if="saved">
+    <div
+      class="submission-form__save-status submission-form__save-status--saved"
+      v-if="saved"
+    >
       <tick-circle-icon class="submission-form__save-status-icon" />
     </div>
-    <div class="submission-form__save-status submission-form__save-status--unsaved" v-if="!saved">
+    <div
+      class="submission-form__save-status submission-form__save-status--unsaved"
+      v-if="!saved"
+    >
       <loading-icon class="submission-form__save-status-icon submission-form__saving-icon" />
     </div>
   </div>
 </template>
 
 <script>
-const TickCircleIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TickCircleIcon');
-const LoadingIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/LoadingIcon');
+  import {defineAsyncComponent} from 'vue';
+  const TickCircleIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TickCircleIcon'));
+  const LoadingIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/LoadingIcon'));
 
-export default {
-  props: {
-    inputText: String,
-    saved: Boolean,
-    readonly: Boolean,
-    placeholder: {
-      type: String,
-      default: 'Ergebnis erfassen',
+  export default {
+    props: {
+      inputText: String,
+      saved: Boolean,
+      readonly: Boolean,
+      placeholder: {
+        type: String,
+        default: 'Ergebnis erfassen'
+      }
     },
-  },
-  components: {
-    TickCircleIcon,
-    LoadingIcon,
-  },
-};
+    components: {
+      TickCircleIcon,
+      LoadingIcon
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.submission-form {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  .submission-form {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
 
-  &__textarea {
-    @include borderless-textarea;
+    &__textarea {
+      @include borderless-textarea;
+    }
+
+    &__save-status {
+      position: relative;
+      align-items: center;
+    }
+
+    &__save-status-icon {
+      width: 22px;
+      height: 22px;
+      fill: $color-silver-dark;
+    }
+
+    &__saving-icon {
+      @include spin;
+    }
   }
-
-  &__save-status {
-    position: relative;
-    align-items: center;
-  }
-
-  &__save-status-icon {
-    width: 22px;
-    height: 22px;
-    fill: $color-silver-dark;
-  }
-
-  &__saving-icon {
-    @include spin;
-  }
-}
 </style>
diff --git a/client/src/components/content-forms/AssignmentForm.vue b/client/src/components/content-forms/AssignmentForm.vue
index cac3003c..a3719f1e 100644
--- a/client/src/components/content-forms/AssignmentForm.vue
+++ b/client/src/components/content-forms/AssignmentForm.vue
@@ -5,7 +5,7 @@
       class="assignment-form__title skillbox-input"
       placeholder="Aufgabentitel"
       @input="$emit('assignment-change-title', $event.target.value, index)"
-    />
+    >
     <textarea
       :value="value.assignment"
       class="assignment-form__exercise-text skillbox-textarea"
@@ -20,43 +20,44 @@
 </template>
 
 <script>
-const InfoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon');
+  import {defineAsyncComponent} from 'vue';
+  const InfoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon'));
 
-export default {
-  props: ['value', 'index'],
+  export default {
+    props: ['value', 'index'],
 
-  components: {
-    InfoIcon,
-  },
-};
+    components: {
+      InfoIcon
+    }
+  };
 </script>
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.assignment-form {
-  display: grid;
-  grid-auto-rows: auto;
-  grid-row-gap: 13px;
-  grid-template-columns: 40px 1fr;
-  grid-column-gap: 16px;
-  align-items: center;
+  .assignment-form {
+    display: grid;
+    grid-auto-rows: auto;
+    grid-row-gap: 13px;
+    grid-template-columns: 40px 1fr;
+    grid-column-gap: 16px;
+    align-items: center;
 
-  &__title {
-    width: $modal-input-width;
-    grid-column: span 2;
+    &__title {
+      width: $modal-input-width;
+      grid-column: span 2;
+    }
+
+    &__exercise-text {
+      width: $modal-input-width;
+      grid-column: span 2;
+    }
+
+    &__help-icon {
+      width: 40px;
+      height: 40px;
+    }
+
+    &__help-description {
+    }
   }
-
-  &__exercise-text {
-    width: $modal-input-width;
-    grid-column: span 2;
-  }
-
-  &__help-icon {
-    width: 40px;
-    height: 40px;
-  }
-
-  &__help-description {
-  }
-}
 </style>
diff --git a/client/src/components/content-forms/DocumentForm.vue b/client/src/components/content-forms/DocumentForm.vue
index 4272a335..745edb3d 100644
--- a/client/src/components/content-forms/DocumentForm.vue
+++ b/client/src/components/content-forms/DocumentForm.vue
@@ -1,119 +1,133 @@
 <template>
-  <div class="document-form" ref="documentform">
-    <div v-if="!value.url" ref="uploadcare-panel" />
-    <div class="document-form__spinner" v-if="loading">
+  <div
+    class="document-form"
+    ref="documentform"
+  >
+    <div
+      v-if="!value.url"
+      ref="uploadcare-panel"
+    />
+    <div
+      class="document-form__spinner"
+      v-if="loading"
+    >
       <loading-icon class="document-form__loading-icon" />
     </div>
-    <div class="document-form__uploaded" v-if="value.url">
+    <div
+      class="document-form__uploaded"
+      v-if="value.url"
+    >
       <document-icon class="document-form__icon" />
-      <a :href="previewUrl" class="document-form__link" target="_blank">{{ previewLink }}</a>
+      <a
+        :href="previewUrl"
+        class="document-form__link"
+        target="_blank"
+      >{{ previewLink }}</a>
     </div>
   </div>
 </template>
 
 <script>
-import { uploadcare } from '@/helpers/uploadcare';
-import LoadingIcon from '@/components/icons/LoadingIcon';
+  import {uploadcare} from '@/helpers/uploadcare';
+  import LoadingIcon from '@/components/icons/LoadingIcon';
+  import {defineAsyncComponent} from 'vue';
 
-const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
+  const DocumentIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon'));
 
-export default {
-  props: ['value', 'index'],
+  export default {
+    props: ['value', 'index'],
 
-  components: {
-    LoadingIcon,
-    DocumentIcon,
-  },
-
-  data() {
-    return {
-      loading: false,
-    };
-  },
-
-  computed: {
-    previewUrl() {
-      if (this.value && this.value.url) {
-        return this.value.url;
-      }
-      return null;
+    components: {
+      LoadingIcon,
+      DocumentIcon,
     },
-    previewLink() {
-      if (this.value && this.value.url) {
-        const parts = this.value.url.split('/');
-        return parts[parts.length - 1];
-      }
-      return '';
-    },
-  },
 
-  mounted() {
-    uploadcare(
-      this,
-      (url) => {
+    data() {
+      return {
+        loading: false,
+      };
+    },
+
+    computed: {
+      previewUrl() {
+        if (this.value && this.value.url) {
+          return this.value.url;
+        }
+        return null;
+      },
+      previewLink() {
+        if (this.value && this.value.url) {
+          const parts = this.value.url.split('/');
+          return parts[parts.length - 1];
+        }
+        return '';
+      },
+    },
+
+    mounted() {
+      uploadcare(this, url => {
         this.$emit('change-url', url, this.index);
         this.loading = false;
-      },
-      () => {
+      }, () => {
         this.loading = true;
-      }
-    );
-  },
-};
+
+      });
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.document-form {
-  &__uploaded {
-    display: flex;
-    align-items: center;
-  }
-
-  &__link {
-    text-decoration: underline;
-  }
-
-  &__spinner {
-    width: 100%;
-    height: 150px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__loading-icon {
-    @include spin;
-    fill: $color-silver-dark;
-  }
-
-  &__icon {
-    width: 30px;
-    height: 30px;
-    margin-right: $small-spacing;
-  }
-
-  &__file-input {
-    width: 0.1px;
-    height: 0.1px;
-    overflow: hidden;
-    opacity: 0;
-    position: absolute;
-    z-index: -1;
-
-    & + label {
-      cursor: pointer;
-      background-color: $color-silver-light;
-      height: 150px;
+  .document-form {
+    &__uploaded {
       display: flex;
-      width: 100%;
-      justify-content: center;
       align-items: center;
-      font-family: $sans-serif-font-family;
-      font-weight: $font-weight-regular;
+    }
+
+    &__link {
       text-decoration: underline;
     }
+
+    &__spinner {
+      width: 100%;
+      height: 150px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &__loading-icon {
+      @include spin;
+      fill: $color-silver-dark;
+    }
+
+    &__icon {
+      width: 30px;
+      height: 30px;
+      margin-right: $small-spacing;
+    }
+
+    &__file-input {
+      width: 0.1px;
+      height: 0.1px;
+      overflow: hidden;
+      opacity: 0;
+      position: absolute;
+      z-index: -1;
+
+      & + label {
+        cursor: pointer;
+        background-color: $color-silver-light;
+        height: 150px;
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+        font-family: $sans-serif-font-family;
+        font-weight: $font-weight-regular;
+        text-decoration: underline;
+      }
+    }
   }
-}
 </style>
diff --git a/client/src/components/content-forms/VideoForm.vue b/client/src/components/content-forms/VideoForm.vue
index 8a1e02bf..82149346 100644
--- a/client/src/components/content-forms/VideoForm.vue
+++ b/client/src/components/content-forms/VideoForm.vue
@@ -1,11 +1,21 @@
 <template>
   <div>
-    <div class="video-form" v-if="!isVimeo && !isYoutube && !isSrf">
+    <div
+      class="video-form"
+      v-if="!isVimeo && !isYoutube && !isSrf"
+    >
       <info-icon class="video-form__help-icon help-text__icon" />
       <p class="video-form__help-description help-text__description">
-        Sie können Videos auf
-        <a class="video-form__platform-link help-text__link" href="https://youtube.com/" target="_blank">Youtube</a>
-        oder <a class="video-form__platform-link help-text__link" href="https://vimeo.com/" target="_blank">Vimeo</a>
+        Sie können Videos auf <a
+          class="video-form__platform-link help-text__link"
+          href="https://youtube.com/"
+          target="_blank"
+        >Youtube</a>
+        oder <a
+          class="video-form__platform-link help-text__link"
+          href="https://vimeo.com/"
+          target="_blank"
+        >Vimeo</a>
         hochladen und anschliessen einen Link hier einfügen.
       </p>
 
@@ -14,7 +24,7 @@
         class="video-form__video-link skillbox-input"
         placeholder="Bsp: https://www.youtube.com/watch?v=dQw4w9WgXcQ"
         @input="$emit('change-url', $event.target.value, index)"
-      />
+      >
     </div>
 
     <div v-if="isYoutube">
@@ -30,64 +40,67 @@
 </template>
 
 <script>
-import YoutubeEmbed from '@/components/videos/YoutubeEmbed';
-import VimeoEmbed from '@/components/videos/VimeoEmbed';
-import SrfEmbed from '@/components/videos/SrfEmbed';
-import { isVimeoUrl, isYoutubeUrl, isSrfUrl } from '@/helpers/video';
-const InfoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon');
+  import YoutubeEmbed from '@/components/videos/YoutubeEmbed';
+  import VimeoEmbed from '@/components/videos/VimeoEmbed';
+  import SrfEmbed from '@/components/videos/SrfEmbed';
+  import {isVimeoUrl, isYoutubeUrl, isSrfUrl} from '@/helpers/video';
+  import {defineAsyncComponent} from 'vue';
+  const InfoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon'));
 
-export default {
-  props: ['value', 'index'],
+  export default {
+    props: ['value', 'index'],
 
-  components: {
-    InfoIcon,
-    YoutubeEmbed,
-    VimeoEmbed,
-    SrfEmbed,
-  },
+    components: {
+      InfoIcon,
+      YoutubeEmbed,
+      VimeoEmbed,
+      SrfEmbed
+    },
 
-  computed: {
-    isYoutube() {
-      return isYoutubeUrl(this.value.url);
-    },
-    isVimeo() {
-      return isVimeoUrl(this.value.url);
-    },
-    isSrf() {
-      return isSrfUrl(this.value.url);
-    },
-  },
-};
+    computed: {
+      isYoutube() {
+        return isYoutubeUrl(this.value.url);
+      },
+      isVimeo() {
+        return isVimeoUrl(this.value.url);
+      },
+      isSrf() {
+        return isSrfUrl(this.value.url);
+      }
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
-@import '@/styles/_functions.scss';
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
 
-.video-form {
-  display: grid;
-  grid-auto-rows: auto;
-  grid-template-columns: 40px 1fr;
-  grid-column-gap: 16px;
-  grid-row-gap: 20px;
-  align-items: center;
+  .video-form {
+    display: grid;
+    grid-auto-rows: auto;
+    grid-template-columns: 40px 1fr;
+    grid-column-gap: 16px;
+    grid-row-gap: 20px;
+    align-items: center;
 
-  &__help-icon {
+    &__help-icon {
+
+    }
+
+    &__help-description {
+
+    }
+
+    &__platform-link {
+      font-family: $sans-serif-font-family;
+      text-decoration: underline;
+      font-weight: $font-weight-regular;
+      font-size: toRem(17px);
+    }
+
+    &__video-link {
+      grid-column: 1 / span 2;
+      width: $modal-input-width
+    }
   }
-
-  &__help-description {
-  }
-
-  &__platform-link {
-    font-family: $sans-serif-font-family;
-    text-decoration: underline;
-    font-weight: $font-weight-regular;
-    font-size: toRem(17px);
-  }
-
-  &__video-link {
-    grid-column: 1 / span 2;
-    width: $modal-input-width;
-  }
-}
 </style>
diff --git a/client/src/components/instruments/FilterEntry.vue b/client/src/components/instruments/FilterEntry.vue
index da29c1f9..5cee2075 100644
--- a/client/src/components/instruments/FilterEntry.vue
+++ b/client/src/components/instruments/FilterEntry.vue
@@ -1,164 +1,176 @@
 <template>
-  <a :class="typeClass" class="filter-entry" data-cy="filter-entry" :style="categoryStyle">
+  <a
+    :class="typeClass"
+    class="filter-entry"
+    data-cy="filter-entry"
+    :style="categoryStyle"
+  >
     <span class="filter-entry__text">{{ text }}</span>
-    <span :style="activeStyle" class="filter-entry__icon-wrapper">
-      <chevron-right :style="{ fill: category.foreground }" class="filter-entry__icon" />
+    <span
+      :style="activeStyle"
+      class="filter-entry__icon-wrapper"
+    >
+      <chevron-right
+        :style="{fill: category.foreground}"
+        class="filter-entry__icon"
+      />
     </span>
+
   </a>
 </template>
 
 <script>
-import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
+  import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
+  import {defineAsyncComponent} from 'vue';
+  const ChevronRight = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronRight'));
 
-const ChevronRight = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronRight');
-
-export default {
-  props: {
-    text: {
-      type: String,
-      required: true,
-    },
-    id: {
-      type: String,
-      default: '',
-    },
-    isCategory: {
-      type: Boolean,
-      default: false,
-    },
-    category: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  components: {
-    ChevronRight,
-  },
-
-  apollo: {
-    instrumentFilter: {
-      query: INSTRUMENT_FILTER_QUERY,
-    },
-  },
-
-  data() {
-    return {
-      instrumentFilter: {
-        currentFilter: '',
+  export default {
+    props: {
+      text: {
+        type: String,
+        required: true,
       },
-    };
-  },
+      id: {
+        type: String,
+        default: '',
+      },
+      isCategory: {
+        type: Boolean,
+        default: false,
+      },
+      category: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
 
-  computed: {
-    isActive() {
-      if (!this.instrumentFilter.currentFilter) {
-        return this.id === '';
-      }
-      // eslint-disable-next-line
-      const [_, identifier] = this.instrumentFilter.currentFilter.split(':');
-      return this.id === identifier;
+    components: {
+      ChevronRight,
     },
-    // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
-    activeStyle() {
-      if (this.isActive) {
-        return {
-          backgroundColor: this.category.background,
-        };
-      }
-      return {};
+
+    apollo: {
+      instrumentFilter: {
+        query: INSTRUMENT_FILTER_QUERY,
+      },
     },
-    // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
-    categoryStyle() {
-      if (this.isCategory) {
-        return {
-          color: this.category.foreground,
-        };
-      }
-      return {};
-    },
-    // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
-    typeClass() {
+
+    data() {
       return {
-        'filter-entry--active': this.isActive,
-        'filter-entry--category': this.isCategory,
+        instrumentFilter: {
+          currentFilter: '',
+        },
       };
     },
-  },
-};
+
+    computed: {
+      isActive() {
+        if (!this.instrumentFilter.currentFilter) {
+          return this.id === '';
+        }
+        // eslint-disable-next-line
+        const [_, identifier] = this.instrumentFilter.currentFilter.split(':');
+        return this.id === identifier;
+      },
+      // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
+      activeStyle() {
+        if (this.isActive) {
+          return {
+            backgroundColor: this.category.background,
+          };
+        }
+        return {};
+      },
+      // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
+      categoryStyle() {
+        if (this.isCategory) {
+          return {
+            color: this.category.foreground,
+          };
+        }
+        return {};
+      },
+      // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
+      typeClass() {
+        return {
+          'filter-entry--active': this.isActive,
+          'filter-entry--category': this.isCategory,
+        };
+      },
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.filter-entry {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-
-  &__text {
-    @include sub-heading;
-    line-height: 1.5;
-    color: inherit;
-  }
-
-  &__icon-wrapper {
+  .filter-entry {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    justify-content: center;
-    height: 20px;
-    width: 20px;
-    border-radius: 10px;
-  }
+    cursor: pointer;
 
-  &__icon {
-    width: 10px;
-    height: 10px;
-  }
-
-  $root: &;
-
-  @mixin filter-block($color) {
-    &#{$root}--category {
-      color: $color;
+    &__text {
+      @include sub-heading;
+      line-height: 1.5;
+      color: inherit;
     }
 
-    &#{$root}--active {
-      #{$root}__icon-wrapper {
-        background-color: $color;
+    &__icon-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 20px;
+      width: 20px;
+      border-radius: 10px;
+    }
+
+    &__icon {
+      width: 10px;
+      height: 10px;
+    }
+
+    $root: &;
+
+    @mixin filter-block($color) {
+      &#{$root}--category {
+        color: $color;
+      }
+
+      &#{$root}--active {
+        #{$root}__icon-wrapper {
+          background-color: $color;
+        }
+      }
+
+      #{$root}__icon {
+        fill: $color;
       }
     }
 
-    #{$root}__icon {
-      fill: $color;
-    }
-  }
-
-  &--language-communication {
-    @include filter-block($color-accent-1-dark);
-  }
-
-  &--society {
-    @include filter-block($color-accent-2-dark);
-  }
-
-  &--interdisciplinary {
-    @include filter-block($color-accent-4-dark);
-  }
-
-  &--active {
-    #{$root}__text {
-      font-weight: 600;
+    &--language-communication {
+      @include filter-block($color-accent-1-dark);
     }
 
-    #{$root}__icon-wrapper {
-      background-color: black;
+    &--society {
+      @include filter-block($color-accent-2-dark);
     }
 
-    #{$root}__icon {
-      fill: white;
+    &--interdisciplinary {
+      @include filter-block($color-accent-4-dark);
+    }
+
+    &--active {
+      #{$root}__text {
+        font-weight: 600;
+      }
+
+      #{$root}__icon-wrapper {
+        background-color: black;
+      }
+
+      #{$root}__icon {
+        fill: white;
+      }
     }
   }
-}
 </style>
diff --git a/client/src/components/modals/index.js b/client/src/components/modals/index.js
index 48229394..33ffa499 100644
--- a/client/src/components/modals/index.js
+++ b/client/src/components/modals/index.js
@@ -1,11 +1,12 @@
-const Modal = () => import(/* webpackChunkName: "modals" */ '@/components/Modal');
-const FullscreenImage = () => import(/* webpackChunkName: "modals" */ '@/components/FullscreenImage');
-const FullscreenInfographic = () => import(/* webpackChunkName: "modals" */ '@/components/FullscreenInfographic');
-const FullscreenVideo = () => import(/* webpackChunkName: "modals" */ '@/components/FullscreenVideo');
-const DeactivatePerson = () => import(/* webpackChunkName: "modals" */ '@/components/profile/DeactivatePerson');
-const SnapshotCreated = () => import(/* webpackChunkName: "modals" */ '@/components/modules/SnapshotCreated');
-const ChangeVisibility = () => import(/* webpackChunkName: "modals" */ '@/components/rooms/ChangeVisibility');
-const Confirm = () => import(/* webpackChunkName: "modals" */ '@/components/modals/Confirm');
+import {defineAsyncComponent} from 'vue';
+const Modal = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/Modal'));
+const FullscreenImage = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/FullscreenImage'));
+const FullscreenInfographic = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/FullscreenInfographic'));
+const FullscreenVideo = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/FullscreenVideo'));
+const DeactivatePerson = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/profile/DeactivatePerson'));
+const SnapshotCreated = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/modules/SnapshotCreated'));
+const ChangeVisibility = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/rooms/ChangeVisibility'));
+const Confirm = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/modals/Confirm'));
 
 export default {
   Modal,
diff --git a/client/src/components/notes/BookmarkActions.vue b/client/src/components/notes/BookmarkActions.vue
index e2db25e3..7e385097 100644
--- a/client/src/components/notes/BookmarkActions.vue
+++ b/client/src/components/notes/BookmarkActions.vue
@@ -1,7 +1,10 @@
 <template>
-  <div class="bookmark-actions" v-if="!editMode">
+  <div
+    class="bookmark-actions"
+    v-if="!editMode"
+  >
     <a
-      :class="{ 'bookmark-actions__action--bookmarked': bookmarked }"
+      :class="{'bookmark-actions__action--bookmarked': bookmarked}"
       class="bookmark-actions__action bookmark-actions__bookmark"
       data-cy="bookmark-action"
       @click="$emit('bookmark')"
@@ -29,73 +32,74 @@
 </template>
 
 <script>
-const BookmarkIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/BookmarkIcon');
-const AddNoteIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddNoteIcon');
-const NoteIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/NoteIcon');
+  import {defineAsyncComponent} from 'vue';
+  const BookmarkIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/BookmarkIcon'));
+  const AddNoteIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/AddNoteIcon'));
+  const NoteIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/NoteIcon'));
 
-export default {
-  props: {
-    bookmarked: {
-      type: Boolean,
-      default: false,
+  export default {
+    props: {
+      bookmarked: {
+        type: Boolean,
+        default: false
+      },
+      note: {
+        type: [Object, Boolean],
+        default: false
+      },
+      editMode: {
+        type: Boolean,
+        default: false
+      }
     },
-    note: {
-      type: [Object, Boolean],
-      default: false,
+    components: {
+      BookmarkIcon,
+      AddNoteIcon,
+      NoteIcon
     },
-    editMode: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: {
-    BookmarkIcon,
-    AddNoteIcon,
-    NoteIcon,
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.bookmark-actions {
-  height: 100%;
-  min-height: 60px;
+  .bookmark-actions {
+    height: 100%;
+    min-height: 60px;
 
-  padding: 0 2 * $large-spacing;
-  position: absolute;
-  right: -5 * $large-spacing;
+    padding: 0 2*$large-spacing;
+    position: absolute;
+    right: -5*$large-spacing;
 
-  display: none;
+    display: none;
 
-  @include desktop {
-    display: flex;
-  }
+    @include desktop {
+      display: flex;
+    }
 
-  flex-direction: column;
-  align-content: center;
+    flex-direction: column;
+    align-content: center;
 
-  &__action {
-    opacity: 0;
-    transition: opacity 0.3s;
-    cursor: pointer;
-    width: 26px;
-    display: flex;
-    justify-content: center;
+    &__action {
+      opacity: 0;
+      transition: opacity 0.3s;
+      cursor: pointer;
+      width: 26px;
+      display: flex;
+      justify-content: center;
 
-    &--bookmarked,
-    &--noted {
-      opacity: 1;
+      &--bookmarked, &--noted {
+        opacity: 1;
+      }
+    }
+
+    $parent: &;
+
+    &:hover {
+      #{$parent}__action {
+        opacity: 1;
+      }
     }
   }
 
-  $parent: &;
-
-  &:hover {
-    #{$parent}__action {
-      opacity: 1;
-    }
-  }
-}
 </style>
diff --git a/client/src/components/objective-groups/ObjectiveForm.vue b/client/src/components/objective-groups/ObjectiveForm.vue
index c8e375f7..d27361c1 100644
--- a/client/src/components/objective-groups/ObjectiveForm.vue
+++ b/client/src/components/objective-groups/ObjectiveForm.vue
@@ -6,36 +6,40 @@
       placeholder="Lernziel erfassen..."
       @input="$emit('input', $event)"
     />
-    <a class="icon-button" @click="$emit('delete')">
+    <a
+      class="icon-button"
+      @click="$emit('delete')"
+    >
       <trash-icon class="icon-button__icon icon-button__icon--subtle" />
     </a>
   </div>
 </template>
 
 <script>
-import ModalInput from '@/components/ModalInput';
-const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
+  import ModalInput from '@/components/ModalInput';
+  import {defineAsyncComponent} from 'vue';
+  const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon'));
 
-export default {
-  props: ['objective'],
+  export default {
+    props: ['objective'],
 
-  components: {
-    ModalInput,
-    TrashIcon,
-  },
-};
+    components: {
+      ModalInput,
+      TrashIcon
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
+  @import "@/styles/_variables.scss";
 
-.objective-form {
-  display: grid;
-  grid-template-columns: 1fr 50px;
-  margin-bottom: 10px;
+  .objective-form {
+    display: grid;
+    grid-template-columns: 1fr 50px;
+    margin-bottom: 10px;
 
-  &__input {
-    width: $modal-input-width;
+    &__input {
+      width: $modal-input-width;
+    }
   }
-}
 </style>
diff --git a/client/src/components/portfolio/AddProjectEntry.vue b/client/src/components/portfolio/AddProjectEntry.vue
index 842b65ee..ca308b73 100644
--- a/client/src/components/portfolio/AddProjectEntry.vue
+++ b/client/src/components/portfolio/AddProjectEntry.vue
@@ -1,45 +1,49 @@
 <template>
-  <a class="add-project-entry" @click="addProjectEntry">
+  <a
+    class="add-project-entry"
+    @click="addProjectEntry"
+  >
     <plus-icon class="add-project-entry__icon" />
     <span class="add-project-entry__text">Beitrag erfassen</span>
   </a>
 </template>
 
 <script>
-const PlusIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/PlusIcon');
-export default {
-  props: ['project'],
-  components: { PlusIcon },
+  import {defineAsyncComponent} from 'vue';
+  const PlusIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/PlusIcon'));
+  export default {
+    props: ['project'],
+    components: {PlusIcon},
 
-  methods: {
-    addProjectEntry() {
-      this.$store.dispatch('addProjectEntry', this.project);
-    },
-  },
-};
+    methods: {
+      addProjectEntry() {
+        this.$store.dispatch('addProjectEntry', this.project);
+      }
+    }
+  };
 </script>
 
 <style lang="scss" scoped>
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.add-project-entry {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid $color-brand;
-  border-radius: $default-border-radius;
-  cursor: pointer;
+  .add-project-entry {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid $color-brand;
+    border-radius: $default-border-radius;
+    cursor: pointer;
 
-  &__icon {
-    width: 20px;
-    height: 20px;
-    fill: $color-brand;
-    margin-right: $small-spacing;
+    &__icon {
+      width: 20px;
+      height: 20px;
+      fill: $color-brand;
+      margin-right: $small-spacing;
+    }
+
+    &__text {
+      @include navigation-link;
+      color: $color-brand;
+    }
   }
-
-  &__text {
-    @include navigation-link;
-    color: $color-brand;
-  }
-}
 </style>
diff --git a/client/src/components/portfolio/PortfolioOnboarding.vue b/client/src/components/portfolio/PortfolioOnboarding.vue
index 217ae3db..650e0495 100644
--- a/client/src/components/portfolio/PortfolioOnboarding.vue
+++ b/client/src/components/portfolio/PortfolioOnboarding.vue
@@ -1,9 +1,25 @@
 <template>
   <div class="portfolio-onboarding">
-    <h1 class="portfolio-onboarding__heading" data-cy="page-title">Portfolio</h1>
-    <portfolio-illustration data-cy="portfolio-onboarding-illustration" class="portfolio-onboarding__illustration" />
-    <h2 class="portfolio-onboarding__subheading" data-cy="portfolio-onboarding-subtitle">Woran denken Sie gerade?</h2>
-    <p class="portfolio-onboarding__text" data-cy="portfolio-onboarding-text">
+    <h1
+      class="portfolio-onboarding__heading"
+      data-cy="page-title"
+    >
+      Portfolio
+    </h1>
+    <portfolio-illustration
+      data-cy="portfolio-onboarding-illustration"
+      class="portfolio-onboarding__illustration"
+    />
+    <h2
+      class="portfolio-onboarding__subheading"
+      data-cy="portfolio-onboarding-subtitle"
+    >
+      Woran denken Sie gerade?
+    </h2>
+    <p
+      class="portfolio-onboarding__text"
+      data-cy="portfolio-onboarding-text"
+    >
       Hier können Sie Projekte erstellen, um Ihre Gedanken festzuhalten oder Ihre Arbeit zu dokumentieren.
     </p>
 
@@ -12,33 +28,34 @@
 </template>
 
 <script>
-const PortfolioIllustration = () => import('@/components/illustrations/PortfolioIllustration.vue');
-const CreateProjectButton = () => import('@/components/portfolio/CreateProjectButton.vue');
-export default {
-  components: { CreateProjectButton, PortfolioIllustration },
-};
+  import {defineAsyncComponent} from 'vue';
+  const PortfolioIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/PortfolioIllustration'));
+  const CreateProjectButton = defineAsyncComponent(() => import('@/components/portfolio/CreateProjectButton'));
+  export default {
+    components: {CreateProjectButton, PortfolioIllustration},
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.portfolio-onboarding {
-  @include onboarding-page;
+  .portfolio-onboarding {
+    @include onboarding-page;
 
-  &__heading {
-    @include heading-1;
+    &__heading {
+      @include heading-1;
+    }
+
+    &__subheading {
+      @include heading-2;
+    }
+
+    &__illustration {
+      @include onboarding-illustration;
+    }
+
+    &__text {
+      @include onboarding-text;
+    }
   }
-
-  &__subheading {
-    @include heading-2;
-  }
-
-  &__illustration {
-    @include onboarding-illustration;
-  }
-
-  &__text {
-    @include onboarding-text;
-  }
-}
 </style>
diff --git a/client/src/components/portfolio/ProjectActions.vue b/client/src/components/portfolio/ProjectActions.vue
index 1bc2699d..fcc93f5a 100644
--- a/client/src/components/portfolio/ProjectActions.vue
+++ b/client/src/components/portfolio/ProjectActions.vue
@@ -1,20 +1,48 @@
 <template>
-  <div class="project-actions" data-cy="project-actions">
-    <a class="project-actions__more-link" @click.stop="toggleMenu">
+  <div
+    class="project-actions"
+    data-cy="project-actions"
+  >
+    <a
+      class="project-actions__more-link"
+      @click.stop="toggleMenu"
+    >
       <ellipses />
     </a>
-    <widget-popover class="project-actions__popover" v-if="showMenu" @hide-me="showMenu = false">
+    <widget-popover
+      class="project-actions__popover"
+      v-if="showMenu"
+      @hide-me="showMenu = false"
+    >
       <li class="popover-links__link">
-        <a data-cy="delete-project" @click="deleteProject(slug)">Projekt löschen</a>
+        <a
+          data-cy="delete-project"
+          @click="deleteProject(slug)"
+        >Projekt löschen</a>
       </li>
       <li class="popover-links__link">
-        <a data-cy="edit-project" @click="editProject(slug)">Projekt bearbeiten</a>
+        <a
+          data-cy="edit-project"
+          @click="editProject(slug)"
+        >Projekt bearbeiten</a>
       </li>
-      <li class="popover-links__link" v-if="!final && shareButtons">
-        <a data-cy="share-project" @click="updateProjectShareState(slug, true)">Projekt teilen</a>
+      <li
+        class="popover-links__link"
+        v-if="!final && shareButtons"
+      >
+        <a
+          data-cy="share-project"
+          @click="updateProjectShareState(slug, true)"
+        >Projekt teilen</a>
       </li>
-      <li class="popover-links__link" v-if="final && shareButtons">
-        <a data-cy="unshare-project" @click="updateProjectShareState(slug, false)">Projekt nicht mehr teilen</a>
+      <li
+        class="popover-links__link"
+        v-if="final && shareButtons"
+      >
+        <a
+          data-cy="unshare-project"
+          @click="updateProjectShareState(slug, false)"
+        >Projekt nicht mehr teilen</a>
       </li>
     </widget-popover>
   </div>
@@ -27,8 +55,9 @@ import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
 import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
 
 import updateProjectShareState from '@/mixins/update-project-share-state';
-import { removeAtIndex } from '@/graphql/immutable-operations.ts';
-const Ellipses = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Ellipses.vue');
+import {removeAtIndex} from '@/graphql/immutable-operations.ts';
+import {defineAsyncComponent} from 'vue';
+const Ellipses = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Ellipses.vue'));
 
 export default {
   props: {
@@ -64,50 +93,42 @@ export default {
       this.showMenu = !this.showMenu;
     },
     editProject(slug) {
-      this.$router.push({ name: 'edit-project', params: { slug } });
+      this.$router.push({name: 'edit-project', params: {slug}});
     },
     deleteProject(slug) {
-      this.$apollo
-        .mutate({
-          mutation: DELETE_PROJECT_MUTATION,
-          variables: {
-            input: {
-              slug,
-            },
+      this.$apollo.mutate({
+        mutation: DELETE_PROJECT_MUTATION,
+        variables: {
+          input: {
+            slug,
           },
-          update(
-            store,
-            {
-              data: {
-                deleteProject: { success },
-              },
-            }
-          ) {
-            if (success) {
-              const { projects: prevProjects } = store.readQuery({ query: PROJECTS_QUERY });
+        },
+        update(store, {data: {deleteProject: {success}}}) {
+          if (success) {
+            const {projects: prevProjects} = store.readQuery({query: PROJECTS_QUERY});
 
-              if (prevProjects) {
-                let index = prevProjects.findIndex((project) => project.slug === slug);
-                const projects = removeAtIndex(prevProjects, index);
 
-                const data = {
-                  projects,
-                };
-                store.writeQuery({ query: PROJECTS_QUERY, data });
-              }
+            if (prevProjects) {
+              let index = prevProjects.findIndex(project => project.slug === slug);
+              const projects = removeAtIndex(prevProjects, index);
+
+              const data = {
+                projects
+              };
+              store.writeQuery({query: PROJECTS_QUERY, data});
             }
-          },
-        })
-        .then(() => {
-          this.$router.push('/portfolio');
-        });
+          }
+        },
+      }).then(() => {
+        this.$router.push('/portfolio');
+      });
     },
   },
 };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/_helpers.scss';
+@import "~styles/_helpers.scss";
 
 .project-actions {
   position: relative;
diff --git a/client/src/components/portfolio/ProjectEntry.vue b/client/src/components/portfolio/ProjectEntry.vue
index 19d2cbd6..4e9c8f36 100644
--- a/client/src/components/portfolio/ProjectEntry.vue
+++ b/client/src/components/portfolio/ProjectEntry.vue
@@ -1,22 +1,44 @@
 <template>
-  <div class="project-entry" data-cy="project-entry">
-    <more-options-widget class="project-entry__more" data-cy="project-entry-more" v-if="!readOnly">
+  <div
+    class="project-entry"
+    data-cy="project-entry"
+  >
+    <more-options-widget
+      class="project-entry__more"
+      data-cy="project-entry-more"
+      v-if="!readOnly"
+    >
       <li class="popover-links__link">
-        <a data-cy="edit-project-entry" @click="editProjectEntry()">Eintrag bearbeiten</a>
+        <a
+          data-cy="edit-project-entry"
+          @click="editProjectEntry()"
+        >Eintrag bearbeiten</a>
       </li>
       <li class="popover-links__link">
-        <a data-cy="delete-project-entry" @click="deleteProjectEntry()">Eintrag löschen</a>
+        <a
+          data-cy="delete-project-entry"
+          @click="deleteProjectEntry()"
+        >Eintrag löschen</a>
       </li>
     </more-options-widget>
 
-    <h3 class="project-entry__heading" data-cy="project-entry-date">
+    <h3
+      class="project-entry__heading"
+      data-cy="project-entry-date"
+    >
       {{ createdDateTime }}
     </h3>
-    <p class="project-entry__paragraph" data-cy="project-entry-activity">
+    <p
+      class="project-entry__paragraph"
+      data-cy="project-entry-activity"
+    >
       {{ description }}
     </p>
-    <p class="project-entry__paragraph" v-if="documentUrl">
-      <document-block :value="{ url: documentUrl }" />
+    <p
+      class="project-entry__paragraph"
+      v-if="documentUrl"
+    >
+      <document-block :value="{url: documentUrl}" />
     </p>
     <div class="project-entry__date">
       {{ createdDate }}
@@ -25,116 +47,110 @@
 </template>
 
 <script>
-import MoreOptionsWidget from '@/components/MoreOptionsWidget';
+  import MoreOptionsWidget from '@/components/MoreOptionsWidget';
 
-import DELETE_PROJECT_ENTRY_MUTATION from '@/graphql/gql/mutations/deleteProjectEntry.gql';
-import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
-import { dateFilter, dateTimeFilter } from '@/filters/date-filter';
-import { removeAtIndex } from '@/graphql/immutable-operations.ts';
+  import DELETE_PROJECT_ENTRY_MUTATION from '@/graphql/gql/mutations/deleteProjectEntry.gql';
+  import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
+  import {dateFilter, dateTimeFilter} from '@/filters/date-filter';
+  import {removeAtIndex} from '@/graphql/immutable-operations.ts';
+  import {defineAsyncComponent} from 'vue';
+  const DocumentBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock'));
 
-const DocumentBlock = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock');
 
-export default {
-  props: ['description', 'documentUrl', 'created', 'id', 'readOnly'],
-  components: {
-    DocumentBlock,
-    MoreOptionsWidget,
-  },
-
-  computed: {
-    createdDate() {
-      return dateFilter(this.created);
+  export default {
+    props: ['description', 'documentUrl', 'created', 'id', 'readOnly'],
+    components: {
+      DocumentBlock,
+      MoreOptionsWidget,
     },
-    createdDateTime() {
-      return dateTimeFilter(this.created);
-    },
-  },
 
-  methods: {
-    editProjectEntry() {
-      this.$store.dispatch('editProjectEntry', this.id);
+    computed: {
+      createdDate() {
+        return dateFilter(this.created);
+      },
+      createdDateTime() {
+        return dateTimeFilter(this.created);
+      },
     },
-    deleteProjectEntry() {
-      const projectEntry = this; // otherwise we run into scope errors
-      this.$apollo.mutate({
-        mutation: DELETE_PROJECT_ENTRY_MUTATION,
-        variables: {
-          input: {
-            id: this.id,
-          },
-        },
-        update(
-          store,
-          {
-            data: {
-              deleteProjectEntry: { success },
+
+    methods: {
+      editProjectEntry() {
+        this.$store.dispatch('editProjectEntry', this.id);
+      },
+      deleteProjectEntry() {
+        const projectEntry = this; // otherwise we run into scope errors
+        this.$apollo.mutate({
+          mutation: DELETE_PROJECT_ENTRY_MUTATION,
+          variables: {
+            input: {
+              id: this.id,
             },
-          }
-        ) {
-          if (success) {
-            const query = PROJECT_QUERY;
-            const variables = {
-              slug: projectEntry.$route.params.slug,
-            };
-            const { project } = store.readQuery({ query, variables });
-            if (project) {
-              const index = project.entries.findIndex((entry) => entry.id === projectEntry.id);
-              const entries = removeAtIndex(project.entries, index);
-              const data = {
-                project: {
-                  ...project,
-                  entries,
-                },
+          },
+          update(store, {data: {deleteProjectEntry: {success}}}) {
+            if (success) {
+              const query = PROJECT_QUERY;
+              const variables = {
+                slug: projectEntry.$route.params.slug,
               };
-              store.writeQuery({ query, variables, data });
+              const {project} = store.readQuery({query, variables});
+              if (project) {
+                const index = project.entries.findIndex(entry => entry.id === projectEntry.id);
+                const entries = removeAtIndex(project.entries, index);
+                const data = {
+                  project: {
+                    ...project,
+                    entries,
+                  },
+                };
+                store.writeQuery({query, variables, data});
+              }
             }
-          }
-        },
-      });
+          },
+        });
+      },
     },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.project-entry {
-  background-color: $color-white;
-  border-radius: $default-border-radius;
-  padding: 30px 20px;
-  position: relative;
+  .project-entry {
+    background-color: $color-white;
+    border-radius: $default-border-radius;
+    padding: 30px 20px;
+    position: relative;
 
-  &__heading {
-    font-size: toRem(22px);
-    margin-bottom: 6px;
-  }
-
-  &__paragraph {
-    margin-bottom: 30px;
-    white-space: pre-line;
-  }
-
-  &__date {
-    font-family: $sans-serif-font-family;
-    color: $color-silver-dark;
-    font-size: toRem(17px);
-  }
-
-  &__link {
-    cursor: pointer;
-    @include heading-4;
-  }
-
-  &__more {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    display: none;
-    @include desktop {
-      display: block;
+    &__heading {
+      font-size: toRem(22px);
+      margin-bottom: 6px;
     }
+
+    &__paragraph {
+      margin-bottom: 30px;
+      white-space: pre-line;
+    }
+
+    &__date {
+      font-family: $sans-serif-font-family;
+      color: $color-silver-dark;
+      font-size: toRem(17px);
+    }
+
+    &__link {
+      cursor: pointer;
+      @include heading-4;
+    }
+
+    &__more {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      display: none;
+      @include desktop {
+        display: block;
+      }
+    }
+
   }
-}
 </style>
diff --git a/client/src/components/portfolio/ProjectEntryForm.vue b/client/src/components/portfolio/ProjectEntryForm.vue
index 2305f390..e230c15f 100644
--- a/client/src/components/portfolio/ProjectEntryForm.vue
+++ b/client/src/components/portfolio/ProjectEntryForm.vue
@@ -1,7 +1,12 @@
 <template>
   <modal :hide-header="false">
     <template #header>
-      <h2 class="project-entry-modal__heading" data-cy="modal-title">Beitrag erfassen</h2>
+      <h2
+        class="project-entry-modal__heading"
+        data-cy="modal-title"
+      >
+        Beitrag erfassen
+      </h2>
     </template>
 
     <div class="project-entry-modal">
@@ -30,26 +35,6 @@
         </div>
       </div>
     </div>
-<<<<<<< HEAD
-    <div slot="footer">
-      <a class="button button--primary" data-cy="modal-save-button" @click="$emit('save', localProjectEntry)"
-        >Speichern</a
-      >
-      <a class="button" @click="$emit('hide')">Abbrechen</a>
-    </div>
-||||||| parent of a423cfde (Apply code changes from migration guide for Vue 3)
-    <div slot="footer">
-      <a
-        class="button button--primary"
-        data-cy="modal-save-button"
-        @click="$emit('save', localProjectEntry)"
-      >Speichern</a>
-      <a
-        class="button"
-        @click="$emit('hide')"
-      >Abbrechen</a>
-    </div>
-=======
     <template #footer>
       <a
         class="button button--primary"
@@ -61,105 +46,96 @@
         @click="$emit('hide')"
       >Abbrechen</a>
     </template>
->>>>>>> a423cfde (Apply code changes from migration guide for Vue 3)
   </modal>
 </template>
 
 <script>
-import Modal from '@/components/Modal';
-import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
+  import Modal from '@/components/Modal';
+  import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
 
-<<<<<<< HEAD
-import { PROJECT_ENTRY_TEMPLATE } from '@/consts/strings.consts';
-const FileUpload = () => import('@/components/ui/file-upload/FileUpload.vue');
-||||||| parent of a423cfde (Apply code changes from migration guide for Vue 3)
-  import {PROJECT_ENTRY_TEMPLATE} from '@/consts/strings.consts';
-  const FileUpload = () => import('@/components/ui/file-upload/FileUpload');
-=======
   import {PROJECT_ENTRY_TEMPLATE} from '@/consts/strings.consts';
 
-  const FileUpload = () => import('@/components/ui/file-upload/FileUpload');
->>>>>>> a423cfde (Apply code changes from migration guide for Vue 3)
+  import {defineAsyncComponent} from 'vue';
+  const FileUpload = defineAsyncComponent(() => import('@/components/ui/file-upload/FileUpload'));
 
-export default {
-  props: {
-    projectEntry: {
-      type: Object,
-      default: null,
+  export default {
+    props: {
+      projectEntry: {
+        type: Object,
+        default: null,
+      },
     },
-  },
 
-  components: {
-    FileUpload,
-    ButtonWithIconAndText,
-    Modal,
-  },
+    components: {
+      FileUpload,
+      ButtonWithIconAndText,
+      Modal,
+    },
 
-  data() {
-    return {
-      localProjectEntry: Object.assign(
-        {},
-        {
+    data() {
+      return {
+        localProjectEntry: Object.assign({}, {
           ...this.projectEntry,
-        }
-      ),
-    };
-  },
+        }),
+      };
+    },
 
-  methods: {
-    setDocumentUrl(url) {
-      this.localProjectEntry.documentUrl = url;
+    methods: {
+      setDocumentUrl(url) {
+        this.localProjectEntry.documentUrl = url;
+      },
+      useTemplate() {
+        this.localProjectEntry.description = `${this.localProjectEntry.description}${PROJECT_ENTRY_TEMPLATE}`;
+      },
     },
-    useTemplate() {
-      this.localProjectEntry.description = `${this.localProjectEntry.description}${PROJECT_ENTRY_TEMPLATE}`;
-    },
-  },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.project-entry-modal {
-  display: flex;
-  flex-direction: column;
-
-  &__form-field {
-    @include inputstyle;
-    padding: 0;
+  .project-entry-modal {
     display: flex;
     flex-direction: column;
-    grid-template-rows: auto 1rem;
-    grid-template-columns: 1fr 1fr;
-    width: 100%;
-  }
 
-  &__textarea {
-    @include auto-grow;
-    border: 0;
-    min-height: 400px;
-    padding: $medium-spacing;
-  }
-
-  &__buttons {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: $medium-spacing;
-  }
-
-  &__button {
-    @include regular-text;
-
-    &--template {
+    &__form-field {
+      @include inputstyle;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      grid-template-rows: auto 1rem;
+      grid-template-columns: 1fr 1fr;
+      width: 100%;
     }
 
-    &--document {
+    &__textarea {
+      @include auto-grow;
+      border: 0;
+      min-height: 400px;
+      padding: $medium-spacing;
     }
+
+    &__buttons {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      padding: $medium-spacing;
+    }
+
+    &__button {
+      @include regular-text;
+
+      &--template {
+      }
+
+      &--document {
+      }
+    }
+
+    &__heading {
+      @include heading-3;
+      margin-bottom: 0;
+    }
+
   }
 
-  &__heading {
-    @include heading-3;
-    margin-bottom: 0;
-  }
-}
 </style>
diff --git a/client/src/components/portfolio/ShareLink.vue b/client/src/components/portfolio/ShareLink.vue
index 7fab1cf8..6d6f3b76 100644
--- a/client/src/components/portfolio/ShareLink.vue
+++ b/client/src/components/portfolio/ShareLink.vue
@@ -9,35 +9,36 @@
 </template>
 
 <script>
-const ShareIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ShareIcon');
+  import {defineAsyncComponent} from 'vue';
+  const ShareIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ShareIcon'));
 
-export default {
-  props: {
-    final: {
-      type: Boolean,
-      default: false,
+  export default {
+    props: {
+      final: {
+        type: Boolean,
+        default: false,
+      },
     },
-  },
-  components: { ShareIcon },
-};
+    components: {ShareIcon},
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.share-icon {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+  .share-icon {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
 
-  &__icon {
-    width: 20px;
-    height: 20px;
-    margin-right: $small-spacing;
+    &__icon {
+      width: 20px;
+      height: 20px;
+      margin-right: $small-spacing;
+    }
+
+    &__text {
+      @include large-link;
+    }
   }
-
-  &__text {
-    @include large-link;
-  }
-}
 </style>
diff --git a/client/src/components/profile/ActivityEntry.vue b/client/src/components/profile/ActivityEntry.vue
index d4504441..43964281 100644
--- a/client/src/components/profile/ActivityEntry.vue
+++ b/client/src/components/profile/ActivityEntry.vue
@@ -7,60 +7,64 @@
       <slot />
     </div>
 
-    <div class="activity-entry__link" @click="$emit('link')">
+    <div
+      class="activity-entry__link"
+      @click="$emit('link')"
+    >
       <chevron-right class="activity-entry__icon" />
     </div>
   </div>
 </template>
 
 <script>
-const ChevronRight = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronRight');
+  import {defineAsyncComponent} from 'vue';
+  const ChevronRight = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronRight'));
 
-export default {
-  props: ['title'],
+  export default {
+    props: ['title'],
 
-  components: {
-    ChevronRight,
-  },
-};
+    components: {
+      ChevronRight
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
-@import '@/styles/_mixins.scss';
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
-.activity-entry {
-  padding: $small-spacing 0;
-  border-bottom: 1px solid $color-silver;
-  display: flex;
-  justify-content: space-between;
-
-  &__title {
-    @include small-text;
-    // todo: make style definition for small text and silver color
-    color: $color-silver-dark;
-    margin-bottom: 0;
-  }
-
-  &__content {
-    flex-grow: 1;
-    @include regular-text;
-    line-height: $default-line-height;
-  }
-  &__link {
+  .activity-entry {
+    padding: $small-spacing 0;
+    border-bottom: 1px solid $color-silver;
     display: flex;
-    flex-grow: 0;
-    align-content: center;
-    cursor: pointer;
-  }
+    justify-content: space-between;
 
-  &__icon {
-    fill: $color-brand;
-    width: 30px;
-  }
+    &__title {
+      @include small-text;
+      // todo: make style definition for small text and silver color
+      color: $color-silver-dark;
+      margin-bottom: 0;
+    }
 
-  :deep(p) {
-    @include regular-text;
+    &__content {
+      flex-grow: 1;
+      @include regular-text;
+      line-height: $default-line-height;
+    }
+    &__link {
+      display: flex;
+      flex-grow: 0;
+      align-content: center;
+      cursor: pointer;
+    }
+
+    &__icon {
+      fill: $color-brand;
+      width: 30px;
+    }
+
+    /deep/ p {
+      @include regular-text;
+    }
   }
-}
 </style>
diff --git a/client/src/components/profile/Avatar.vue b/client/src/components/profile/Avatar.vue
index 94772cd5..d76158b5 100644
--- a/client/src/components/profile/Avatar.vue
+++ b/client/src/components/profile/Avatar.vue
@@ -35,9 +35,10 @@
 
 <script>
   import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
+  import {defineAsyncComponent} from 'vue';
 
-  const DefaultAvatar = () => import(/* webpackChunkName: "icons" */'@/components/icons/DefaultAvatar');
-  const PenIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/PenIcon');
+  const DefaultAvatar = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DefaultAvatar'));
+  const PenIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/PenIcon'));
 
   export default {
     props: {
diff --git a/client/src/components/profile/ContentBookmark.vue b/client/src/components/profile/ContentBookmark.vue
index 908fd124..a19f65e3 100644
--- a/client/src/components/profile/ContentBookmark.vue
+++ b/client/src/components/profile/ContentBookmark.vue
@@ -1,9 +1,15 @@
 <template>
   <div class="content-bookmark module-activity-entry">
     <!-- eslint-disable vue/no-v-html -->
-    <div v-if="content.type === 'text_block'" v-html="text" />
+    <div
+      v-if="content.type === 'text_block'"
+      v-html="text"
+    />
     <div v-else-if="content.type === 'link_block'">
-      <link-block :value="content.value" :no-margin="true" />
+      <link-block
+        :value="content.value"
+        :no-margin="true"
+      />
     </div>
     <p v-else>
       {{ type }}
@@ -12,34 +18,35 @@
 </template>
 
 <script>
-const LinkBlock = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/LinkBlock');
+  import {defineAsyncComponent} from 'vue';
+  const LinkBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/LinkBlock'));
 
-export default {
-  props: ['bookmark'],
-  components: { LinkBlock },
-  computed: {
-    content() {
-      return this.bookmark.contentBlock
-        ? this.bookmark.contentBlock.contents.find((e) => e.id === this.bookmark.uuid)
-        : this.bookmark.instrument.contents.find((e) => e.id === this.bookmark.uuid);
-    },
-    text() {
-      return this.content.value.text ? this.content.value.text : 'TO BE DEFINED';
-    },
-    type() {
-      switch (this.content.type) {
-        case 'assignment':
-          return 'Aufgabe & Ergebnis';
-        case 'link_block':
-          return this.content;
-        case 'survey':
-          return 'Übung';
-        case 'image_url_block':
-          return 'Bild';
-        default:
-          return this.content.type;
+  export default {
+    props: ['bookmark'],
+    components: {LinkBlock},
+    computed: {
+      content() {
+        return this.bookmark.contentBlock
+          ? this.bookmark.contentBlock.contents.find(e => e.id === this.bookmark.uuid)
+          : this.bookmark.instrument.contents.find(e => e.id === this.bookmark.uuid);
+      },
+      text() {
+        return this.content.value.text ? this.content.value.text : 'TO BE DEFINED';
+      },
+      type() {
+        switch (this.content.type) {
+          case 'assignment':
+            return 'Aufgabe & Ergebnis';
+          case 'link_block':
+            return this.content;
+          case 'survey':
+            return 'Übung';
+          case 'image_url_block':
+            return 'Bild';
+          default:
+            return this.content.type;
+        }
       }
-    },
-  },
-};
+    }
+  };
 </script>
diff --git a/client/src/components/profile/EditGroupName.vue b/client/src/components/profile/EditGroupName.vue
index bb33880b..1086c05a 100644
--- a/client/src/components/profile/EditGroupName.vue
+++ b/client/src/components/profile/EditGroupName.vue
@@ -1,27 +1,32 @@
 <template>
-  <a class="edit-group-name" data-cy="edit-group-name-link" @click="$emit('edit')">
+  <a
+    class="edit-group-name"
+    data-cy="edit-group-name-link"
+    @click="$emit('edit')"
+  >
     <pen-icon class="edit-group-name__icon" />
   </a>
 </template>
 
 <script>
-const PenIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/PenIcon');
+  import {defineAsyncComponent} from 'vue';
+  const PenIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/PenIcon'));
 
-export default {
-  components: {
-    PenIcon,
-  },
-};
+  export default {
+    components: {
+      PenIcon
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/_variables.scss';
+  @import "~styles/_variables.scss";
 
-.edit-group-name {
-  &__icon {
-    width: 20px;
-    height: 20px;
-    fill: $color-brand;
+  .edit-group-name {
+    &__icon {
+      width: 20px;
+      height: 20px;
+      fill: $color-brand;
+    }
   }
-}
 </style>
diff --git a/client/src/components/profile/Profile.vue b/client/src/components/profile/Profile.vue
index 40fba46a..4a17dc9f 100644
--- a/client/src/components/profile/Profile.vue
+++ b/client/src/components/profile/Profile.vue
@@ -1,101 +1,105 @@
 <template>
   <div class="profile">
-    <h1 class="profile__header">Profilbild</h1>
-    <div class="profile-avatar" v-if="me.avatarUrl">
+    <h1 class="profile__header">
+      Profilbild
+    </h1>
+    <div
+      class="profile-avatar"
+      v-if="me.avatarUrl"
+    >
       <div class="profile-avatar__image">
         <avatar :avatar-url="me.avatarUrl" />
       </div>
-      <a class="profile-avatar__remove icon-button" @click="deleteAvatar()">
+      <a
+        class="profile-avatar__remove icon-button"
+        @click="deleteAvatar()"
+      >
         <trash-icon class="profile-avatar__remove-icon icon-button__icon icon-button__icon--subtle" />
       </a>
     </div>
-    <avatar-upload-form v-else @avatarUpdate="updateAvatar" />
+    <avatar-upload-form
+      v-else
+      @avatarUpdate="updateAvatar"
+    />
   </div>
 </template>
 
 <script>
-import UPDATE_AVATAR_QUERY from '@/graphql/gql/mutations/updateAvatarUrl.gql';
-import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
-import AvatarUploadForm from '@/components/profile/AvatarUploadForm';
-import Avatar from '@/components/profile/Avatar';
-const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
+  import UPDATE_AVATAR_QUERY from '@/graphql/gql/mutations/updateAvatarUrl.gql';
+  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+  import AvatarUploadForm from '@/components/profile/AvatarUploadForm';
+  import Avatar from '@/components/profile/Avatar';
+  import {defineAsyncComponent} from 'vue';
+  const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon'));
 
-export default {
-  components: {
-    AvatarUploadForm,
-    Avatar,
-    TrashIcon,
-  },
+  export default {
+    components: {
+      AvatarUploadForm,
+      Avatar,
+      TrashIcon
+    },
 
-  data() {
-    return {
+    data() {
+      return {
+        me: {
+          avatarUrl: ''
+        }
+      };
+    },
+    apollo: {
       me: {
-        avatarUrl: '',
+        query: ME_QUERY,
       },
-    };
-  },
-  apollo: {
-    me: {
-      query: ME_QUERY,
     },
-  },
-  methods: {
-    deleteAvatar() {
-      this.updateAvatar('');
-    },
-    updateAvatar(url) {
-      this.$apollo
-        .mutate({
+    methods: {
+      deleteAvatar () {
+        this.updateAvatar('');
+      },
+      updateAvatar (url) {
+        this.$apollo.mutate({
           mutation: UPDATE_AVATAR_QUERY,
           variables: {
             input: {
-              avatarUrl: url,
-            },
-          },
-          update(
-            store,
-            {
-              data: {
-                updateAvatar: { success },
-              },
+              avatarUrl: url
             }
-          ) {
+          },
+          update(store, {data: {updateAvatar: {success}}}) {
             if (success) {
-              const { me } = store.readQuery({ query: ME_QUERY });
+              const {me} = store.readQuery({query: ME_QUERY});
               if (me) {
                 const data = {
                   me: {
                     ...me,
-                    avatarUrl: url,
-                  },
+                    avatarUrl: url
+                  }
                 };
-                store.writeQuery({ query: ME_QUERY, data });
+                store.writeQuery({query: ME_QUERY, data});
               }
             }
-          },
-        })
-        .catch((error) => {
+          }
+        }).catch((error) => {
           console.warn('UploadError', error);
         });
-    },
-  },
-};
+      }
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
+  @import "@/styles/_variables.scss";
 
-.profile-avatar {
-  display: flex;
-  flex-direction: row;
+  .profile-avatar {
+    display: flex;
+    flex-direction: row;
 
-  &__image {
-    height: 230px;
-    width: 230px;
+    &__image {
+      height: 230px;
+      width: 230px;
+    }
+  }
+
+  .profile-avatar {
+    margin-bottom: $large-spacing;
   }
-}
 
-.profile-avatar {
-  margin-bottom: $large-spacing;
-}
 </style>
diff --git a/client/src/components/profile/ProfileSidebar.vue b/client/src/components/profile/ProfileSidebar.vue
index bd1d9a61..84300cfe 100644
--- a/client/src/components/profile/ProfileSidebar.vue
+++ b/client/src/components/profile/ProfileSidebar.vue
@@ -84,7 +84,8 @@
   import me from '@/mixins/me';
   import LogoutWidget from '@/components/LogoutWidget';
   import {MY_TEAM} from '@/router/me.names';
-  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
+  import {defineAsyncComponent} from 'vue';
+  const Cross = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon'));
 
   export default {
 
diff --git a/client/src/components/rooms/AddRoomEntryButton.vue b/client/src/components/rooms/AddRoomEntryButton.vue
index db0558d1..20ad9f02 100644
--- a/client/src/components/rooms/AddRoomEntryButton.vue
+++ b/client/src/components/rooms/AddRoomEntryButton.vue
@@ -1,60 +1,65 @@
 <template>
-  <router-link class="add-room-entry-button" data-cy="add-room-entry-button" :to="addRoomEntryRoute">
+  <router-link
+    class="add-room-entry-button"
+    data-cy="add-room-entry-button"
+    :to="addRoomEntryRoute"
+  >
     <plus-icon class="add-room-entry-button__icon" />
     <span class="add-room-entry-button__text">Beitrag erfassen</span>
   </router-link>
 </template>
 
 <script>
-import { ADD_ROOM_ENTRY_PAGE } from '@/router/room.names';
-const PlusIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/PlusIcon');
+  import {defineAsyncComponent} from 'vue';
+  const PlusIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/PlusIcon'));
+  import { ADD_ROOM_ENTRY_PAGE }  from '@/router/room.names';
 
-export default {
-  props: ['parent'],
+  export default {
+    props: ['parent'],
 
-  components: {
-    PlusIcon,
-  },
+    components: {
+      PlusIcon,
+    },
 
-  data() {
-    return {
-      addRoomEntryRoute: {
-        name: ADD_ROOM_ENTRY_PAGE,
-      },
-    };
-  },
-};
+    data() {
+      return {
+        addRoomEntryRoute: {
+          name: ADD_ROOM_ENTRY_PAGE,
+        },
+      };
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.add-room-entry-button {
-  border: 2px solid $color-white;
-  border-radius: 12px;
-  height: 150px;
-  box-sizing: border-box;
-  margin-bottom: 25px;
-  justify-content: center;
-  align-items: center;
-  break-inside: avoid-column;
-  overflow: hidden;
-  cursor: pointer;
+  .add-room-entry-button {
+    border: 2px solid $color-white;
+    border-radius: 12px;
+    height: 150px;
+    box-sizing: border-box;
+    margin-bottom: 25px;
+    justify-content: center;
+    align-items: center;
+    break-inside: avoid-column;
+    overflow: hidden;
+    cursor: pointer;
 
-  display: none;
-  @include desktop {
-    display: flex;
+    display: none;
+    @include desktop {
+      display: flex;
+    }
+
+    &__icon {
+      width: 20px;
+      fill: $color-white;
+      margin-right: $small-spacing;
+    }
+
+    &__text {
+      @include regular-text;
+      color: $color-white;
+    }
   }
-
-  &__icon {
-    width: 20px;
-    fill: $color-white;
-    margin-right: $small-spacing;
-  }
-
-  &__text {
-    @include regular-text;
-    color: $color-white;
-  }
-}
 </style>
diff --git a/client/src/components/rooms/EntryCountWidget.vue b/client/src/components/rooms/EntryCountWidget.vue
index 219b0a0c..e64ca328 100644
--- a/client/src/components/rooms/EntryCountWidget.vue
+++ b/client/src/components/rooms/EntryCountWidget.vue
@@ -1,56 +1,56 @@
 <template>
   <div class="entry-count-widget">
     <component :is="icon" />
-    <span data-cy="entry-count"
-      >{{ entryCount }} <template v-if="verbose">{{ entryCount === 1 ? 'Beitrag' : 'Beiträge' }}</template></span
-    >
+    <span data-cy="entry-count">{{ entryCount }} <template v-if="verbose">{{ entryCount === 1 ? 'Beitrag' : 'Beiträge' }}</template></span>
   </div>
 </template>
 
 <script>
-import SpeechBubbleIcon from '@/components/icons/SpeechBubbleIcon';
-const Cards = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Cards.vue');
+  import {defineAsyncComponent} from 'vue';
+  import SpeechBubbleIcon from '@/components/icons/SpeechBubbleIcon';
+  const Cards = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Cards.vue'));
 
-export default {
-  props: {
-    entryCount: {
-      type: Number,
+  export default {
+    props: {
+      entryCount: {
+        type: Number,
+      },
+      verbose: {
+        type: Boolean,
+        default: true,
+      },
+      icon: {
+        type: String,
+        default: 'cards'
+      }
     },
-    verbose: {
-      type: Boolean,
-      default: true,
-    },
-    icon: {
-      type: String,
-      default: 'cards',
-    },
-  },
 
-  components: {
-    'speech-bubble': SpeechBubbleIcon,
-    SpeechBubbleIcon,
-    Cards,
-  },
-};
+    components: {
+      'speech-bubble': SpeechBubbleIcon,
+      SpeechBubbleIcon,
+      Cards,
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.entry-count-widget {
-  display: flex;
-  align-items: center;
-  opacity: 0.6;
-  margin-right: $medium-spacing;
+  .entry-count-widget {
+    display: flex;
+    align-items: center;
+    opacity: 0.6;
+    margin-right: $medium-spacing;
 
-  svg {
-    width: 30px;
-    fill: $color-charcoal-dark;
-    margin-right: 15px;
+    svg {
+      width: 30px;
+      fill: $color-charcoal-dark;
+      margin-right: 15px;
+    }
+
+    & > span {
+      @include room-widget-text-style;
+    }
   }
 
-  & > span {
-    @include room-widget-text-style;
-  }
-}
 </style>
diff --git a/client/src/components/rooms/MoreActions.vue b/client/src/components/rooms/MoreActions.vue
index 4b9d3014..d3dd3d25 100644
--- a/client/src/components/rooms/MoreActions.vue
+++ b/client/src/components/rooms/MoreActions.vue
@@ -1,66 +1,71 @@
 <template>
   <div class="more-actions">
     <a
-      :class="{ 'more-actions__toggle--background': background }"
+      :class="{'more-actions__toggle--background': background}"
       class="more-actions__toggle"
       data-cy="toggle-more-actions-menu"
       @click.stop="toggleMenu"
     >
       <ellipses />
     </a>
-    <widget-popover class="more-actions__popover" v-if="showMenu" @hide-me="showMenu = false">
+    <widget-popover
+      class="more-actions__popover"
+      v-if="showMenu"
+      @hide-me="showMenu = false"
+    >
       <slot :toggle="toggleMenu" />
     </widget-popover>
   </div>
 </template>
 
 <script>
-import WidgetPopover from '@/components/ui/WidgetPopover';
-const Ellipses = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Ellipses');
+  import WidgetPopover from '@/components/ui/WidgetPopover';
+  import {defineAsyncComponent} from 'vue';
+  const Ellipses = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Ellipses'));
 
-export default {
-  props: {
-    background: {
-      type: Boolean,
-      default: false,
+  export default {
+    props: {
+      background: {
+        type: Boolean,
+        default: false
+      }
     },
-  },
 
-  components: {
-    Ellipses,
-    WidgetPopover,
-  },
-  data() {
-    return {
-      showMenu: false,
-    };
-  },
-
-  methods: {
-    toggleMenu: function () {
-      this.showMenu = !this.showMenu;
+    components: {
+      Ellipses,
+      WidgetPopover,
     },
-  },
-};
+    data() {
+      return {
+        showMenu: false,
+      };
+    },
+
+    methods: {
+      toggleMenu: function () {
+        this.showMenu = !this.showMenu;
+      },
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.more-actions {
-  svg {
-    width: 30px;
-    fill: $color-charcoal-dark;
-    //margin-right: 15px;
-  }
+  .more-actions {
+    svg {
+      width: 30px;
+      fill: $color-charcoal-dark;
+      //margin-right: 15px;
+    }
 
-  &__toggle {
-    display: flex;
-    border-radius: 5px;
+    &__toggle {
+      display: flex;
+      border-radius: 5px;
 
-    &--background {
-      background: white;
+      &--background {
+       background: white;
+      }
     }
   }
-}
 </style>
diff --git a/client/src/components/rooms/RoomGroupWidget.vue b/client/src/components/rooms/RoomGroupWidget.vue
index 7ee4516d..dcfcb51d 100644
--- a/client/src/components/rooms/RoomGroupWidget.vue
+++ b/client/src/components/rooms/RoomGroupWidget.vue
@@ -8,33 +8,34 @@
 </template>
 
 <script>
-const Group = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Group.vue');
+  import {defineAsyncComponent} from 'vue';
+  const Group = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Group.vue'));
 
-export default {
-  props: ['name'],
+  export default {
+    props: ['name'],
 
-  components: {
-    Group,
-  },
-};
+    components: {
+      Group
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.room-group-widget {
-  display: flex;
-  align-items: center;
-  opacity: 0.6;
+  .room-group-widget {
+    display: flex;
+    align-items: center;
+    opacity: 0.6;
 
-  svg {
-    width: 30px;
-    fill: $color-charcoal-dark;
-    margin-right: 15px;
+    svg {
+      width: 30px;
+      fill: $color-charcoal-dark;
+      margin-right: 15px;
+    }
+
+    & > span {
+      @include room-widget-text-style;;
+    }
   }
-
-  & > span {
-    @include room-widget-text-style;
-  }
-}
 </style>
diff --git a/client/src/components/rooms/RoomVisibilityWidget.vue b/client/src/components/rooms/RoomVisibilityWidget.vue
index 4f41dbc6..cadc515c 100644
--- a/client/src/components/rooms/RoomVisibilityWidget.vue
+++ b/client/src/components/rooms/RoomVisibilityWidget.vue
@@ -12,41 +12,43 @@
 </template>
 
 <script>
-const EyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon');
-const ClosedEyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ClosedEyeIcon');
 
-export default {
-  props: {
-    restricted: {
-      type: Boolean,
-      default: false,
+  import {defineAsyncComponent} from 'vue';
+  const EyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon'));
+  const ClosedEyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ClosedEyeIcon'));
+
+  export default {
+    props: {
+      restricted: {
+        type: Boolean,
+        default: false
+      }
     },
-  },
 
-  components: {
-    ClosedEyeIcon,
-    EyeIcon,
-  },
-};
+    components: {
+      ClosedEyeIcon,
+      EyeIcon
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.room-visibility-widget {
-  display: flex;
-  align-items: center;
-  opacity: 0.6;
+  .room-visibility-widget {
+    display: flex;
+    align-items: center;
+    opacity: 0.6;
 
-  &__icon {
-    width: 30px;
-    fill: $color-charcoal-dark;
-    margin-right: 15px;
-    flex-shrink: 0;
+    &__icon {
+      width: 30px;
+      fill: $color-charcoal-dark;
+      margin-right: 15px;
+    }
+
+    & > span {
+      @include room-widget-text-style;
+    }
   }
 
-  & > span {
-    @include room-widget-text-style;
-  }
-}
 </style>
diff --git a/client/src/components/rooms/RoomsOnboarding.vue b/client/src/components/rooms/RoomsOnboarding.vue
index 35a91e76..4d2798e5 100644
--- a/client/src/components/rooms/RoomsOnboarding.vue
+++ b/client/src/components/rooms/RoomsOnboarding.vue
@@ -1,12 +1,25 @@
 <template>
   <div class="rooms-onboarding">
-    <h1 class="rooms-onboarding__heading" data-cy="page-title">Räume</h1>
+    <h1
+      class="rooms-onboarding__heading"
+      data-cy="page-title"
+    >
+      Räume
+    </h1>
     <rooms-illustration class="rooms-onboarding__illustration" />
-    <p data-cy="rooms-onboarding-text" class="rooms-onboarding__text">
+    <p
+      data-cy="rooms-onboarding-text"
+      class="rooms-onboarding__text"
+    >
       Hier können Sie Räume erstellen, damit SchülerInnen zusammenarbeiten und Beiträge teilen können.
     </p>
     <div class="rooms-onboarding__button">
-      <router-link :to="newRoomRoute" class="button button--primary" data-cy="create-room-button" v-if="isTeacher">
+      <router-link
+        :to="newRoomRoute"
+        class="button button--primary"
+        data-cy="create-room-button"
+        v-if="isTeacher"
+      >
         Raum erstellen
       </router-link>
     </div>
@@ -14,43 +27,43 @@
 </template>
 
 <script>
-import { NEW_ROOM_PAGE } from '@/router/room.names';
-const RoomsIllustration = () =>
-  import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/RoomsIllustration');
+  import {NEW_ROOM_PAGE} from '@/router/room.names';
+  import {defineAsyncComponent} from 'vue';
+  const RoomsIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/RoomsIllustration'));
 
-export default {
-  props: {
-    isTeacher: {
-      type: Boolean,
-      default: false,
+  export default {
+    props: {
+      isTeacher: {
+        type: Boolean,
+        default: false,
+      },
     },
-  },
-  components: { RoomsIllustration },
+    components: {RoomsIllustration},
 
-  data() {
-    return {
-      newRoomRoute: NEW_ROOM_PAGE,
-    };
-  },
-};
+    data() {
+      return {
+        newRoomRoute: NEW_ROOM_PAGE,
+      };
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.rooms-onboarding {
-  @include onboarding-page;
+  .rooms-onboarding {
+    @include onboarding-page;
 
-  &__heading {
-    margin-bottom: $large-spacing;
+    &__heading {
+      margin-bottom: $large-spacing;
+    }
+
+    &__illustration {
+      @include onboarding-illustration;
+    }
+
+    &__text {
+      @include onboarding-text;
+    }
   }
-
-  &__illustration {
-    @include onboarding-illustration;
-  }
-
-  &__text {
-    @include onboarding-text;
-  }
-}
 </style>
diff --git a/client/src/components/school-class/ClassSelectionWidget.vue b/client/src/components/school-class/ClassSelectionWidget.vue
index 1df8a46c..40384b30 100644
--- a/client/src/components/school-class/ClassSelectionWidget.vue
+++ b/client/src/components/school-class/ClassSelectionWidget.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="class-selection" v-if="currentClassSelection">
+  <div
+    class="class-selection"
+    v-if="currentClassSelection"
+  >
     <div
       data-cy="class-selection"
       class="class-selection__selected-class selected-class"
@@ -8,7 +11,12 @@
       <current-class class="selected-class__text" />
       <chevron-down class="selected-class__dropdown-icon" />
     </div>
-    <widget-popover :mobile="mobile" class="class-selection__popover" v-if="showPopover" @hide-me="showPopover = false">
+    <widget-popover
+      :mobile="mobile"
+      class="class-selection__popover"
+      v-if="showPopover"
+      @hide-me="showPopover = false"
+    >
       <li
         :label="schoolClass.name"
         :item="schoolClass"
@@ -26,105 +34,121 @@
         v-if="me.isTeacher && !me.readOnly"
         @click="closeSidebar"
       >
-        <router-link :to="{ name: 'create-class' }" tag="span" class="popover-links__link-with-icon">
+        <router-link
+          :to="{name: 'create-class'}"
+          tag="span"
+          class="popover-links__link-with-icon"
+        >
           <add-icon class="popover-links__icon" />
           <span>Klasse erfassen</span>
         </router-link>
       </li>
-      <li class="popover-links__link popover-links__link--large popover-links__divider" @click="closeSidebar">
-        <router-link :to="{ name: 'old-classes' }" tag="span"> Alte Klassen anzeigen </router-link>
+      <li
+        class="popover-links__link popover-links__link--large popover-links__divider"
+        @click="closeSidebar"
+      >
+        <router-link
+          :to="{name: 'old-classes'}"
+          tag="span"
+        >
+          Alte Klassen anzeigen
+        </router-link>
       </li>
     </widget-popover>
   </div>
 </template>
 
 <script>
-import WidgetPopover from '@/components/ui/WidgetPopover';
-import CurrentClass from '@/components/school-class/CurrentClass';
+  import WidgetPopover from '@/components/ui/WidgetPopover';
+  import CurrentClass from '@/components/school-class/CurrentClass';
 
-import updateSelectedClassMixin from '@/mixins/update-selected-class';
-import sidebarMixin from '@/mixins/sidebar';
-import meMixin from '@/mixins/me';
-const ChevronDown = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronDown');
-const AddIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddIcon');
+  import updateSelectedClassMixin from '@/mixins/update-selected-class';
+  import sidebarMixin from '@/mixins/sidebar';
+  import meMixin from '@/mixins/me';
+  import {defineAsyncComponent} from 'vue';
+  const ChevronDown = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronDown'));
+  const AddIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/AddIcon'));
 
-export default {
-  props: {
-    mobile: {
-      type: Boolean,
-      default: false,
+  export default {
+
+    props: {
+      mobile: {
+        type: Boolean,
+        default: false
+      }
     },
-  },
 
-  mixins: [updateSelectedClassMixin, sidebarMixin, meMixin],
-  components: {
-    WidgetPopover,
-    ChevronDown,
-    CurrentClass,
-    AddIcon,
-  },
-
-  data() {
-    return {
-      showPopover: false,
-    };
-  },
-
-  computed: {
-    currentClassSelection() {
-      let currentClass = this.me.schoolClasses.find((schoolClass) => {
-        return schoolClass.id === this.me.selectedClass.id;
-      });
-      return currentClass || this.me.schoolClasses[0];
+    mixins: [updateSelectedClassMixin, sidebarMixin, meMixin],
+    components: {
+      WidgetPopover,
+      ChevronDown,
+      CurrentClass,
+      AddIcon
     },
-  },
 
-  methods: {
-    updateSelectedClassAndHidePopover(selectedClass) {
-      this.updateSelectedClass(selectedClass);
-      this.showPopover = false;
-      this.closeSidebar('profile');
+    data() {
+      return {
+        showPopover: false
+      };
     },
-  },
-};
+
+    computed: {
+      currentClassSelection() {
+        let currentClass = this.me.schoolClasses.find(schoolClass => {
+          return schoolClass.id === this.me.selectedClass.id;
+        });
+        return currentClass || this.me.schoolClasses[0];
+      }
+    },
+
+    methods: {
+      updateSelectedClassAndHidePopover(selectedClass) {
+        this.updateSelectedClass(selectedClass);
+        this.showPopover = false;
+        this.closeSidebar('profile');
+      }
+    },
+
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.class-selection {
-  position: relative;
-  cursor: pointer;
-  margin-bottom: $medium-spacing;
-  border-radius: 4px;
+  .class-selection {
+    position: relative;
+    cursor: pointer;
+    margin-bottom: $medium-spacing;
+    border-radius: 4px;
 
-  &__popover {
-    white-space: nowrap;
-    top: 100%;
-    left: 0;
-    transform: translateY($small-spacing);
-  }
-}
+    &__popover {
+      white-space: nowrap;
+      top: 100%;
+      left: 0;
+      transform: translateY($small-spacing);
+    }
 
-.selected-class {
-  width: 100%;
-  box-sizing: border-box;
-  padding: $small-spacing 0;
-
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-
-  &__text {
-    line-height: $large-spacing;
-    @include heading-4;
-    margin-right: $small-spacing;
   }
 
-  &__dropdown-icon {
-    width: 20px;
-    height: 20px;
-    fill: $color-charcoal-dark;
+  .selected-class {
+    width: 100%;
+    box-sizing: border-box;
+    padding: $small-spacing 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    &__text {
+      line-height: $large-spacing;
+      @include heading-4;
+      margin-right: $small-spacing;
+    }
+
+    &__dropdown-icon {
+      width: 20px;
+      height: 20px;
+      fill: $color-charcoal-dark;
+    }
   }
-}
 </style>
diff --git a/client/src/components/ui/BaseInput.vue b/client/src/components/ui/BaseInput.vue
index abf9b384..71bf40cf 100644
--- a/client/src/components/ui/BaseInput.vue
+++ b/client/src/components/ui/BaseInput.vue
@@ -6,39 +6,47 @@
       class="base-input-container__input"
       data-cy="base-input-input"
       @change.prevent="$emit('input', $event.target.checked, item)"
-    />
+    >
     <span
-      :class="{
-        'base-input-container__checkbox': type === 'checkbox',
-        'base-input-container__radiobutton': type === 'radiobutton',
-      }"
+      :class="{'base-input-container__checkbox': type==='checkbox', 'base-input-container__radiobutton': type === 'radiobutton'}"
       class="base-input-container__icon checkbox"
     >
       <tick v-if="type === 'checkbox'" />
-      <circle-icon data-cy="circle-icon" v-if="type === 'radiobutton'" />
+      <circle-icon
+        data-cy="circle-icon"
+        v-if="type === 'radiobutton'"
+      />
     </span>
-    <span class="base-input-container__label" data-cy="base-input-label" v-if="label">{{ label }}</span>
-    <slot class="base-input-container__label" v-if="!label" />
+    <span
+      class="base-input-container__label"
+      data-cy="base-input-label"
+      v-if="label"
+    >{{ label }}</span>
+    <slot
+      class="base-input-container__label"
+      v-if="!label"
+    />
   </label>
 </template>
 
 <script>
-const Tick = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Tick');
-const CircleIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CircleIcon');
+  import {defineAsyncComponent} from 'vue';
+  const Tick = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Tick'));
+  const CircleIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/CircleIcon'));
 
-export default {
-  props: {
-    label: String,
-    checked: {
-      type: Boolean,
+  export default {
+    props: {
+      label: String,
+      checked: {
+        type: Boolean
+      },
+      item: Object,
+      type: String
     },
-    item: Object,
-    type: String,
-  },
 
-  components: {
-    Tick,
-    CircleIcon,
-  },
-};
+    components: {
+      Tick,
+      CircleIcon
+    }
+  };
 </script>
diff --git a/client/src/components/ui/PopoverLink.vue b/client/src/components/ui/PopoverLink.vue
index c1a290ac..980cab00 100644
--- a/client/src/components/ui/PopoverLink.vue
+++ b/client/src/components/ui/PopoverLink.vue
@@ -1,56 +1,65 @@
 <template>
-  <li class="popover-links__link">
-    <a class="popover-link" @click="$emit('link-action')">
-      <component class="popover-link__icon" :is="icon" />
+  <li
+    class="popover-links__link"
+  >
+    <a
+      class="popover-link"
+      @click="$emit('link-action')"
+    >
+      <component
+        class="popover-link__icon"
+        :is="icon"
+      />
       <span class="popover-link__text">{{ text }}</span>
     </a>
   </li>
 </template>
 
 <script>
-const EyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon');
-const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
-const PenIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/PenIcon');
+  import {defineAsyncComponent} from 'vue';
+  const EyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon'));
+  const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon'));
+  const PenIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/PenIcon'));
 
-export default {
-  props: {
-    icon: {
-      type: String,
-      default: '',
+  export default {
+    props: {
+      icon: {
+        type: String,
+        default: '',
+      },
+      text: {
+        type: String,
+        default: '',
+      },
     },
-    text: {
-      type: String,
-      default: '',
+    components: {
+      EyeIcon,
+      TrashIcon,
+      PenIcon,
     },
-  },
-  components: {
-    EyeIcon,
-    TrashIcon,
-    PenIcon,
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.popover-link {
-  @include popover-link;
+  .popover-link {
+    @include popover-link;
 
-  &__icon {
-    width: 30px;
-    fill: $color-charcoal-dark;
-    margin-right: 15px;
-    display: flex;
-    flex-basis: auto;
-    flex-shrink: 0;
+    &__icon {
+      width: 30px;
+      fill: $color-charcoal-dark;
+      margin-right: 15px;
+      display: flex;
+      flex-basis: auto;
+      flex-shrink: 0;
+    }
+
+    &__text {
+      width: auto;
+      display: flex;
+      flex-basis: auto;
+      flex-shrink: 0;
+    }
   }
-
-  &__text {
-    width: auto;
-    display: flex;
-    flex-basis: auto;
-    flex-shrink: 0;
-  }
-}
 </style>
diff --git a/client/src/components/ui/file-upload/FileUpload.vue b/client/src/components/ui/file-upload/FileUpload.vue
index 723780ed..79443983 100644
--- a/client/src/components/ui/file-upload/FileUpload.vue
+++ b/client/src/components/ui/file-upload/FileUpload.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="file-upload">
     <template v-if="document">
-      <document-block :value="{ url: document }" show-trash-icon @trash="$emit('change-document-url', '')" />
+      <document-block
+        :value="{url: document}"
+        show-trash-icon
+        @trash="$emit('change-document-url', '')"
+      />
     </template>
     <template v-else>
       <simple-file-upload
@@ -14,24 +18,26 @@
 </template>
 
 <script>
-const SimpleFileUpload = () => import('@/components/ui/file-upload/SimpleFileUpload.vue');
-const DocumentBlock = () => import('@/components/content-blocks/DocumentBlock.vue');
+  import {defineAsyncComponent} from 'vue';
+  const SimpleFileUpload = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUpload'));
+  const DocumentBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock'));
 
-export default {
-  props: {
-    document: {
-      type: String,
-      default: '',
+  export default {
+    props: {
+      document: {
+        type: String,
+        default: '',
+      },
+      withText: {
+        type: Boolean,
+        default: false
+      }
     },
-    withText: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: { SimpleFileUpload, DocumentBlock },
-};
+    components: {SimpleFileUpload, DocumentBlock},
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
+
 </style>
diff --git a/client/src/components/ui/file-upload/SimpleFileUpload.vue b/client/src/components/ui/file-upload/SimpleFileUpload.vue
index 9eabfd50..cdbca274 100644
--- a/client/src/components/ui/file-upload/SimpleFileUpload.vue
+++ b/client/src/components/ui/file-upload/SimpleFileUpload.vue
@@ -1,80 +1,72 @@
 <template>
   <div class="simple-file-upload">
-<<<<<<< HEAD
-    <component :is="button" @click.native="clickUploadCare" />
-||||||| parent of a423cfde (Apply code changes from migration guide for Vue 3)
-    <component
-      :is="button"
-      @click.native="clickUploadCare"
-    />
-=======
     <component
       :is="button"
       @click="clickUploadCare"
     />
->>>>>>> a423cfde (Apply code changes from migration guide for Vue 3)
     <simple-file-upload-hidden-input @link-change-url="$emit('link-change-url', $event)" />
   </div>
 </template>
 
 <script>
-const SimpleFileUploadHiddenInput = () => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput.vue');
-const SimpleFileUploadIcon = () => import('@/components/ui/file-upload/SimpleFileUploadIcon.vue');
-const SimpleFileUploadIconAndText = () => import('@/components/ui/file-upload/SimpleFileUploadIconAndText.vue');
-const DocumentIcon = () => import('@/components/icons/DocumentIcon.vue');
+  import {defineAsyncComponent} from 'vue';
+  const SimpleFileUploadHiddenInput = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput'));
+  const SimpleFileUploadIcon = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUploadIcon'));
+  const SimpleFileUploadIconAndText = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUploadIconAndText'));
+  const DocumentIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon'));
 
-export default {
-  props: {
-    value: {
-      type: String,
-      default: '',
+  export default {
+    props: {
+      value: {
+        type: String,
+        default: ''
+      },
+      withText: {
+        type: Boolean,
+        default: false
+      }
     },
-    withText: {
-      type: Boolean,
-      default: false,
-    },
-  },
 
-  components: {
-    SimpleFileUploadHiddenInput,
-    DocumentIcon,
-    SimpleFileUploadIcon,
-    SimpleFileUploadIconAndText,
-  },
-
-  computed: {
-    button() {
-      return this.withText ? 'simple-file-upload-icon-and-text' : 'simple-file-upload-icon';
+    components: {
+      SimpleFileUploadHiddenInput,
+      DocumentIcon,
+      SimpleFileUploadIcon,
+      SimpleFileUploadIconAndText
     },
-  },
 
-  methods: {
-    clickUploadCare() {
-      // workaround for styling the uploadcare widget
-      let button = this.$el.querySelector('.uploadcare--widget__button');
-      button.click();
+    computed: {
+      button() {
+        return this.withText ? 'simple-file-upload-icon-and-text' : 'simple-file-upload-icon';
+      }
     },
-  },
-};
+
+    methods: {
+      clickUploadCare() {
+        // workaround for styling the uploadcare widget
+        let button = this.$el.querySelector('.uploadcare--widget__button');
+        button.click();
+      }
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/_helpers';
+  @import "~styles/_helpers";
 
-.simple-file-upload {
-  height: 25px;
-  overflow: hidden;
-  cursor: pointer;
-
-  &__link {
-    display: inline-block;
-    overflow: hidden;
-    width: 25px;
+  .simple-file-upload {
     height: 25px;
-  }
-}
+    overflow: hidden;
+    cursor: pointer;
 
-:deep(.uploadcare--widget) {
-  display: none;
-}
+    &__link {
+      display: inline-block;
+      overflow: hidden;
+      width: 25px;
+      height: 25px;
+    }
+  }
+
+  /deep/ .uploadcare--widget {
+    display: none;
+  }
 </style>
diff --git a/client/src/components/ui/file-upload/SimpleFileUploadIcon.vue b/client/src/components/ui/file-upload/SimpleFileUploadIcon.vue
index 23369433..cf4b5e08 100644
--- a/client/src/components/ui/file-upload/SimpleFileUploadIcon.vue
+++ b/client/src/components/ui/file-upload/SimpleFileUploadIcon.vue
@@ -5,20 +5,21 @@
 </template>
 
 <script>
-const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
+  import {defineAsyncComponent} from 'vue';
+  const DocumentIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon'));
 
-export default {
-  components: { DocumentIcon },
-};
+  export default {
+    components: {DocumentIcon},
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.simple-file-upload-icon {
-  &__icon {
-    width: 25px;
-    fill: $color-silver-dark;
+  .simple-file-upload-icon {
+    &__icon {
+      width: 25px;
+      fill: $color-silver-dark;
+    }
   }
-}
 </style>
diff --git a/client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue b/client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue
index b6ea3142..77291226 100644
--- a/client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue
+++ b/client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue
@@ -12,49 +12,50 @@
 </template>
 
 <script>
-const SimpleFileUploadHiddenInput = () => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput.vue');
-const ButtonWithIconAndText = () => import('@/components/ui/ButtonWithIconAndText.vue');
+  import {defineAsyncComponent} from 'vue';
+  const SimpleFileUploadHiddenInput = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput'));
+  const ButtonWithIconAndText = defineAsyncComponent(() => import('@/components/ui/ButtonWithIconAndText'));
 
-export default {
-  props: ['value'],
+  export default {
+    props: ['value'],
 
-  components: {
-    ButtonWithIconAndText,
-    SimpleFileUploadHiddenInput,
-  },
-
-  methods: {
-    clickUploadCare() {
-      // workaround for styling the uploadcare widget
-      let button = this.$el.querySelector('.uploadcare--widget__button');
-      button.click();
+    components: {
+      ButtonWithIconAndText,
+      SimpleFileUploadHiddenInput,
     },
-  },
-};
+
+    methods: {
+      clickUploadCare() {
+        // workaround for styling the uploadcare widget
+        let button = this.$el.querySelector('.uploadcare--widget__button');
+        button.click();
+      },
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/_helpers';
+  @import "~styles/_helpers";
 
-.simple-file-upload {
-  width: 25px;
-  height: 25px;
-  overflow: hidden;
-
-  &__icon {
-    width: 25px;
-    fill: $color-silver-dark;
-  }
-
-  &__link {
-    display: inline-block;
-    overflow: hidden;
+  .simple-file-upload {
     width: 25px;
     height: 25px;
-  }
-}
+    overflow: hidden;
 
-:deep(.uploadcare--widget) {
-  display: none;
-}
+    &__icon {
+      width: 25px;
+      fill: $color-silver-dark;
+    }
+
+    &__link {
+      display: inline-block;
+      overflow: hidden;
+      width: 25px;
+      height: 25px;
+    }
+  }
+
+  /deep/ .uploadcare--widget {
+    display: none;
+  }
 </style>
diff --git a/client/src/components/ui/form-element-icons.js b/client/src/components/ui/form-element-icons.js
index 2ac03a10..5b491ab1 100644
--- a/client/src/components/ui/form-element-icons.js
+++ b/client/src/components/ui/form-element-icons.js
@@ -1,18 +1,17 @@
-const LinkIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/LinkIcon');
-const VideoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/VideoIcon');
-const ImageIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ImageIcon');
-const TextIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TextIcon');
-const SpeechBubbleIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/SpeechBubbleIcon');
-const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
-const TitleIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TitleIcon');
-const DocumentWithLinesIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentWithLinesIcon');
-
-const ArrowThinBottom = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowThinBottom');
-const ArrowThinDown = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowThinDown');
-const ArrowThinTop = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowThinTop');
-const ArrowThinUp = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowThinUp');
-
-const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
+import {defineAsyncComponent} from 'vue';
+const LinkIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/LinkIcon'));
+const VideoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/VideoIcon'));
+const ImageIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ImageIcon'));
+const TextIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TextIcon'));
+const SpeechBubbleIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/SpeechBubbleIcon'));
+const DocumentIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon'));
+const TitleIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TitleIcon'));
+const DocumentWithLinesIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentWithLinesIcon'));
+const ArrowThinBottom = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowThinBottom'));
+const ArrowThinDown = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowThinDown'));
+const ArrowThinTop = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowThinTop'));
+const ArrowThinUp = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowThinUp'));
+const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon'));
 
 /*
   for icons with a single word, leave the *-icon name, to prevent conflicts
@@ -31,5 +30,5 @@ export default {
   ArrowThinDown,
   ArrowThinTop,
   ArrowThinUp,
-  TrashIcon,
+  TrashIcon
 };
diff --git a/client/src/components/visibility/VisibilityAction.vue b/client/src/components/visibility/VisibilityAction.vue
index 716a55f6..f423ff06 100644
--- a/client/src/components/visibility/VisibilityAction.vue
+++ b/client/src/components/visibility/VisibilityAction.vue
@@ -1,84 +1,93 @@
 <template>
   <div class="visibility-action">
-    <a class="visibility-action__action-button" v-if="canManageContent" @click="toggleVisibility()">
-      <closed-eye-icon class="visibility-action__action-icon action-icon" v-if="hidden" />
-      <eye-icon class="visibility-action__action-icon action-icon" v-else />
+    <a
+      class="visibility-action__action-button"
+      v-if="canManageContent"
+      @click="toggleVisibility()"
+    >
+      <closed-eye-icon
+        class="visibility-action__action-icon action-icon"
+        v-if="hidden"
+      />
+      <eye-icon
+        class="visibility-action__action-icon action-icon"
+        v-else
+      />
     </a>
   </div>
 </template>
 
 <script>
-import me from '@/mixins/me';
+  import me from '@/mixins/me';
 
-import { TYPES, CONTENT_TYPE } from '@/consts/types';
-import { createVisibilityMutation, hidden } from '@/helpers/visibility';
+  import {TYPES, CONTENT_TYPE} from '@/consts/types';
+  import {createVisibilityMutation, hidden} from '@/helpers/visibility';
 
-const EyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon');
-const ClosedEyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ClosedEyeIcon');
+  import {defineAsyncComponent} from 'vue';
+  const EyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon'));
+  const ClosedEyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ClosedEyeIcon'));
 
-export default {
-  props: {
-    block: {
-      type: Object,
-      default: () => ({}),
+  export default {
+    props: {
+      block: {
+        type: Object,
+        default: () => ({})
+      },
+      type: {
+        type: String,
+        default: CONTENT_TYPE,
+        validator: value => {
+          // value must be one of TYPES
+          return TYPES.indexOf(value) !== -1;
+        }
+      }
     },
-    type: {
-      type: String,
-      default: CONTENT_TYPE,
-      validator: (value) => {
-        // value must be one of TYPES
-        return TYPES.indexOf(value) !== -1;
+
+    mixins: [me],
+
+    components: {
+      EyeIcon,
+      ClosedEyeIcon
+    },
+
+    computed: {
+      hidden() {
+        return hidden({type: this.type, block: this.block, schoolClass: this.schoolClass});
+      }
+    },
+
+    methods: {
+      toggleVisibility() {
+        const hidden = !this.hidden;
+        const schoolClassId = this.schoolClass.id;
+
+        const visibility = [{
+          schoolClassId,
+          hidden
+        }];
+
+        const {mutation, variables} = createVisibilityMutation(this.type, this.block.id, visibility);
+
+        this.$apollo.mutate({
+          mutation,
+          variables
+        });
       },
     },
-  },
-
-  mixins: [me],
-
-  components: {
-    EyeIcon,
-    ClosedEyeIcon,
-  },
-
-  computed: {
-    hidden() {
-      return hidden({ type: this.type, block: this.block, schoolClass: this.schoolClass });
-    },
-  },
-
-  methods: {
-    toggleVisibility() {
-      const hidden = !this.hidden;
-      const schoolClassId = this.schoolClass.id;
-
-      const visibility = [
-        {
-          schoolClassId,
-          hidden,
-        },
-      ];
-
-      const { mutation, variables } = createVisibilityMutation(this.type, this.block.id, visibility);
-
-      this.$apollo.mutate({
-        mutation,
-        variables,
-      });
-    },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-.visibility-action {
-  margin-top: 9px;
+  .visibility-action {
+    margin-top: 9px;
 
-  position: absolute;
-  left: -70px;
-  top: 0px;
-  display: grid;
+    position: absolute;
+    left: -70px;
+    top: 0px;
+    display: grid;
 
-  &__visibility-menu {
-    top: 40px;
+    &__visibility-menu {
+      top: 40px;
+    }
   }
-}
 </style>
diff --git a/client/src/layouts/FullScreenLayout.vue b/client/src/layouts/FullScreenLayout.vue
index 309c027b..e544a032 100644
--- a/client/src/layouts/FullScreenLayout.vue
+++ b/client/src/layouts/FullScreenLayout.vue
@@ -1,6 +1,12 @@
 <template>
-  <div :class="specialContainerClass" class="container layout layout--fullscreen">
-    <div class="close-button" @click="back">
+  <div
+    :class="specialContainerClass"
+    class="container layout layout--fullscreen"
+  >
+    <div
+      class="close-button"
+      @click="back"
+    >
       <cross class="close-button__icon" />
     </div>
 
@@ -9,37 +15,39 @@
 </template>
 
 <script>
-const Cross = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon');
+  import {defineAsyncComponent} from 'vue';
+  const Cross = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon'));
 
-export default {
-  components: {
-    Cross,
-  },
+  export default {
+    components: {
+      Cross
+    },
 
-  computed: {
-    specialContainerClass() {
-      let cls = this.$store.state.specialContainerClass;
-      return [cls ? `skillbox--${cls}` : ''];
+    computed: {
+      specialContainerClass() {
+        let cls = this.$store.state.specialContainerClass;
+        return [cls ? `skillbox--${cls}` : ''];
+      }
     },
-  },
-  methods: {
-    back() {
-      this.$router.go(-1);
-    },
-  },
-};
+    methods: {
+      back() {
+        this.$router.go(-1);
+      }
+    }
+  };
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/_default-layout.scss';
+  @import "@/styles/_default-layout.scss";
 
-.close-button {
-  margin-top: $medium-spacing;
-  margin-right: $medium-spacing;
-  justify-self: end;
-  cursor: pointer;
+  .close-button {
+    margin-top: $medium-spacing;
+    margin-right: $medium-spacing;
+    justify-self: end;
+    cursor: pointer;
+
+    display:flex;
+    justify-content:flex-end;
+  }
 
-  display: flex;
-  justify-content: flex-end;
-}
 </style>
diff --git a/client/src/layouts/SimpleLayout.vue b/client/src/layouts/SimpleLayout.vue
index e161ac0c..c7266eb1 100644
--- a/client/src/layouts/SimpleLayout.vue
+++ b/client/src/layouts/SimpleLayout.vue
@@ -1,98 +1,107 @@
 <template>
-  <div :class="{ 'layout--full-width': $route.meta.fullWidth }" class="skillbox layout layout--simple">
-    <div class="close-button" @click="back">
+  <div
+    :class="{'layout--full-width': $route.meta.fullWidth}"
+    class="skillbox layout layout--simple"
+  >
+    <div
+      class="close-button"
+      @click="back"
+    >
       <cross class="close-button__icon" />
     </div>
     <router-view class="layout__content" />
-    <simple-footer class="layout__footer" v-if="enableFooter" />
+    <simple-footer
+      class="layout__footer"
+      v-if="enableFooter"
+    />
   </div>
 </template>
 
 <script>
-import SimpleFooter from '@/layouts/SimpleFooter';
+  import SimpleFooter from '@/layouts/SimpleFooter';
+  import {defineAsyncComponent} from 'vue';
+  const Cross = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon'));
 
-const Cross = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon');
+  export default {
+    components: {
+      Cross,
+      SimpleFooter
+    },
 
-export default {
-  components: {
-    Cross,
-    SimpleFooter,
-  },
-
-  computed: {
-    enableFooter() {
-      if (this.$route.meta.hideFooter) {
-        return false;
+    computed: {
+      enableFooter() {
+        if (this.$route.meta.hideFooter) {
+          return false;
+        }
+        return this.$flavor.showFooter;
       }
-      return this.$flavor.showFooter;
     },
-  },
 
-  methods: {
-    back() {
-      this.$router.go(-1);
-    },
-  },
-};
+    methods: {
+      back() {
+        this.$router.go(-1);
+      }
+    }
+  };
 </script>
 
 <style lang="scss" scoped>
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.layout {
-  &--simple {
-    display: -ms-grid;
-    @supports (display: grid) {
-      display: grid;
+  .layout {
+    &--simple {
+      display: -ms-grid;
+      @supports (display: grid) {
+        display: grid;
+      }
+
+      width: 100%;
+
+      @include desktop {
+        grid-template-columns: 1fr 640px 1fr;
+        grid-template-rows: 60px auto-fill 105px;
+        -ms-grid-columns: 1fr 640px 1fr;
+
+        & > :nth-child(2) {
+          grid-column: 2;
+          -ms-grid-column: 2;
+        }
+      }
     }
 
-    width: 100%;
+    $parent: &;
 
-    @include desktop {
-      grid-template-columns: 1fr 640px 1fr;
-      grid-template-rows: 60px auto-fill 105px;
-      -ms-grid-columns: 1fr 640px 1fr;
+    &--full-width {
+      #{$parent}__content {
+        grid-column: 1 / span 3;
+        grid-row: 1 / span 2;
+      }
+    }
 
-      & > :nth-child(2) {
-        grid-column: 2;
-        -ms-grid-column: 2;
+    &__footer {
+      @include desktop {
+        grid-column: 1 / span 3;
       }
     }
   }
 
-  $parent: &;
+  .close-button {
+    justify-self: end;
+    cursor: pointer;
 
-  &--full-width {
-    #{$parent}__content {
-      grid-column: 1 / span 3;
-      grid-row: 1 / span 2;
-    }
-  }
+    display:flex;
+    justify-content:flex-end;
+
+    margin-right: $small-spacing;
+    margin-top: $small-spacing;
 
-  &__footer {
     @include desktop {
-      grid-column: 1 / span 3;
+      grid-column: 3;
+      grid-row: 1;
+      -ms-grid-column: 3;
+      -ms-grid-row: 1;
+      margin-right: $medium-spacing;
+      margin-top: $medium-spacing;
     }
   }
-}
-
-.close-button {
-  justify-self: end;
-  cursor: pointer;
-
-  display: flex;
-  justify-content: flex-end;
-
-  margin-right: $small-spacing;
-  margin-top: $small-spacing;
-
-  @include desktop {
-    grid-column: 3;
-    grid-row: 1;
-    -ms-grid-column: 3;
-    -ms-grid-row: 1;
-    margin-right: $medium-spacing;
-    margin-top: $medium-spacing;
-  }
-}
 </style>
diff --git a/client/src/layouts/SplitLayout.vue b/client/src/layouts/SplitLayout.vue
index b475bd2d..129be853 100644
--- a/client/src/layouts/SplitLayout.vue
+++ b/client/src/layouts/SplitLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="['split-view', { 'split-view--illustration': illustration }]">
+  <div :class="['split-view', {'split-view--illustration': illustration}]">
     <div :class="['split-view__illustration', illustrationAlignment]">
       <component :is="illustration" />
     </div>
@@ -10,155 +10,154 @@
 </template>
 
 <script>
-import flavorValues from '@/helpers/app-flavor';
-const ContentsIllustration = () =>
-  import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/ContentsIllustration');
-const PortfolioIllustration = () =>
-  import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/PortfolioIllustration');
-const RoomsIllustration = () =>
-  import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/RoomsIllustration');
+  import {defineAsyncComponent} from 'vue';
+  import flavorValues from '@/helpers/app-flavor';
+  const ContentsIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/ContentsIllustration'));
+  const PortfolioIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/PortfolioIllustration'));
+  const RoomsIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/RoomsIllustration'));
+  const HelloIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/HelloIllustration'));
+  const HelloMyKVIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/HelloMyKVIllustration'));
+  const Hello = flavorValues.appFlavor === 'my-kv' ? HelloMyKVIllustration : HelloIllustration;
 
-export default {
-  components: {
-    contents: ContentsIllustration,
-    portfolio: PortfolioIllustration,
-    rooms: RoomsIllustration,
-    hello: flavorValues.helloIllustration,
-  },
+  export default {
+    components: {
+      contents: ContentsIllustration,
+      portfolio: PortfolioIllustration,
+      rooms: RoomsIllustration,
+      hello: Hello
+    },
 
-  computed: {
-    illustration() {
-      return this.$route.meta.illustration;
+    computed: {
+      illustration() {
+        return this.$route.meta.illustration;
+      },
+      illustrationAlignment() {
+        return this.$route.meta.illustrationAlign ? `split-view__illustration--${this.$route.meta.illustrationAlign}` : '';
+      }
     },
-    illustrationAlignment() {
-      return this.$route.meta.illustrationAlign
-        ? `split-view__illustration--${this.$route.meta.illustrationAlign}`
-        : '';
-    },
-  },
-};
+  };
 </script>
 
 <style lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.split-view {
-  background-color: $color-brand;
-
-  display: flex;
-  position: relative;
-  width: 100%;
-  min-height: 100vh;
-
-  &--illustration {
-    &::after {
-      content: '';
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      top: 50%;
-      background: $color-brand-dark;
-    }
-  }
-
-  &__illustration {
-    width: 30vw;
-    min-width: 400px;
-    align-self: center;
+  .split-view {
     background-color: $color-brand;
-    z-index: 1;
-    display: none;
 
-    &--top {
-      align-self: center;
-      margin-top: -400px;
-    }
-
-    & > svg {
-      max-width: 300px;
-      max-height: 400px;
-    }
-
-    @include desktop {
-      display: flex;
-      justify-content: center;
-    }
-  }
-
-  &__content {
-    background-color: $color-white;
-    padding: $medium-spacing;
     display: flex;
-    flex-direction: column;
-    z-index: 1;
+    position: relative;
     width: 100%;
+    min-height: 100vh;
 
-    @include desktop {
-      padding: 2 * $large-spacing;
+    &--illustration {
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 50%;
+        background: $color-brand-dark;
+      }
     }
-  }
 
-  &__logo {
-    width: 300px;
-    height: 50px;
-    margin-bottom: $large-spacing;
+    &__illustration {
+      width: 30vw;
+      min-width: 400px;
+      align-self: center;
+      background-color: $color-brand;
+      z-index: 1;
+      display: none;
 
-    @include desktop {
+      &--top {
+        align-self: center;
+        margin-top: -400px;
+      }
+
+      & > svg {
+        max-width: 300px;
+        max-height: 400px;
+      }
+
+      @include desktop {
+        display: flex;
+        justify-content: center;
+      }
+    }
+
+    &__content {
+      background-color: $color-white;
+      padding: $medium-spacing;
+      display: flex;
+      flex-direction: column;
+      z-index: 1;
+      width: 100%;
+
+      @include desktop {
+        padding: 2*$large-spacing;
+      }
+    }
+
+    &__logo {
+      width: 300px;
+      height: 50px;
+      margin-bottom: $large-spacing;
+
+      @include desktop {
+        margin-bottom: 70px;
+      }
+    }
+
+    &__page-subheading {
+      @include regular-text;
+      color: $color-brand;
+      margin-bottom: $small-spacing;
+    }
+
+    &__page-heading {
+      @include heading-2;
+      color: $color-brand;
+      margin-bottom: 2*$large-spacing;
+    }
+
+    &__heading {
+      @include heading-2;
+      margin-bottom: $small-spacing;
+    }
+
+    &__claim {
+      @include heading-2;
       margin-bottom: 70px;
     }
-  }
 
-  &__page-subheading {
-    @include regular-text;
-    color: $color-brand;
-    margin-bottom: $small-spacing;
-  }
+    &__paragraph {
+      @include regular-text;
+      margin-bottom: $medium-spacing;
 
-  &__page-heading {
-    @include heading-2;
-    color: $color-brand;
-    margin-bottom: 2 * $large-spacing;
-  }
+      &:last-of-type {
+        margin-bottom: 2*$large-spacing;
+      }
+    }
 
-  &__heading {
-    @include heading-2;
-    margin-bottom: $small-spacing;
-  }
+    &__button {
+      @include regular-text;
+      flex-grow: 0;
+      align-self: flex-start;
+      min-width: 150px;
+      display: inline-flex;
+      box-sizing: border-box;
+      justify-content: center;
+      margin-bottom: $large-spacing;
+      cursor: pointer;
+    }
 
-  &__claim {
-    @include heading-2;
-    margin-bottom: 70px;
-  }
+    &__secondary-link {
+      @include inline-title;
+      cursor: pointer;
 
-  &__paragraph {
-    @include regular-text;
-    margin-bottom: $medium-spacing;
-
-    &:last-of-type {
-      margin-bottom: 2 * $large-spacing;
+      @include desktop {
+        margin-top: auto;
+      }
     }
   }
-
-  &__button {
-    @include regular-text;
-    flex-grow: 0;
-    align-self: flex-start;
-    min-width: 150px;
-    display: inline-flex;
-    box-sizing: border-box;
-    justify-content: center;
-    margin-bottom: $large-spacing;
-    cursor: pointer;
-  }
-
-  &__secondary-link {
-    @include inline-title;
-    cursor: pointer;
-
-    @include desktop {
-      margin-top: auto;
-    }
-  }
-}
 </style>
diff --git a/client/src/pages/article.vue b/client/src/pages/article.vue
index 1781fc08..9e760089 100644
--- a/client/src/pages/article.vue
+++ b/client/src/pages/article.vue
@@ -37,13 +37,14 @@
   import ADD_COMMENT_MUTATION from 'gql/mutations/addComment.gql';
   import CommentInput from '@/components/rooms/CommentInput';
   import Comment from '@/components/rooms/Comment';
-  const TextBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/TextBlock');
-  const ImageBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageBlock');
-  const ImageUrlBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageUrlBlock');
-  const VideoBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/VideoBlock');
-  const LinkBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/LinkBlock');
-  const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock');
-  const SubtitleBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SubtitleBlock');
+  import {defineAsyncComponent} from 'vue';
+  const TextBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/TextBlock'));
+  const ImageBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageBlock'));
+  const ImageUrlBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageUrlBlock'));
+  const VideoBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/VideoBlock'));
+  const LinkBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/LinkBlock'));
+  const DocumentBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock'));
+  const SubtitleBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SubtitleBlock'));
 
   export default {
     components: {
diff --git a/client/src/pages/hello.vue b/client/src/pages/hello.vue
index d00a29c0..0b085508 100644
--- a/client/src/pages/hello.vue
+++ b/client/src/pages/hello.vue
@@ -1,39 +1,64 @@
 <template>
-  <div class="hello" data-cy="hello-page">
+  <div
+    class="hello"
+    data-cy="hello-page"
+  >
     <div class="about">
       <div class="about__logos logos">
-        <a href="https://www.hep-verlag.ch/" target="_blank">
+        <a
+          href="https://www.hep-verlag.ch/"
+          target="_blank"
+        >
           <hep-logo-no-claim class="logos__logo" />
         </a>
-        <a href="https://www.ehb.swiss/" target="_blank" v-if="$flavor.showEHB">
+        <a
+          href="https://www.ehb.swiss/"
+          target="_blank"
+          v-if="$flavor.showEHB"
+        >
           <ehb-logo class="logos__logo" />
         </a>
       </div>
       <p class="about__text">
         <template v-if="$flavor.showEHB">
-          {{ $flavor.textAppName }} ist ein Angebot des hep Verlags in Zusammenarbeit mit der Eidgenössischen Hochschule
-          für Berufsbildung (EHB).
+          {{ $flavor.textAppName }} ist ein Angebot des hep Verlags in
+          Zusammenarbeit mit der Eidgenössischen Hochschule für Berufsbildung (EHB).
+        </template>
+        <template v-else>
+          {{ $flavor.textAppName }} ist ein Angebot des hep Verlags.
         </template>
-        <template v-else> {{ $flavor.textAppName }} ist ein Angebot des hep Verlags. </template>
       </p>
     </div>
     <logo class="logo" />
     <div class="login-actions">
-      <h2 class="login-actions__title" data-cy="hello-title">
+      <h2
+        class="login-actions__title"
+        data-cy="hello-title"
+      >
         Wollen Sie {{ $flavor.textAppName }} im Unterricht verwenden?
       </h2>
-      <a class="button button--primary button--big actions__submit" href="/api/oauth/login/" data-cy="oauth-login"
-        >Mit hep Konto anmelden</a
-      >
+      <a
+        class="button button--primary button--big actions__submit"
+        href="/api/oauth/login/"
+        data-cy="oauth-login"
+      >Mit hep Konto anmelden</a>
 
       <div class="login-actions__register register">
         <p>Haben Sie noch kein hep Konto?</p>
-        <a class="hep-link" href="/api/oauth/login/" data-cy="oauth-login">Jetzt registrieren</a>
+        <a
+          class="hep-link"
+          href="/api/oauth/login/"
+          data-cy="oauth-login"
+        >Jetzt registrieren</a>
       </div>
     </div>
     <div class="information">
       <p>Was ist ein hep Konto und wie kann ich mich dafür registrieren?</p>
-      <a class="hep-link" href="https://myskillbox.ch/anleitung" data-cy="oauth-login">Anleitung anschauen</a>
+      <a
+        class="hep-link"
+        href="https://myskillbox.ch/anleitung"
+        data-cy="oauth-login"
+      >Anleitung anschauen</a>
     </div>
     <div class="links">
       <ul class="links__list">
@@ -52,131 +77,133 @@
 </template>
 
 <script>
-const HepLogoNoClaim = () => import(/* webpackChunkName: "icons" */ '@/components/icons/HepLogoNoClaim');
-const EhbLogo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EhbLogo');
-const Logo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo');
+  import {defineAsyncComponent} from 'vue';
+  const HepLogoNoClaim = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/HepLogoNoClaim'));
+  const EhbLogo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/EhbLogo'));
+  const Logo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Logo'));
 
-export default {
-  components: {
-    HepLogoNoClaim,
-    EhbLogo,
-    Logo,
-  },
+  export default {
+    components: {
+      HepLogoNoClaim,
+      EhbLogo,
+      Logo
+    },
 
-  data() {
-    return {
-      email: '',
-      submitted: false,
-      loading: false,
-    };
-  },
-};
+    data() {
+      return {
+        email: '',
+        submitted: false,
+        loading: false
+      };
+    },
+
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-$hello-block-margin: 2 * $medium-spacing;
+  $hello-block-margin: 2*$medium-spacing;
 
-.hello {
-  max-width: 600px;
-  margin: 0 auto;
-  @include desktop {
+  .hello {
     max-width: 600px;
     margin: 0 auto;
+    @include desktop {
+      max-width: 600px;
+      margin: 0 auto;
+    }
   }
-}
 
-.logo {
-  display: block;
-  width: 300px;
-  margin: $small-spacing auto $hello-block-margin;
-
-  @include desktop {
-    display: none;
-  }
-}
-
-.about {
-  display: none;
-  margin-bottom: $hello-block-margin;
-
-  @include desktop {
+  .logo {
     display: block;
-  }
-
-  &__text {
-    margin-top: $medium-spacing;
-    @include regular-text;
-  }
-
-  &__logos {
-    & a:first-child {
-      margin-right: $large-spacing;
-    }
-  }
-}
-
-.logos {
-  &__logo {
-    height: 30px;
-  }
-}
-
-.login-actions {
-  @include widget-shadow;
-  padding: $medium-spacing;
-  margin-bottom: $hello-block-margin;
-
-  &__title {
-    font-size: 2.125rem; // 34px
-    font-weight: 700;
-  }
-
-  &__register {
-    margin-top: $large-spacing;
-
-    > p,
-    a {
-      @include regular-text;
-    }
-  }
-}
-
-.information {
-  margin-top: $hello-block-margin;
-  > p,
-  a {
-    @include regular-text;
-  }
-}
-
-.links {
-  margin-top: $hello-block-margin;
-  display: flex;
-
-  &__list-item {
-    color: $color-silver-dark;
-
-    > a {
-      @include regular-text;
-    }
-
-    flex-direction: column;
-    margin-top: $medium-spacing;
-
-    &:first-child {
-      margin-top: 0;
-    }
+    width: 300px;
+    margin: $small-spacing auto $hello-block-margin;
 
     @include desktop {
-      display: inline-block;
-      flex-direction: row;
+      display: none;
+    }
+  }
 
-      &:not(:last-child) {
-        margin-right: 1rem;
+  .about {
+    display: none;
+    margin-bottom: $hello-block-margin;
+
+    @include desktop {
+      display: block;
+    }
+
+    &__text {
+      margin-top: $medium-spacing;
+      @include regular-text;
+    }
+
+    &__logos {
+      & a:first-child {
+        margin-right: $large-spacing;
       }
     }
   }
-}
+
+  .logos {
+    &__logo {
+      height: 30px;
+    }
+  }
+
+  .login-actions {
+    @include widget-shadow;
+    padding: $medium-spacing;
+    margin-bottom: $hello-block-margin;
+
+    &__title {
+        font-size: 2.125rem; // 34px
+        font-weight: 700;
+    }
+
+    &__register {
+      margin-top: $large-spacing;
+
+      > p, a {
+        @include regular-text;
+      }
+    }
+  }
+
+  .information {
+    margin-top: $hello-block-margin;
+    > p, a {
+      @include regular-text;
+    }
+  }
+
+  .links {
+    margin-top: $hello-block-margin;
+    display: flex;
+
+    &__list-item {
+
+      color: $color-silver-dark;
+
+      > a {
+        @include regular-text;
+      }
+
+      flex-direction: column;
+      margin-top: $medium-spacing;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      @include desktop {
+        display: inline-block;
+        flex-direction: row;
+
+        &:not(:last-child) {
+          margin-right: 1rem;
+        }
+     }
+    }
+  }
+
 </style>
diff --git a/client/src/pages/instrument.vue b/client/src/pages/instrument.vue
index d3865ea9..b141ef66 100644
--- a/client/src/pages/instrument.vue
+++ b/client/src/pages/instrument.vue
@@ -1,11 +1,18 @@
 <template>
   <div class="instrument">
-    <h1 class="instrument__title" data-cy="instrument-title">
+    <h1
+      class="instrument__title"
+      data-cy="instrument-title"
+    >
       {{ instrument.title }}
     </h1>
 
     <!-- eslint-disable vue/no-v-html -->
-    <div class="instrument__intro intro" data-cy="instrument-intro" v-html="instrument.intro" />
+    <div
+      class="instrument__intro intro"
+      data-cy="instrument-intro"
+      v-html="instrument.intro"
+    />
 
     <content-component
       :component="component"
@@ -20,80 +27,80 @@
 </template>
 
 <script>
-import INSTRUMENT_QUERY from '@/graphql/gql/queries/instrumentQuery.gql';
+  import INSTRUMENT_QUERY from '@/graphql/gql/queries/instrumentQuery.gql';
 
-const ContentComponent = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ContentComponent');
+  import {defineAsyncComponent} from 'vue';
+  const ContentComponent = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentComponent'));
 
-export default {
-  apollo: {
-    instrument() {
-      return {
-        query: INSTRUMENT_QUERY,
-        variables: {
-          slug: this.$route.params.slug,
-        },
-      };
+  export default {
+    apollo: {
+      instrument() {
+        return {
+          query: INSTRUMENT_QUERY,
+          variables: {
+            slug: this.$route.params.slug
+          }
+        };
+      }
     },
-  },
 
-  components: {
-    ContentComponent,
-  },
+    components: {
+      ContentComponent
+    },
 
-  data() {
-    return {
-      instrument: {},
-    };
-  },
-};
+    data() {
+      return {
+        instrument: {}
+      };
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.instrument {
-  &__title {
-    font-size: toRem(35px);
-    margin-bottom: $large-spacing;
-    line-height: $default-heading-line-height;
-  }
-
-  & :deep() {
-    & p {
+  .instrument {
+    &__title {
+      font-size: toRem(35px);
       margin-bottom: $large-spacing;
+      line-height: $default-heading-line-height;
     }
 
-    & p:last-child {
-      margin-bottom: 0;
-    }
+    & /deep/ {
+      & p {
+        margin-bottom: $large-spacing;
+      }
 
-    & ul {
-      @include list-parent;
-    }
+      & p:last-child {
+        margin-bottom: 0;
+      }
 
-    & p + ul {
-      margin-top: -30px;
-    }
+      & ul {
+        @include list-parent;
+      }
 
-    & li {
-      @include list-child;
-      line-height: 1.5;
-    }
+      & p + ul {
+        margin-top: -30px;
+      }
 
-    & b {
-      font-weight: 600;
-    }
+      & li {
+        @include list-child;
+        line-height: 1.5;
+      }
 
-    .brand {
-      color: $color-brand;
-      font-weight: 600;
-    }
+      & b {
+        font-weight: 600;
+      }
 
-    .secondary {
-      color: $color-accent-2;
-      font-weight: 600;
+      .brand {
+        color: $color-brand;
+        font-weight: 600;
+      }
+
+      .secondary {
+        color: $color-accent-2;
+        font-weight: 600;
+      }
     }
   }
-}
 </style>
diff --git a/client/src/pages/license-activation.vue b/client/src/pages/license-activation.vue
index b7c00d8d..0dd51c49 100644
--- a/client/src/pages/license-activation.vue
+++ b/client/src/pages/license-activation.vue
@@ -2,11 +2,14 @@
   <div class="license-activation public-page">
     <header class="info-header">
       <p class="info-header__text small-emph">
-        Für <span class="info-header__emph">{{ me.email }}</span> haben wir keine gültige Lizenz gefunden
+        Für <span class="info-header__emph">{{ me.email }}</span> haben wir keine
+        gültige Lizenz gefunden
       </p>
     </header>
     <section class="coupon">
-      <ValidationObserver v-slot="{ handleSubmit }">
+      <ValidationObserver
+        v-slot="{handleSubmit}"
+      >
         <form
           class="license-activation__form license-activation-form"
           novalidate
@@ -30,7 +33,12 @@
               data-cy="coupon-button"
               label="Coupon abschicken"
             />
-            <a class="button button--big" data-cy="license-activation-cancel" @click="logout">Abmelden </a>
+            <a
+              class="button button--big"
+              data-cy="license-activation-cancel"
+              @click="logout"
+            >Abmelden
+            </a>
           </div>
         </form>
       </ValidationObserver>
@@ -39,10 +47,16 @@
       <h2>Oder, kaufen Sie eine Lizenz</h2>
       <ul class="license-links">
         <li class="license-links__item">
-          <a :href="teacherEditionUrl" class="hep-link">{{ $flavor.textAppName }} für Lehrpersonen</a>
+          <a
+            :href="teacherEditionUrl"
+            class="hep-link"
+          >{{ $flavor.textAppName }} für Lehrpersonen</a>
         </li>
         <li class="license-links__item">
-          <a :href="studentEditionUrl" class="hep-link">{{ $flavor.textAppName }} für Lernende</a>
+          <a
+            :href="studentEditionUrl"
+            class="hep-link"
+          >{{ $flavor.textAppName }} für Lernende</a>
         </li>
       </ul>
     </section>
@@ -50,101 +64,103 @@
 </template>
 
 <script>
-import REDEEM_COUPON from '@/graphql/gql/mutations/redeemCoupon.gql';
-import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
-import LoadingButton from '@/components/LoadingButton';
-import { ValidationObserver } from 'vee-validate';
 
-import me from '@/mixins/me';
-import logout from '@/mixins/logout';
+  import REDEEM_COUPON from '@/graphql/gql/mutations/redeemCoupon.gql';
+  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+  import LoadingButton from '@/components/LoadingButton';
+  import {ValidationObserver} from 'vee-validate';
 
-const ValidatedInput = () => import('@/components/validation/ValidatedInput.vue');
+  import me from '@/mixins/me';
+  import logout from '@/mixins/logout';
 
-export default {
-  mixins: [me, logout],
-  components: {
-    LoadingButton,
-    ValidationObserver,
-    ValidatedInput,
-  },
+  import {defineAsyncComponent} from 'vue';
+  const ValidatedInput = defineAsyncComponent(() => import('@/components/validation/ValidatedInput'));
 
-  data() {
-    return {
-      coupon: '',
-      couponErrors: [],
-      loginError: '',
-      submitted: false,
-      me: {
-        email: '',
-      },
-      teacherEditionUrl: `${process.env.HEP_URL}/myskillbox-lehrpersonen`,
-      studentEditionUrl: `${process.env.HEP_URL}/myskillbox-fur-lernende`,
-      loading: false,
-    };
-  },
-  methods: {
-    validateBeforeSubmit() {
-      this.submitted = true;
-      this.loading = true;
-      this.$apollo
-        .mutate({
+  export default {
+    mixins: [me, logout],
+    components: {
+      LoadingButton,
+      ValidationObserver,
+      ValidatedInput,
+    },
+
+    data() {
+      return {
+        coupon: '',
+        couponErrors: [],
+        loginError: '',
+        submitted: false,
+        me: {
+          email: '',
+        },
+        teacherEditionUrl: `${process.env.HEP_URL}/myskillbox-lehrpersonen`,
+        studentEditionUrl: `${process.env.HEP_URL}/myskillbox-fur-lernende`,
+        loading: false,
+      };
+    },
+    methods: {
+      validateBeforeSubmit() {
+        this.submitted = true;
+        this.loading = true;
+        this.$apollo.mutate({
           mutation: REDEEM_COUPON,
           variables: {
             input: {
               couponCode: this.coupon,
             },
           },
-          update: (store, { data: { coupon } }) => {
+          update: (
+            store,
+            {
+              data: {coupon},
+            },
+          ) => {
             if (coupon.success) {
               this.couponErrors = [];
-              this.$apollo
-                .query({
-                  query: ME_QUERY,
-                  fetchPolicy: 'network-only',
-                })
-                .then(() => this.$router.push('/'));
+              this.$apollo.query({
+                query: ME_QUERY,
+                fetchPolicy: 'network-only',
+              }).then(() => this.$router.push('/'));
             }
           },
-        })
-        .catch(({ message }) => {
-          if (message.indexOf('invalid_coupon') > -1) {
-            this.couponErrors = ['Der angegebene Coupon-Code ist ungültig.'];
-          } else {
-            this.couponErrors = [
-              'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es nochmals oder kontaktieren Sie den Administrator.',
-            ];
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
+        }).catch(({message}) => {
+            if (message.indexOf('invalid_coupon') > -1) {
+              this.couponErrors = ['Der angegebene Coupon-Code ist ungültig.'];
+            } else {
+              this.couponErrors = ['Es ist ein Fehler aufgetreten. Bitte versuchen Sie es nochmals oder kontaktieren Sie den Administrator.'];
+            }
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      },
     },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.text-link {
-  font-family: $sans-serif-font-family;
-  color: $color-brand;
-}
-
-.actions {
-  &__reset {
-    display: inline-block;
-    margin-left: $large-spacing;
+  .text-link {
+    font-family: $sans-serif-font-family;
+    color: $color-brand;
   }
-}
 
-.get-license {
-  margin-top: $large-spacing;
-}
-
-.license-links {
-  &__item {
-    margin-bottom: $medium-spacing;
+  .actions {
+    &__reset {
+      display: inline-block;
+      margin-left: $large-spacing;
+    }
   }
-}
+
+  .get-license {
+    margin-top: $large-spacing
+  }
+
+  .license-links {
+    &__item {
+      margin-bottom: $medium-spacing;
+    }
+  }
+
 </style>
diff --git a/client/src/pages/module/moduleVisibility.vue b/client/src/pages/module/moduleVisibility.vue
index 5f4fa23b..67eb7fc0 100644
--- a/client/src/pages/module/moduleVisibility.vue
+++ b/client/src/pages/module/moduleVisibility.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="module-visibility">
-    <h1 class="module-visibility__page-title">Sichtbarkeit</h1>
+    <h1 class="module-visibility__page-title">
+      Sichtbarkeit
+    </h1>
     <div class="module-visibility__section">
       <p class="module-visibility__paragraph">
         Wollen Sie die angepasste Sichtbarkeit (
@@ -16,113 +18,127 @@
         class="skillbox-input skillbox-dropdown module-visibility__dropdown"
         @change="select($event.target.value)"
       >
-        <option value="" selected>-</option>
-        <option :value="schoolClass.id" v-for="schoolClass in schoolClasses" :key="schoolClass.id">
+        <option
+          value=""
+          selected
+        >
+          -
+        </option>
+        <option
+          :value="schoolClass.id"
+          v-for="schoolClass in schoolClasses"
+          :key="schoolClass.id"
+        >
           {{ schoolClass.name }}
         </option>
       </select>
       für {{ currentClassName }} übernehmen.
     </div>
     <div class="module-visibility__section">
-      <a class="button button--primary" data-cy="save-visibility-button" @click="sync">Anpassungen übernehmen</a>
+      <a
+        class="button button--primary"
+        data-cy="save-visibility-button"
+        @click="sync"
+      >Anpassungen übernehmen</a>
     </div>
   </div>
 </template>
 
 <script>
-import me from '@/mixins/me';
+  import me from '@/mixins/me';
 
-import SYNC_VISIBILITY_MUTATION from '@/graphql/gql/mutations/syncModuleVisibility.gql';
-import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
-import { MODULE_PAGE } from '@/router/module.names';
+  import SYNC_VISIBILITY_MUTATION from '@/graphql/gql/mutations/syncModuleVisibility.gql';
+  import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery';
+  import {MODULE_PAGE} from '@/router/module.names';
 
-const EyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon');
+  import {defineAsyncComponent} from 'vue';
+  const EyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon'));
 
-export default {
-  mixins: [me],
-  components: {
-    EyeIcon,
-  },
+  export default {
 
-  data() {
-    return {
-      selectedClassId: '',
-    };
-  },
-
-  computed: {
-    schoolClasses() {
-      return this.me.schoolClasses.filter((schoolClass) => schoolClass.id !== this.me.selectedClass.id);
+    mixins: [me],
+    components: {
+      EyeIcon,
     },
-    slug() {
-      return this.$route.params.slug;
-    },
-  },
 
-  methods: {
-    select(selectedClassId) {
-      this.selectedClassId = selectedClassId;
+    data() {
+      return {
+        selectedClassId: '',
+      };
     },
-    sync() {
-      if (this.selectedClassId) {
-        const slug = this.slug;
-        this.$apollo
-          .mutate({
-            mutation: SYNC_VISIBILITY_MUTATION,
-            variables: {
-              input: {
-                module: slug,
-                templateSchoolClass: this.selectedClassId,
-                schoolClass: this.me.selectedClass.id,
-              },
-            },
-            refetchQueries: [
-              {
-                query: MODULE_DETAILS_QUERY,
-                variables: {
-                  slug,
+
+    computed: {
+      schoolClasses() {
+        return this.me.schoolClasses.filter(schoolClass => schoolClass.id !== this.me.selectedClass.id);
+      },
+      slug() {
+        return this.$route.params.slug;
+      }
+    },
+
+    methods: {
+      select(selectedClassId) {
+        this.selectedClassId = selectedClassId;
+      },
+      sync() {
+        if (this.selectedClassId) {
+          const slug = this.slug;
+          this.$apollo.mutate({
+              mutation: SYNC_VISIBILITY_MUTATION,
+              variables: {
+                input: {
+                  module: slug,
+                  templateSchoolClass: this.selectedClassId,
+                  schoolClass: this.me.selectedClass.id,
                 },
               },
-            ],
-          })
-          .then(() => {
+              refetchQueries: [
+                {
+                  query: MODULE_DETAILS_QUERY,
+                  variables: {
+                    slug,
+                  },
+                },
+              ],
+            },
+          ).then(() => {
             this.$router.push({
               name: MODULE_PAGE,
               params: {
-                slug,
-              },
+                slug
+              }
             });
           });
-      }
+        }
+      },
     },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/_helpers';
+  @import '~styles/_helpers';
 
-.module-visibility {
-  @include settings-page;
+  .module-visibility {
+    @include settings-page;
 
-  margin: 0 auto;
+    margin: 0 auto;
 
-  &__inline-icon {
-    width: 25px;
-    height: 25px;
-    vertical-align: middle;
+    &__inline-icon {
+      width: 25px;
+      height: 25px;
+      vertical-align: middle;
+    }
+
+    &__dropdown {
+      width: 200px;
+      margin: 0 $medium-spacing;
+    }
+
+    &__form {
+      display: flex;
+      align-items: center;
+      @include regular-text;
+      font-weight: 600;
+    }
   }
-
-  &__dropdown {
-    width: 200px;
-    margin: 0 $medium-spacing;
-  }
-
-  &__form {
-    display: flex;
-    align-items: center;
-    @include regular-text;
-    font-weight: 600;
-  }
-}
 </style>
diff --git a/client/src/pages/onboarding/start.vue b/client/src/pages/onboarding/start.vue
index 38f60e1c..f0f68914 100644
--- a/client/src/pages/onboarding/start.vue
+++ b/client/src/pages/onboarding/start.vue
@@ -1,18 +1,23 @@
 <template>
   <div>
     <logo class="onboarding__logo" />
-    <h1 class="onboarding__heading">Herzlich willkommen!</h1>
+    <h1 class="onboarding__heading">
+      Herzlich willkommen!
+    </h1>
 
-    <p class="onboarding__claim">Schauen Sie sich die Einführung an und lernen Sie {{ $flavor.textAppName }} kennen.</p>
+    <p class="onboarding__claim">
+      Schauen Sie sich die Einführung an und lernen Sie {{ $flavor.textAppName }} kennen.
+    </p>
   </div>
 </template>
 
 <script>
-const Logo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo');
+  import {defineAsyncComponent} from 'vue';
+  const Logo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Logo'));
 
-export default {
-  components: {
-    Logo,
-  },
-};
+  export default {
+    components: {
+      Logo
+    },
+  };
 </script>
diff --git a/client/src/pages/survey.vue b/client/src/pages/survey.vue
index 62aff446..88a249e2 100644
--- a/client/src/pages/survey.vue
+++ b/client/src/pages/survey.vue
@@ -5,282 +5,258 @@
     </h1>
     <div id="survey" />
 
-    <solution :value="solution" v-if="showSolution" />
+    <solution
+      :value="solution"
+      v-if="showSolution"
+    />
     <div v-if="surveyComplete">
-      <a class="button button--primary" @click="reopen">Übung bearbeiten</a>
+      <a
+        class="button button--primary"
+        @click="reopen"
+      >Übung bearbeiten</a>
     </div>
   </div>
 </template>
 
 <script>
-import '@/styles/survey.modern.css';
-import '@/styles/survey.reset.css';
-import { css } from '@/survey.config';
-import gql from 'graphql-tag';
-import { Model, StylesManager } from 'survey-knockout';
-// we are switching to the knockout version because the Vue version only works with Vue 2 (as of July 2022)
+  import {css} from '@/survey.config';
+  import gql from 'graphql-tag';
+  import {Model} from 'survey-core';
+  // we are switching to the knockout version because the Vue version only works with Vue 2 (as of July 2022)
+  import 'survey-knockout-ui';
 
-import SURVEY_QUERY from '@/graphql/gql/queries/surveyQuery.gql';
-import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
+  import SURVEY_QUERY from '@/graphql/gql/queries/surveyQuery.gql';
+  import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
 
-import { extractSurveySolutions } from '@/helpers/survey-solutions';
-import { isTeacher } from '@/helpers/is-teacher';
+  import {extractSurveySolutions} from '@/helpers/survey-solutions';
+  import {isTeacher} from '@/helpers/is-teacher';
 
-import { meQuery } from '@/graphql/queries';
+  import {meQuery} from '@/graphql/queries';
 
-const Solution = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/Solution');
-StylesManager.applyTheme('modern');
+  import {defineAsyncComponent} from 'vue';
+  const Solution = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution'));
 
-const MODULE_QUERY = gql`
-  query ModuleSolutions($slug: String) {
-    module(slug: $slug) {
-      solutionsEnabled
-      slug
+  const MODULE_QUERY = gql`
+    query ModuleSolutions($slug: String) {
+        module(slug: $slug) {
+            solutionsEnabled
+            slug
+        }
     }
-  }
 `;
 
-export default {
-  props: ['id'],
-  components: {
-    Solution,
-  },
-
-  data() {
-    return {
-      survey: this.initSurvey(),
-      currentPage: null,
-      surveyData: null,
-      title: '',
-      module: {},
-      completed: false,
-      me: {
-        permissions: [],
-      },
-      saveDisabled: false,
-    };
-  },
-
-  computed: {
-    surveyComplete() {
-      return this.survey && this.survey.isCompleted;
+  export default {
+    props: ['id'],
+    components: {
+      Solution,
     },
-    showSolution() {
-      return (this.module.solutionsEnabled || this.isTeacher) && !this.survey.isCompleted;
-    },
-    solution() {
-      // todo: should this be done inside of Solution.vue?
+
+    data() {
       return {
-        text: this.answers.reduce((previous, answer) => {
-          if (!answer.answer) {
-            return previous;
-          }
-          if (answer.type === 'matrix' || answer.type === 'checkbox') {
-            // wrap all the answers inside li tags and convert to a single string
-            const answerText = answer.answer.map((a) => `<li class="solution-text__list-item">${a}</li>`).join('');
-            return `
+        survey: this.initSurvey(),
+        title: '',
+        module: {},
+        completed: false,
+        me: {
+          permissions: [],
+        },
+        saveDisabled: false,
+      };
+    },
+
+    computed: {
+      surveyComplete() {
+        return this.survey && this.survey.isCompleted;
+      },
+      showSolution() {
+        return (this.module.solutionsEnabled || this.isTeacher) && !this.survey.isCompleted;
+      },
+      solution() {
+        // todo: should this be done inside of Solution.vue?
+        return {
+          text: this.answers.reduce((previous, answer) => {
+            if (!answer.answer) {
+              return previous;
+            }
+            if (answer.type === 'matrix' || answer.type === 'checkbox') {
+              // wrap all the answers inside li tags and convert to a single string
+              const answerText = answer.answer.map(a => `<li class="solution-text__list-item">${a}</li>`).join('');
+              return `
             ${previous}
             <h2 class="solution-text__heading">${answer.title}</h2>
             <ul class="solution-text__answer solution-text__list">${answerText}</ul>
             `;
-          } else {
-            return `
+            } else {
+              return `
             ${previous}
              <h2 class="solution-text__heading">${answer.title}</h2>
              <p class="solution-text__answer">${answer.answer}</p>
              `;
-          }
-        }, ''),
-      };
-    },
-    answers() {
-      return this.currentPage && this.currentPage.elements
-        ? this.currentPage.elements.reduce(extractSurveySolutions, [])
-        : [];
-    },
-    isTeacher() {
-      return isTeacher(this);
-    },
-  },
-
-  mounted() {
-    if (this.surveyData) {
-      this.loadSurveyFromServer(this.surveyData);
-    }
-  },
-
-  destroyed() {},
-
-  methods: {
-    initSurvey(data, answers) {
-      let survey = new Model(data);
-      const flatAnswers = {};
-      for (let k in answers) {
-        flatAnswers[k] = answers[k].answer;
-      }
-      if (Object.keys(flatAnswers).length > 0) {
-        // answers are not empty
-        survey.data = flatAnswers;
-      }
-
-      this.currentPage = survey.currentPage;
-
-      const updatePage = (sender, { oldCurrentPage, newCurrentPage }) => {
-        console.log(oldCurrentPage, newCurrentPage);
-        this.currentPage = newCurrentPage;
-      };
-
-      const saveSurvey = (sender, { exit }) => {
-        if (this.saveDisabled) {
-          return;
-        }
-
-        this.completed = true;
-
-        const data = {};
-
-        for (let k in survey.data) {
-          // if (survey.data.hasOwnProperty(k)) {
-          if (Object.prototype.hasOwnProperty.call(survey.data, k)) {
-            let question = sender.getQuestionByName(k);
-            data[k] = {
-              answer: survey.data[k],
-              correct: question && question.correctAnswer ? question.correctAnswer : '',
-            };
-          }
-        }
-        if (Object.keys(data).length === 0) {
-          // data is empty
-          return;
-        }
-        const answer = {
-          surveyId: this.id,
-          data: JSON.stringify(data),
+            }
+          }, ''),
         };
+      },
+      answers() {
+        return this.survey.currentPage && this.survey.currentPage.elements
+          ? this.survey.currentPage.elements.reduce(extractSurveySolutions, [])
+          : [];
+      },
+      isTeacher() {
+        return isTeacher(this);
+      },
+    },
 
-        this.$apollo
-          .mutate({
+    methods: {
+      initSurvey(data, answers) {
+        let survey = new Model(data);
+        const flatAnswers = {};
+        for (let k in answers) {
+          flatAnswers[k] = answers[k].answer;
+        }
+        this.$log.debug('flatAnswers', flatAnswers);
+        this.$log.debug('data', survey.data);
+        if (Object.keys(flatAnswers).length > 0) {
+          // answers are not empty
+          survey.data = flatAnswers;
+        }
+
+        const saveSurvey = (sender, {exit}) => {
+          this.$log.debug('saving survey', sender);
+          if (this.saveDisabled) {
+            return;
+          }
+
+          this.completed = true;
+
+          const data = {};
+
+          for (let k in survey.data) {
+            // if (survey.data.hasOwnProperty(k)) {
+              if (Object.prototype.hasOwnProperty.call(survey.data, k)) {
+              let question = sender.getQuestionByName(k);
+              data[k] = {
+                answer: survey.data[k],
+                correct: question && question.correctAnswer ? question.correctAnswer : '',
+              };
+            }
+          }
+          if (Object.keys(data).length === 0) {
+            // data is empty
+            return;
+          }
+          const answer = {
+            surveyId: this.id,
+            data: JSON.stringify(data),
+          };
+
+          this.$apollo.mutate({
             mutation: UPDATE_ANSWER,
             variables: {
               input: {
                 answer,
               },
             },
-            update: (
-              store,
-              {
-                data: {
-                  updateAnswer: { answer },
-                },
-              }
-            ) => {
+            update: (store, {data: {updateAnswer: {answer}}}) => {
               const query = SURVEY_QUERY;
-              const variables = { id: this.id };
-              const { survey } = store.readQuery({ query, variables });
+              const variables = {id: this.id};
+              const {survey} = store.readQuery({query, variables});
               if (survey) {
-                const newData = {
-                  // data is already in use in parent scope
+                const newData = { // data is already in use in parent scope
                   survey: {
                     ...survey,
-                    answer,
-                  },
+                    answer
+                  }
                 };
-                store.writeQuery({ query, variables, data: newData });
+                store.writeQuery({query, variables, data: newData});
               }
             },
-          })
-          .then(() => {
+          }).then(() => {
             if (exit) {
               this.$router.go(-1);
             }
           });
-      };
-
-      survey.onComplete.add((sender, options) => {
-        saveSurvey(sender, {
-          ...options,
-          exit: true,
-        });
-      });
-      survey.onCurrentPageChanged.add(saveSurvey);
-      survey.onCurrentPageChanged.add(updatePage);
-
-      survey.css = css;
-      survey.locale = 'de';
-      survey.showProgressBar = 'bottom';
-      survey.pageNextText = 'Speichern & Weiter';
-      survey.render('survey');
-      return survey;
-    },
-    reopen() {
-      this.saveDisabled = true; // disable saving, because resetting triggers a page change which we don't want to save
-      this.completed = false;
-      let data = this.survey.data; // save the data
-      this.survey.clear();
-      this.survey.data = data; // reapply it
-      this.saveDisabled = false;
-    },
-    loadSurveyFromServer(survey) {
-      let json = JSON.parse(survey.data);
-      json.showTitle = false;
-      json.showProgressBar = 'bottom';
-      let answer = {};
-      if (survey.answer && survey.answer.data) {
-        answer = JSON.parse(survey.answer.data);
-      }
-
-      if (!this.completed) {
-        this.survey = this.initSurvey(json, answer);
-      }
-      this.title = json.title;
-    },
-  },
-
-  apollo: {
-    survey: {
-      query: SURVEY_QUERY,
-      variables() {
-        return {
-          id: this.id,
         };
-      },
-      manual: true,
-      result({ data, loading }) {
-        if (!loading) {
-          this.surveyData = data.survey;
-          this.loadSurveyFromServer(data.survey);
-          const module = data.survey.module;
 
-          this.$apollo.addSmartQuery('module', {
-            query: MODULE_QUERY,
-            variables: {
-              slug: module.slug,
-            },
+        survey.onComplete.add((sender, options) => {
+          saveSurvey(sender, {
+            ...options,
+            exit: true
           });
-        }
+        });
+        survey.onCurrentPageChanged.add(saveSurvey);
+
+        survey.css = css;
+        survey.locale = 'de';
+        survey.showProgressBar = 'bottom';
+        survey.pageNextText = 'Speichern & Weiter';
+        this.$log.debug(survey.data);
+        survey.render('survey');
+        return survey;
+      },
+      reopen() {
+        this.saveDisabled = true; // disable saving, because resetting triggers a page change which we don't want to save
+        this.completed = false;
+        let data = this.survey.data; // save the data
+        this.survey.clear();
+        this.survey.data = data; // reapply it
+        this.saveDisabled = false;
       },
     },
-    me: meQuery,
-  },
-};
+
+    apollo: {
+      survey: {
+        query: SURVEY_QUERY,
+        variables() {
+          return {
+            id: this.id,
+          };
+        },
+        manual: true,
+        result({data, loading }) {
+          if (!loading) {
+            let json = JSON.parse(data.survey.data);
+            json.showTitle = false;
+            let answer = {};
+            if (data.survey.answer && data.survey.answer.data) {
+              answer = JSON.parse(data.survey.answer.data);
+            }
+
+            if (!this.completed) {
+              this.survey = this.initSurvey(json, answer);
+            }
+            this.title = json.title;
+            const module = data.survey.module;
+
+            this.$apollo.addSmartQuery('module', {
+              query: MODULE_QUERY,
+              variables: {
+                slug: module.slug
+              },
+            });
+          }
+        },
+      },
+      me: meQuery,
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.survey-page {
-  max-width: 800px;
-  display: grid;
-  grid-template-rows: auto 1fr;
-  grid-auto-rows: auto;
-  grid-row-gap: $large-spacing;
-  justify-self: center;
-  padding: 100px 0;
-  width: 100%;
+  .survey-page {
+    max-width: 800px;
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-auto-rows: auto;
+    grid-row-gap: $large-spacing;
+    justify-self: center;
+    padding: 100px 0;
+    width: 100%;
 
-  &__title {
-    @include meta-title;
-    margin: 0;
+    &__title {
+      @include meta-title;
+      margin: 0;
+    }
   }
-}
 </style>
diff --git a/client/src/pages/topic-page.vue b/client/src/pages/topic-page.vue
index fe29f0ad..125bf14a 100644
--- a/client/src/pages/topic-page.vue
+++ b/client/src/pages/topic-page.vue
@@ -46,15 +46,15 @@
 
 <script>
   import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
+  import {defineAsyncComponent} from 'vue';
   import TOPIC_QUERY from '@/graphql/gql/queries/topicQuery.gql';
   import me from '@/mixins/me';
   import TopicNavigation from '@/components/book-navigation/TopicNavigation';
 
   import UPDATE_LAST_TOPIC_MUTATION from '@/graphql/gql/mutations/updateLastTopic.gql';
   import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
-
-  const PlayIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/Play');
-  const BulbIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/BulbIcon');
+  const PlayIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Play'));
+  const BulbIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/BulbIcon'));
 
   export default {