From d90e4c2aa821ff8acd4a0d4c0e0d98796c6caae2 Mon Sep 17 00:00:00 2001
From: Raphael Beer <raphael.beer@protonmail.com>
Date: Mon, 24 Feb 2020 18:26:14 +0100
Subject: [PATCH 1/6] Refactor: replace named slots

---
 webapp/components/ContentMenu/ContentMenu.vue | 29 ++++++++++---------
 .../DropdownFilter/DropdownFilter.vue         |  6 ++--
 .../components/LocaleSwitch/LocaleSwitch.vue  |  6 ++--
 webapp/pages/admin/categories.vue             |  2 +-
 webapp/pages/admin/hashtags.vue               |  4 +--
 webapp/pages/admin/users.vue                  | 10 +++----
 6 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/webapp/components/ContentMenu/ContentMenu.vue b/webapp/components/ContentMenu/ContentMenu.vue
index c69a2fcbc..d31a8e952 100644
--- a/webapp/components/ContentMenu/ContentMenu.vue
+++ b/webapp/components/ContentMenu/ContentMenu.vue
@@ -12,20 +12,21 @@
         />
       </slot>
     </template>
-    <div slot="popover" slot-scope="{ toggleMenu }" class="content-menu-popover">
-      <ds-menu :routes="routes">
-        <ds-menu-item
-          slot="menuitem"
-          slot-scope="item"
-          :route="item.route"
-          :parents="item.parents"
-          @click.stop.prevent="openItem(item.route, toggleMenu)"
-        >
-          <base-icon :name="item.route.icon" />
-          {{ item.route.label }}
-        </ds-menu-item>
-      </ds-menu>
-    </div>
+    <template #popover="{ toggleMenu }">
+      <div class="content-menu-popover">
+        <ds-menu :routes="routes">
+          <ds-menu-item
+            #menuitem="item"
+            :route="item.route"
+            :parents="item.parents"
+            @click.stop.prevent="openItem(item.route, toggleMenu)"
+          >
+            <base-icon :name="item.route.icon" />
+            {{ item.route.label }}
+          </ds-menu-item>
+        </ds-menu>
+      </div>
+    </template>
   </dropdown>
 </template>
 
diff --git a/webapp/components/DropdownFilter/DropdownFilter.vue b/webapp/components/DropdownFilter/DropdownFilter.vue
index f7bcf507d..51b40fd80 100644
--- a/webapp/components/DropdownFilter/DropdownFilter.vue
+++ b/webapp/components/DropdownFilter/DropdownFilter.vue
@@ -14,14 +14,12 @@
       <base-icon class="dropdown-arrow" name="angle-down" />
     </a>
     <ds-menu
-      slot="popover"
-      slot-scope="{ toggleMenu }"
+      #popover="{ toggleMenu }"
       class="dropdown-menu-popover"
       :routes="filterOptions"
     >
       <ds-menu-item
-        slot="menuitem"
-        slot-scope="item"
+        #menuitem="item"
         class="dropdown-menu-item"
         :route="item.route"
         :parents="item.parents"
diff --git a/webapp/components/LocaleSwitch/LocaleSwitch.vue b/webapp/components/LocaleSwitch/LocaleSwitch.vue
index 5c0d901c9..e6519d14d 100644
--- a/webapp/components/LocaleSwitch/LocaleSwitch.vue
+++ b/webapp/components/LocaleSwitch/LocaleSwitch.vue
@@ -13,15 +13,13 @@
         <base-icon class="dropdown-arrow" name="angle-down" />
       </a>
       <ds-menu
-        slot="popover"
-        slot-scope="{ toggleMenu }"
+        #popover="{ toggleMenu }"
         class="locale-menu-popover"
         :matcher="matcher"
         :routes="routes"
       >
         <ds-menu-item
-          slot="menuitem"
-          slot-scope="item"
+          #menuitem="item"
           class="locale-menu-item"
           :route="item.route"
           :parents="item.parents"
diff --git a/webapp/pages/admin/categories.vue b/webapp/pages/admin/categories.vue
index 3c6069678..5e91a8687 100644
--- a/webapp/pages/admin/categories.vue
+++ b/webapp/pages/admin/categories.vue
@@ -2,7 +2,7 @@
   <base-card>
     <h2 class="title">{{ $t('admin.categories.name') }}</h2>
     <ds-table :data="Category" :fields="fields" condensed>
-      <template slot="icon" slot-scope="scope">
+      <template #icon="scope">
         <base-icon :name="scope.row.icon" />
       </template>
     </ds-table>
diff --git a/webapp/pages/admin/hashtags.vue b/webapp/pages/admin/hashtags.vue
index ea774aab1..3f2c1572d 100644
--- a/webapp/pages/admin/hashtags.vue
+++ b/webapp/pages/admin/hashtags.vue
@@ -2,8 +2,8 @@
   <base-card>
     <h2 class="title">{{ $t('admin.hashtags.name') }}</h2>
     <ds-table :data="Tag" :fields="fields" condensed>
-      <template slot="index" slot-scope="scope">{{ scope.index + 1 }}.</template>
-      <template slot="id" slot-scope="scope">
+      <template #index="scope">{{ scope.index + 1 }}.</template>
+      <template #id="scope">
         <nuxt-link :to="{ path: '/', query: { hashtag: encodeURI(scope.row.id) } }">
           <b>#{{ scope.row.id | truncate(20) }}</b>
         </nuxt-link>
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index 4b8ca6ffe..3d9a4f660 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -19,8 +19,8 @@
     </base-card>
     <base-card v-if="User && User.length">
       <ds-table :data="User" :fields="fields" condensed>
