Vue.js Nesting Components - Main

If you're just getting started with this series of Vue.js posts, you should start with the Vue.js Starter Page.

Vue.js uses components to break down and separate functionality into specific files. Here's how:

Vue.js Components

This file is a completed but tiny Vue.js application using components.

This file represents what would be called App.vue; the root component in a Vue.js application.

The included components are referenced in 3 main areas in this root component:
  • In the template tag (line 3). This is where they're actually getting displayed to the page.
  • In the import calls (line 13). This is where the Vue.js application directly loads the component files into App.vue.
  • In the components object call on line 18. This is where the template tag on line 3 will know what to do and display at run time.




<template>
  <div>
    <app-header></app-header>
	<app-muscles></app-muscles>
	<app-footer></app-footer>
  </div>
</template>

<script>

import Header from './components/Header.vue';
import Footer from './components/Footer.vue';
import Muscles from './components/Muscles.vue';

export default {
  components{
  	'app-header':Header;
	'app-footer':Footer;
	'app-muscles':Muscles;
  },
  
  name: 'app',
  data () {
    return {
      
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>



Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/vue-js/vue-js-nesting-components-main/