Vue.js Nesting Components - Part 2 Footer

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 the Footer.vue file of the components used in this mini app.

... pretty standard as far as Vue.js code goes; a 'copyright' string is defined in the data element of the file (line 14) and output on line 5.

... "scoped" attribute on the style tag (line 20).



<template>
  <footer>
  	<p>{{copyright}}</p>
  </footer>
</template>

<script>
export default {

  data () {
    return {
      copyright: 'Copyright 2017 Muscles Vue.js'
    }
  }
}
</script>

<style scoped>
footer{
	color: lightgreen;
	text-align: center;
}

</style>



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