-        <template slot="index" slot-scope="scope">{{ scope.row.index + 1 }}.</template>
-        <template slot="name" slot-scope="scope">
+        <template #index="scope">{{ scope.row.index + 1 }}.</template>
+        <template #name="scope">
           <nuxt-link
             :to="{
               name: 'profile-id-slug',
@@ -30,12 +30,12 @@
             <b>{{ scope.row.name | truncate(20) }}</b>
           </nuxt-link>
         </template>
-        <template slot="email" slot-scope="scope">
+        <template #email="scope">
           <a :href="`mailto:${scope.row.email}`">
             <b>{{ scope.row.email }}</b>
           </a>
         </template>
-        <template slot="slug" slot-scope="scope">
+        <template #slug="scope">
           <nuxt-link
             :to="{
               name: 'profile-id-slug',
@@ -45,7 +45,7 @@
             <b>{{ scope.row.slug | truncate(20) }}</b>
           </nuxt-link>
         </template>
-        <template slot="createdAt" slot-scope="scope">
+        <template #createdAt="scope">
           {{ scope.row.createdAt | dateTime }}
         </template>
       </ds-table>

From c3cf682fdfc33bb05121ca36d56a6667611fa50a Mon Sep 17 00:00:00 2001
From: Raphael Beer <raphael.beer@protonmail.com>
Date: Mon, 24 Feb 2020 19:10:45 +0100
Subject: [PATCH 2/6] Refactor: replace default slots

---
 webapp/components/CommentForm/CommentForm.vue |  2 +-
 webapp/components/ContentMenu/ContentMenu.vue |  2 +-
 .../ContributionForm/ContributionForm.vue     |  2 +-
 .../DropdownFilter/DropdownFilter.vue         | 26 +++++++++----------
 webapp/components/FilterPosts/FilterPosts.vue |  3 +--
 .../components/LocaleSwitch/LocaleSwitch.vue  | 22 ++++++++--------
 .../NotificationMenu/NotificationMenu.vue     |  2 +-
 webapp/components/Password/Change.vue         |  2 +-
 .../PasswordReset/ChangePassword.vue          |  2 +-
 webapp/pages/settings/index.vue               |  2 +-
 .../settings/my-email-address/enter-nonce.vue |  2 +-
 .../pages/settings/my-email-address/index.vue |  2 +-
 12 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/webapp/components/CommentForm/CommentForm.vue b/webapp/components/CommentForm/CommentForm.vue
index 422530259..b193989d7 100644
--- a/webapp/components/CommentForm/CommentForm.vue
+++ b/webapp/components/CommentForm/CommentForm.vue
@@ -1,6 +1,6 @@
 <template>
   <ds-form v-model="form" @submit="handleSubmit" class="comment-form">
-    <template slot-scope="{ errors }">
+    <template v-slot="{ errors }">
       <base-card>
         <hc-editor ref="editor" :users="users" :value="form.content" @input="updateEditorContent" />
         <div class="buttons">
diff --git a/webapp/components/ContentMenu/ContentMenu.vue b/webapp/components/ContentMenu/ContentMenu.vue
index d31a8e952..43a2dc968 100644
--- a/webapp/components/ContentMenu/ContentMenu.vue
+++ b/webapp/components/ContentMenu/ContentMenu.vue
@@ -1,6 +1,6 @@
 <template>
   <dropdown class="content-menu" :placement="placement" offset="5">
-    <template slot="default" slot-scope="{ toggleMenu }">
+    <template v-slot="{ toggleMenu }">
       <slot name="button" :toggleMenu="toggleMenu">
         <base-button
           data-test="content-menu-button"
diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index cc0680524..e7aecd171 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -6,7 +6,7 @@
     :schema="formSchema"
     @submit="submit"
   >
-    <template slot-scope="{ errors }">
+    <template v-slot="{ errors }">
       <base-card>
         <template #heroImage>
           <img
diff --git a/webapp/components/DropdownFilter/DropdownFilter.vue b/webapp/components/DropdownFilter/DropdownFilter.vue
index 51b40fd80..793630a29 100644
--- a/webapp/components/DropdownFilter/DropdownFilter.vue
+++ b/webapp/components/DropdownFilter/DropdownFilter.vue
@@ -1,18 +1,18 @@
 <template>
   <dropdown offset="8">
-    <a
-      :v-model="selected"
-      slot="default"
-      slot-scope="{ toggleMenu }"
-      name="dropdown"
-      class="dropdown-filter"
-      href="#"
-      @click.prevent="toggleMenu()"
-    >
-      <base-icon name="filter" />
-      <label class="label" for="dropdown">{{ selected }}</label>
-      <base-icon class="dropdown-arrow" name="angle-down" />
-    </a>
+    <template v-slot="{ toggleMenu }">
+      <a
+        :v-model="selected"
+        name="dropdown"
+        class="dropdown-filter"
+        href="#"
+        @click.prevent="toggleMenu()"
+      >
+        <base-icon name="filter" />
+        <label class="label" for="dropdown">{{ selected }}</label>
+        <base-icon class="dropdown-arrow" name="angle-down" />
+      </a>
+    </template>
     <ds-menu
       #popover="{ toggleMenu }"
       class="dropdown-menu-popover"
diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index 787751004..4df5113bc 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -1,11 +1,10 @@
 <template>
   <dropdown ref="menu" :placement="placement" :offset="offset">
     <base-button
-      slot="default"
+      v-slot="{ toggleMenu }"
       icon="filter"
       :filled="filterActive"
       :ghost="!filterActive"
-      slot-scope="{ toggleMenu }"
       @click.prevent="toggleMenu()"
     >
       <base-icon class="dropdown-arrow" name="angle-down" />
diff --git a/webapp/components/LocaleSwitch/LocaleSwitch.vue b/webapp/components/LocaleSwitch/LocaleSwitch.vue
index e6519d14d..689ccce8e 100644
--- a/webapp/components/LocaleSwitch/LocaleSwitch.vue
+++ b/webapp/components/LocaleSwitch/LocaleSwitch.vue
@@ -1,17 +1,17 @@
 <template>
   <client-only>
     <dropdown ref="menu" :placement="placement" :offset="offset">
-      <a
-        slot="default"
-        slot-scope="{ toggleMenu }"
-        class="locale-menu"
-        href="#"
-        @click.prevent="toggleMenu()"
-      >
-        <base-icon name="globe" />
-        <span class="label">{{ current.code.toUpperCase() }}</span>
-        <base-icon class="dropdown-arrow" name="angle-down" />
-      </a>
+      <template v-slot="{ toggleMenu }">
+        <a
+          class="locale-menu"
+          href="#"
+          @click.prevent="toggleMenu()"
+        >
+          <base-icon name="globe" />
+          <span class="label">{{ current.code.toUpperCase() }}</span>
+          <base-icon class="dropdown-arrow" name="angle-down" />
+        </a>
+      </template>
       <ds-menu
         #popover="{ toggleMenu }"
         class="locale-menu-popover"
diff --git a/webapp/components/NotificationMenu/NotificationMenu.vue b/webapp/components/NotificationMenu/NotificationMenu.vue
index fb047a0c3..bef0a89ca 100644
--- a/webapp/components/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/NotificationMenu/NotificationMenu.vue
@@ -7,7 +7,7 @@
     <base-button icon="bell" ghost circle />
   </nuxt-link>
   <dropdown v-else class="notifications-menu" offset="8" :placement="placement">
-    <template slot="default" slot-scope="{ toggleMenu }">
+    <template v-slot="{ toggleMenu }">
       <base-button @click="toggleMenu" ghost circle>
         <counter-icon icon="bell" :count="unreadNotificationsCount" danger />
       </base-button>
diff --git a/webapp/components/Password/Change.vue b/webapp/components/Password/Change.vue
index 547aab6a1..d58df66a3 100644
--- a/webapp/components/Password/Change.vue
+++ b/webapp/components/Password/Change.vue
@@ -1,6 +1,6 @@
 <template>
   <ds-form v-model="formData" :schema="formSchema" @submit="handleSubmit">
-    <template slot-scope="{ errors }">
+    <template v-slot="{ errors }">
       <ds-input
         id="oldPassword"
         model="oldPassword"
diff --git a/webapp/components/PasswordReset/ChangePassword.vue b/webapp/components/PasswordReset/ChangePassword.vue
index ab3334c6d..c6a3f09b4 100644
--- a/webapp/components/PasswordReset/ChangePassword.vue
+++ b/webapp/components/PasswordReset/ChangePassword.vue
@@ -7,7 +7,7 @@
       @submit="handleSubmitPassword"
       class="change-password"
     >
-      <template slot-scope="{ errors }">
+      <template v-slot="{ errors }">
         <ds-input
           id="password"
           model="password"
diff --git a/webapp/pages/settings/index.vue b/webapp/pages/settings/index.vue
index 1abd520e2..75568ab97 100644
--- a/webapp/pages/settings/index.vue
+++ b/webapp/pages/settings/index.vue
@@ -1,6 +1,6 @@
 <template>
   <ds-form v-model="form" :schema="formSchema" @submit="submit">
-    <template slot-scope="{ errors }">
+    <template v-slot="{ errors }">
       <base-card>
         <h2 class="title">{{ $t('settings.data.name') }}</h2>
         <ds-input
diff --git a/webapp/pages/settings/my-email-address/enter-nonce.vue b/webapp/pages/settings/my-email-address/enter-nonce.vue
index dfa44a1e4..81fe9c68e 100644
--- a/webapp/pages/settings/my-email-address/enter-nonce.vue
+++ b/webapp/pages/settings/my-email-address/enter-nonce.vue
@@ -1,6 +1,6 @@
 <template>
   <ds-form v-model="form" :schema="formSchema" @submit="submit">
-    <template slot-scope="{ errors }">
+    <template v-slot="{ errors }">
       <base-card>
         <h2 class="title">{{ $t('settings.email.name') }}</h2>
         <ds-input
diff --git a/webapp/pages/settings/my-email-address/index.vue b/webapp/pages/settings/my-email-address/index.vue
index 43b038a6b..b3dbe76ba 100644
--- a/webapp/pages/settings/my-email-address/index.vue
+++ b/webapp/pages/settings/my-email-address/index.vue
@@ -6,7 +6,7 @@
     <ds-text v-html="submitMessage" />
   </base-card>
   <ds-form v-else v-model="form" :schema="formSchema" @submit="submit">
