Skip to main content

How do I deploy to staging or production environments the stack Vue+Rails

Javascript • Asked by 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!


Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 24,647+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.