Extending Vuetify Component

Question

What is the best way to extend vue (vuetify) component v-select.

For example, I want to create <v-city></v-city> component that extends v-select with minimal props, async items loaded and one of items selected.

I've started with template

<template>
    <v-select
        :items="items"
        v-model="item"
        required
        return-object
        autocomplete
        item-text="name"
        item-value="id"
    ></v-select>
</template>

and script

<script>
    export default {
        name: 'v-city',
        data()
        {
            return {
                item: null,
                items: [],
                disabled: true
            };
        },
        created()
        {
            this.$http({
                method: 'GET',
                url: '/api.cities'
            })
                .then(response => this.items = response.data)
                .catch(console.warn);
        },
        methods: {},
        watch: {
            item(nv)
            {
                this.$emit('update', nv.id);
            }
        }
    };
</script>

And usage: <v-city @update="local.city = arguments[0]"></v-city>

What I want to archive is: <v-city v-model="local.city" label="Select city"></v-city>

Answer 1

The best way to "extend" any component is to wrap it.

<template>
  <v-select v-bind="$attrs" v-on="$listeners">
    <!-- pass through scoped slots -->
    <template v-for="(_, name) in $scopedSlots" v-slot:[scopedSlotName]="data">
      <slot :name="name" v-bind="data" />
    </template>

    <!-- pass through normal slots -->
    <template v-for="(_, name) in $slots" v-slot:[name]>
      <slot :name="name" />
    </template>
  </v-select>
</template>

Prop defaults can just be added inline:

<v-select open-on-clear v-bind="$attrs" v-on="$listeners">

Some components (for example v-checkbox) also use a non-default prop and event for the model, so you may also need to set that for v-model to work properly:

<script>
  export default {
    model: {
      // These are the default values
      prop: 'value',
      event: 'input'
    }
  }
</script>

Answer 2

To answer on my own question: use v-bind="this.$attrs" to get all "parent" attributes applied on child component. Also use this.$listeners.input to change value. Probably not ideal and only solution, but it works.