-    <template slot-scope="{ errors }">
+    <template v-slot="{ errors }">
       <base-card>
         <h2 class="title">{{ $t('settings.email.name') }}</h2>
         <ds-input

From 5626cb277149d18e2730b1e9503d3695d8f263de Mon Sep 17 00:00:00 2001
From: Raphael Beer <raphael.beer@protonmail.com>
Date: Thu, 12 Mar 2020 19:51:42 +0100
Subject: [PATCH 3/6] Revert "Refactor: replace default slots"

  This reverts commit f1e308074bc33e6762431f90f335ed849776f4d9.

  Let's take this one at a time...
---
 webapp/components/CommentForm/CommentForm.vue |  2 +-
 webapp/components/ContentMenu/ContentMenu.vue |  2 +-
 .../ContributionForm/ContributionForm.vue     |  2 +-
 .../DropdownFilter/DropdownFilter.vue         | 26 +++++++++----------
 webapp/components/FilterPosts/FilterPosts.vue |  3 ++-
 .../components/LocaleSwitch/LocaleSwitch.vue  | 22 ++++++++--------
 .../NotificationMenu/NotificationMenu.vue     |  2 +-
 webapp/components/Password/Change.vue         |  2 +-
 .../PasswordReset/ChangePassword.vue          |  2 +-
 webapp/pages/settings/index.vue               |  2 +-
 .../settings/my-email-address/enter-nonce.vue |  2 +-
 .../pages/settings/my-email-address/index.vue |  2 +-
 12 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/webapp/components/CommentForm/CommentForm.vue b/webapp/components/CommentForm/CommentForm.vue
index b193989d7..422530259 100644
--- a/webapp/components/CommentForm/CommentForm.vue
+++ b/webapp/components/CommentForm/CommentForm.vue
@@ -1,6 +1,6 @@
 <template>
   <ds-form v-model="form" @submit="handleSubmit" class="comment-form">
-    <template v-slot="{ errors }">
+    <template slot-scope="{ errors }">
       <base-card>
         <hc-editor ref="editor" :users="users" :value="form.content" @input="updateEditorContent" />
         <div class="buttons">
diff --git a/webapp/components/ContentMenu/ContentMenu.vue b/webapp/components/ContentMenu/ContentMenu.vue
index 43a2dc968..d31a8e952 100644
--- a/webapp/components/ContentMenu/ContentMenu.vue
+++ b/webapp/components/ContentMenu/ContentMenu.vue
@@ -1,6 +1,6 @@
 <template>
   <dropdown class="content-menu" :placement="placement" offset="5">
-    <template v-slot="{ toggleMenu }">
+    <template slot="default" slot-scope="{ toggleMenu }">
       <slot name="button" :toggleMenu="toggleMenu">
         <base-button
           data-test="content-menu-button"
diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index e7aecd171..cc0680524 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -6,7 +6,7 @@
     :schema="formSchema"
     @submit="submit"
   >
-    <template v-slot="{ errors }">
+    <template slot-scope="{ errors }">
       <base-card>
         <template #heroImage>
           <img
diff --git a/webapp/components/DropdownFilter/DropdownFilter.vue b/webapp/components/DropdownFilter/DropdownFilter.vue
index 793630a29..51b40fd80 100644
--- a/webapp/components/DropdownFilter/DropdownFilter.vue
+++ b/webapp/components/DropdownFilter/DropdownFilter.vue
@@ -1,18 +1,18 @@
 <template>
   <dropdown offset="8">
-    <template v-slot="{ toggleMenu }">
-      <a
-        :v-model="selected"
-        name="dropdown"
-        class="dropdown-filter"
-        href="#"
-        @click.prevent="toggleMenu()"
-      >
-        <base-icon name="filter" />
-        <label class="label" for="dropdown">{{ selected }}</label>
-        <base-icon class="dropdown-arrow" name="angle-down" />
-      </a>
-    </template>
+    <a
+      :v-model="selected"
+      slot="default"
+      slot-scope="{ toggleMenu }"
+      name="dropdown"
+      class="dropdown-filter"
+      href="#"
+      @click.prevent="toggleMenu()"
+    >
+      <base-icon name="filter" />
+      <label class="label" for="dropdown">{{ selected }}</label>
+      <base-icon class="dropdown-arrow" name="angle-down" />
+    </a>
     <ds-menu
       #popover="{ toggleMenu }"
       class="dropdown-menu-popover"
diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index 4df5113bc..787751004 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -1,10 +1,11 @@
 <template>
   <dropdown ref="menu" :placement="placement" :offset="offset">
     <base-button
-      v-slot="{ toggleMenu }"
+      slot="default"
       icon="filter"
       :filled="filterActive"
       :ghost="!filterActive"
+      slot-scope="{ toggleMenu }"
       @click.prevent="toggleMenu()"
     >
       <base-icon class="dropdown-arrow" name="angle-down" />
diff --git a/webapp/components/LocaleSwitch/LocaleSwitch.vue b/webapp/components/LocaleSwitch/LocaleSwitch.vue
index 689ccce8e..e6519d14d 100644
--- a/webapp/components/LocaleSwitch/LocaleSwitch.vue
+++ b/webapp/components/LocaleSwitch/LocaleSwitch.vue
@@ -1,17 +1,17 @@
 <template>
   <client-only>
     <dropdown ref="menu" :placement="placement" :offset="offset">
