CODEWITHSUNDEEP
vue.jswebpackwebpack-dev-servervue-cli-3
Sal
Sal

Reputation: 3269

Vue CLI 3 Prepending eval Function to Custom Template Tags

I'm running a webpack-dev server to develop a Vue application (Vue CLI 3). Our company uses a custom templating language similar to ASP.NET (functions begin with <% prefix and close with %> suffix, and they're evaluated server-side), and this seems to cause a problem with the webpack-dev server. In the example below, I'm attempting to set the specs variable to <%json_item_specifications%>:

  export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      specs: <%json_item_specifications%>,
    }
  }
}

In the above example, webpack will escape the json function with an eval function and return this as part of the export:

eval("__webpack_require__.r(__webpack_exports__ ...

The leading eval causes the page to break, and I'm not sure exactly what part of the webpack stack causes this. I'm using the packaged webpack that comes with vue-cli 3, and I know that uses Babel under the hood.

I believe that Babel from webpack is parsing the <% as some other language and prepending the eval, but I can't find the parser configuration options online. Has anyone had issues with vue-cli parsing code in this way?

Any and all help is appreciated!

Upvotes: 1

Views: 301

Answers (1)

M&#225;t&#233; Wiszt
M&#225;t&#233; Wiszt

Reputation: 410

I have two ideas about your issue:

  1. You should try using X-templates (instead of Single File Components) or inline-templates with standalone version of Vue. you can read more about this here: https://sebastiandedeyne.com/dealing-with-templates-in-vue-20
  2. Another possible solution is the localization of the specifications. I have experience only with Wordpress(PHP) but there you can create a Javascript object via PHP for settings which you can read later inside the template.

Upvotes: 1

Related Questions