Babel 7 support?

[lbssousa]

It's known that vue-property-decorator's @Prop decorators don't work with Babel 6. Is there any chance this scenario changes with upcoming Babel 7 decorators implementation?

[krasevych]

It would be nice if it is)

[chaoyangnz]

is this repo dead? If not, please please please respond .

I don't know why vue doesn't take over this library which is supposed to be provided by vue itself.

[cybermerlin]

support use

    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.0",

[mavarok]

Has anyone found a work-around for this yet?

I'm using babel 7 I've got the following in my .babelrc:

["@babel/plugin-proposal-decorators", { "legacy": true}],
["@babel/plugin-proposal-class-properties", { "loose": true}],

I'm using @Prop like so:

@Prop({required: true}) item!: IHyperlinked;

Babel seems happy transpiling this, but throws runtime errors that seem to imply that the value is never set, so presumably vue isn't being told it's a prop.

[SecretPocketCat]

Seems like the issue mentioned by the OP is still there. For instance, initialising data with props doesn't work when transpiled by babel. It does work with ts-loader though.

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

@Component
export default class HelloWorld extends Vue {
  @Prop()
  msg;

  msgData = this.msg + '_data';
}

[cybermerlin]

@SecretPocketCat, @mavarok, just check versions of npm packages:

    "@babel/core": "=7.4.5",
    "@babel/generator": "=7.4.4",
    "@babel/plugin-proposal-class-properties": "=7.4.4",
    "@babel/plugin-proposal-decorators": "=7.4.4",
    "@babel/plugin-proposal-object-rest-spread": "=7.4.4",
    "@babel/plugin-syntax-dynamic-import": "=7.2.0",
    "@babel/plugin-transform-async-to-generator": "=7.4.4",
    "@babel/plugin-transform-block-scoping": "=7.4.4",
    "@babel/plugin-transform-exponentiation-operator": "=7.2.0",
    "@babel/plugin-transform-modules-commonjs": "=7.4.4",
    "@babel/plugin-transform-parameters": "=7.4.4",
    "@babel/plugin-transform-runtime": "=7.4.4",
    "@babel/preset-env": "=7.4.5",
    "@vue/cli": "^3.8.4",
    "@vue/cli-plugin-babel": "=3.8.0",
    "@vue/cli-plugin-e2e-nightwatch": "=3.8.0",
    "@vue/cli-plugin-eslint": "=3.8.0",
    "@vue/cli-plugin-pwa": "=3.8.0",
    "@vue/cli-plugin-unit-mocha": "=3.8.0",
    "@vue/cli-service": "=3.8.4",
    "@vue/test-utils": "^1.0.0-beta.29",
    "autoprefixer": "=9.5.1",
    "babel-eslint": "^10.0.1",
    "babel-loader": "=8.0.6",
    "babel-plugin-istanbul": "^5.1.4",
    "babel-plugin-root-import": "=6.2.0",
    "babel-plugin-syntax-async-functions": "=6.13.0",
    "babel-plugin-syntax-trailing-function-commas": "=6.22.0",
    "babel-plugin-transform-es2015-constants": "=6.1.4",
    "babel-plugin-transform-inline-environment-variables": "=0.4.3",
..
    "vue-loader": "=15.7.0",
    "vue-template-compiler": "=2.6.10"

btw, for big sources mb need modify ur shell command to: "serve": "cross-env NODE_OPTIONS=--max_old_space_size=8192 vue-cli-service serve --open "

if u've sometimes exception about not exist template render function, then remove node_modules n rerun npm i -f

[akoidan]

@mavarok you can find a working example at vue-webpack-typescript it uses babel loader. Here's the prop

Any more work on this one, can we close this issue @lbssousa ?

[Mikilll94]

Any update on this?