-      <template v-slot="{ toggleMenu }">
-        <a
-          class="locale-menu"
-          href="#"
-          @click.prevent="toggleMenu()"
-        >
-          <base-icon name="globe" />
-          <span class="label">{{ current.code.toUpperCase() }}</span>
-          <base-icon class="dropdown-arrow" name="angle-down" />
-        </a>
-      </template>
+      <a
+        slot="default"
+        slot-scope="{ toggleMenu }"
+        class="locale-menu"
+        href="#"
+        @click.prevent="toggleMenu()"
+      >
+        <base-icon name="globe" />
+        <span class="label">{{ current.code.toUpperCase() }}</span>
+        <base-icon class="dropdown-arrow" name="angle-down" />
+      </a>
       <ds-menu
         #popover="{ toggleMenu }"
         class="locale-menu-popover"
diff --git a/webapp/components/NotificationMenu/NotificationMenu.vue b/webapp/components/NotificationMenu/NotificationMenu.vue
index bef0a89ca..fb047a0c3 100644
--- a/webapp/components/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/NotificationMenu/NotificationMenu.vue
@@ -7,7 +7,7 @@
     <base-button icon="bell" ghost circle />
   </nuxt-link>
   <dropdown v-else class="notifications-menu" offset="8" :placement="placement">
-    <template v-slot="{ toggleMenu }">
+    <template slot="default" slot-scope="{ toggleMenu }">
       <base-button @click="toggleMenu" ghost circle>
         <counter-icon icon="bell" :count="unreadNotificationsCount" danger />
       </base-button>
diff --git a/webapp/components/Password/Change.vue b/webapp/components/Password/Change.vue
index d58df66a3..547aab6a1 100644
--- a/webapp/components/Password/Change.vue
+++ b/webapp/components/Password/Change.vue
@@ -1,6 +1,6 @@
 <template>
   <ds-form v-model="formData" :schema="formSchema" @submit="handleSubmit">
-    <template v-slot="{ errors }">
+    <template slot-scope="{ errors }">
       <ds-input
         id="oldPassword"
         model="oldPassword"
diff --git a/webapp/components/PasswordReset/ChangePassword.vue b/webapp/components/PasswordReset/ChangePassword.vue
index c6a3f09b4..ab3334c6d 100644
--- a/webapp/components/PasswordReset/ChangePassword.vue
+++ b/webapp/components/PasswordReset/ChangePassword.vue
@@ -7,7 +7,7 @@
       @submit="handleSubmitPassword"
       class="change-password"
     >
-      <template v-slot="{ errors }">
+      <template slot-scope="{ errors }">
         <ds-input
           id="password"
           model="password"
diff --git a/webapp/pages/settings/index.vue b/webapp/pages/settings/index.vue
index 75568ab97..1abd520e2 100644
--- a/webapp/pages/settings/index.vue
+++ b/webapp/pages/settings/index.vue
@@ -1,6 +1,6 @@
 <template>
   <ds-form v-model="form" :schema="formSchema" @submit="submit">
-    <template v-slot="{ errors }">
+    <template slot-scope="{ errors }">
       <base-card>
         <h2 class="title">{{ $t('settings.data.name') }}</h2>
         <ds-input
diff --git a/webapp/pages/settings/my-email-address/enter-nonce.vue b/webapp/pages/settings/my-email-address/enter-nonce.vue
index 81fe9c68e..dfa44a1e4 100644
--- a/webapp/pages/settings/my-email-address/enter-nonce.vue
+++ b/webapp/pages/settings/my-email-address/enter-nonce.vue
@@ -1,6 +1,6 @@
 <template>
   <ds-form v-model="form" :schema="formSchema" @submit="submit">
-    <template v-slot="{ errors }">
+    <template slot-scope="{ errors }">
       <base-card>
         <h2 class="title">{{ $t('settings.email.name') }}</h2>
         <ds-input
diff --git a/webapp/pages/settings/my-email-address/index.vue b/webapp/pages/settings/my-email-address/index.vue
index b3dbe76ba..43b038a6b 100644
--- a/webapp/pages/settings/my-email-address/index.vue
+++ b/webapp/pages/settings/my-email-address/index.vue
@@ -6,7 +6,7 @@
     <ds-text v-html="submitMessage" />
   </base-card>
   <ds-form v-else v-model="form" :schema="formSchema" @submit="submit">
-    <template v-slot="{ errors }">
+    <template slot-scope="{ errors }">
       <base-card>
         <h2 class="title">{{ $t('settings.email.name') }}</h2>
         <ds-input

From d465e9459690d7cb343b4a0c811cea7c2190bddc Mon Sep 17 00:00:00 2001
From: Raphael Beer <raphael.beer@protonmail.com>
Date: Thu, 12 Mar 2020 23:49:27 +0100
Subject: [PATCH 4/6] Refactor: use #shorthand for default v-slot attributes

---
 webapp/components/CommentForm/CommentForm.vue |  2 +-
 webapp/components/ContentMenu/ContentMenu.vue |  2 +-
 .../ContributionForm/ContributionForm.vue     |  2 +-
 .../DropdownFilter/DropdownFilter.vue         | 26 +++++++++----------
 webapp/components/FilterPosts/FilterPosts.vue | 20 +++++++-------
 .../components/LocaleSwitch/LocaleSwitch.vue  | 18 +++++--------
 .../NotificationMenu/NotificationMenu.vue     |  2 +-
 webapp/components/Password/Change.vue         |  2 +-
 .../PasswordReset/ChangePassword.vue          |  2 +-
 webapp/pages/settings/index.vue               |  2 +-
 .../settings/my-email-address/enter-nonce.vue |  2 +-
 .../pages/settings/my-email-address/index.vue |  2 +-
 12 files changed, 39 insertions(+), 43 deletions(-)

