title: VueJS: components not rendering
body: <p>I'm going through my first Vue tutorial and am a bit stuck. I've got an App.vue file, which I can see with the browser inspector extension is loading, a router index.js file, and login/signup forms. I can see the default Hello component.</p>
  
  <p>I should be able to go to /login and /signup, but the components do not load. There are no console errors. Where do I begin troubleshooting?</p>
  
  <p>App.Vue:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;router-view/&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'app'
  }
  &lt;/script&gt;
  
  &lt;style&gt;
    body {
      background-color: #f7f7f7;
      padding-top: 50px;
      padding-bottom: 50px;
    }
  
    .is-danger {
      color: #9f3a38;
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>Router index.js file:</p>
  
  <pre><code>import Vue from 'vue'
  import Router from 'vue-router'
  import HelloWorld from '@/components/HelloWorld'
  import SignUpForm from '@/components/Auth/SignUpForm'
  
  Vue.use(Router)
  
  export default new Router({
    routes: [
      {
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
      },
      {
        path: '/signup',
        component: SignUpForm
      }
    ]
  }))
  </code></pre>
  
  <p>SignUpForm.vue:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="ui stackable three column centered grid container"&gt;
      &lt;div class="column"&gt;
        &lt;h2 class="ui dividing header"&gt;Sign Up, it's free!&lt;/h2&gt;
  
        &lt;Notification
          :message="notification.message"
          :type="notification.type"
          v-if="notification.message"
        /&gt;
  
        &lt;form class="ui form" @submit.prevent="signup"&gt;
          &lt;div class="field" :class="{ error: errors.has('name') }"&gt;
            &lt;label&gt;Full Name&lt;/label&gt;
            &lt;input type="text" name="name" v-model="name" v-validate="'required'" placeholder="Full name"&gt;
            &lt;span v-show="errors.has('name')" class="is-danger"&gt;{{ errors.first('name') }}&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;div class="field" :class="{ error: errors.has('username') }"&gt;
            &lt;label&gt;Username&lt;/label&gt;
            &lt;input type="text" name="username" :class="{'input': true, 'is-danger': errors.has('username') }" v-model="username" v-validate="'required'" placeholder="Username"&gt;
            &lt;span v-show="errors.has('username')" class="is-danger"&gt;{{ errors.first('username') }}&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;div class="field" :class="{ error: errors.has('email') }"&gt;
            &lt;label&gt;Email&lt;/label&gt;
            &lt;input type="email" name="email" :class="{'input': true, 'is-danger': errors.has('email') }" v-model="email" v-validate="'required|email'" placeholder="Email"&gt;
            &lt;span v-show="errors.has('email')" class="is-danger"&gt;{{ errors.first('email') }}&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;div class="field" :class="{ error: errors.has('password') }"&gt;
            &lt;label&gt;Password&lt;/label&gt;
            &lt;input type="password" name="password" :class="{'input': true, 'is-danger': errors.has('password') }" v-model="password" v-validate="'required'" placeholder="Password"&gt;
            &lt;span v-show="errors.has('password')" class="is-danger"&gt;{{ errors.first('password') }}&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;button class="fluid ui primary button" :disabled="!isFormValid"&gt;SIGN UP&lt;/button&gt;
  
          &lt;div class="ui hidden divider"&gt;&lt;/div&gt;
        &lt;/form&gt;
  
        &lt;div class="ui divider"&gt;&lt;/div&gt;
  
        &lt;div class="ui column grid"&gt;
          &lt;div class="center aligned column"&gt;
            &lt;p&gt;
              Got an account? &lt;router-link to="/login"&gt;Log In&lt;/router-link&gt;
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Notification from '@/components/Notification'
  
  export default {
    name: 'SignUpForm',
    components: {
      Notification
    },
    data () {
      return {
        name: '',
        username: '',
        email: '',
        password: '',
        notification: {
          message: '',
          type: ''
        }
      }
    },
    computed: {
      isFormValid () {
        return Object.keys(this.fields).every(key =&gt; this.fields[key].valid)
      }
    },
    beforeRouteEnter (to, from, next) {
      const token = localStorage.getItem('tweetr-token')
  
      return token ? next('/') : next()
    },
    methods: {
      signup () {
        axios// eslint-disable-line no-use-before-define
          .post('/signup', {
            name: this.name,
            username: this.username,
            email: this.email,
            password: this.password
          })
          .then(response =&gt; {
            // save token in localstorage
            localStorage.setItem('tweetr-token', response.data.data.token)
  
            // redirect to user home
            this.$router.push('/')
          })
          .catch(error =&gt; {
            // display error notification
            this.notification = Object.assign({}, this.notification, {
              message: error.response.data.message,
              type: error.response.data.status
            })
          })
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>My main.js file:</p>
  
  <pre><code>// The Vue build version to load with the `import` command
  // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  import Vue from 'vue'
  import App from './App'
  import router from './router'
  import axios from 'axios'
  import VeeValidate from 'vee-validate'
  
  window.axios = axios
  axios.defaults.baseURL = 'http://127.0.0.1:3333'
  
  Vue.config.productionTip = false
  Vue.use(VeeValidate)
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    components: { App },
    template: '&lt;App/&gt;'
  })
  </code></pre>