docs: refactor/doc slots

packages/docs/src/components/components/ApiExplorer.vue

@@ -14,10 +14,7 @@
         chips
         return-object
       >
-        <template
-          slot="selection"
-          slot-scope="props"
-        >
+        <template v-slot:selection="props">
           <v-chip
             :selected="props.selected"
             color="primary"
@@ -31,10 +28,7 @@
             <span v-text="props.item.text" />
           </v-chip>
         </template>
-        <template
-          slot="item"
-          slot-scope="props"
-        >
+        <template v-slot:item="props">
           <v-list-tile-action>
             <v-icon v-text="props.item.icon" />
           </v-list-tile-action>

packages/docs/src/components/core/Ecosystems.vue

@@ -6,19 +6,21 @@
     offset-y
     max-height="700"
   >
-    <v-btn
-      slot="activator"
-      :aria-label="$t('Vuetify.AppToolbar.ecosystem')"
-      flat
-      style="min-width: 48px"
-    >
-      <span
-        class="hidden-sm-and-down mr-1"
-        v-text="$t('Vuetify.AppToolbar.ecosystem')"
-      />
-      <v-icon class="hidden-sm-and-down">mdi-menu-down</v-icon>
-      <v-icon class="hidden-md-and-up">mdi-earth</v-icon>
-    </v-btn>
+    <template #activator="{ on: menu }">
+      <v-btn
+        :aria-label="$t('Vuetify.AppToolbar.ecosystem')"
+        flat
+        style="min-width: 48px"
+        v-on="{ ...menu }"
+      >
+        <span
+          class="hidden-sm-and-down mr-1"
+          v-text="$t('Vuetify.AppToolbar.ecosystem')"
+        />
+        <v-icon class="hidden-sm-and-down">mdi-menu-down</v-icon>
+        <v-icon class="hidden-md-and-up">mdi-earth</v-icon>
+      </v-btn>
+    </template>
 
     <v-list
       light

packages/docs/src/components/core/Group.vue

@@ -5,10 +5,9 @@
     :sub-group="subGroup"
     no-action
   >
-    <core-item
-      slot="activator"
-      :text="item.text"
-    />
+    <template v-slot:activator>
+      <core-item :text="item.text" />
+    </template>
     <template v-for="(child, i) in children">
       <core-sub-group
         v-if="child.group != null"

packages/docs/src/components/core/Locales.vue

@@ -5,19 +5,21 @@
     left
     offset-y
   >
-    <v-btn
-      slot="activator"
-      :aria-label="$t('Vuetify.AppToolbar.translations')"
-      flat
-      style="min-width: 48px"
-    >
-      <v-icon v-if="currentLanguage.locale === 'eo-UY'">language</v-icon>
-      <v-img
-        v-else
-        :src="`https://cdn.vuetifyjs.com/images/flags/${currentLanguage.country}.png`"
-        width="26px"
-      />
-    </v-btn>
+    <template #activator="{ on: menu }">
+      <v-btn
+        :aria-label="$t('Vuetify.AppToolbar.translations')"
+        flat
+        style="min-width: 48px"
+        v-on="{ ...menu }"
+      >
+        <v-icon v-if="currentLanguage.locale === 'eo-UY'">language</v-icon>
+        <v-img
+          v-else
+          :src="`https://cdn.vuetifyjs.com/images/flags/${currentLanguage.country}.png`"
+          width="26px"
+        />
+      </v-btn>
+    </template>
     <v-list
       dense
       light

packages/docs/src/components/core/Supports.vue

@@ -6,19 +6,21 @@
     offset-y
     max-height="500"
   >