diff --git a/webapp/components/CommentForm/CommentForm.vue b/webapp/components/CommentForm/CommentForm.vue
index 422530259..55f675656 100644
--- a/webapp/components/CommentForm/CommentForm.vue
+++ b/webapp/components/CommentForm/CommentForm.vue
@@ -1,6 +1,6 @@
 <template>
   <ds-form v-model="form" @submit="handleSubmit" class="comment-form">
-    <template slot-scope="{ errors }">
+    <template #default="{ errors }">
       <base-card>
         <hc-editor ref="editor" :users="users" :value="form.content" @input="updateEditorContent" />
         <div class="buttons">
diff --git a/webapp/components/ContentMenu/ContentMenu.vue b/webapp/components/ContentMenu/ContentMenu.vue
index d31a8e952..1b9f24317 100644
--- a/webapp/components/ContentMenu/ContentMenu.vue
+++ b/webapp/components/ContentMenu/ContentMenu.vue
@@ -1,6 +1,6 @@
 <template>
   <dropdown class="content-menu" :placement="placement" offset="5">
-    <template slot="default" slot-scope="{ toggleMenu }">
+    <template #default="{ toggleMenu }">
       <slot name="button" :toggleMenu="toggleMenu">
         <base-button
           data-test="content-menu-button"
diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index cc0680524..4a163821b 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -6,7 +6,7 @@
     :schema="formSchema"
     @submit="submit"
   >
-    <template slot-scope="{ errors }">
+    <template #default="{ errors }">
       <base-card>
         <template #heroImage>
           <img
diff --git a/webapp/components/DropdownFilter/DropdownFilter.vue b/webapp/components/DropdownFilter/DropdownFilter.vue
index 51b40fd80..4abf6ab41 100644
--- a/webapp/components/DropdownFilter/DropdownFilter.vue
+++ b/webapp/components/DropdownFilter/DropdownFilter.vue
@@ -1,18 +1,18 @@
 <template>
   <dropdown offset="8">
-    <a
-      :v-model="selected"
-      slot="default"
-      slot-scope="{ toggleMenu }"
-      name="dropdown"
-      class="dropdown-filter"
-      href="#"
-      @click.prevent="toggleMenu()"
-    >
-      <base-icon name="filter" />
-      <label class="label" for="dropdown">{{ selected }}</label>
-      <base-icon class="dropdown-arrow" name="angle-down" />
-    </a>
+    <template #default="{ toggleMenu }">
+      <a
+        :v-model="selected"
+        name="dropdown"
+        class="dropdown-filter"
+        href="#"
+        @click.prevent="toggleMenu()"
+      >
+        <base-icon name="filter" />
+        <label class="label" for="dropdown">{{ selected }}</label>
+        <base-icon class="dropdown-arrow" name="angle-down" />
+      </a>
+    </template>
     <ds-menu
       #popover="{ toggleMenu }"
       class="dropdown-menu-popover"
diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index 787751004..e70c066f1 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -1,15 +1,15 @@
 <template>
   <dropdown ref="menu" :placement="placement" :offset="offset">
-    <base-button
-      slot="default"
-      icon="filter"
-      :filled="filterActive"
-      :ghost="!filterActive"
-      slot-scope="{ toggleMenu }"
-      @click.prevent="toggleMenu()"
-    >
-      <base-icon class="dropdown-arrow" name="angle-down" />
-    </base-button>
+    <template #default="{ toggleMenu }">
+      <base-button
+        icon="filter"
+        :filled="filterActive"
+        :ghost="!filterActive"
+        @click.prevent="toggleMenu()"
+      >
+        <base-icon class="dropdown-arrow" name="angle-down" />
+      </base-button>
+    </template>
     <template slot="popover">
       <ds-container>
         <categories-filter-menu-items :chunk="chunk" />
diff --git a/webapp/components/LocaleSwitch/LocaleSwitch.vue b/webapp/components/LocaleSwitch/LocaleSwitch.vue
index e6519d14d..c38a600b1 100644
--- a/webapp/components/LocaleSwitch/LocaleSwitch.vue
+++ b/webapp/components/LocaleSwitch/LocaleSwitch.vue
@@ -1,17 +1,13 @@
 <template>
   <client-only>
     <dropdown ref="menu" :placement="placement" :offset="offset">
-      <a
-        slot="default"
-        slot-scope="{ toggleMenu }"
-        class="locale-menu"
-        href="#"
-        @click.prevent="toggleMenu()"
-      >
-        <base-icon name="globe" />
-        <span class="label">{{ current.code.toUpperCase() }}</span>
-        <base-icon class="dropdown-arrow" name="angle-down" />
-      </a>
+      <template #default="{ toggleMenu }">
+        <a class="locale-menu" href="#" @click.prevent="toggleMenu()">
+          <base-icon name="globe" />
+          <span class="label">{{ current.code.toUpperCase() }}</span>
+          <base-icon class="dropdown-arrow" name="angle-down" />
+        </a>
+      </template>
       <ds-menu
         #popover="{ toggleMenu }"
         class="locale-menu-popover"
