vuejs2 - vue.js 2 how to properly nest components -

can please tell me how add components other components? example below not work. child component not displayed inside parent.

<div id="app">     <parent>         <child></child>     </parent> </div>  <template id='child'>     <div>child component</div> </template>  <template id='parent'>     <div>parent component</div> </template>  <script>      var child = {         template: '#child',         data: function () {             return {}         }     };      var parent = {         template: '#parent',         data: function () {             return {}         }     };      new vue({         el: '#app',         components: {             'parent': parent,             'child': child         }     }) </script> 

sample: https://jsfiddle.net/05gc05sk/1/

how nest components?

your code work.

only add <slot> (content distribution slots) parent component.

<template id='parent'>   <div>     parent component     <slot></slot>   </div> </template>