Vue-class-component: Doesn't work with Nuxt

[krasevych]

I use Nuxt and I try to use class-component, I installed the plugin:
``` .babelrc
{
"plugins": [
"transform-decorators-legacy",
"transform-class-properties"
]
}

also I tried add in inside `nuxt.config`

build: {
vendor: ['vue-class-component'],
babel: {
plugins: [
'transform-decorators-legacy',
'transform-class-properties'
]
}
}
```
but nothing works, What I do incorrect?

[krasevych]

When I added presets: ['stage-0', 'es2015']:

babel: {
      presets: ['stage-0', 'es2015'],
      plugins: [
        'transform-decorators-legacy',
        'transform-class-properties'
      ]
    }

it works but hot reload - stopped working. What should I change for hot-reload and class-component - work together?

[ktsn]

Can you share an example code that reproduce this problem?

[krasevych]

it is my test project https://github.com/krasevych/test-nuxt

[Atinux]

Hi @ktsn

I've seen multiple parts where nuxt.js cannot be compatible with vue-class-component:

1. $hooks are not configurable (nuxt.js surcharges asyncData and fetch for example)
2. Nuxt.js cannot give this in data, so this line will break.

For 2), I can try to call data this way:

let data = Component.options.data.call(new Component())

But I don't think it will be really nice.

[ktsn]

Thank you for describing the detail @Atinux

Actually, vue-class-component already has an interface to configure the hooks. https://github.com/vuejs/vue-class-component#adding-custom-hooks
In addition, as the @Component decorator can receive all possible component options, we also can put asyncData and fetch into the decorator.

@Component({
  asyncData () { ... },
  fetch () { ... }
})
class MyComp extends Vue {
  // ...
}

I remember that the nuxt's data is now renamed to asyncData, so that is not a problem since we can configure the hooks in vue-class-component?

[HerringtonDarkholme]

It seems data still does not have this accessible.

You do NOT have access of the component instance through this inside data because it is called before initiating the component.

https://nuxtjs.org/api

[Atinux]

@ktsn I did not see that we can add custom hooks, this is great!

The only problem is the fact that data cannot access this since we merge asyncData with data.

[ktsn]

Sorry for the late reply. I was too busy in the last week. 😞

I'm looking into this issue but I'm not sure how we can solve it. Currently, vue-class-component always accesses this value in data function to collect class properties and it assumes this is a Vue instance.

BTW, why Nuxt need to call data before instantiating components? Can't we leave it after instantiating components like normal Vue components?

[Atinux]

Because we keep the data in a state for server-side rendering purpose.

I will take a look to this how we can find a workaround of this issue.

[krasevych]

I really hope it will be soon, Nuxt is amazing project and class-component is really cool! it help you do faster routine work)
Also a lot of devs wait for Nuxt and class-component work together

[Atinux]

It's now working with the last release of Nuxt.js (0.10.6)!

Example: https://github.com/nuxt/nuxt.js/tree/master/examples/vue-class-component

You can close the issue :)

[ktsn]

Great work! Thank you @Atinux!

[krasevych]

@Atinux Thank you!!!

[corsen2000]

I was able to follow the example to get nuxt-class-component to work, but I can't get vue-property-decorator to work. I get an unexpected token error when trying to use @Prop.

Is there a problem or am I hooking it up wrong? Can the vue-class-component example be updated to include vue-property-decorator as well?

[krasevych]

vue-property-decorator - works only with TypeScript. and doesn't work with Babel. do you use TS?

[corsen2000]

@krasevych thanks for the information. This is not working for me because I use Babel, not TS.