### v-window Onboarding Example

Source: https://github.com/jms301/vuetify-examples-md/blob/main/md-exmaples/v-window.md

This snippet demonstrates a common onboarding flow using v-window. It includes navigation buttons and item indicators for user interaction. The example utilizes both `<script setup>` for Composition API and a default export for Options API.

```vue
<template>
  <v-card
    rounded="0"
    theme="dark"
    flat
  >
    <v-window v-model="onboarding">
      <v-window-item
        v-for="n in length"
        :key="`card-${n}`"
        :value="n"
      >
        <v-card
          class="d-flex justify-center align-center"
          height="200"
        >
          <span class="text-h2">
            Card {{ n }}
          </span>
        </v-card>
      </v-window-item>
    </v-window>

    <v-card-actions class="justify-space-between">
      <v-btn
        icon="mdi-chevron-left"
        variant="plain"
        @click="prev"
      ></v-btn>
      <v-item-group
        v-model="onboarding"
        class="text-center"
        mandatory
      >
        <v-item
          v-for="n in length"
          :key="`btn-${n}`"
          v-slot="{ isSelected, toggle }"
          :value="n"
        >
          <v-btn
            :variant="isSelected ? 'outlined' : 'text'"
            icon="mdi-record"
            @click="toggle"
          ></v-btn>
        </v-item>
      </v-item-group>
      <v-btn
        icon="mdi-chevron-right"
        variant="plain"
        @click="next"
      ></v-btn>
    </v-card-actions>
  </v-card>
</template>

<script setup>
  import { ref } from 'vue'

  const length = ref(3)
  const onboarding = ref(1)

  function next () {
    onboarding.value = onboarding.value + 1 > length.value ? 1 : onboarding.value + 1
  }
  function prev () {
    onboarding.value = onboarding.value - 1 <= 0 ? length.value : onboarding.value - 1
  }
</script>

<script>
  export default {
    data: () => ({
      length: 3,
      onboarding: 1,
    }),

    methods: {
      next () {
        this.onboarding = this.onboarding + 1 > this.length
          ? 1
          : this.onboarding + 1
      },
      prev () {
        this.onboarding = this.onboarding - 1 <= 0
          ? this.length
          : this.onboarding - 1
      },
    },
  }
</script>
```

--------------------------------

### v-infinite-scroll with Side Start Prop

Source: https://github.com/jms301/vuetify-examples-md/blob/main/md-exmaples/v-infinite-scroll.md

This example shows how to use the `side` prop with `v-infinite-scroll` to load new items from the start of the list. It includes setup for both script types.

```vue
<template>
  <v-infinite-scroll
    height="300"
    side="start"
    @load="load"
  >
    <template v-for="(item, index) in items" :key="item">
      <div :class="['px-2', index % 2 === 0 ? 'bg-grey-lighten-2' : '']">
        Item number {{ item }}
      </div>
    </template>
  </v-infinite-scroll>
</template>

<script setup>
  import { ref } from 'vue'

  const items = ref(Array.from({ length: 50 }, (k, v) => v + 1))
  function load ({ done }) {
    setTimeout(() => {
      items.value.unshift(...Array.from({ length: 10 }, (k, v) => items.value[0] - (10 - v)))
      done('ok')
    }, 1000)
  }
</script>

<script>
  export default {
    data: () => ({
      items: Array.from({ length: 50 }, (k, v) => v + 1),
    }),

    methods: {
      load ({ done }) {
        setTimeout(() => {
          this.items.unshift(...Array.from({ length: 10 }, (k, v) => this.items[0] - (10 - v)))

          done('ok')
        }, 1000)
      },
    },
  }
</script>
```

--------------------------------

### v-data-table-server with Server-Side Pagination and Sorting

Source: https://github.com/jms301/vuetify-examples-md/blob/main/md-exmaples/v-data-table.md

This example demonstrates a complete setup for v-data-table-server, including fetching data from a fake API, handling pagination, and sorting. It utilizes Vue's Composition API for state management.

```vue
<template>
  <v-data-table-server
    v-model:items-per-page="itemsPerPage"
    :headers="headers"
    :items="serverItems"
    :items-length="totalItems"
    :loading="loading"
    :search="search"
    item-value="name"
    @update:options="loadItems"
  ></v-data-table-server>
</template>

<script setup>
  import { ref } from 'vue'

  const desserts = [
    {
      name: 'Frozen Yogurt',
      calories: 159,
      fat: 6,
      carbs: 24,
      protein: 4,
      iron: '1',
    },
    {
      name: 'Jelly bean',
      calories: 375,
      fat: 0,
      carbs: 94,
      protein: 0,
      iron: '0',
    },
    {
      name: 'KitKat',
      calories: 518,
      fat: 26,
      carbs: 65,
      protein: 7,
      iron: '6',
    },
    {
      name: 'Eclair',
      calories: 262,
      fat: 16,
      carbs: 23,
      protein: 6,
      iron: '7',
    },
    {
      name: 'Gingerbread',
      calories: 356,
      fat: 16,
      carbs: 49,
      protein: 3.9,
      iron: '16',
    },
    {
      name: 'Ice cream sandwich',
      calories: 237,
      fat: 9,
      carbs: 37,
      protein: 4.3,
      iron: '1',
    },
    {
      name: 'Lollipop',
      calories: 392,
      fat: 0.2,
      carbs: 98,
      protein: 0,
      iron: '2',
    },
    {
      name: 'Cupcake',
      calories: 305,
      fat: 3.7,
      carbs: 67,
      protein: 4.3,
      iron: '8',
    },
    {
      name: 'Honeycomb',
      calories: 408,
      fat: 3.2,
      carbs: 87,
      protein: 6.5,
      iron: '45',
    },
    {
      name: 'Donut',
      calories: 452,
      fat: 25,
      carbs: 51,
      protein: 4.9,
      iron: '22',
    },
  ]
  const FakeAPI = {
    async fetch ({ page, itemsPerPage, sortBy }) {
      return new Promise(resolve => {
        setTimeout(() => {
          const start = (page - 1) * itemsPerPage
          const end = start + itemsPerPage
          const items = desserts.slice()
          if (sortBy.length) {
            const sortKey = sortBy[0].key
            const sortOrder = sortBy[0].order
            items.sort((a, b) => {
              const aValue = a[sortKey]
              const bValue = b[sortKey]
              return sortOrder === 'desc' ? bValue - aValue : aValue - bValue
            })
          }
          const paginated = items.slice(start, end === -1 ? undefined : end)
          resolve({ items: paginated, total: items.length })
        }, 500)
      })
    },
  }
  const itemsPerPage = ref(5)
  const headers = ref([
    {
      title: 'Dessert (100g serving)',
      align: 'start',
      sortable: false,
      key: 'name',
    },
    { title: 'Calories', key: 'calories', align: 'end' },
    { title: 'Fat (g)', key: 'fat', align: 'end' },
    { title: 'Carbs (g)', key: 'carbs', align: 'end' },
    { title: 'Protein (g)', key: 'protein', align: 'end' },
    { title: 'Iron (%)', key: 'iron', align: 'end' },
  ])
  const search = ref('')
  const serverItems = ref([])
  const loading = ref(true)
  const totalItems = ref(0)
  function loadItems ({ page, itemsPerPage, sortBy }) {
    loading.value = true
    FakeAPI.fetch({ page, itemsPerPage, sortBy }).then(({ items, total }) => {
      serverItems.value = items
      totalItems.value = total
      loading.value = false
    })
  }
</script>
```

--------------------------------

### v-file-input Basic Usage with Options

Source: https://github.com/jms301/vuetify-examples-md/blob/main/md-exmaples/v-file-input.md

Demonstrates the basic usage of v-file-input within a component that allows for dynamic configuration of props like clearable, disabled, and variant. This setup is useful for creating interactive examples or testing different prop combinations.

```vue
<template>
  <ExamplesUsageExample
    v-model="model"
    :code="code"
    :name="name"
    :options="options"
  >
    <div>
      <v-file-input v-bind="props"></v-file-input>
    </div>

    <template v-slot:configuration>
      <v-checkbox v-model="clear" label="Clearable"></v-checkbox>

      <v-checkbox v-model="disabled" label="Disabled"></v-checkbox>
    </template>
  </ExamplesUsageExample>
</template>

<script setup>
  const name = 'v-file-input'
  const model = ref('default')
  const options = ['outlined', 'underlined', 'solo', 'solo-filled', 'solo-inverted']
  const clear = ref(false)
  const counter = ref(false)
  const disabled = ref(false)
  const props = computed(() => {
    return {
      clearable: clear.value || undefined,
      counter: counter.value || undefined,
      disabled: disabled.value || undefined,
      label: 'File input',
      variant: model.value === 'default' ? undefined : model.value,
    }
  })

  const slots = computed(() => {
    return ``
  })

  const code = computed(() => {
    return `<${name}${propsToString(props.value)}>${slots.value}</${name}>`
  })
</script>

```

--------------------------------

### v-otp-input Component Example

Source: https://github.com/jms301/vuetify-examples-md/blob/main/md-exmaples/v-otp-input.md

This snippet shows a comprehensive example of the v-otp-input component, allowing for dynamic configuration of its properties like placeholder, focus, disabled state, loading, length, and variant. It uses a parent component 'ExamplesUsageExample' to manage the state and display the configurations.

