docs: fix UsageExample with extra script (#19432)

closes #19418

Co-authored-by: Son Tran <stt@cct-technology.com>

packages/docs/src/components/examples/UsageExample.vue

@@ -164,7 +164,7 @@
     {
       name: 'template',
       language: 'html',
-      content: `<template>\n  <v-app>\n    <v-container>\n      ${props.code.replaceAll('\n', '\n      ')}\n    </v-container>\n  </v-app>\n</template>`,
+      content: `<template>\n  <v-app>\n    <v-container>\n      ${props.code.replaceAll('\n', '\n      ')}\n    </v-container>\n  </v-app>\n</template>\n${props.script}`,
     },
   ]))
 </script>

packages/docs/src/examples/v-data-iterator/usage.vue

@@ -71,14 +71,14 @@
   })
 
   const script = computed(() => {
-    return `export default {
-  data: () => ({
-    page: 1,
-    items: Array.from({ length: 15 }, (k, v) => ({
-      title: 'Item ' + v + 1,
-      text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!',
-    })),
-  }),
-}`
+    return `<script setup>
+  import { ref } from 'vue'
+
+  const page = ref(1)
+  const items = Array.from({ length: 15 }, (k, v) => ({
+    title: 'Item ' + v + 1,
+    text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!',
+  }))
+<` + '/script>'
   })
 </script>

packages/docs/src/examples/v-data-table/usage.vue

@@ -4,6 +4,7 @@
     :code="code"
     :name="name"
     :options="options"
+    :script="script"
   >
     <div>
       <v-data-table
@@ -104,6 +105,6 @@
   })
 
   const code = computed(() => {
-    return `<template>\n  <v-data-table${propsToString(props.value, 2)}></v-data-table>\n</template>\n\n${script.value}`
+    return `<v-data-table${propsToString(props.value, 2)}></v-data-table>`
   })
 </script>

packages/docs/src/examples/v-infinite-scroll/usage.vue

@@ -57,7 +57,7 @@
     return `
   <template v-for="(item, index) in items" :key="item">
     <div :class="['pa-2', index % 2 === 0 ? 'bg-grey-lighten-2' : '']">
-      Item #{{ item }}
+      Item number #{{ item }}
     </div>
   </template>
 `
@@ -68,28 +68,26 @@
   })
 
   const script = computed(() => {
-    return `export default {
-  data: () => ({
-    items: [],
-  }),
+    return `<script setup>
+  import { ref } from 'vue'
 
-  methods: {
-    async api () {
-      return new Promise(resolve => {
-        setTimeout(() => {
-          resolve(Array.from({ length: 10 }, (k, v) => v + this.items.at(-1) + 1))
-        }, 1000)
-      })
-    },
-    async load ({ done }) {
-      // Perform API call
-      const res = await this.api()
+  const items = ref(Array.from({ length: 30 }, (k, v) => v + 1))
+
+  async function api () {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve(Array.from({ length: 10 }, (k, v) => v + items.value.at(-1) + 1))
+      }, 1000)
+    })
+  }
+  async function load ({ done }) {
+    // Perform API call
+    const res = await api()
 
-      this.items.push(...res)
+    items.value.push(...res)
 
-      done('ok')
-    },
-  },
-}`
+    done('ok')
+  }
+<` + '/script>'
   })
 </script>