[Question] How to utilize vue-runtime build?

• Laravel Mix Version: 1.3.0
• Node Version: 6.11.1
• NPM Version: 3.10.10
• OS: Linux

Description:

Vue comes with a runtime build which allows for CSP compliance.

Steps To Reproduce:

The following addition to the webpack.mix.js allows mix to use the runtime version:

mix.webpackConfig({
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.runtime.js'
        }
    }
});

This compiles the resources find but does not work during runtime as the templates are not compiled to render functions. In the link above, it is suggested that webpack + vue-loader can be used to pre-compile the templates.

However, I couldn’t find a way to do this. It would be great if this could be included in the docs. If it is already included, please forgive my ignorance and point me to it 😃

[DrJonki]

<my-cookie-banner>
</my-cookie-banner>

There’s your problem. You’re sending HTML with a custom element, which Vue will pick up on, but being unable to handle rendering it, missing the template compiler and all 😛

Try something like this:

const root = require('./components/MyCookieBanner.vue');
const app = new Vue({
  el: '#app',
  render: createElement => createElement(root) //< The important line
});

EDIT: In addition you shouldn’t have anything inside <div id="app">

[sgmobarak]

I have used this below code and it’s official mix .js(‘resources/js/app.js’, ‘public/js’).vue() .postCss(‘resources/css/app.css’, ‘public/css’, [ // ]);