JuniorTour / vue-template-babel-compiler

Enable Optional Chaining(?.), Nullish Coalescing(??) and many new ES syntax for Vue.js SFC based on Babel
https://www.npmjs.com/package/vue-template-babel-compiler
118 stars 9 forks source link

Support decorators #45

Open Mihailoff opened 1 year ago

Mihailoff commented 1 year ago

Failed to compile with 1 error(s) Module parse failed: Unexpected character '@' vue-template-babel-compiler v2.0.0

https://babeljs.io/docs/en/babel-plugin-proposal-decorators https://babeljs.io/blog/2022/09/05/7.19.0

JuniorTour commented 1 year ago

Thanks for your feedback.

Do you mean this lib should enable the new class docorator sytax for vue.js .vue file?

@annotation
class MyClass {}

If so, maybe you can try add the babel plugin by the option of this lib: https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/Usage.md#1-babel-options-customization

For example:

// vue.config.js
module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                options.compilerOptions.babelOptions = {
                    plugins: [
                      '@babel/plugin-proposal-decorators'
                    ]
                }
                options.compiler = require('vue-template-babel-compiler')
                return options
            })
    }
}

If you could provide more context about how you use this anotation syntax in .vue file, I would like to help you more.