25.06.2018 Views

Full-Stack Vue.js 2 and Laravel 5

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Mounting the root-level<br />

component with a render function<br />

Now the mount element in our main template will be empty. We need to declare<br />

the Listing component, but we don't want to do it in the view.<br />

resources/views/app.blade.php: vuebnb <br />

<br />

<br />

If we do it like that, we wouldn't fully eliminate all string <strong>and</strong> DOM templates<br />

from our app, so we'll keep the mount element empty.<br />

resources/views/app.blade.php: ... ...<br />

We can now declare Listing with a render function inside our root instance.<br />

resources/assets/<strong>js</strong>/app.<strong>js</strong>: import "core-<strong>js</strong>/fn/object/assign"; import <strong>Vue</strong> from 'vue';<br />

import ListingPage from '../components/ListingPage.vue'; var app = new <strong>Vue</strong>({<br />

el: '#app', render: h => h(ListingPage) });<br />

To avoid getting side-tracked, I won't explain the syntax of render<br />

functions here, as this is the only one we'll write throughout the<br />

book. If you'd like to learn more about render functions, check out<br />

the <strong>Vue</strong>.<strong>js</strong> documentation at https://vue<strong>js</strong>.org/.<br />

Now that <strong>Vue</strong>bnb is no longer using string or DOM templates, we don't need the<br />

template compiler functionality anymore. There's a special build of <strong>Vue</strong> we can<br />

use which doesn't include it!

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!