Skip to content

Instantly share code, notes, and snippets.

@oziks
Created May 7, 2024 18:32
Show Gist options
  • Save oziks/889b324beb6a2d6b4b9516022c440469 to your computer and use it in GitHub Desktop.
Save oziks/889b324beb6a2d6b4b9516022c440469 to your computer and use it in GitHub Desktop.
Vuetify v3 component override. Example here with VBtn
<script setup lang="ts">
import { computed } from 'vue'
import { VBtn } from 'vuetify/components'
type VBtnProps = InstanceType<typeof VBtn>['$props']
interface Props extends /* @vue-ignore */ Omit<VBtnProps, 'variant' | 'color'> {
variant: 'primary' | 'secondary'
}
const props = withDefaults(defineProps<Props>(), {
variant: () => 'primary'
})
const color = computed(() => {
switch (props.variant) {
case 'primary':
default:
return 'purple'
case 'secondary':
return 'black'
}
})
const vuetifyVariant = computed(() => {
switch (props.variant) {
case 'primary':
default:
return 'flat'
case 'secondary':
return 'outlined'
}
})
</script>
<template>
<v-btn v-bind="$attrs" :variant="vuetifyVariant" :color="color" />
</template>
<style scoped></style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment