Raimon Fernandez Sirera

When I deploy an application using webpacker + vue + rails, and the template of the main component is on the rails view I get a vue error regarding security.
Error:

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

Example of rails template:

<%= tag.initialize_new_expedient data: { expedient: @expedient.to_json(include: [:assets]), operations: @operations.to_json } do %>
  {{ someDummyJsLogic() }}
  <assets :assets="expedient.assets"></assets>
  <operations :operations="operations"></operations>
<% end %>

Example of the pack.js file:

import Vue from 'vue/dist/vue.esm'
import TurbolinksAdapter from 'vue-turbolinks';
import Assets from '../initialize_new_expedient/Assets.vue'
import Operations from '../Operations.vue'

Vue.use(TurbolinksAdapter)

document.addEventListener('turbolinks:load', () => {
    var element = document.querySelector('initialize-new-expedient')
    if (element != undefined) {
        const initializeNewExpedient = new Vue({
            el: element,
            data: {
                expedient: JSON.parse(element.dataset.expedient),
                operations: JSON.parse(element.dataset.operations)
            },
            components: {
                Assets,
                Operations
            }
        })
    }
})

So, it looks like if the main component is not a compiled dot vue file, on production like environments it raises the warning, and the app, working perfectly on development, doesn't work on production. Is there any way to solve this, avoiding the vue initialization on the webpacker documentation? I reference the initialization where the main template is a .vue file you reference via the render funciton:

  new Vue({
    render: h => h(App, { props })
  }).$mount('#hello-vue');

Many thanks!