Vuetify: [feature] extend Vuetify components

[alekbarszczewski]

What problem does this feature solve?

Right now, AFAIK, there is easy way to extend Vuetify component. I am writing a library and I want one of my library components to extend for example VInput component. Vuetify does not export it's components - it only exports plugin function that install those components at "runtime". What I need is something like this:

<script>
  import { Vinput } from 'vuetify/components'

  export default {
    extends: VInput
  }
</script>

I know that components can be imported via import VInput from 'vuetify/src/components/VInput/VInput' for example, but then to build such app I would need all loaders that vuetify uses to build/transpile its code (typescript / stylus / etc)...

What is your proposed solution?

Something like this:

<script>
  import { Vinput } from 'vuetify/components' // <--------------- export all components

  export default {
    extends: VInput
  }
</script>

[nekosaur]

Right now you can use import { VInput } from 'vuetify/es5/components/VInput'

[alekbarszczewski]

I tried it, but it complains that I need stylus loader. Would be best if it was possible to import components without modifying build step / configuration.

[slushnys]

@alekbarszczewski Did you figure it out how to extend a component without adding another build step for stylus?

[pynner]

@zslusnys any luck?

[AdmiralPotato]

Unfortunately @nekosaur's approach of importing a component from the vuetify/es5/components/* path fails for me as well, because even the es5 components still somehow require the stylus loader? (same issue as @alekbarszczewski @slushnys @pynner)

I have created a solution that works in the case where you're trying to import a specific component to be able to extend it, but it will not work of you're trying to import specific components with the intent of _tree shaking_.

It's a bit hacky, but it gets the job done using the same pre-built/dist copy of the Vuetufy components that are installed globally via Vue.use(Vuetify). Fortunately, using this approach also means that you can define your components that extend the Vuetify components even before Vuetify is installed globally. This approach could even be adapted to work in the (live browser/Vuetify via cdn) environment if you use window.Vuetify instead of the imported version here.

Let's start by breaking all of the components free, so we never have to implement this hack in any more that one place.

VuetifyActuallyAlacarte.js aka "Hippity Hoppity I'm Coming For That Property"

import Vuetify from 'vuetify'

let output
// Subvert the Vuetify.install method to give us the same built components that
// it normally provides to the Vue.use method when registering Vuetify globally.
const syntheticSubvertingVue = {
  use (installer, options) {
    output = {
      ...options
    }
  }
}
Vuetify.install(syntheticSubvertingVue)

// At the time of writing this at Vuetify 1.5.14, this output object gives us
// properties `components` and `directives`, in case you need either of those
export default output
export const components = output.components
export const directives = output.directives

In your cases, you'll probably write something like this:
CustomVInput.js

import { components } from './VuetifyActaullyAlacarte'
const VInput = components.VInput

export default {
  extends: VInput,
  ...
}

In my case, I wanted to extend the VTextField, which has a deprecation warning wrapper obscuring the _actual_ component that I want to extend, so I need to unwrap it to get the real component - thankfully still accessible.

CustomVTextField.js

import { components } from '@shared/components/VuetifyActaullyAlacarte.js'
const VTextField = components.VTextField.$_wrapperFor

export default {
  extends: VTextField,
  ...
}

Hopefully this helps someone else out there!