Activities

OndrejCibulka

OndrejCibulka posted a new question

nuxt-class-component •

Integration with i18n plugin

Hello,

I tried to install this plugin with i18n plugin into my application. When I tried to build this application, I get this error:

error.PNG

Is it possible to fix it somehow so I can use it together?

Thank you

filipwronski

filipwronski posted a new question

nuxt-class-component •

Error: Cannot use the decorators and decorators-legacy plugin together

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.

stevefan1999

stevefan1999 posted a new feature request

nuxt-class-component •

idea [RFC] Decorators for vue-apollo

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

AndrewBogdanovTSS

AndrewBogdanovTSS posted a new bug report

nuxt-class-component •

bug Component config object can't be extended with `head` property

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.

hartmut-co-uk

hartmut-co-uk posted a new feature request

nuxt-class-component •

idea Adding `watchQuery` & `key` to @Component?

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?

VlaDi4eKK

VlaDi4eKK posted a new question

nuxt-class-component •

SVG breaks the component and is not correctly inserted into the body

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?
Агенство создания сайтов Rocket-Biz | Продвижение сайтов | Контекстная реклама 2018-05-07 17-00-01.jpg
rocketbizsite 2018-05-07 17-00-44.png

filosofikode

filosofikode posted a new question

nuxt-class-component •

Dynamic Import?

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

highalps

highalps posted a new question

nuxt-class-component •

[Question] what is difference from vue-class-component?

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 :)
AndrewBogdanovTSS

AndrewBogdanovTSS posted a new question

nuxt-class-component •

Cannot resolve definitions for module nuxt-class-component

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
image
When I try to fix it by importing a related @typed definition package
image
I get another error:
image
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?

qm3ster

qm3ster posted a new question

nuxt-class-component •

Purpose of package unclear

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

ndarilek

ndarilek posted a new question

nuxt-class-component •

Babel installation instructions and config doesn't match
$ 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.

ndarilek

ndarilek posted a new question

nuxt-class-component •

Can't set middleware

I have the following in layout/default.vue:

<script>
export default {
  middleware: "connected"
}
</script>

connected is a middleware that checks a store state property and redirects if it is null. If I change to:

<script lang="ts">
import Component from "nuxt-class-component"
import Vue from "vue"

@Component({
  middleware: ["connected"]
})
export default class extends Vue {
}

</script>

Am I doing something wrong, or is this a bug in nuxt-class-component? It doesn't seem to matter whether middleware is a string or array.

Thanks.