CODEWITHSUNDEEP
javascriptvue.jsbabeljsbublejs
danielsvane
danielsvane

Reputation: 613

Use babel for transpiling vue template instead of buble

I'm trying to use @babel/plugin-proposal-optional-chaining so I can do like {{ user?.name || 'Oops' }} in my vue templates. I have added the plugin to my babel.config.js, but it still comes up with a vue-loader error. After some searching it seems like vue uses buble instead of babel for transpiling the js inside the template tag.

Is there a way to use babel instead of buble for transpiling the js in the template?

Upvotes: 8

Views: 2111

Answers (1)

Juanmabs22
Juanmabs22

Reputation: 1300

If you are using webpack, try this on build/webpack..conf.js (replace where the test matches and adjust to your preferences)

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            js: 'babel-loader'
          }
        }
      },
      {
        test: /\.js$/,
        use: [{
          loader: "babel-loader",
          options: { presets: ['es2015'], compact: false }  // Add here your options!
        }]
      },
      ...
    ]
    ...
  }
  ...
}

Maybe you have to install and configure babel with a file .babelrc to add the proposal and babel-loader

If not webpack, please, add more info about your project structure and the way to compile/transpile it (or migrate to webpack, is a good friend to transpile).

Also if you need more help let me know.

Hope it helps at least a bit :)

Upvotes: 0

Related Questions