Precompile vue template into render functions

Question

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.

FitzFish FitzFish · Accepted Answer · 2017-06-20T07:39:33

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:

Use browserify with vueify.
Use webpack with vue loader.
Use gulp with gulp-vueify2 (my package). It allows you to compile a single file without bundling the whole thing (but like the previous solutions, it must be a single file component), but it's quite tricky to get to work in environment that does not support a native module system, such as most browsers (see this question).
Use the jsx module for babel.
Maybe you can imagine a custom solution using the core template compiler.

Precompile vue template into render functions

1 Answers