Extending the VBtn component

Steps to reproduce

• I used the NUXT template (vuetifyjs/nuxt) for project, without modifications;
• Extended VBtn component;

./components/MyBtn.vue
<script>
import VBtn from '../node_modules/vuetify/src/components/VBtn/VBtn'

export default {
  name: 'my-btn',
  extends: VBtn,
  methods: {
    genContent () {
      return this.$createElement(
        'div',
        { 'class': 'my-class-btn__content' },
        [this.$slots.default]
      )
    }
  }
}
</script>

• Add the extented component to index page

./pages/index.vue
<template>
  <v-layout>
    <v-flex>
      <my-btn>My Button</my-btn>
    </v-flex>
  </v-layout>
</template>

<script>
import MyBtn from '../components/MyBtn'

export default {
  components: {
    MyBtn
  }
}
</script>

Versions

Latest version starter template vuetifyjs/nuxt:

• nuxt 1.0.0-rc6
• vuetify 0.15.7
• and nodejs 6.11

What is expected ?

Wanted to change the content and styles of the button.

What is actually happening ?

Error occurs during compilation (npm run dev)

 ERROR  Failed to compile with 1 errors                                                                                                                                         23:55:03

 error  in ./node_modules/vuetify/src/mixins/route-link.js

Module parse failed: ...\vuetify-test2\node_modules\vuetify\src\mixins\route-link.js Unexpected token (36:10)
You may need an appropriate loader to handle this file type.
|         }],
|         on: {
|           ...(this.$listeners || {}),
|           click: this.click
|         }

 @ ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":["...//vuetify-test2//node_modules//babel-preset-vue-app//dist//index.common.js"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./node_modules/vuetify/src/components/VBtn/VBtn.vue 7:0-56
 @ ./node_modules/vuetify/src/components/VBtn/VBtn.vue
 @ ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":["...//vuetify-test2//node_modules//babel-preset-vue-app//dist//index.common.js"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./components/MyBtn.vue
 @ ./components/MyBtn.vue
 @ ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":["...//vuetify-test2//node_modules//babel-preset-vue-app//dist//index.common.js"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/index.vue
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=3000&path=/__webpack_hmr ./.nuxt/client.js

Reproduction Link

See code above. Sory, I do not know how to place an example with imports.

[jacekkarczmarczyk]

I’m not familiar with nuxt or with vuetify nuxt template, so maybe it’s a stupid question, but is there something that could be done in the template or in the docs (more detailed info) to avoid this kind of problems?

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord