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

Ask A Question

Notifications

You’re not receiving notifications from this thread.

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

Raimon Fernandez Sirera asked in Javascript

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!

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 33,665+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.