nested components

Author: kcusaac

src/App.vue

@@ -1,14 +1,18 @@
 <template>
   <div>
     <h1>{{title}}</h1>
-    <ninjas></ninjas>
+    <ninjas></ninjas> <!-- Global nested component -->
+    <ninjas2></ninjas2> <!--local nested component -->
     <p>{{greeting()}}</p>
   </div>
 </template>
 
 <script>
+import Ninjas2 from './Ninjas2.vue' //local nested component
 export default {
-  name: 'app',
+  components:{
+    'ninjas2':Ninjas2 //local
+  },
   data () {
     return {
       title: 'Your first Vue file'

src/Ninjas2.vue

@@ -0,0 +1,21 @@
+<template>
+  <ul>
+    <li v-for="ninja in ninjas">{{ninja}}</li>
+  </ul>
+
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      ninjas: ['Yoshi', 'Mario','Ryu']
+    }
+  },
+
+}
+</script>
+
+<style>
+
+</style>

src/main.js

@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import App from './App.vue'
-import Ninjas from './Ninjas.vue'
+import Ninjas from './Ninjas.vue' //Global nested component
 
-Vue.component('ninjas', Ninjas)
+Vue.component('ninjas', Ninjas) //Global nested component
 
 new Vue({
   el: '#app',