```vue
<template>
  <ExamplesUsageExample
    v-model="model"
    :code="code"
    :name="name"
    :options="options"
  >
    <div class="text-center">
      <v-otp-input v-bind="props"></v-otp-input>
    </div>

    <template v-slot:configuration>
      <v-text-field v-model="placeholder" label="Placeholder" maxlength="1" clearable></v-text-field>
      <v-checkbox v-model="focus" label="Focus all"></v-checkbox>
      <v-checkbox v-model="disabled" label="Disabled"></v-checkbox>
      <v-checkbox v-model="loading" label="Loading"></v-checkbox>
      <v-slider v-model="length" label="Length" max="8" min="4" step="1"></v-slider>
    </template>
  </ExamplesUsageExample>
</template>

<script setup>
  const name = 'v-stepper'
  const model = ref('default')
  const options = ['solo', 'solo-filled', 'underlined']
  const focus = ref(false)
  const length = ref(6)
  const placeholder = ref('')
  const disabled = ref(false)
  const loading = ref(false)

  const props = computed(() => {
    return {
      disabled: disabled.value || undefined,
      'focus-all': focus.value || undefined,
      length: length.value === 6 ? undefined : length.value,
      loading: loading.value || undefined,
      placeholder: placeholder.value || undefined,
      variant: model.value !== 'default' ? model.value : undefined,
    }
  })

  const slots = computed(() => {
    return ``
  })

  const code = computed(() => {
    return `<v-otp-input${propsToString(props.value)}>${slots.value}</v-otp-input>`
  })
</script>

```

--------------------------------

### v-infinite-scroll with Side Both Loading (Composition API)

Source: https://github.com/jms301/vuetify-examples-md/blob/main/md-exmaples/v-infinite-scroll.md

Implement infinite scroll that loads data from both the start and end of the list. This example uses the Composition API with `<script setup>`. Ensure the `load` function is correctly defined to handle both 'start' and 'end' sides.

```vue
<template>
  <v-infinite-scroll
    height="300"
    side="both"
    @load="load"
  >
    <template v-for="(item, index) in items" :key="item">
      <div :class="['px-2', index % 2 === 0 ? 'bg-grey-lighten-2' : '']">
        Item number {{ item }}
      </div>
    </template>
  </v-infinite-scroll>
</template>

<script setup>
  import { ref } from 'vue'

  const items = ref(Array.from({ length: 50 }, (k, v) => v + 1))
  function load ({ side, done }) {
    setTimeout(() => {
      if (side === 'start') {
        const arr = Array.from({ length: 10 }, (k, v) => items.value[0] - (10 - v))
        items.value = [...arr, ...items.value]
      } else if (side === 'end') {
        const arr = Array.from({ length: 10 }, (k, v) => items.value.at(-1) + 1 + v)
        items.value = [...items.value, ...arr]
      }
      done('ok')
    }, 1000)
  }
</script>
```

--------------------------------

### v-data-iterator Default Slot Example

Source: https://github.com/jms301/vuetify-examples-md/blob/main/md-exmaples/v-data-iterator.md

This example demonstrates the basic structure for using the v-data-iterator component with its default slot. It includes sample data for desserts and the necessary Vue.js script setup.

```html
<template>
  <v-data-iterator
    :items="desserts"
    :items-per-page="5"
    :page="1"
    header-text="Dessert"
  >
    <template v-slot:default="{ items, page, itemsPerPage, totalItems, totalPages, prevPage, nextPage }">
      <v-card
        flat
        tile
      >
        <v-card-text
          class="pa-0"
        >
          <v-row
            v-for="(item, i) in items"
            :key="i"
            no-gutters
            class="mb-2"
          >
            <v-col cols="12">
              <v-list-item>
                <v-list-item-avatar>
                  <v-icon :color="item.color">{{ item.icon }}</v-icon>
                </v-list-item-avatar>

                <v-list-item-content>
                  <v-list-item-title>{{ item.name }}</v-list-item-title>
                  <v-list-item-subtitle>{{ item.description }}</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
          </v-row>
        </v-card-text>

        <v-card-actions>
          <v-spacer />
          <v-btn
            icon
            :disabled="page <= 1"
            @click="prevPage"
          >
            <v-icon>mdi-chevron-left</v-icon>
          </v-btn>
          <v-btn
            icon
            :disabled="page >= totalPages"
            @click="nextPage"
          >
            <v-icon>mdi-chevron-right</v-icon>
          </v-btn>
        </v-card-actions>
      </v-card>
    </template>
  </v-data-iterator>
</template>

<script>
  export default {
    data: () => ({
      desserts: [
        {
          name: 'Frozen Yogurt',
          description: 'A tangy and creamy dessert made from yogurt and sometimes fruit, Frozen Yogurt is a lighter alternative to ice cream. Perfect for those who crave a sweet treat but want to keep it on the healthier side.',
          icon: 'mdi-ice-cream',
          color: '#6EC1E4',
          calories: 159,
          fat: 6,
          carbs: 24,
          protein: 4,
          sodium: 87,
          calcium: '14%',
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          description: 'A classic treat featuring a layer of creamy ice cream sandwiched between two cookies or cake layers. Ideal for those hot summer days when you can\'t decide between a cookie and ice cream.',
          icon: 'mdi-cookie',
          color: '#F4A261',
          calories: 237,
          fat: 9,
          carbs: 37,
          protein: 4.3,
          sodium: 129,
          calcium: '8%',
          iron: '1%',
        },
        {
          name: 'Eclair',
          description: 'A small, individual cake topped with frosting and often adorned with sprinkles or other decorations. Great for parties or as a quick indulgence when you need a sugar fix.',
          icon: 'mdi-cake-variant',
          color: '#6D4C41',
          calories: 262,
          fat: 16,
          carbs: 23,
          protein: 6,
          sodium: 337,
          calcium: '6%',
          iron: '7%',
        },
        {
          name: 'Cupcake',
          description: 'A small, individual cake topped with frosting and often adorned with sprinkles or other decorations. Great for parties or as a quick indulgence when you need a sugar fix.',
          color: '#FFADAD',
          icon: 'mdi-cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          sodium: 413,
          calcium: '3%',
          iron: '8%',
        },
      ],
    }),
  }
</script>
```