diff --git a/webapp/components/NotificationMenu/NotificationMenu.vue b/webapp/components/NotificationMenu/NotificationMenu.vue
index fb047a0c3..072d9888c 100644
--- a/webapp/components/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/NotificationMenu/NotificationMenu.vue
@@ -7,7 +7,7 @@
     <base-button icon="bell" ghost circle />
   </nuxt-link>
   <dropdown v-else class="notifications-menu" offset="8" :placement="placement">
-    <template slot="default" slot-scope="{ toggleMenu }">
+    <template #default="{ toggleMenu }">
       <base-button @click="toggleMenu" ghost circle>
         <counter-icon icon="bell" :count="unreadNotificationsCount" danger />
       </base-button>
diff --git a/webapp/components/Password/Change.vue b/webapp/components/Password/Change.vue
index 547aab6a1..cd955973f 100644
--- a/webapp/components/Password/Change.vue
+++ b/webapp/components/Password/Change.vue
@@ -1,6 +1,6 @@
 <template>
   <ds-form v-model="formData" :schema="formSchema" @submit="handleSubmit">
-    <template slot-scope="{ errors }">
+    <template #default="{ errors }">
       <ds-input
         id="oldPassword"
         model="oldPassword"
diff --git a/webapp/components/PasswordReset/ChangePassword.vue b/webapp/components/PasswordReset/ChangePassword.vue
index ab3334c6d..2873505c6 100644
--- a/webapp/components/PasswordReset/ChangePassword.vue
+++ b/webapp/components/PasswordReset/ChangePassword.vue
@@ -7,7 +7,7 @@
       @submit="handleSubmitPassword"
       class="change-password"
     >
-      <template slot-scope="{ errors }">
+      <template #default="{ errors }">
         <ds-input
           id="password"
           model="password"
diff --git a/webapp/pages/settings/index.vue b/webapp/pages/settings/index.vue
index 1abd520e2..3eac46665 100644
--- a/webapp/pages/settings/index.vue
+++ b/webapp/pages/settings/index.vue
@@ -1,6 +1,6 @@
 <template>
   <ds-form v-model="form" :schema="formSchema" @submit="submit">
-    <template slot-scope="{ errors }">
+    <template #default="{ errors }">
       <base-card>
         <h2 class="title">{{ $t('settings.data.name') }}</h2>
         <ds-input
diff --git a/webapp/pages/settings/my-email-address/enter-nonce.vue b/webapp/pages/settings/my-email-address/enter-nonce.vue
index dfa44a1e4..4faae6692 100644
--- a/webapp/pages/settings/my-email-address/enter-nonce.vue
+++ b/webapp/pages/settings/my-email-address/enter-nonce.vue
@@ -1,6 +1,6 @@
 <template>
   <ds-form v-model="form" :schema="formSchema" @submit="submit">
-    <template slot-scope="{ errors }">
+    <template #default="{ errors }">
       <base-card>
         <h2 class="title">{{ $t('settings.email.name') }}</h2>
         <ds-input
diff --git a/webapp/pages/settings/my-email-address/index.vue b/webapp/pages/settings/my-email-address/index.vue
index 43b038a6b..ffb1a0cc5 100644
--- a/webapp/pages/settings/my-email-address/index.vue
+++ b/webapp/pages/settings/my-email-address/index.vue
@@ -6,7 +6,7 @@
     <ds-text v-html="submitMessage" />
   </base-card>
   <ds-form v-else v-model="form" :schema="formSchema" @submit="submit">
-    <template slot-scope="{ errors }">
+    <template #default="{ errors }">
       <base-card>
         <h2 class="title">{{ $t('settings.email.name') }}</h2>
         <ds-input

From 7df4432601df230fe3bcfce5df0e0befd384fd91 Mon Sep 17 00:00:00 2001
From: Raphael Beer <raphael.beer@protonmail.com>
Date: Fri, 13 Mar 2020 00:09:33 +0100
Subject: [PATCH 5/6] Fix: named slot scopes

---
 webapp/components/ContentMenu/ContentMenu.vue | 19 ++++++------
 .../DropdownFilter/DropdownFilter.vue         | 29 +++++++++---------
 .../components/LocaleSwitch/LocaleSwitch.vue  | 30 +++++++++----------
 3 files changed, 38 insertions(+), 40 deletions(-)

diff --git a/webapp/components/ContentMenu/ContentMenu.vue b/webapp/components/ContentMenu/ContentMenu.vue
index 1b9f24317..ba9c37c34 100644
--- a/webapp/components/ContentMenu/ContentMenu.vue
+++ b/webapp/components/ContentMenu/ContentMenu.vue
@@ -15,15 +15,16 @@
     <template #popover="{ toggleMenu }">
       <div class="content-menu-popover">
         <ds-menu :routes="routes">
-          <ds-menu-item
-            #menuitem="item"
-            :route="item.route"
-            :parents="item.parents"
-            @click.stop.prevent="openItem(item.route, toggleMenu)"
-          >
-            <base-icon :name="item.route.icon" />
-            {{ item.route.label }}
-          </ds-menu-item>
+          <template #menuitem="item">
+            <ds-menu-item
+              :route="item.route"
+              :parents="item.parents"
+              @click.stop.prevent="openItem(item.route, toggleMenu)"
+            >
+              <base-icon :name="item.route.icon" />
+              {{ item.route.label }}
+            </ds-menu-item>
+          </template>
         </ds-menu>
       </div>
     </template>
