Nested vue.js instances/elements

Think components.http://vuejs.org/guide/components.html

Create a Vue instance on the body as you have above, but anything nested in that is a component. Pass data via props.

Passing in data via props is only one way to do it. Nesting components and inheriting from the parent works fine as well.

Example: http://jsfiddle.net/hajkrupo/3/

<encapsulated-component inline-template>    <header>        <cart-status></cart-status>    </header>    <cart></cart></encapsulated-component>

You can do this with <slot> tags. Here is an example.

1.So, first, you need to do is creating a basic layout component, like this.You need to add <slot> tag whereever you want. Very important think is the name attribute on <slot> tag.

var basicLayout = Vue.component("basic-layout", {    template: `    <div class="basic-layout">        <header>            <slot name="header"></slot>        </header>        <main>            <slot></slot>        </main>        <footer>            <slot name="footer"></slot>        </footer>    </div>    `});

2.Then create your custom component. I created myHeader component to show you, how it works.

var myHeader = Vue.component("my-header", {    template: `    <div class="header">        <ul>            <li>HOME</li>            <li>ABOUT</li>            <li>CONTACT</li>        </ul>    </div>   `});

3.Put this sample code in your HTML file.To put some content in current slot, just use the slot attribute in your component or your tag.

<div class="app">  <basic-layout>      <my-header slot="header"></my-header>      <p>Content in <main> tag</p>      <p slot="footer">Content in footer</p>  </basic-layout></div>

4.The result will be like this:

<div class="app">    <div class="basic-layout">        <header>            <div class="header">              <ul>                <li>HOME</li>                <li>ABOUT</li>                <li>CONTACT</li>              </ul>            </div>        </header>        <main>        <p>Content in <main> tag</p>        <main>        <footer>            <p>Content in footer</p>        </footer>    </div></div>

Please, see the documentation in official page of Vue.jsJust click link here for more info.

Here is example in jsfiddle