Vue does not render

Question

As per the help from here I have created the following app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
 import Vue from 'vue'
 import VueRouter from 'vue-router'

 import App from './app.vue'
 import welcome from './components/pages/Welcome'
 import about from './components/pages/About'
 import contact from './components/pages/Contact'

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('passport-clients', require('./components/passport/Clients.vue'));
Vue.component('passport-authorized-clients', require('./components/passport/AuthorizedClients.vue'));
Vue.component('passport-personal-access-tokens', require('./components/passport/PersonalAccessTokens.vue'));

Vue.use(VueRouter);

const routes = [
  { path: '/', name: 'welcome', component: Welcome },
  { path: '/about', name: 'about', component: About },
  { path: '/contact', name: 'contact', component: Contact }
]

const router = new VueRouter({
  mode: 'history',
  routes // short for `routes: routes`
});

const app = new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

and App.vue

<template>
  <div id="app">
    <Navbar v-if="isHome" />
    <router-view></router-view>
    <Footer />
  </div>
</template>

<script>
  import Navbar from './components/includes/Navbar.vue'
  import Footer from './components/includes/Footer.vue'
  export default{
    components: {
      'Navbar': Navbar,
      'Footer': Footer
    }
  }
</script>

Welcome.vue in components/pages folder

<template>
  <div>
  <h3>This is the Index page</h3>
  </div>
</template>

<script>
  export default {}
</script>

Navbar component in components/includes folder

<template>
  <div>
  <h3>This is the Navbar</h3>
  </div>
</template>

<script>
  export default {}
</script>

Similarly i have created all other pages, navbar, footer components. When i run npm run dev it says build successful. When i visit the localhost:800 url the vue doesn't render. Chrome inspector console tab shows Uncaught ReferenceError: Welcome is not defined

Also do i need to delete the index route from web.php

Answer 1

JavaScipt is case sensitive and variable "welcome" is not the same as "Welcome".

import welcome from './components/pages/Welcome'
{ path: '/', name: 'welcome', component: Welcome },

Change to:

{ path: '/', name: 'welcome', component: welcome },

and it should work. Do the same with the rest of the variables - about and contact.