Vue.js Nesting Components - Part 1 Header

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

The header tag on line 3 represents the root tag; Vue.js requires that 1 root tag be used in the template tag to display content (i.e. you can't use multiple tags as root in there, so pick 1 and use it.)

Everything else in the file is business as usual for a Vue.js file, with the exception of the style tag; note the style tag on line 20 using the "scoped" attribute. That means the styles defined in that style tag will only be used in this component.




<template>
  <header>
  	<h1>{{title}}</h1>
  </header>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      title: 'Welcome Vue Muscles App'
    }
  }
}
</script>

<style scoped>
#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;
</style>



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