CODEWITHSUNDEEP
webpackvue.jsbrowserify
ccying
ccying

Reputation: 251

Precompile vue template into render functions

I am writing one single page of my website in Vue.js. I have a file.html and a file.js. file.html looks like this: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
<body>
   <div id="app"> 
    // everything to be displayed on the page (data, v-if & v-else tags etc.)
   </div>
</body>

while file.js looks like this:

new Vue({
    el: '#app',
    data: {
        msg: "hello",
        // some other data
    }
});

When I load the website, a warning shows:

[email protected]:440 [Vue warn]: It seems you are using the standalone build of Vue.js in an environment with Content Security Policy that prohibits unsafe-eval. The template compiler cannot work in this environment. Consider relaxing the policy to allow unsafe-eval or pre-compiling your templates into render functions.

I have to disallow eval in my application, so the only way is to precompile the vue codes. I have looked up on Webpack and Browserify, but they seems quite complex and always used with one whole application, while I just want to precompile one single file.

Is there any way to do it? Thanks in advance.

Upvotes: 4

Views: 12343

Answers (1)

FitzFish
FitzFish

Reputation: 8629

No, there is no way to do that as far as I know. To pre-compile templates you must use single files components (or jsx).

Here is I think a comprehensive list of your alternatives:

Upvotes: 2

Related Questions