Vue.js in Chrome extension

Question

Vue.js in Chrome extension

Hi! I'm trying to make a Chrome extension using Vue.js but when I write

<input v-model="email" type="email" class="form-control" placeholder="Email"> 

Chrome removes the v-model-part of the code and makes it

<input type="email" class="form-control" placeholder="Email"> 

Is there a way to prevent this?

Answer 1

Have you csp version (Vue.js v1)

CSP-compliant build

Some environments, such as Google Chrome Apps, enforces Content Security Policy (CSP) and does not allow the use of new Function() for evaluating expressions. In these cases you can use the CSP-compliant build instead.

(Vue.js v1) http://v1.vuejs.org/guide/installation.html#CSP-compliant-build

npm install vue@csp --save  "dependencies": {   "vue": "1.0.26-csp" } 

New version (Vue.js v2) https://vuejs.org/v2/guide/installation.html#CSP-environments

Some environments, such as Google Chrome Apps, enforce Content Security Policy (CSP), which prohibits the use of new Function() for evaluating expressions. The standalone build depends on this feature to compile templates, so is unusable in these environments.

There is a solution however. When using Vue in a build system with Webpack + vue-loader or Browserify + vueify, your templates will be precompiled into render functions which work perfectly in CSP environments.