[Vuejs]-Vue not rendering in Chrome – Div replaced by <!—->

by

2👍

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.

👤Alessandro

0👍

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

👤Luckylooke

Leave a comment