CODEWITHSUNDEEP
javascriptvue.jscloud-foundry
Alessandro
Alessandro

Reputation: 266

Vue not rendering in Chrome - Div replaced by <!---->

I'm deploying a very basic Vue application on Cloud Foundry. Here is the one-page Vue application:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
    <script src="static/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>

    <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
    </script>
  </body>
</html>

Where vue.js is https://cdn.jsdelivr.net/npm/vue .

This is the result when I try to visualize the deployed application: enter image description here

In Chrome <div id="app"> is replaced with <!---->.

I tried to see if the vue.js file gets executed in Chrome and it is executed. I can't understand why I get two different behavior in production. When I run the app locally it works well in both of the browser.

Thank you

Upvotes: 0

Views: 2356

Answers (2)

Luckylooke
Luckylooke

Reputation: 4539

This answer helped me solve the issue: https://stackoverflow.com/a/49565439/861615

Fix by adding alias into vue.config.js:

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

there is another promising answer in that thread, seems to be better solution but I could not use as I am using inlined template :/

That solution is to add render function instead of template:

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  render: (h) => {
    return h(App)
  }
})

Thanks

Upvotes: 0

Alessandro
Alessandro

Reputation: 266

The problem was related to a strict Content Security Policy set in the server. CSP does not allow new Function() and other JavaScript syntax needed by Vue.

I found out that switching my Vue project from Standalone (Runtime + Compiler) to Runtime only would solve the problem. Runtime only project are precompiled using a rendering function, so they are CSP compliant.

Here is how I switched my Vue project from Standalone to Runtime only (Vue v2.9.2): In file build/webpack.base.config.js I commented the alias

module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      //'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }
}

In src/main.js I went from a template configuration:

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

To a render one:

new Vue({
  el: '#app',
  render: h => h(App)
})

This was enough to convert my Vue project from Standalone to Runtime only because I never created component that used the template field.

Upvotes: 2

Related Questions