Vuetify: Extending the VBtn component

[TuxGit]

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.

[maxeckel]

This looks like your build setup can't handle the spread operator.

There are a few ways to "fix" this, one would be the following:

https://stackoverflow.com/a/43020242/7847118

[KaelWD]

You need to configure webpack for a-la-carte https://vuetifyjs.com/vuetify/a-la-carte

Nuxt's webpack config is in nuxt.config.js https://nuxtjs.org/api/configuration-build#extend

[TuxGit]

Tested the code with a template Webpack+SSR (vuetifyjs/webpack-ssr) and its ok!
It turns out the problem in the assembly of webpack+nuxt=( But webpack config is hidden inside node_modules/nuxt.

No idea how to pass a babel plugins to nuxt. (config.plugins - is webpack plugins)
@KaelWD please, can you give an example of how to transfer the configuration nuxt.config.js babel plugins.

...or needs to modify loader?

[KaelWD]

https://nuxtjs.org/api/configuration-build#babel

[TuxGit]

Oh yes, I see!) Still an error, I'll try to compare the configs of the "starter templates"

[TuxGit]

All thanks for the comments. I did not immediately understand what needed to do :(
Just extended the config nuxt.config.js

      config.module.rules.push({
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          presets: ['vue-app'],
          babelrc: false,
          cacheDirectory: true
        },
        include: [
          path.resolve(__dirname, './node_modules/vuetify/src')
        ]
      })

[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