I'm trying to use nuxt-class-component in 2.0.0 but after adding

build: {
babel: {
plugins: ['transform-decorators-legacy', 'transform-class-properties']
}
}

to nuxt.config.js I have error: Cannot use the decorators and decorators-legacy plugin together. I can't find any information how to resolve this issue.

What problem does this feature solve?

Right now, the smart query/subscrition of vue-apollo must be put into the class decorator of Component, and there're a lot of typing Catch-22s we had to turn off type checking temporarily to get it to stop redding our IDE.

Is there any decorators for vue-apollo? I believe there can also be some decorator sugars around it too, it would be much better.

What does the proposed changes look like?

We could have decorators like this:

@Component()
export default class HelloComponent extends Vue {
  world: string = "world"

  // Type I: Tag only (Can this be computed🤔)
  @SmartQuery(gql`query { hello }`)
  hello?: { data: hello }

  // Type II: With options
  @SmartQuery({
    query: gql`query { hello }`,
    fetchPolicy: 'cache-and-network'
  })
  hello2?: { data: hello }

  // Type III: Functional variable
  @SmartQuery(gql`query Hello($name: String!) {
    hello(name: $name)
  }`)
  hello3(name: string = this.world): any {
    return async (query: (variables?: any) => Promise<any>): Promise<any> => {
      return await query({ name })
    }
  }

  // Type III variant: Functional variable with options and default variable and scoped variable
  @SmartQuery({
    query: gql`query Hello($name: String!) {
      hello(name: $name)
    }`,
    /* !! This should be prohibited for all decorators !!
    variables: {
      message: 'Meow'
    },
    */
    skip: false
  })
  'hello3.5'(name: string = this.world): any {
    return async (query: (variables?: any) => Promise<any>): Promise<any> => {
      return await query({ name })
    }
  }

  // Type IV: Mutation
  @Mutation(gql`
    mutation {
      store(key: "123", value: "456") {
        key,
        value
      }
    }
  `)
  hello4(): any { // Sorry but I'm too lazy to type 😣
    return async (mutate: (variables?: any) => Promise<any>): Promise<void> => {
      const data = await mutate() // no variables supplied
      // ...update..., e.g. write to local storage etc.
    }
  }

  // Type V: Mutation with options and variables
  @SmartMutation({
    mutation: gql`
      mutation Store($key: String!, $value: String!) {
        store(key: $key, value: $value) {
          key,
          value
        }
      }
    `,
    optimisticResponse: {
      __typename: 'Mutation'
    }
  })
  hello5({ key, value }: { key: string, value: string }): any {
    return async (mutate: (variables?: any) => Promise<any>) => Promise<void> {
      const data = await mutate(variables) // with variables supplied
      // ...update..., e.g. write to local storage etc.
    }
  }

  // Type VI: Subscription
  @SmartSubscription(gql`subscription {
    hello
  }`)
  onHello({ hello }: { hello: string }): void { // corresponds to updateQuery
    // XXX: should this really be auto wrapped upon the true model? (see below Type VII)
    this.handleOnHello({ hello })
  }

  @Emit('hello')
  handleOnHello({ hello }: { hello: string }) {}

  // Type VII: Subscription with variables
  @SmartSubscription({
    document: gql`subscription Hello($name) {
      hello(name: $name)
    }`
  })
  onHello2(name: string): any {
    // XXX: Async iterator or observable?
    // Observable is more fitted to Vue philosophy,
    // but async iterator is much easier to implement
    return async (pullData: (variables?: any) => Promise<any>): Promise<void> => {
      // So we are not appending to local variables, instead we remap this into an event and do it there

      // XXX again: Some darker sides of async iterator
      // https://github.com/tc39/proposal-async-iteration/issues/126
      for await (const { data: { hello }, unsubscribe } of pullData({ name })) {
        this.handleOnHello({ hello }) 
        if (hello === 'world') await unsubscribe() // This is my proposed way to stop, but then it degenerates to observable...
      }
    }
  }
}

Consensus

Version

v1.2.1

Reproduction link

https://github.com/nuxt-community/nuxt-class-component

Steps to reproduce

• Create a component using @Component decorator
• Pass head property to a config object

What is expected ?

Title of the related page is changed

What is actually happening?

[tsl] ERROR in ...\nuxt-apollo-github\components\Inspirations.vue.ts(20,3)
      TS2345: Argument of type '{ head: { title: string; }; }' is not assignable to parameter of type 'VueClass<Vu
e>'.
  Object literal may only specify known properties, and 'head' does not exist in type 'VueClass<Vue>'.

Additional comments?

Same is happening with other custom properties. For example, if you try to use @nuxt/apollo module and it's apollo config property you will also get an error:

TS2345: Argument of type '{ apollo: { allInspirations: { prefetch: boolean; query: DocumentNode; }; }; head:
 { title: strin...' is not assignable to parameter of type 'VueClass<Vue>'.
  Object literal may only specify known properties, and 'apollo' does not exist in type 'VueClass<Vue>'.

I think any other custom property will also produce similar error.

What problem does this feature solve?

Currently when using nuxt with ts - I'm unable to add watchQuery & key to my vue components.

Please see
https://github.com/nuxt/nuxt.js/blob/dev/examples/layout-transitions/pages/users.vue#L22-L25
and/or
https://nuxtjs.org/api/pages-watchquery

Further reference:
https://github.com/nuxt-community/nuxt-property-decorator/issues/13

What does the proposed changes look like?

Adding the fields / ts definitinos?

Hello everyone, the project was written on vue half a year ago. Today started to remake his Nuxt. Created a new project started to transfer components from the old project. One of the components uses the svg logo.
But after the project is launched, this logo is inserted in a very strange way. By the method of samples I found that the problem is in svg, but before that it worked fine.
I can not understand what has changed. Perhaps this is a bug or bug?

Any support for dynamic import (in case our module target is to esnext)?

i'm making own Nuxt project with typescript.
and i got a problem that not triggering asynData methods, but when i
changing library vue-class-component to nuxt-class-compoent, it works.

but… why?
there is no source code related to asyncData (dist/index.js , dist/index.d.ts)

so i wonder that why is it works.

• I found registerHooks API in lib directory.
  sorry :)

I'm using this template inside Webstorm and once I'm trying to import nuxt-class-component into my project I get a reference highlight in red giving me an error: Cannot resolve definitions for module nuxt-class-component although index.d.ts is present in the node_modules/nuxt-class-component/dist/ folder

When I try to fix it by importing a related @typed definition package

I get another error:

I tried to look for a related definition manually but seems like it doesn't exist in the @types repo.
Could someone help me fix this issue?

What are the goals?
What are the key differences from vue-class-component + vue-property-decorator?

$ yarn add babel-plugin-syntax-flow babel-plugin-transform-flow-strip-types

Then:

module.exports = {
  build: {
    babel: {
      plugins: ['transform-decorators-legacy', 'transform-class-properties']
    },
...

The configured plugins don't match those installed in the previous step. Which plugins should I use?

Also, the README.md tells me to install the given plugins/config if I'm using Babel. Don't all Nuxt apps use Babel? And shouldn't the installed plugins use --dev?

Thanks.