Laravel VueJs : `router-view` does not render the component

Question

I know such questions are out there in this site but they do not solve my problem. Hence this question pops up here :

In my Laravel 5.3 and VueJs app, the root instance of Vue in app.js file points to App.vue and in App.vue I have the router-view placeholder. So I expect page components to be rendered inside the placeholder but that does not happen.

Let me show the contents in different files:

In web.php I have :

Route::get('/listing/{listing}', function(Listing $listing){

    $model = $listing->toArray();

    return view('app',['model' => $model]);


}); 

In router.js, I have :

import Vue from 'vue';
import VueRouter from 'vue-router';
import ListingPage from '../components/ListingPage';

Vue.use(VueRouter);


    export default new VueRouter({
        mode:'history',
        routes:[

            { path: '/listing/:listing', component: ListingPage, name: 'listing' }
        ]

    });

In app.js I have :

import ListingPage from '../components/ListingPage.vue';
import  router  from './router';
import App from '../components/App.vue';

var app = new Vue({

    el: '#app',
    render: h => h(App),
    router

});

So when I hit the url /listing/5, the application goes to App.vue and is supposed to render the ListingPage component inside router-view placeholder.

In App.vue, I have :

<template>
    <div>

        <div id="toolbar">
            <router-link :to="{ name: 'home' }">
                <img class="icon" src="/images/logo.png">
                <h1>vuebnb</h1>
            </router-link>
        </div>
        <router-view></router-view>
    </div>
</template>

In ListingPage.vue, I have :

  <template>
        <div>

            <div class="container">
                <div class="heading">
                    Heading from listing page 
                </div>
                <hr>
                <div class="about">
                    <h3>About this listing page</h3>

                </div>
            </div>
    </template>

<script>

export default {

           data() {
               return {
                   index: 1
                     }
                  }
          }
</script>

But finally I only get the content in App.vue without the ListingPage component being rendered inside the placeholder.

How can I get the proper rendering there ?

EDIT:

Actually this questions arises out of the source code of the book 'Full-Stack Vue.js 2 and Laravel 5' by Anthony Gore. The source code is available at github here . I tried to run the codebase at Chapter07. Of course I ran the necessary commands such as composer install, npm install, npm run dev in localhost with Laravel 5.5.6 version but finally when I hit any URL like /listing/5, I do not see any content rendered from ListingPage component.

You can take the code from github or you may download it from here to run in your localhost.

What might be the reason that it does not work and the potential solution as well ?

Proustite

I take it you are using vuejs in development mode and there are no errors shown in the browser console? – Superable

@JaromandaX, no errors found. – Proustite

@JaromandaX, can you have a look at the 'Edit' section I added in OP? You can run the code from the link I provided in your localhost to point out the problem . – Proustite

You can run the code from the link I provided in your localhost - my localhost doesn't have a http server .... does yours? – Superable

@JaromandaX, I ran XAMPP from here : apachefriends.org/download.html to create the http server in my PC. My PHP version is 7.1.26 and Laravel version is 5.5.26 – Proustite

The code you're posting looks fine. Here's where to look to narrow down on the issue: check the JavaScript console for errors, check Vue Devtools and see if the router-view component is present and if the ListingPage component is present. Also, try replacing ListingPage with some simple component and see if it renders. – Pinchas

@anthonygore, There was a glitch.. I did bot run the command php artisan serve. Rather I just hit the browser URL. But the amazing thing is that console showed no error. So 1) When is it necessary to run the mentioned command ? 2) Can you give an answer to a related question here : #59290048 ? – Proustite

@IstiaqueAhmed best to look up the docs for the artisan serve command, as it is an unrelated concept to this – Pinchas

Answer 1

You need to declare your base path in touter config like this :

export default new VueRouter({
  mode:'history',
  routes:[

    { path: '/:listing', component: ListingPage, name: 'listing' }
  ],
  base:'/listing',
  root:'/',

});

Molality

why to declare base and root ? – Proustite

because you need to declare what is the url should router work on it – Molality

have you tryed it? – Molality

Have a look at the 'EDIT:' section I added in OP. Can you run the code from the link I provided to point out the problem ? – Proustite

Answer 2

I think that inside of "render: h => h(App)" you can use

components: {App},
template: '<App></App>'

Then the app.js code will be like:

import  router  from './router';
import App from '../components/App.vue';

var app = new Vue({
    el: '#app',
    components: {App},
    template: '<App></App>',
    router
});

I hope that works.

best regards!

Valet