--------------------------------

### Flexbox Container Align Content Start

Source: https://github.com/jms301/vuetify-examples-md/blob/main/md-exmaples/flex.md

This example demonstrates a flex container with content aligned to the start. It utilizes Vuetify's `align-content-start` class for positioning flex items across multiple lines.

```vue
<template>
  <v-sheet
    class="d-flex align-content-start flex-wrap bg-surface-variant"
    min-height="200"
  >
    <v-sheet
      v-for="n in 20"
      :key="n"
      class="ma-2 pa-2"
    >
      Flex item
    </v-sheet>
  </v-sheet>
</template>

```

--------------------------------

### v-btn with Loader Prop

Source: https://github.com/jms301/vuetify-examples-md/blob/main/md-exmaples/v-btn.md

This example demonstrates using the loading prop on a v-btn to indicate an ongoing asynchronous operation. The button's state changes to show a loader for 3 seconds.

```vue
<template>
  <v-card
    class="mx-auto"
    max-width="450"
    text="Update your weak or re-used passwords with Password Checkup. It's free and only takes a few minutes. Click the Take Checkup button to get started."
    title="Strengthen your passwords"
  >

    <template v-slot:actions>
      <v-btn height="48">
        No Thanks
      </v-btn>

      <v-btn
        :loading="loading"
        class="flex-grow-1"
        height="48"
        variant="tonal"
        @click="load"
      >
        Take Checkup
      </v-btn>
    </template>
  </v-card>
</template>

<script setup>
  import { ref } from 'vue'

  const loading = ref(false)
  function load () {
    loading.value = true
    setTimeout(() => (loading.value = false), 3000)
  }
</script>

<script>
  export default {
    data: () => ({ loading: false }),

    methods: {
      load () {
        this.loading = true
        setTimeout(() => (this.loading = false), 3000)
      },
    },
  }
</script>

```

--------------------------------

### v-confirm-edit Component Example

Source: https://github.com/jms301/vuetify-examples-md/blob/main/md-exmaples/v-confirm-edit.md

This snippet shows a complete example of using the v-confirm-edit component within a Vuetify application. It includes template structure, slot usage for content and actions, and script setup for managing component state and props.

```vue
<template>
  <ExamplesUsageExample
    v-model="model"
    :code="code"
    :options="options"
    :script="script"
    name="v-avatar"
  >
    <div>
      <v-confirm-edit v-model="value" v-bind="props">
        <template v-slot:default="{ model: proxyModel, actions }">
          <v-card
            class="mx-auto"
            max-width="320"
            title="Update Field"
          >
            <template v-slot:text>
              <v-text-field
                v-model="proxyModel.value"
                messages="Modify my value"
              ></v-text-field>
            </template>

            <template v-slot:actions>
              <v-spacer></v-spacer>

              <component :is="actions"></component>
            </template>
          </v-card>
        </template>
      </v-confirm-edit>
    </div>

    <template v-slot:configuration>
      <v-text-field v-model="okText" label="Ok text"></v-text-field>
      <v-text-field v-model="cancelText" label="Cancel text"></v-text-field>
    </template>
  </ExamplesUsageExample>
</template>

<script setup>
  const model = ref('default')
  const options = []
  const value = ref('Egg Plant')
  const okText = ref('Ok')
  const cancelText = ref('Cancel')

  const props = computed(() => {
    return {
      'ok-text': okText.value === 'Ok' ? undefined : okText.value,
      'cancel-text': cancelText.value === 'Cancel' ? undefined : cancelText.value,
      'v-model': 'model',
    }
  })

  const slots = computed(() => {
    return `
  <template v-slot:default="{ model: proxyModel, actions }">
    <v-card
      class="mx-auto"
      max-width="320"
      title="Update Field"
    >
      <template v-slot:text>
        <v-text-field
          v-model="proxyModel.value"
          messages="Modify my value"
        ></v-text-field>
      </template>

      <template v-slot:actions>
        <v-spacer></v-spacer>

        <component :is="actions"></component>
      </template>
    </v-card>
  </template>
