Vue Components not showing up using passport in laravel 5.3

Question

As you can see from the title I am trying out Laravel 5.3 and passport.

So I have gone through the steps to install Laravel passport and as far as I can see everything is in place.

I have put the corresponding Vue components into the markup of my home.blade.php as follows to test as per the docs which I have done like so

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboard</div>

                <div class="panel-body">
                    You are logged in!
                </div>
            </div>
        </div>
     </div>
</div>

<passport-clients></passport-clients>
<passport-authorized-clients></passport-authorized-clients>
<passport-personal-access-tokens></passport-personal-access-tokens>
@endsection

Vue is detected as running in my dev tools however no Vue components are showing up.

Here is my app.js

 Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: 'body'
});


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')
);

I am getting the error

 vue.common.js?4a36:1019 [Vue warn]: Unknown custom element: <passport-clients> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Any idea how I can fix this?I am fairly new to Vue

Answer 1

In your app.js file, import the components immediately below or in place of the example component, but before creating the new Vue object where it gets bound to the DOM.

Don't forget to run gulp as well. :)

Answer 2

I had the same issue with the following resolution with Laravel 5.4:

Find resources/assets/app.js.

1. put all Vue.component... before new Vue (not after)
2. in each Vue.component's import, append .default

Vue.component(
    'passportclients',
    require('./components/passport/Clients.vue').default
);

Vue.component(
    'passportauthorizedclients',
    require('./components/passport/AuthorizedClients.vue').default
);

Vue.component(
    'passportpersonalaccesstokens',
    require('./components/passport/PersonalAccessTokens.vue').default
);

And then run npm run dev again.

Answer 3

I had the same problem and it turned out that this matters: put the code

const app = new Vue({
    el: 'body'
});

at the END of the app.js file.

That started showing the components on the webpage.