Tagged templates inside data bindings

[torepettersen]

Version

2.6.8

Reproduction link

https://codesandbox.io/s/626m32y4xw?fontsize=14

Steps to reproduce

Use tagged template inside data binding:

<span>{{ t`Hello ${'Vue'}`}}</span>

What is expected?

I would expect the data binding to return the result of the tagged template function.

What is actually happening?

I am getting an error message saying that tagged templates are not supported.

---

Initially thought this was a feature request since it says that tagged templates are not supported. But @posva closed the original issue #9719 and asked for a repro, so here it is.

[posva]

The error is referring to buble transpiling those: Check https://vue-loader.vuejs.org/options.html#transpileoptions to add the relevant option printed in the message

[torepettersen]

Thanks for clarifying! That was a very well hidden feature.

In case someone else encounters the same problem. It is possible to enable tagged templates by changing the transpileOptions of vue-loader. Example with vue.config.js:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.transpileOptions = {
          transforms: { dangerousTaggedTemplateString: true }
        };
        return options
      });
  },
};