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 ?

I take it you are using vuejs in development mode and there are no errors shown in the browser console? — Jaromanda X
– Jaromanda X, Commented Dec 9, 2019 at 9:27
@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 . — Istiaque Ahmed
– Istiaque Ahmed, Commented Dec 13, 2019 at 11:21
You can run the code from the link I provided in your localhost - my localhost doesn't have a http server .... does yours? — Jaromanda X
– Jaromanda X, Commented Dec 13, 2019 at 11:35
@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 — Istiaque Ahmed
– Istiaque Ahmed, Commented Dec 13, 2019 at 11:37

Mohammed Aktaa · Accepted Answer · 2019-12-09 09:39:46Z

0

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:'/',

});

edited Dec 9, 2019 at 9:39

answered Dec 9, 2019 at 9:34

Mohammed Aktaa

1,35310 silver badges15 bronze badges

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

4 Comments

Istiaque Ahmed Over a year ago

why to declare base and root ?

Mohammed Aktaa Over a year ago

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

Mohammed Aktaa Over a year ago

have you tryed it?

Istiaque Ahmed Over a year ago

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 ?

Rafael Andrs Cspedes Basterio · Accepted Answer · 2020-05-05 03:07:36Z

0

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!

answered May 5, 2020 at 3:07

Rafael Andrs Cspedes Basterio

4,4311 gold badge19 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related