[Question] How to utilize vue-runtime build? #1052

sausin · 2017-07-26T17:22:30Z

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 😃

The text was updated successfully, but these errors were encountered:

DrJonki · 2017-07-27T08:29:06Z

Are you using single file components?

sausin · 2017-07-27T09:47:31Z

@DrJonki Yes, all the components in the project will be single file components. I suppose that's kind of necessary to get the pre-compilation?

DrJonki · 2017-07-27T13:04:01Z

@sausin Correct. The default installation of Mix has vue-loader already set-up (mentioned here), so as long as all of your Vue templates are defined either in single-file blocks or as raw render functions, the runtime-only build should work just fine.

sausin · 2017-07-27T19:25:48Z

@DrJonki That's why I can't figure out what's wrong. I get the following error when I use the runtime build:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

And I don't have any items hanging around for the runtime build to compile.. 😕

sausin · 2017-07-27T19:28:19Z

I presume passing data to the component doesn't count as compiling, because I do have some of those

DrJonki · 2017-07-27T19:33:58Z

@sausin Can you show how you instantiate your Vue instance and what the mount point looks like in your HTML?

sausin · 2017-07-27T19:47:03Z

It's a laravel project with the app.js like this:

...
...
Vue.component('MyCookieBanner', require('./components/MyCookieBanner.vue'));
...
...


const app = new Vue({
    el: '#app'
});

The main layout file is like this:

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
...
...
<body>

<div id="app">

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

    ...
    ...
    ...

</div>

</body>
...
</html>

DrJonki · 2017-07-27T19:55:46Z

<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 :P

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">

sausin · 2017-07-27T20:04:42Z

@DrJonki Thanks for looking into this !

I have several components and several pages which use different components. How would I go about doing this?

Also, not sure what you meant by

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

How do I define where the vue component should 'come up'?

Sorry for being thick, if this should've been obvious 😕

DrJonki · 2017-07-27T20:12:12Z

What I like to do, is to have a separate 'root' component (as a .vue file). In the template of the root component I would lay out the rest of the page layout.

In other words, take everything you have inside <div id='app'> and move it into it's own component file. Pass this component into createElement.

sausin · 2017-07-27T20:16:19Z

@DrJonki Thanks for the tip! I think I got it 👍

gaurravv5 · 2018-04-04T07:30:23Z

@sausin But this doesn't solve the CSP issue with "eval" function used in the compiled app.js

sgmobarak · 2021-08-14T10:39:43Z

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', [
//
]);

sausin closed this as completed Jul 27, 2017

psiinon mentioned this issue Mar 5, 2018

Vue - unsafe eval? zaproxy/zap-hud#85

Open

ankurk91 mentioned this issue Aug 23, 2018

Failed to mount component: template or render function not defined. #1394

Closed

Grldk mentioned this issue May 14, 2021

Move contents of #horizon to separate component laravel/horizon#1022

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Question] How to utilize vue-runtime build? #1052

[Question] How to utilize vue-runtime build? #1052

sausin commented Jul 26, 2017 •

edited

Loading

DrJonki commented Jul 27, 2017 •

edited

Loading

sausin commented Jul 27, 2017

DrJonki commented Jul 27, 2017 •

edited

Loading

sausin commented Jul 27, 2017

sausin commented Jul 27, 2017

DrJonki commented Jul 27, 2017

sausin commented Jul 27, 2017 •

edited

Loading

DrJonki commented Jul 27, 2017 •

edited

Loading

sausin commented Jul 27, 2017

DrJonki commented Jul 27, 2017 •

edited

Loading

sausin commented Jul 27, 2017

gaurravv5 commented Apr 4, 2018

sgmobarak commented Aug 14, 2021

[Question] How to utilize vue-runtime build? #1052

[Question] How to utilize vue-runtime build? #1052

Comments

sausin commented Jul 26, 2017 • edited Loading

Description:

Steps To Reproduce:

DrJonki commented Jul 27, 2017 • edited Loading

sausin commented Jul 27, 2017

DrJonki commented Jul 27, 2017 • edited Loading

sausin commented Jul 27, 2017

sausin commented Jul 27, 2017

DrJonki commented Jul 27, 2017

sausin commented Jul 27, 2017 • edited Loading

DrJonki commented Jul 27, 2017 • edited Loading

sausin commented Jul 27, 2017

DrJonki commented Jul 27, 2017 • edited Loading

sausin commented Jul 27, 2017

gaurravv5 commented Apr 4, 2018

sgmobarak commented Aug 14, 2021

sausin commented Jul 26, 2017 •

edited

Loading

DrJonki commented Jul 27, 2017 •

edited

Loading

DrJonki commented Jul 27, 2017 •

edited

Loading

sausin commented Jul 27, 2017 •

edited

Loading

DrJonki commented Jul 27, 2017 •

edited

Loading

DrJonki commented Jul 27, 2017 •

edited

Loading