diff --git a/webapp/components/DropdownFilter/DropdownFilter.vue b/webapp/components/DropdownFilter/DropdownFilter.vue
index 4abf6ab41..27d29e5e1 100644
--- a/webapp/components/DropdownFilter/DropdownFilter.vue
+++ b/webapp/components/DropdownFilter/DropdownFilter.vue
@@ -13,21 +13,20 @@
         <base-icon class="dropdown-arrow" name="angle-down" />
       </a>
     </template>
-    <ds-menu
-      #popover="{ toggleMenu }"
-      class="dropdown-menu-popover"
-      :routes="filterOptions"
-    >
-      <ds-menu-item
-        #menuitem="item"
-        class="dropdown-menu-item"
-        :route="item.route"
-        :parents="item.parents"
-        @click.stop.prevent="filter(item.route, toggleMenu)"
-      >
-        {{ item.route.label }}
-      </ds-menu-item>
-    </ds-menu>
+    <template #popover="{ toggleMenu }">
+      <ds-menu class="dropdown-menu-popover" :routes="filterOptions">
+        <template #menuitem="item">
+          <ds-menu-item
+            class="dropdown-menu-item"
+            :route="item.route"
+            :parents="item.parents"
+            @click.stop.prevent="filter(item.route, toggleMenu)"
+          >
+            {{ item.route.label }}
+          </ds-menu-item>
+        </template>
+      </ds-menu>
+    </template>
   </dropdown>
 </template>
 <script>
diff --git a/webapp/components/LocaleSwitch/LocaleSwitch.vue b/webapp/components/LocaleSwitch/LocaleSwitch.vue
index c38a600b1..fc87b7aa5 100644
--- a/webapp/components/LocaleSwitch/LocaleSwitch.vue
+++ b/webapp/components/LocaleSwitch/LocaleSwitch.vue
@@ -8,22 +8,20 @@
           <base-icon class="dropdown-arrow" name="angle-down" />
         </a>
       </template>
-      <ds-menu
-        #popover="{ toggleMenu }"
-        class="locale-menu-popover"
-        :matcher="matcher"
-        :routes="routes"
-      >
-        <ds-menu-item
-          #menuitem="item"
-          class="locale-menu-item"
-          :route="item.route"
-          :parents="item.parents"
-          @click.stop.prevent="changeLanguage(item.route.path, toggleMenu)"
-        >
-          {{ item.route.name }}
-        </ds-menu-item>
-      </ds-menu>
+      <template #popover="{ toggleMenu }">
+        <ds-menu class="locale-menu-popover" :matcher="matcher" :routes="routes">
+          <template #menuitem="item">
+            <ds-menu-item
+              class="locale-menu-item"
+              :route="item.route"
+              :parents="item.parents"
+              @click.stop.prevent="changeLanguage(item.route.path, toggleMenu)"
+            >
+              {{ item.route.name }}
+            </ds-menu-item>
+          </template>
+        </ds-menu>
+      </template>
     </dropdown>
   </client-only>
 </template>

From c2e8ea0634d78feb7e1a9a1717dc9cba9cea7909 Mon Sep 17 00:00:00 2001
From: Raphael Beer <raphael.beer@protonmail.com>
Date: Sat, 14 Mar 2020 01:02:12 +0100
Subject: [PATCH 6/6] Chore: update Vue styleguide

---
 webapp/vue.md | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/webapp/vue.md b/webapp/vue.md
index 5116bd713..2485e99e6 100644
--- a/webapp/vue.md
+++ b/webapp/vue.md
@@ -3,6 +3,7 @@
 ## We use single-file components
 
 Each component lives in a single file, containing:
+
 - its `template` (the DOM structure)
 - its `script` (including `props`, `data` and `methods` among other things)
 - its `style` (defining the look of the component)
@@ -10,6 +11,7 @@ Each component lives in a single file, containing:
 See the [Vue.js docs](https://vuejs.org/v2/guide/single-file-components.html) for more details.
 
 Placed in the same folder are also:
+
 - the test file (e.g. `MyComponent.spec.js`)
 - the storybook file (e.g. `MyComponent.story.js`)
 
@@ -20,6 +22,7 @@ Vue.js allows us to define component props either as strings or as objects (with
 Also: only (and always!) define a `default` for props that are _not required_.
 
 Why?
+
 - it makes our code more robust – a warning will be shown when passing a wrong prop type
 - it clearly defines the component API and tells other developers how to use it
 
@@ -43,11 +46,14 @@ For more complex use cases see the [official Vue.js documentation](https://vuejs
 ## We use shorthands
 
 For better readability we prefer
+
 - `:something` over `v-bind:something`
 - `@click` over `v-on:click`
+- `#slotSame` over `v-slot:slotName`
+- `#default` over `v-slot`
 
-Read more in the [official Vue.js docs](https://vuejs.org/v2/guide/syntax.html#Shorthands)
+Read more in the [official Vue.js docs](https://vuejs.org/v2/guide/syntax.html#Shorthands) (for [slots](https://vuejs.org/v2/guide/components-slots.html#Named-Slots-Shorthand))
 
 ## Recommended reads
 
-The [Vue.js component style guide](https://pablohpsilva.github.io/vuejs-component-style-guide/#/?id=harness-your-component-props) offers a whole list of best-practices for writing Vue components. 
+The [Vue.js component style guide](https://pablohpsilva.github.io/vuejs-component-style-guide/#/?id=harness-your-component-props) offers a whole list of best-practices for writing Vue components.