`
  })

  const script = computed(() => {
    return `<script setup>
  import { shallowRef } from 'vue'

  const model = shallowRef('Egg plant')
<` + '/script>'
  })

  const code = computed(() => {
    return `<v-confirm-edit${propsToString(props.value)}>${slots.value}</v-confirm-edit>`
  })
</script>

```

--------------------------------

### v-responsive Component Example

Source: https://github.com/jms301/vuetify-examples-md/blob/main/md-exmaples/v-responsive.md

This example shows how to use the v-responsive component to maintain a specific aspect ratio for its content. It utilizes computed properties for dynamic aspect ratio and content class binding. The component is wrapped in a custom ExamplesUsageExample for interactive demonstration.

```vue
<template>
  <ExamplesUsageExample
    v-model="model"
    :code="code"
    :name="name"
    :options="options"
  >
    <div>
      <v-responsive
        v-bind="props"
        :aspect-ratio="model.split(' / ')[0] / model.split(' / ')[1]"
      >
        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!
      </v-responsive>
    </div>

    <template v-slot:configuration>
      <v-checkbox v-model="contentClass" label="Content class"></v-checkbox>
    </template>
  </ExamplesUsageExample>
</template>

<script setup>
  const name = 'v-responsive'
  const model = ref('default')
  const options = ['16 / 9', '4 / 3']
  const contentClass = ref(false)
  const props = computed(() => {
    return {
      'aspect-ratio': model.value !== 'default' ? model.value : undefined,
      class: 'border pa-4',
      'content-class': contentClass.value ? 'bg-primary' : undefined,
    }
  })

  const slots = computed(() => {
    return ``
  })

  const code = computed(() => {
    return `<${name}${propsToString(props.value, ['aspect-ratio'])}>${slots.value}</${name}>`
  })
</script>

```

--------------------------------

### v-otp-input with Loading State

Source: https://github.com/jms301/vuetify-examples-md/blob/main/md-exmaples/v-otp-input.md

Demonstrates how to use the `loading` prop to indicate an ongoing process, such as form submission. This example uses `v-btn` to trigger the loading state and a `setTimeout` to simulate an asynchronous operation.

```vue
<template>
  <div class="text-center">
    <v-otp-input
      v-model="otp"
      :loading="loading"
      length="5"
      variant="underlined"
    ></v-otp-input>

    <v-btn
      :disabled="otp.length < 5 || loading"
      class="my-5"
      color="surface-variant"
      text="Submit"
      variant="tonal"
      @click="onClick"
    ></v-btn>
  </div>
</template>

<script setup>
  import { shallowRef } from 'vue'

  const loading = shallowRef(false)
  const otp = shallowRef('31')

  function onClick () {
    loading.value = true

    setTimeout(() => {
      loading.value = false
    }, 2000)
  }
</script>

<script>
  export default {
    data: () => ({
      loading: false,
      otp: '',
    }),

    methods: {
      onClick () {
        this.loading = true

        setTimeout(() => {
          this.loading = false
        }, 2000)
      },
    },
  }
</script>

```

--------------------------------

### v-select Basic Usage and Configuration

Source: https://github.com/jms301/vuetify-examples-md/blob/main/md-exmaples/v-select.md

Demonstrates the basic usage of v-select with dynamic configuration options for clearable, chips, multiple selections, and variants. This snippet is useful for interactive exploration of v-select's features.

```vue
<template>
  <ExamplesUsageExample
    v-model="model"
    :code="code"
    :name="name"
    :options="options"
  >
    <div>
      <v-select v-bind="props"></v-select>
    </div>

    <template v-slot:configuration>
      <v-checkbox v-model="clear" label="Clearable"></v-checkbox>

      <v-checkbox v-model="chips" label="Chips"></v-checkbox>

      <v-checkbox v-model="multiple" label="Multiple"></v-checkbox>
    </template>
  </ExamplesUsageExample>
</template>

<script setup>
  const name = 'v-select'
  const model = shallowRef('default')
  const clear = shallowRef(false)
  const chips = shallowRef(false)
  const multiple = shallowRef(false)
  const options = ['outlined', 'underlined', 'solo', 'solo-filled', 'solo-inverted']
  const props = computed(() => {
    return {
      clearable: clear.value || undefined,
      chips: chips.value || undefined,
      label: 'Select',
      items: ['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming'],
      multiple: multiple.value || undefined,
      variant: model.value === 'default' ? undefined : model.value,
    }
  })

  const slots = computed(() => {
    return ``
  })

  const code = computed(() => {
    return `<${name}${propsToString(props.value)}>${slots.value}</${name}>`
  })
</script>

```

