Doesn't work with Nuxt

[krasevych]

I use Nuxt and I try to use class-component, I installed the plugin:

{
  "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!