Refactor: replace named slots

webapp/components/ContentMenu/ContentMenu.vue

@@ -12,20 +12,21 @@
         />
       </slot>
     </template>
-    <div slot="popover" slot-scope="{ toggleMenu }" class="content-menu-popover">
+    <template #popover="{ toggleMenu }">
-      <ds-menu :routes="routes">
+      <div class="content-menu-popover">
-        <ds-menu-item
+        <ds-menu :routes="routes">
-          slot="menuitem"
+          <ds-menu-item
-          slot-scope="item"
+            #menuitem="item"
-          :route="item.route"
+            :route="item.route"
-          :parents="item.parents"
+            :parents="item.parents"
-          @click.stop.prevent="openItem(item.route, toggleMenu)"
+            @click.stop.prevent="openItem(item.route, toggleMenu)"
-        >
+          >
-          <base-icon :name="item.route.icon" />
+            <base-icon :name="item.route.icon" />
-          {{ item.route.label }}
+            {{ item.route.label }}
-        </ds-menu-item>
+          </ds-menu-item>
-      </ds-menu>
+        </ds-menu>
-    </div>
+      </div>
+    </template>
   </dropdown>
 </template>
 

webapp/components/DropdownFilter/DropdownFilter.vue

@@ -14,14 +14,12 @@
       <base-icon class="dropdown-arrow" name="angle-down" />
     </a>
     <ds-menu
-      slot="popover"
+      #popover="{ toggleMenu }"
-      slot-scope="{ toggleMenu }"
       class="dropdown-menu-popover"
       :routes="filterOptions"
     >
       <ds-menu-item
-        slot="menuitem"
+        #menuitem="item"
-        slot-scope="item"
         class="dropdown-menu-item"
         :route="item.route"
         :parents="item.parents"

webapp/components/LocaleSwitch/LocaleSwitch.vue

@@ -13,15 +13,13 @@
         <base-icon class="dropdown-arrow" name="angle-down" />
       </a>
       <ds-menu
-        slot="popover"
+        #popover="{ toggleMenu }"
-        slot-scope="{ toggleMenu }"
         class="locale-menu-popover"
         :matcher="matcher"
         :routes="routes"
       >
         <ds-menu-item
-          slot="menuitem"
+          #menuitem="item"
-          slot-scope="item"
           class="locale-menu-item"
           :route="item.route"
           :parents="item.parents"

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>

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 #index="scope">{{ scope.index + 1 }}.</template>
-      <template slot="id" slot-scope="scope">
+      <template #id="scope">
         <nuxt-link :to="{ path: '/', query: { hashtag: encodeURI(scope.row.id) } }">
           <b>#{{ scope.row.id | truncate(20) }}</b>
         </nuxt-link>

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 #index="scope">{{ scope.row.index + 1 }}.</template>
-        <template slot="name" slot-scope="scope">
+        <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>