--------------------------------

### v-window with Reverse Navigation

Source: https://github.com/jms301/vuetify-examples-md/blob/main/md-exmaples/v-window.md

Use the 'reverse' prop to enable backward navigation through window items. This example shows a basic setup with three window items.

```vue
<template>
  <v-window
    v-model="onboarding"
    reverse
    show-arrows
  >
    <v-window-item
      v-for="n in length"
      :key="`card-${n}`"
    >
      <v-card
        class="d-flex align-center justify-center ma-2"
        elevation="2"
        height="200"
      >
        <h1
          class="text-h2"
        >
          Slide {{ n }}
        </h1>
      </v-card>
    </v-window-item>
  </v-window>
</template>

<script setup>
  import { ref } from 'vue'

  const length = ref(3)
  const onboarding = ref(0)
</script>

<script>
  export default {
    data: () => ({
      length: 3,
      onboarding: 0,
    }),
  }
</script>

```

--------------------------------

### v-data-table Group Header Slot Example

Source: https://github.com/jms301/vuetify-examples-md/blob/main/md-exmaples/v-data-table.md

This snippet shows how to implement a custom group header for the v-data-table. It utilizes the `group-header` slot to render a row with a button to toggle group expansion and display the group's value. The example uses both `<script setup>` and the Options API for data and configuration.

```vue
<template>
  <v-data-table
    :group-by="groupBy"
    :headers="headers"
    :items="tools"
    item-value="name"
    hide-default-footer
  >
    <template v-slot:group-header="{ item, columns, toggleGroup, isGroupOpen }">
      <tr>
        <td :colspan="columns.length">
          <div class="d-flex align-center">
            <v-btn
              :icon="isGroupOpen(item) ? '$expand' : '$next'"
              color="medium-emphasis"
              density="comfortable"
              size="small"
              variant="outlined"
              @click="toggleGroup(item)"
            ></v-btn>

            <span class="ms-4">Tool Type: {{ item.value }}</span>
          </div>
        </td>
      </tr>
    </template>
  </v-data-table>
</template>

<script setup>
  const groupBy = [{ key: 'type', order: 'asc' }]

  const headers = [
    {
      title: 'Tool Name',
      align: 'start',
      sortable: false,
      key: 'name',
    },
    { title: 'Weight(kg)', key: 'weight' },
    { title: 'Length(cm)', key: 'length' },
    { title: 'Price($)', key: 'price' },
  ]

  const tools = [
    {
      name: 'Hammer',
      weight: 0.5,
      length: 30,
      price: 10,
      type: 'hand',
    },
    {
      name: 'Screwdriver',
      weight: 0.2,
      length: 20,
      price: 5,
      type: 'hand',
    },
    {
      name: 'Drill',
      weight: 1.5,
      length: 25,
      price: 50,
      type: 'power',
    },
    {
      name: 'Saw',
      weight: 0.7,
      length: 50,
      price: 15,
      type: 'hand',
    },
    {
      name: 'Tape Measure',
      weight: 0.3,
      length: 10,
      price: 8,
      type: 'measuring',
    },
    {
      name: 'Level',
      weight: 0.4,
      length: 60,
      price: 12,
      type: 'measuring',
    },
    {
      name: 'Wrench',
      weight: 0.6,
      length: 25,
      price: 10,
      type: 'hand',
    },
    {
      name: 'Pliers',
      weight: 0.3,
      length: 15,
      price: 7,
      type: 'hand',
    },
    {
      name: 'Sander',
      weight: 2.0,
      length: 30,
      price: 60,
      type: 'power',
    },
    {
      name: 'Multimeter',
      weight: 0.5,
      length: 15,
      price: 30,
      type: 'measuring',
    },
  ]
</script>

<script>
  export default {
    data () {
      return {
        groupBy: [
          {
            key: 'gluten',
            order: 'asc',
          },
        ],
        headers: [
          {
            title: 'Tool Name',
            align: 'start',
            sortable: false,
            key: 'name',
          },
          { title: 'Weight (kg)', key: 'weight' },
          { title: 'Length (cm)', key: 'length' },
          { title: 'Price ($)', key: 'price' },
        ],
        tools: [
          {
            name: 'Hammer',
            weight: 0.5,
            length: 30,
            price: 10,
            type: 'hand',
          },
          {
            name: 'Screwdriver',
            weight: 0.2,
            length: 20,
            price: 5,
            type: 'hand',
          },
          {
            name: 'Drill',
            weight: 1.5,
            length: 25,
            price: 50,
            type: 'power',
          },
          {
            name: 'Saw',
            weight: 0.7,
            length: 50,
            price: 15,
            type: 'hand',
          },
          {
            name: 'Tape Measure',
            weight: 0.3,
            length: 10,
            price: 8,
            type: 'measuring',
          },
          {
            name: 'Level',
            weight: 0.4,
            length: 60,
            price: 12,
            type: 'measuring',
          },
          {
            name: 'Wrench',
            weight: 0.6,
            length: 25,
            price: 10,
            type: 'hand',
          },
          {
            name: 'Pliers',
            weight: 0.3,
            length: 15,
            price: 7,
            type: 'hand',
          },
          {
            name: 'Sander',
            weight: 2.0,
            length: 30,
            price: 60,
            type: 'power',
          },
          {
            name: 'Multimeter',
            weight: 0.5,
            length: 15,
            price: 30,
            type: 'measuring',
          },
        ],
      }
    },
  }
</script>
```

