Vue CLI 3 Prepending eval Function to Custom Template Tags

Question

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!

Máté Wiszt · Accepted Answer · 2018-09-10 08:15:04Z

1

I have two ideas about your issue:

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
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.

answered Sep 10, 2018 at 8:15

Máté Wiszt

4203 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue CLI 3 Prepending eval Function to Custom Template Tags

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related