nuxt-community/nuxt-property-decorator

Property decorators for Nuxt (base on vue-property-decorator)

nuxt-property-decorator's Issues

inject enhance?

If I want inject default value like this:
const Child = { inject: { foo: { from: 'bar', default: 'foo' } }}
How should I write it? thx ;)

$router is missing

It appears that $router is not typed.

Thanks!

Module parse failed: Unexpected character '@' in @Component

I've come back to a project after a while and it is not working suddenly. I've also got some SCSS undefined variable errors, so it's highly likely something is incorrect on my side, but I have no idea what though. I'd appreciate any help.

 ERROR  in ./pages/index.vue?vue&type=script&lang=ts&                                                                    friendly-errors 11:50:11  

Module parse failed: Unexpected character '@' (27:0)                                                                     friendly-errors 11:50:11  
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import IsTouchScreen from "@/components/mixins/IsTouchScreen";
|
> @Component({
|       components: {
|               LandingPage,
                                                                                                                         friendly-errors 11:50:11  
 @ ./pages/index.vue?vue&type=script&lang=ts& 1:0-117 1:133-136 1:138-252 1:138-252
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

package.json:

// <snip> 
"nuxt-property-decorator": "^2.5.0",
"nuxt": "^2.11.0",

tsconfig.json

{
	"compilerOptions": {
		"target": "esnext",
		"module": "esnext",
		"moduleResolution": "node",
		"lib": [
			"esnext",
			"esnext.asynciterable",
			"dom"
		],
		"esModuleInterop": true,
		"jsx": "preserve",
		"experimentalDecorators": true,
		"allowJs": true,
		"sourceMap": true,
		"strict": true,
		"noImplicitAny": false,
		"noEmit": true,
		"baseUrl": ".",
		"paths": {
			"~/*": [
				"./*"
			],
			"@/*": [
				"./*"
			]
		},
		"types": [
			"@nuxt/vue-app",
			"@types/node",
			"@types/dom-inputevent"
		]
	},
	"exclude": [
		"node_modules"
	]
}

nuxt.config.ts is kinda log and hacked together so I can put it up in a gist or the parts that are needed.

layout does not work

https://codesandbox.io/s/py6rwml0jq?fontsize=14&module=%2Fpages%2Ftwo.vue

specifying the layout as a string, method, etc all doesn't work and always uses the default layout, only object based specification works

there is this issue that was closed #14

Component in Component

`mixins` and `Mixins`

Just get interested in this library. Love the all-in-one solution!

I am currently using vue-property-decorator and vuex-class, trying to migrate to this package.

Just wondering, what's the differences between Mixins from vue-property-decorator and mixins from vue-class-component ? Why you choose mixins over Mixins? (Mixins works perfectly in my case.)

Or can we export both for easier migration?

Unexpected token

Hi, i get this error:

Upgrade vue-property-decorator to the latest version

vue-property-decorator support reflect-metadata once again since 8.1.0. kaorun343/vue-property-decorator#154

Can we please update it as a dependency?

nuxt-class-component and nuxt-property-decorator

This library is currently doing whatever nuxt-class-component doing and bit more. So it is not dependant on nuxt-class-component as it says in the beginning of readme. So we can change that statement.
Better to say that this library includes all nuxt-class-component features and examples on it's readme pretty much apply here to.

But maybe even better option is to merge them. There is certainly a case in favour of merging the two libraries together, since they are both small libraries and are very similar and overlap. They are both parts of nuxt-community and this will be clearly in the interests of nuxt community. Many people including myself are confused when to use which of them.

Currently nuxt-property-decorator has all the functionality so it can become the new umbrella and we can change name to better accommodate for both use cases (nuxt-class-tools). That will be very timely, since latest nuxt adds enhanced typescript support.

@breakingrobot @alexchopin @pi @DavidBernal @Atinux and others what do you think?

Include vuex-module-decorators

It would be nice to have https://github.com/championswimmer/vuex-module-decorators in this package.
This allows to create vue-class like vuex stores and fits very to nuxt :)

`watchQuery` can't work with `v2.1.3`

watchQuery can't work with v2.1.3

I tried it like this:

import { Vue, Component } from 'nuxt-property-decorator';


@Component({
     ...
})
export default class IndexPage extends Vue {

    watchQuery: string[] = ['label', 'page'];
...

So strange, i see other hooks like asyncData works well, but watchQuery does nothing when query changes.

Here is a repository to show a demo: https://github.com/shalldie/nuxt-ts-watchQuery

PropSync is not exported

It is documented as exported, but it isn't.

Subsequent property declarations must have the same type. Property '$store' must be of type 'Store<any>', but here has type 'Store<any>'

Hi there,

I have the following error when building my application(nuxtJS in typescript) with the latest version of this package(2.7.2)

ERROR in D:/development/coronaresponse/node_modules/nuxt-property-decorator/node_modules/vuex/types/vue.d.ts(16,5):
16:5 Subsequent property declarations must have the same type. Property '$store' must be of type 'Store', but here has type 'Store'.
14 | declare module "vue/types/vue" {
15 | interface Vue {
16 | $store: Store;
| ^
17 | }
18 | }
19 |

This is a fatal error which breaks production build.
I have the same error when running in development mode(but the app works smoothly).

I downgraded the package to the previous version(2.7.1) and everything works fine.

Thank you for your help and great package!

Add validation decorators

Consider adding decorators for validation for example:
https://www.npmjs.com/package/vuelidate-property-decorators

Collaborators/Owner wanted!

I created this lib for a small fast test. Now this library is used for some people, and I don't have enough time to support and I'm not using, so is difficult for me find out bugs.
If you are interested for keep it, contact me.

Cannot pass shorthand boolean attribute in template

I've noticed I am forced to use e.g. :boolean="true" rather than the shorthand attribute (in this example boolean)

Reflect-metadata is not working

I'm importing reflect-metadata on a plugin because i don't know where to put it, but it doesn't work.
Where do you import it?

Repo has both yarn.lock and package-lock.json

I am pretty sure that we should use either yarn.lock or package-lock.json.
Also, docs should be updated about development process and which tool to use.

Change component name when production build

When registering a component with plugin, if you register as Vue.component(MyComponent.name, MyComponent), the component name will be different during production build.

• development build
  

• production build
  

link

• source code & development build : https://codesandbox.io/s/y5046?file=/plugins/global.ts
• production build: https://nuxt-property-decorator-issue.firefanda.now.sh/

[Request] Update vue-class-component

Please , I need Mixins decorator include in the new version from the package 'vue-class-component'

New fetch and fetchOnServer - Nuxt 2.12.x

Nuxt 2.12+ has changed the way fetch works. As the name is the same, this is thankfully supported by nuxt-property-decorator.

However, it also introduces a new hook called fetchOnServer which is a variable, taking a true or false value. Docs for it can be found here: https://nuxtjs.org/api/pages-fetch/.

I can't seem to get this to work using nuxt-property-decorator. I am wondering if it needs to be registered as a hook, the same way head is for example.

As a temporary fix, I can write it in the registerHooks, which seems to then work, however I then must write the hook as a function, rather than a boolean:

Component.registerHooks(['fetchOnServer']);

@Component
export default class MyComponent extends Vue {
  fetchOnServer() { return false };
}

Issue with layout & auth property

I am trying to use nuxt-property-decorator but I am finding it not working with layout & auth properties for nuxt.js and auth.nuxt.js.

I am trying to set layout = 'empty' and expect the component to use empty layout. It instead picks the default layout. Same is the issue with auth = false when using nuxt's auth module. The component should ideally be skipped from auth routes but it doesn't work that way.

I would like to understand if I am missing any class/property attribute to use to configure the component as required.

More information for auth at https://auth.nuxtjs.org/middleware.html and custom layout is available at https://nuxtjs.org/guide/views#layouts

@ProvideReactive throws "Object(...) is not a function" error

nuxt-property-decorator version 2.5.0 (uses vue-property-decorator 8.3.0)

const InjectKey = Symbol();
...

@ProvideReactive(InjectKey) foo: any = {};

causes the following error to appear in the browser console

consola.browser.js:1 error TypeError: Object(...) is not a function
    at Module../node_modules/babel-loader/lib/index.js?!./node_modules/ts-loader/index.js?!./node_modules/vue-loader/lib/index.js?!./blah/blah)
    at __webpack_require__ (bootstrap:787)
    at fn (bootstrap:150)
    at Module..blah/blah.vue?vue&type=script&lang=ts& (foo.vue?bdef:1)
    at __webpack_require__ (bootstrap:787)
    at fn (bootstrap:150)
    at Module..blah/blah.vue (foo.vue:1)
    at __webpack_require__ (bootstrap:787)
    at fn (bootstrap:150)
    at Module../node_modules/babel-loader/lib/index.js?!./node_modules/ts-loader/index.js?!./node_modules/vue-loader/lib/index.js?!./blah/blah.vue?vue&type=script&lang=ts& (blah..34da5257.js:2920)

Class properties overrides asyncData, instead of vice versa

This can easily be solved with removing class properties, but it makes it impossible to set default value for asyncData.

@Component({
  components: {
    PostQuery
  }
})
export default class Search extends Vue {
  // defaults = {
  //   posts: [],
  //   count: 0
  // };

  async asyncData({ $axios, $payloadURL, route }: any) {
    if(process.static && process.client && $payloadURL) {
      return await $axios.$get($payloadURL(route))
    }

    const ps = searchPosts({
      isBlog: true,
      current: true,
      posts: await axiosOrImport(`/build/posts.json`, hash.posts._header)
    });
    const posts = await Promise.all(ps.slice(0, config.posts.perPage).map(async (p) => {
      p.teaser = await teaserStore.get(p.path, p.h);
      return p;
    }));

   // this.defaults return defined
    
    return {
      defaults: {
        posts,
        count: ps.length
      }
    };
  }
}

No overload matches this call. When using middleware

I have the following component...

<template>
  <div>
    home
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({
  middleware: ['auth']
})
export default class HomePage extends Vue {}
</script>

<style lang="scss" scoped></style>

the middleware hook is doing as expected but my ide throws the error...

No overload matches this call.
Overload 1 of 2, '(options: ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>> & ThisType): <VC extends VueClass<...>>(target: VC) => VC', gave the following error.
Argument of type '{ middleware: string[]; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>> & ThisType'.
Object literal may only specify known properties, and 'middleware' does not exist in type 'ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>> & ThisType'.
Overload 2 of 2, '(target: VueClass): VueClass', gave the following error.
Argument of type '{ middleware: string[]; }' is not assignable to parameter of type 'VueClass'.
Object literal may only specify known properties, and 'middleware' does not exist in type 'VueClass'.

I cant see anywhere in the docs that covers adding specific types for the decorator.

Is there a extra step in setting this up that I am missing?

1.3.1 release in github

@DavidBernal seems you forgot to mark 1.3.1 release in github. It doesn't come up in release list here. I would do it myself but still have no permissions for this.

Thanks

Nuxt Decorator Override its context

i have this problem that when i used the decorator it overrides the context of the component and we cannot access the $store or any any attribute in the component except the declared data variables.

> Property '$store' does not exist on type 'Index'.

Prop Use Error

Compile error with @prop project, error message ( Decorating class property failed. Please ensure that proposal-class-properties is enabled and set to use loose mode. To use proposal-class-properties in spec mode with decorators, wait for the next major version of decorators in stage 2. )

This is my code:

export default class Wrap extends Vue {
@prop() nextBtn
}
use: <Wrap @nextpage="toNextPage" :nextBtn="next">

Why this module doesn't reuse vue-property-decorator?

@DavidBernal I looked closely into your code and I completely don't understand why do you rewrite all decorators from scratch? Wouldn't it be easier to import vue-property-decorator as a project dependency and inherit your decorator from it? Basically, in the current form, your lib has no difference from vue-property-decorator, you don't even use nuxt-class-component so what's the point of using your lib in favor of vue-property-decorator?

Module and VuexModule from vuex-module-decorators are not exported by nuxt-property-decorator

It seems that nuxt-property-decorator is not exporting some types from vuex-module-decorators, despite the README saying it does.

nuxt-property-decorator/lib/nuxt-property-decorator.d.ts

There seems to be no mention of Module or VuexModule, among others, despite the README stating these are exported from vuex-module-decorators.

Hopefully I'm not just being dim and wasting your time, but wanted to know if this is a legitimate mistake or if I've missed something?

As an example, this import is complaining that Module and VuexModule are not exported members.

import { Module, VuexModule } from 'nuxt-property-decorator';

Updates

@breakingrobot @DavidBernal first of all thanks for this library which is adding lots of value. I can see there are number of issues and merge requests have not been dealt with for last 8 months. I would be happy to offer to go through merge requests and help in maintaining the library.

$nuxt is missing

It seems that $nuxt is not defined.
Is there any way?

Thanks!

SyntaxError: Unexpected token export

After upgrading Nuxt to the latest version 2.5.1 the following highly unhelpful error started popping up:

I can reproduce the error by creating a fresh Nuxt project with a package.json like this:

{
  ...
  "scripts": {
    "dev": "nuxt -p 3002",
    "build": "nuxt build"
  },
  "dependencies": {
    "cross-env": "^5.2.0",
    "nuxt": "^2.5.1",
    "nuxt-property-decorator": "^2.1.3",
    "@nuxtjs/axios": "^5.3.6"
  },
  "devDependencies": {
    "nodemon": "^1.18.9",
    "@nuxtjs/eslint-config": "^0.0.1",
    "@nuxt/babel-preset-app": "^2.5.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.15.1",
    "eslint-config-standard": ">=12.0.0",
    "eslint-plugin-import": ">=2.16.0",
    "eslint-plugin-jest": ">=22.3.0",
    "eslint-plugin-node": ">=8.0.1",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-promise": ">=4.0.1",
    "eslint-plugin-standard": ">=4.0.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-vue": "^5.2.2",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-prettier": "^3.0.1",
    "prettier": "^1.16.4"
  }
}

And nuxt.config as per documentation:

build: {
    babel: {
      presets({ isServer }) {
        return [
          [
            '@nuxt/babel-preset-app', { loose: true }
          ]
        ]
      }
    },
    ...

The error occurs as soon as I add nuxt-property-decorator.

[Bug] Component entry point does not exist

Hi. In a package.json file lib/nuxt-property-decorator.umd is referenced as the main entry point but there is no such file in the repo. When nuxt-property-decorator is used as a dependency it brakes build process with an error:

ERROR Failed to compile with 2 errors12:32:38
This dependency was not found:

nuxt-property-decorator in ./node_modules/ts-loader?{"appendTsSuffixTo":[{}]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./components/Card.vue, ./node_modules/ts-loader?{"appendTsSuffixTo":[{}]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/index.vue
To install it, you can run: npm install --save nuxt-property-decorator

nuxt-community/typescript-template#44

Component and Vue not found in module

This regards nuxt-community/typescript-template#44.

The output file produced by rollup causes the following errors when imported in e.g. a nuxt layout (import { Component, Vue } from 'nuxt-property-decorator';):

 warning  in ./layouts/default.vue
27:2-5 "export 'Component' was not found in 'nuxt-property-decorator'

 warning  in ./layouts/default.vue
27:2-5 "export 'Vue' was not found in 'nuxt-property-decorator'

I tried to build a commonjs module directly by changing compilerOptions.module in tsconfig.json with the same result.

In both cases the exports are clearly in the transpiled output file:

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var vue_1 = __importDefault(require("vue"));
exports.Vue = vue_1.default;
var vue_class_component_1 = __importDefault(require("vue-class-component"));
exports.Component = vue_class_component_1.default;
vue_class_component_1.default.registerHooks([
    'beforeRouteEnter',
    'beforeRouteLeave',
    'asyncData',
    'fetch',
    'head',
    'middleware',
    'layout',
    'transition',
    'scrollToTop',
    'validate'
]);
...

Parsing error: Using the export keyword between a decorator and a class is not allowed

Hi there,
I get this issue:
Parsing error: Using the export keyword between a decorator and a class is not allowed

<script lang="ts">
  import { Component, Prop, Vue } from 'nuxt-property-decorator';

  @Component
  export default class Contact extends Vue {
    ...
</script>````

Documentation doesn't cover passing `components: {}` to the component

Documentation doesn't cover passing components: {} to the component. It there a way to do that?

`meta` property is not present in componentOptions

Meta property needs to be added in the component options

nuxt-property-decorator/src/nuxt-property-decorator.ts

Line 16 in 930298a

Component.registerHooks([

As you can see in the below link, the meta property is being added in nuxt typescript build

https://github.com/nuxt/typescript/blob/9fa04b66f00c875cb1b690462a52e10056926759/packages/types/app/vue.d.ts#L23

update for vuex-module-decorators

Hello, i am trying to set the global config from vuex-module-decorators.
I noticed that this package uses 0.16.1, but it was introduced in v0.17

Could you be so kinda to update it to the latest version? :)
Thanks! 👯‍♂️

Vue-class-compnent is used instead of Nuxt-class-component

Please, fix this error. nuxt-class-component should be used as a dependency in the project. Right now you are using vue-class-component which leads to TS errors when using Nuxt Component's specific properties such as fetch or middleware. You need to change
import Component, { createDecorator } from 'vue-class-component';
to
import Component, { createDecorator } from 'nuxt-class-component';
in nuxt-property-decorator.ts

beforeMount is not recognized

I tried to use the lifecycle hook beforeMount without success.
anybody can help?

transition property not supported?

How can I define a transition property with this lib (https://nuxtjs.org/api/pages-transition/)?

Looks like defining it as a method doesn't work:

import { Component, Vue } from 'nuxt-property-decorator'
@Component
export default class extends Vue {
  transition (to, from) {
    // something here
  }
}

Also can't see it's possible to define it within a component?

Adding `watchQuery` & `key` ?

Hi, could we please add watchQuery & key?

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

SyntaxError: Unexpected token import

I got following error in v1.1.3.
when I use v1.0.0, it works fine.
seems like there's no nuxt-property-decorator.umd.js in v1.1.3, and entry point of the library is nuxt-property-decorator.js which uses import (and I believe node.js does not support import syntax out of the box yet)

{ /Users/foo/repos/example/node_modules/nuxt-property-decorator/lib/nuxt-property-decorator.js:2
import Vue from 'vue';
^^^^^^

SyntaxError: Unexpected token import
    at new Script (vm.js:51:7)
    at createScript (vm.js:138:10)
    at Object.runInThisContext (vm.js:199:10)
    at Module._compile (module.js:624:28)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at r (/Users/yshrsmz/repos/androiddagashi/node_modules/vue-server-renderer/build.js:8330:16)
    at Object.<anonymous> (server-bundle.js:20887:18)
    at __webpack_require__ (webpack:/webpack/bootstrap 9be7dd6ad8a646157908:25:0)
    at Object.70 (pages/index.vue?c13f:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 9be7dd6ad8a646157908:25:0)
    at Object.66 (pages/index.vue:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 9be7dd6ad8a646157908:25:0)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:160:7) statusCode: 500, name: 'SyntaxError' }

Integration with vue-apollo

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? It would be much better.

after upgrade nuxt to 2.5.1, shows ts warning for Component decorator

after upgrade nuxt to 2.5.1, VSCode editor shows ts warning for Component decorator:

(property) ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>.components?: {
    [key: string]: VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<string, any>> | AsyncComponentPromise<any, any, any, any> | AsyncComponentFactory<...>;
} | undefined

Argument of type '{ components: { Card: Vue; }; }' is not assignable to parameter of type 'VueClass<Vue>'.
  Object literal may only specify known properties, but 'components' does not exist in type 'VueClass<Vue>'. Did you mean to write 'component'?ts(2345)

@Component({
    components: {
        Card
    }
})
export default class extends Vue {
}

package.json:

{
    "name": "weixin-nuxt",
    "description": "企业微信页面",
    "version": "2.4.5",
    "private": true,
    "dependencies": {
        "@nuxtjs/axios": "5.4.1",
        "js-cookie": "^2.2.0",
        "nuxt": "^2.5.1",
        "nuxt-property-decorator": "^2.1.3",
        "vant": "^1.6.11",
        "vuex-class": "0.3.2",
        "weixin-js-sdk": "^1.4.0-test"
    },
    "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "start": "nuxt start",
        "generate": "nuxt generate",
        "post-update": "yarn upgrade --latest"
    },
    "devDependencies": {
        "@nuxt/typescript": "^2.5.1",
        "@nuxtjs/style-resources": "^0.1.2",
        "@types/node": "10.14.1",
        "@types/webpack-env": "1.13.9",
        "less": "^3.9.0",
        "less-loader": "^4.1.0"
    }
}

tsconfig.json:

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "lib": [
            "esnext",
            "esnext.asynciterable",
            "dom"
        ],
        "esModuleInterop": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "allowJs": true,
        "sourceMap": true,
        "strict": true,
        "noImplicitAny": false,
        "noEmit": true,
        "baseUrl": "./",
        "skipLibCheck": true,
        "importHelpers": true,
        "paths": {
            "*": [
                "types/*"
            ],
            "~/*": [
                "./*"
            ],
            "@/*": [
                "./*"
            ]
        },
        "types": [
            "@types/node",
            "@types/webpack-env"
        ]
    },
    "exclude": [
        "node_modules"
    ]
}

Parsing error: Unexpected token

@Component
class Def extends Vue {
  public language: string = 'en'
}

causes an error during compilation: error Parsing error: Unexpected token

We cannot use public, private with nuxt property decorator?

Importing from vue-property-decorator

There is some overlap with vue-property-decorator which is also using vue-class-component.

I suggest we import those overlapping methods from vue-property-decorator, since that library is well tested and is widely used.

Inject, Provide, Model, Prop, Watch, Emit should work for Nuxt the same way as they work for Vue. Also seems their implementation, although is pretty much the same, resolves some of the existing issues here like #21.

What do you think guys?

//cc @DavidBernal @breakingrobot and others

No 'Ref' decorator

This module does not support Ref decorator, although vue-property-decorator does support it

Injected plugin are not seen by tslint

When using the inject function as documented in https://nuxtjs.org/guide/plugins/ under "Combined inject" the injected methods and objects are not seen by tslint when using nuxt-property-decorator.

Example:

plugins/my-plugin.ts

const myData = {
  someData : "data",
  someDataChange() {
    this.someData = "newData";
  }
}

export default (_: any, inject: any) => {
  inject("data", myData);
};

components/MyComponent.vue

<script lang="ts">
import { Vue, Component } from "nuxt-property-decorator";

@Component
export default class MyComponent extends Vue {
  public triggerDataChange() {
    this.$data.someDataChanage();
  }
}
</script>

In this example the someDataChanage() would be executed as expected by the browser but tslint would provide an error saying "Property '$data' does not exist on type 'MyComponent'."

When not using nuxt-property-decorator tslint is able to properly pick up on $data, it is only when using nuxt-property-decorator that such an error is shown.

A hacky workaround is to add public this.$data: any into the class definition of MyComponent and the error will no longer be shown and the code will be executed as expected however from my understanding this shouldn't be needed.

I am aware that removing lang="ts" removes this tslint error however then tslint provides a warning on all methods that public can only be used in a ts file, and if I remove public I get "The class property 'triggerDataChange' must be marked either 'private', 'public', or 'protected"

I could also just not understand how typscript works, but the strange part is the code executes even though tslint gives an error.