--------------------------------

### v-window for Account Creation Form

Source: https://github.com/jms301/vuetify-examples-md/blob/main/md-exmaples/v-window.md

This example demonstrates using v-window to create a multi-step account creation form. It includes navigation buttons (Back/Next) and dynamically updates the card title based on the current step. This snippet utilizes both Vue 3 Composition API and Vue 2 Options API for reactivity.

```vue
<template>
  <v-card
    class="mx-auto"
    max-width="500"
  >
    <v-card-title class="text-h6 font-weight-regular justify-space-between">
      <span>{{ currentTitle }}</span>
      <v-avatar
        color="primary"
        size="24"
        v-text="step"
      ></v-avatar>
    </v-card-title>

    <v-window v-model="step">
      <v-window-item :value="1">
        <v-card-text>
          <v-text-field
            label="Email"
            placeholder="john@google.com"
          ></v-text-field>
          <span class="text-caption text-grey-darken-1">
            This is the email you will use to login to your Vuetify account
          </span>
        </v-card-text>
      </v-window-item>

      <v-window-item :value="2">
        <v-card-text>
          <v-text-field
            label="Password"
            type="password"
          ></v-text-field>
          <v-text-field
            label="Confirm Password"
            type="password"
          ></v-text-field>
          <span class="text-caption text-grey-darken-1">
            Please enter a password for your account
          </span>
        </v-card-text>
      </v-window-item>

      <v-window-item :value="3">
        <div class="pa-4 text-center">
          <v-img
            class="mb-4"
            height="128"
            src="https://cdn.vuetifyjs.com/images/logos/v.svg"
          ></v-img>
          <h3 class="text-h6 font-weight-light mb-2">
            Welcome to Vuetify
          </h3>
          <span class="text-caption text-grey">Thanks for signing up!</span>
        </div>
      </v-window-item>
    </v-window>

    <v-divider></v-divider>

    <v-card-actions>
      <v-btn
        v-if="step > 1"
        variant="text"
        @click="step--"
      >
        Back
      </v-btn>
      <v-spacer></v-spacer>
      <v-btn
        v-if="step < 3"
        color="primary"
        variant="flat"
        @click="step++"
      >
        Next
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script setup>
  import { computed, ref } from 'vue'

  const step = ref(1)

  const currentTitle = computed(() => {
    switch (step.value) {
      case 1: return 'Sign-up'
      case 2: return 'Create a password'
      default: return 'Account created'
    }
  })
</script>

<script>
  export default {
    data: () => ({
      step: 1,
    }),

    computed: {
      currentTitle () {
        switch (this.step) {
          case 1: return 'Sign-up'
          case 2: return 'Create a password'
          default: return 'Account created'
        }
      },
    },
  }
</script>

```

--------------------------------

### Basic v-overlay Usage

Source: https://github.com/jms301/vuetify-examples-md/blob/main/md-exmaples/v-overlay.md

A simple example of how to show and hide a v-overlay using a button. The overlay automatically hides after 2 seconds.

```vue
<template>
  <div class="text-center">
    <v-btn
      color="error"
      @click="overlay = !overlay"
    >
      Show Overlay
    </v-btn>

    <v-overlay v-model="overlay"></v-overlay>
  </div>
</template>

<script>
  export default {
    data: () => ({
      overlay: false,
    }),

    watch: {
      overlay (val) {
        val && setTimeout(() => {
          this.overlay = false
        }, 2000)
      },
    },
  }
</script>

```

--------------------------------

### v-progress-circular with different rotate values

