diff --git a/js/src/components/Account/ActorAutoComplete.vue b/js/src/components/Account/ActorAutoComplete.vue
index 87993510..a7f14334 100644
--- a/js/src/components/Account/ActorAutoComplete.vue
+++ b/js/src/components/Account/ActorAutoComplete.vue
@@ -10,7 +10,7 @@
     @select="handleSelect"
     @infinite-scroll="getAsyncData"
   >
-    <template slot-scope="props">
+    <template #default="props">
       <div class="media">
         <div class="media-left">
           <img
diff --git a/js/src/components/Admin/Followers.vue b/js/src/components/Admin/Followers.vue
index cae94c52..f8472c04 100644
--- a/js/src/components/Admin/Followers.vue
+++ b/js/src/components/Admin/Followers.vue
@@ -78,7 +78,7 @@
         ></b-table-column
       >
 
-      <template slot="detail" slot-scope="props">
+      <template #detail="props">
         <article>
           <div class="content">
             <strong>{{ props.row.actor.name }}</strong>
diff --git a/js/src/components/Admin/Followings.vue b/js/src/components/Admin/Followings.vue
index f21825ab..18a9fbb9 100644
--- a/js/src/components/Admin/Followings.vue
+++ b/js/src/components/Admin/Followings.vue
@@ -103,7 +103,7 @@
         ></b-table-column
       >
 
-      <template slot="detail" slot-scope="props">
+      <template #detail="props">
         <article>
           <div class="content">
             <strong>{{ props.row.targetActor.name }}</strong>
diff --git a/js/src/components/Event/AddressAutoComplete.vue b/js/src/components/Event/AddressAutoComplete.vue
index a3b39c96..8b403591 100644
--- a/js/src/components/Event/AddressAutoComplete.vue
+++ b/js/src/components/Event/AddressAutoComplete.vue
@@ -12,7 +12,7 @@
         expanded
         @select="updateSelected"
       >
-        <template slot-scope="{ option }">
+        <template #default="{ option }">
           <b-icon :icon="option.poiInfos.poiIcon.icon" />
           <b>{{ option.poiInfos.name }}</b
           ><br />
diff --git a/js/src/views/Admin/GroupProfiles.vue b/js/src/views/Admin/GroupProfiles.vue
index 5ee1c757..9d255331 100644
--- a/js/src/views/Admin/GroupProfiles.vue
+++ b/js/src/views/Admin/GroupProfiles.vue
@@ -33,7 +33,7 @@
           :label="$t('Username')"
           searchable
         >
-          <template slot="searchable" slot-scope="props">
+          <template #searchable="props">
             <b-input
               v-model="props.filters.preferredUsername"
               placeholder="Search..."
@@ -68,7 +68,7 @@
         </b-table-column>
 
         <b-table-column field="domain" :label="$t('Domain')" searchable>
-          <template slot="searchable" slot-scope="props">
+          <template #searchable="props">
             <b-input
               v-model="props.filters.domain"
               placeholder="Search..."
diff --git a/js/src/views/Admin/Profiles.vue b/js/src/views/Admin/Profiles.vue
index fa8ba120..71384cf5 100644
--- a/js/src/views/Admin/Profiles.vue
+++ b/js/src/views/Admin/Profiles.vue
@@ -33,7 +33,7 @@
           :label="$t('Username')"
           searchable
         >
-          <template slot="searchable" slot-scope="props">
+          <template #searchable="props">
             <b-input
               v-model="props.filters.preferredUsername"
               placeholder="Search..."
@@ -68,7 +68,7 @@
         </b-table-column>
 
         <b-table-column field="domain" :label="$t('Domain')" searchable>
-          <template slot="searchable" slot-scope="props">
+          <template #searchable="props">
             <b-input
               v-model="props.filters.domain"
               placeholder="Search..."
diff --git a/js/src/views/Admin/Users.vue b/js/src/views/Admin/Users.vue
index ff647f01..60ffb817 100644
--- a/js/src/views/Admin/Users.vue
+++ b/js/src/views/Admin/Users.vue
@@ -33,7 +33,7 @@
           {{ props.row.id }}
         </b-table-column>
         <b-table-column field="email" :label="$t('Email')" searchable>
-          <template slot="searchable" slot-scope="props">
+          <template #searchable="props">
             <b-input
               v-model="props.filters.email"
               :placeholder="$t('Search…')"
@@ -76,7 +76,7 @@
           {{ props.row.locale }}
         </b-table-column>
 
-        <template slot="detail" slot-scope="props">
+        <template #detail="props">
           <router-link
             class="profile"
             v-for="actor in props.row.actors"
diff --git a/js/src/views/Event/Participants.vue b/js/src/views/Event/Participants.vue
index c530dad3..93886e2b 100644
--- a/js/src/views/Event/Participants.vue
+++ b/js/src/views/Event/Participants.vue
@@ -172,7 +172,7 @@
             }}
           </span>
         </b-table-column>
-        <template slot="detail" slot-scope="props">
+        <template #detail="props">
           <article v-html="nl2br(props.row.metadata.message)" />
         </template>
         <template slot="empty">