0

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

Improve this question
3
  • 2
    You imported as welcome and used it as Welcome Commented Mar 15, 2018 at 13:47
  • @Doblel I feel like an idiot. You're right. Changing it to Welcome showed the Welcome view. But it shows the welcome page and footer, not the navbar. How to solve this? Commented Mar 15, 2018 at 13:50
  • 1
    No problem, here to help Commented Mar 15, 2018 at 13:58

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Now the navbar does not render it only shows welcome component and footer. i updated the code
<Navbar v-if="isHome" /> this line says that Navbar should only be shown if "isHome" is truthy. I do not see it defined therefor it could be "undefined" which is falsy.
Yes That's the error shows in chrome console. So do i need to define it in export default?
You can either do that or remove the v-if="isHome" if you want to show Navbar always. Also if you like the answer please consider accepting it.
Yes if you want to just change the component inside <router-view></router-view> (based on the route). This will not make new request to the server. If you want to make new request and refresh whole page then use <a>
|