-    <v-btn
-      slot="activator"
-      :aria-label="$t('Vuetify.AppToolbar.support')"
-      flat
-      style="min-width: 48px"
-    >
-      <span
-        class="hidden-sm-and-down mr-1"
-        v-text="$t('Vuetify.AppToolbar.support')"
-      />
-      <v-icon class="hidden-sm-and-down">mdi-menu-down</v-icon>
-      <v-icon class="hidden-md-and-up">mdi-comment-question</v-icon>
-    </v-btn>
+    <template #activator="{ on: menu }">
+      <v-btn
+        :aria-label="$t('Vuetify.AppToolbar.support')"
+        flat
+        style="min-width: 48px"
+        v-on="{ ...menu }"
+      >
+        <span
+          class="hidden-sm-and-down mr-1"
+          v-text="$t('Vuetify.AppToolbar.support')"
+        />
+        <v-icon class="hidden-sm-and-down">mdi-menu-down</v-icon>
+        <v-icon class="hidden-md-and-up">mdi-comment-question</v-icon>
+      </v-btn>
+    </template>
     <v-list dense>
       <v-subheader v-text="$t('Vuetify.AppToolbar.getHelp')" />
       <core-item

packages/docs/src/components/core/Versions.vue

@@ -6,17 +6,19 @@
     offset-y
     max-height="500"
   >
-    <v-btn
-      slot="activator"
-      class="hidden-md-and-down"
-      flat
-    >
-      <span
-        class="text-lowercase mr-1"
-        v-text="version"
-      />
-      <v-icon class="hidden-sm-and-down">mdi-menu-down</v-icon>
-    </v-btn>
+    <template #activator="{ on: menu }">
+      <v-btn
+        class="hidden-md-and-down"
+        flat
+        v-on="{ ...menu }"
+      >
+        <span
+          class="text-lowercase mr-1"
+          v-text="version"
+        />
+        <v-icon class="hidden-sm-and-down">mdi-menu-down</v-icon>
+      </v-btn>
+    </template>
 
     <v-card>
       <v-list dense>

packages/docs/src/components/doc/Parameters.vue

@@ -16,10 +16,7 @@
       content-tag="v-layout"
       content-class="wrap"
     >
-      <template
-        slot="item"
-        slot-scope="{ item }"
-      >
+      <template v-slot:item="{ item }">
         <v-flex xs12 grey lighten-2 mt-2>
           <v-layout wrap px-2 py-1>
             <v-flex

packages/docs/src/components/getting-started/Faq.vue

@@ -27,7 +27,7 @@
           content-class="v-data-iterator--faq"
           hide-actions
         >
-          <template slot="item" slot-scope="{ item: gotcha, index }">
+          <template v-slot:item="{ item: gotcha, index }">
             <div class="mb-5">
               <core-goto :id="`question-${index + 1}`">
                 <doc-markdown :code="gotcha.q" />

packages/docs/src/components/getting-started/Roadmap.vue

@@ -9,9 +9,9 @@
         v-if="typeof item === 'number'"
         :key="`divider-${i}`"
       >
-        <span slot="opposite">
-          Completed
-        </span>
+        <template v-slot:opposite>
+          <span>Completed</span>
+        </template>
       </v-timeline-item>
       <v-timeline-item
         v-else-if="index == null || index >= i"
@@ -21,11 +21,12 @@
         :small="item.complete || item.small"
         fill-dot
       >
-        <strong
-          slot="opposite"
-          :class="index === i ? 'primary--text' : undefined"
-          v-text="item.caption"
-        />
+        <template v-slot:opposite>
+          <strong
+            :class="index === i ? 'primary--text' : undefined"
+            v-text="item.caption"
+          />
+        </template>
         <v-card
           :class="`elevation-${item.value ? 8 : 1}`"
           :hover="!item.complete"

packages/docs/src/components/themes/Premium.vue

@@ -48,22 +48,26 @@
                 top
                 right
               >
-                <v-tooltip
-                  slot="activator"
-                  bottom
-                >
-                  <v-btn
-                    slot="activator"
-                    :href="template.demoUrl.length === 1 ? `${template.demoUrl[0]}?ref=vuetifyjs.com` : undefined"
-                    icon
-                    target="_blank"
-                    rel="noopener"
-                    aria-label="View Demo"
+                <template #activator="{ on: menu }">
+                  <v-tooltip
+                    bottom
+                    v-on="{ ...menu }"
                   >