Source: https://github.com/jms301/vuetify-examples-md/blob/main/md-exmaples/v-progress-circular.md

This example shows how to use the rotate prop to set the starting angle of the v-progress-circular component. The component's value is updated dynamically.

```vue
<template>
  <div class="text-center">
    <v-progress-circular
      :model-value="value"
      :rotate="360"
      :size="100"
      :width="15"
      color="teal"
    >
      {{ value }}
    </v-progress-circular>

    <v-progress-circular
      :model-value="value"
      :rotate="-90"
      :size="100"
      :width="15"
      color="primary"
    >
      {{ value }}
    </v-progress-circular>

    <v-progress-circular
      :model-value="value"
      :rotate="90"
      :size="100"
      :width="15"
      color="red"
    >
      {{ value }}
    </v-progress-circular>

    <v-progress-circular
      :model-value="value"
      :rotate="180"
      :size="100"
      :width="15"
      color="pink"
    >
      {{ value }}
    </v-progress-circular>
  </div>
</template>

<script setup>
  import { onBeforeUnmount, onMounted, ref } from 'vue'

  const value = ref(0)

  let interval = -1
  onMounted(() => {
    interval = setInterval(() => {
      if (value.value === 100) {
        return (value.value = 0)
      }
      value.value += 10
    }, 1000)
  })
  onBeforeUnmount(() => {
    clearInterval(interval)
  })
</script>

<script>
  export default {
    data () {
      return {
        interval: {},
        value: 0,
      }
    },
    beforeUnmount () {
      clearInterval(this.interval)
    },
    mounted () {
      this.interval = setInterval(() => {
        if (this.value === 100) {
          return (this.value = 0)
        }
        this.value += 10
      }, 1000)
    },
  }
</script>

<style scoped>
.v-progress-circular {
  margin: 1rem;
}
</style>
```

--------------------------------

### v-file-input with Show Size Prop

Source: https://github.com/jms301/vuetify-examples-md/blob/main/md-exmaples/v-file-input.md

Demonstrates how to display the size of selected files using the `show-size` prop.

```vue
<template>
  <v-file-input
    label="File input"
    show-size
  ></v-file-input>
</template>

```

--------------------------------

### v-data-table Sorting with Composition API

Source: https://github.com/jms301/vuetify-examples-md/blob/main/md-exmaples/v-data-table.md

Use the `v-model:sort-by` prop to control and display the current sorting state. This example uses the Composition API with `<script setup>`.

```vue
<template>
  <v-data-table
    v-model:sort-by="sortBy"
    :headers="headers"
    :items="desserts"
  ></v-data-table>

  <pre>{{ sortBy }}</pre>
</template>

<script setup>
  import { ref } from 'vue'

  const sortBy = ref([{ key: 'calories', order: 'asc' }])

  const headers = [
    {
      title: 'Dessert (100g serving)',
      align: 'start',
      sortable: false,
      key: 'name',
    },
    { title: 'Calories', key: 'calories' },
    { title: 'Fat (g)', key: 'fat' },
    { title: 'Carbs (g)', key: 'carbs' },
    { title: 'Protein (g)', key: 'protein' },
    { title: 'Iron (%)', key: 'iron' },
  ]
  const desserts = [
    {
      name: 'Frozen Yogurt',
      calories: 200,
      fat: 6,
      carbs: 24,
      protein: 4,
      iron: '1%',
    },
    {
      name: 'Ice cream sandwich',
      calories: 200,
      fat: 9,
      carbs: 37,
      protein: 4.3,
      iron: '1%',
    },
    {
      name: 'Eclair',
      calories: 300,
      fat: 16,
      carbs: 23,
      protein: 6,
      iron: '7%',
    },
    {
      name: 'Cupcake',
      calories: 300,
      fat: 3.7,
      carbs: 67,
      protein: 4.3,
      iron: '8%',
    },
    {
      name: 'Gingerbread',
      calories: 400,
      fat: 16,
      carbs: 49,
      protein: 3.9,
      iron: '16%',
    },
    {
      name: 'Jelly bean',
      calories: 400,
      fat: 0,
      carbs: 94,
      protein: 0,
      iron: '0%',
    },
    {
      name: 'Lollipop',
      calories: 400,
      fat: 0.2,
      carbs: 98,
      protein: 0,
      iron: '2%',
    },
    {
      name: 'Honeycomb',
      calories: 400,
      fat: 3.2,
      carbs: 87,
      protein: 6.5,
      iron: '45%',
    },
    {
      name: 'Donut',
      calories: 500,
      fat: 25,
      carbs: 51,
      protein: 4.9,
      iron: '22%',
    },
    {
      name: 'KitKat',
      calories: 500,
      fat: 26,
      carbs: 65,
      protein: 7,
      iron: '6%',
    },
  ]
</script>
```