Building The App.vue Component

The most important component that we need to create is the vue App.vue component, this is the main Vue component that the application will use. This is the file that will have the router-link tag in it which means this is the file that will include other components into it. As this is the global component we can add a section in here that we want on every page such as the header and footer section.

<template>
  <div id="app">
    <div class="container">
      <wpheader></wpheader>
      <div id="content">
        <router-view></router-view>
      </div>
      <wpfooter></wpfooter>
    </div>
  </div>
</template>

The above HTML is the template section of the component we have a global app tag that everything sits in, then we're centering the entire contents by using the div class="container" element. Inside the container we can then add the wpheader tag, a content wrapper, a router-view then a wpfooter tag. The wpheader and wpfooter tags, aren't real tags, we've imported them with Vue by importing the header and footer components.

<script>
import wpheader from './components/global/Header.vue'
import wpfooter from './components/global/Footer.vue'

export default {
  name: 'app',

  components: {
    wpheader,
    wpfooter
  }
}
</script>

As you can see we're importing these components in from the components/global folder, then adding them inside the components section of the Vue app. As these don't exist yet we need to create the components inside the global folder.

#Header Component

All we need inside the header component is the HTML for the theme.

<template>
    <div id="header">
        <h1>VueJS WordPress Theme</h1>

        <ul>
            <li>Categories</li>
            <li>Tags</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </div>
</template>

#Footer Component

<template>
    <div id="footer">

        <div class="columns">
            <div class="column">
                <h2>Top Posts</h2>

                <ul>
                    <li>Post 1</li>
                    <li>Post 2</li>
                    <li>Post 3</li>
                    <li>Post 4</li>
                    <li>Post 5</li>
                </ul>
            </div>

            <div class="column">
                <h2>Categories</h2>
            </div>

            <div class="column">
                <h2>Contact</h2>
            </div>
        </div>
    </div>
</template>

If you have a look at the /src/main.js file you'll see this is where the App.vue component is loaded into the new VueJS object and this will be used in place of the HTML element #app.

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})