-                    <v-icon color="primary">mdi-eye</v-icon>
-                  </v-btn>
-                  <span v-text="$t('Themes.Premium.viewDemo')" />
-                </v-tooltip>
+                    <template #activator="{ on: menu }">
+                      <v-btn
+                        :href="template.demoUrl.length === 1 ? `${template.demoUrl[0]}?ref=vuetifyjs.com` : undefined"
+                        icon
+                        target="_blank"
+                        rel="noopener"
+                        aria-label="View Demo"
+                        v-on="{ ...tooltip }"
+                      >
+                        <v-icon color="primary">mdi-eye</v-icon>
+                      </v-btn>
+                    </template>
+                    <span v-text="$t('Themes.Premium.viewDemo')" />
+                  </v-tooltip>
+                </template>
                 <v-list v-if="template.demoUrl.length > 1">
                   <v-list-tile
                     v-for="([title, demo], i) in template.demoUrl"

packages/docs/src/examples/autocompletes/advanced.vue

@@ -20,18 +20,15 @@
       label="Search for a coin..."
       solo
     >
-      <template slot="no-data">
+      <template v-slot:no-data>
         <v-list-tile>
           <v-list-tile-title>
             Search for your favorite
             <strong>Cryptocurrency</strong>
           </v-list-tile-title>
         </v-list-tile>
       </template>
-      <template
-        slot="selection"
-        slot-scope="{ item, selected }"
-      >
+      <template v-slot:selection="{ item, selected }">
         <v-chip
           :selected="selected"
           color="blue-grey"
@@ -41,10 +38,7 @@
           <span v-text="item.name"></span>
         </v-chip>
       </template>
-      <template
-        slot="item"
-        slot-scope="{ item }"
-      >
+      <template v-slot:item="{ item }">
         <v-list-tile-avatar
           color="indigo"
           class="headline font-weight-light white--text"
@@ -60,16 +54,17 @@
         </v-list-tile-action>
       </template>
     </v-autocomplete>
-    <v-tabs
-      slot="extension"
-      :hide-slider="!model"
-      color="transparent"
-      slider-color="blue-grey"
-    >
-      <v-tab :disabled="!model">News</v-tab>
-      <v-tab :disabled="!model">Trading</v-tab>
-      <v-tab :disabled="!model">Blog</v-tab>
-    </v-tabs>
+    <template v-slot:extension>
+      <v-tabs
+        :hide-slider="!model"
+        color="transparent"
+        slider-color="blue-grey"
+      >
+        <v-tab :disabled="!model">News</v-tab>
+        <v-tab :disabled="!model">Trading</v-tab>
+        <v-tab :disabled="!model">Blog</v-tab>
+      </v-tabs>
+    </template>
   </v-toolbar>
 </template>
 

packages/docs/src/examples/autocompletes/scopedSlots.vue

@@ -26,12 +26,14 @@
             left
             transition="slide-y-transition"
           >
-            <v-btn
-              slot="activator"
-              icon
-            >
-              <v-icon>more_vert</v-icon>
-            </v-btn>
+            <template #activator="{ on: menu }">
+              <v-btn
+                icon
+                v-on="{ ...menu }"
+              >
+                <v-icon>more_vert</v-icon>
+              </v-btn>
+            </template>
             <v-list>
               <v-list-tile @click="isUpdating = true">
                 <v-list-tile-action>
@@ -89,10 +91,7 @@
               item-value="name"
               multiple
             >
-              <template
-                slot="selection"
-                slot-scope="data"
-              >
+              <template v-slot:selection="data">
                 <v-chip
                   :selected="data.selected"
                   close
@@ -105,10 +104,7 @@
                   {{ data.item.name }}
                 </v-chip>
               </template>
-              <template
-                slot="item"
-                slot-scope="data"
-              >
+              <template v-slot:item="data">
                 <template v-if="typeof data.item !== 'object'">
                   <v-list-tile-content v-text="data.item"></v-list-tile-content>
                 </template>