Extending a Vuetify component in NuxtJS

07 October 2020 - François

Sometimes, you need to extend a Vuetify component to override a specific behavior or adding a new feature. Here is how I am doing it with NuxtJS.

First, I create the component and import the Vuetify component to extend.

import { VParallax } from 'vuetify/lib/components/VParallax';

Then I create a blank component that extend the vuetify one.

export default {
  extends: VParallax,
}

If you start the using this component in your code, you will have an error:

Cannot use import statement outside a module

To fix that, you should add a new build.transpile entry in your nuxt.config.js config file.

  ...,
  build: {
    transpile: ['vuetify/lib'],
  },
  ...

If you are not using NuxtJS, configure babel to transpile the vuetify/lib directory.

And this should works!

In my case, I wanted to fix the height of the image in the parallax component when the image is resized by the brower. I overrided the objHeight method for that. Here is the full code:

<script>
import { VParallax } from 'vuetify/lib/components/VParallax';

export default {
  extends: VParallax,

  methods: {
    objHeight: function objHeight() {
      return this.height;
    }
  }
}
</script>

Have a comment? Contact me by email.