toolbar

Author: mapsandapps

static/usage/v7/toolbar/basic/vue.md

@@ -13,12 +13,7 @@
   </ion-footer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonFooter, IonHeader, IonTitle, IonToolbar },
-  });
 </script>
 ```

static/usage/v7/toolbar/buttons/vue.md

@@ -84,16 +84,8 @@
   </ion-toolbar>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/vue';
   import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, search, personCircle, star } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar },
-    setup() {
-      return { create, ellipsisHorizontal, ellipsisVertical, helpCircle, search, personCircle, star };
-    },
-  });
 </script>
 ```

static/usage/v7/toolbar/progress-bars/vue.md

@@ -8,12 +8,7 @@
   </ion-header>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonHeader, IonProgressBar, IonTitle, IonToolbar },
-  });
 </script>
 ```

static/usage/v7/toolbar/searchbars/vue.md

@@ -10,12 +10,7 @@
   </ion-header>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonHeader, IonSearchbar, IonTitle, IonToolbar },
-  });
 </script>
 ```

static/usage/v7/toolbar/segments/vue.md

@@ -14,12 +14,7 @@
   </ion-header>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar },
-  });
 </script>
 ```

static/usage/v7/toolbar/theming/colors/vue.md

@@ -32,12 +32,7 @@
   </ion-toolbar>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTitle, IonToolbar },
-  });
 </script>
 ```

static/usage/v7/toolbar/theming/css-properties/vue.md

@@ -5,13 +5,8 @@
   </ion-toolbar>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTitle, IonToolbar },
-  });
 </script>
 
 <style scoped>