chore: fix playground slots

Author: danielroe

eslint.config.js

@@ -25,4 +25,10 @@ export default createConfigForNuxt({
       'vue/multi-word-component-names': 'off',
     },
   },
+  {
+    files: ['playground/**'],
+    rules: {
+      'vue/no-deprecated-slot-attribute': 'off',
+    },
+  },
 )

playground/pages/overlap.vue

@@ -2,11 +2,9 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
-        <template #start>
-          <ion-buttons>
-            <ion-back-button default-href="/tabs/tab3" />
-          </ion-buttons>
-        </template>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/tabs/tab3" />
+        </ion-buttons>
         <ion-title>Overlapping - no tabs</ion-title>
       </ion-toolbar>
     </ion-header>

playground/pages/tabs.vue

@@ -9,41 +9,39 @@ useHead({
     <ion-content>
       <ion-tabs>
         <ion-router-outlet />
-        <template #bottom>
-          <ion-tab-bar>
-            <ion-tab-button
-              tab="tab1"
-              href="/tabs/tab1"
-            >
-              <ion-icon :icon="ioniconsHomeOutline" />
-              <ion-label>Tab 1</ion-label>
-            </ion-tab-button>
+        <ion-tab-bar slot="bottom">
+          <ion-tab-button
+            tab="tab1"
+            href="/tabs/tab1"
+          >
+            <ion-icon :icon="ioniconsHomeOutline" />
+            <ion-label>Tab 1</ion-label>
+          </ion-tab-button>
 
-            <ion-tab-button
-              tab="tab2"
-              href="/tabs/tab2"
-            >
-              <ion-icon :icon="ioniconsImagesOutline" />
-              <ion-label>Photos</ion-label>
-            </ion-tab-button>
+          <ion-tab-button
+            tab="tab2"
+            href="/tabs/tab2"
+          >
+            <ion-icon :icon="ioniconsImagesOutline" />
+            <ion-label>Photos</ion-label>
+          </ion-tab-button>
 
-            <ion-tab-button
-              tab="tab3"
-              href="/tabs/tab3"
-            >
-              <ion-icon :icon="ioniconsBulbOutline" />
-              <ion-label>Tab 3</ion-label>
-            </ion-tab-button>
+          <ion-tab-button
+            tab="tab3"
+            href="/tabs/tab3"
+          >
+            <ion-icon :icon="ioniconsBulbOutline" />
+            <ion-label>Tab 3</ion-label>
+          </ion-tab-button>
 
-            <ion-tab-button
-              tab="tab4"
-              href="/tabs/tab4"
-            >
-              <ion-icon :icon="ioniconsAccessibilityOutline" />
-              <ion-label>Animation examples</ion-label>
-            </ion-tab-button>
-          </ion-tab-bar>
-        </template>
+          <ion-tab-button
+            tab="tab4"
+            href="/tabs/tab4"
+          >
+            <ion-icon :icon="ioniconsAccessibilityOutline" />
+            <ion-label>Animation examples</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
       </ion-tabs>
     </ion-content>
   </ion-page>

playground/pages/tabs/tab1/index.vue

@@ -8,11 +8,9 @@ definePageMeta({
   <ion-page>
     <ion-header translucent>
       <ion-toolbar>
-        <template #start>
-          <ion-thumbnail>
-            <ion-img src="/icon.png" />
-          </ion-thumbnail>
-        </template>
+        <ion-thumbnail slot="start">
+          <ion-img src="/icon.png" />
+        </ion-thumbnail>
         <ion-title> Nuxt Ionic </ion-title>
       </ion-toolbar>
     </ion-header>
@@ -27,18 +25,20 @@ definePageMeta({
 
       <ion-list>
         <ion-item>
-          <template #start>
-            <ion-checkbox aria-label="Mark idea complete" />
-          </template>
+          <ion-checkbox
+            slot="start"
+            aria-label="Mark idea complete"
+          />
           <ion-label>
             <h1>Create Idea</h1>
             <ion-note>Run Idea By Brandy</ion-note>
           </ion-label>
-          <template #end>
-            <ion-badge color="success">
-              5 Days
-            </ion-badge>
-          </template>
+          <ion-badge
+            slot="end"
+            color="success"
+          >
+            5 Days
+          </ion-badge>
         </ion-item>
       </ion-list>
     </ion-content>

playground/pages/tabs/tab2/index.vue

@@ -60,16 +60,15 @@ const showActionSheet = async (photo: UserPhoto) => {
         </ion-row>
       </ion-grid>
 
-      <template #fixed>
-        <ion-fab
-          vertical="bottom"
-          horizontal="center"
-        >
-          <ion-fab-button @click="takePhoto()">
-            <ion-icon :icon="ioniconsCamera" />
-          </ion-fab-button>
-        </ion-fab>
-      </template>
+      <ion-fab
+        slot="fixed"
+        vertical="bottom"
+        horizontal="center"
+      >
+        <ion-fab-button @click="takePhoto()">
+          <ion-icon :icon="ioniconsCamera" />
+        </ion-fab-button>
+      </ion-fab>
     </ion-content>
   </ion-page>
 </template>

playground/pages/tabs/tab3/page-two.vue

@@ -2,11 +2,9 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
-        <template #start>
-          <ion-buttons>
-            <ion-back-button default-href="/tabs/tab3" />
-          </ion-buttons>
-        </template>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/tabs/tab3" />
+        </ion-buttons>
         <ion-title>Tab 3 - Page 2</ion-title>
       </ion-toolbar>
     </ion-header>