Vue Components not showing up using passport in laravel 5.3

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

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. :)

Vue Components Not Rending on Page · Issue #131 · laravel/passport, (Edit: using Laravel 5.3, Vue 2) Went through the official GitHub is home to over 50 million developers working together to host and review  Im having some difficulty in making the Vue components render on the frontend. Passport has been installed perfectly on a fresh Laravel 5.5.4 install, after compiling I drop the components in to home.blade.php along with the example vue component and only the example one is showing.

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.

Vue Components not showing · Issue #518 · laravel/passport · GitHub, Hi, Im having some difficulty in making the Vue components render on the frontend. Passport has been installed perfectly on a fresh Laravel 5.5.4 install, after I drop the components in to home.blade.php along with the example The thing is the example Vue component shows up just fine, so it is  - [Vue warn]: Failed to mount component: template or render function not defined. (found in component <passport-clients>) - [Vue warn]: Failed to mount component: template or render function not defined. (found in component <passport-authorized-clients>) - [Vue warn]: Failed to mount component: template or render function not defined.

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.

Passport Vue Components not showing up, 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  I'm very new to VueJS so forgive me if I've missed something obvious. I've setup the Laravel passport project in a fresh Laravel 5.3 install, and it's all working great except that the Vue components need to have an explicit JSON.parse()

Tarun is correct:

Make sure you include your vue references in app.js before:

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

Laravel Passport - Laravel, Hey guys, I have installed passport into an existing laravel project however when trying to use the vue components, they show as fragments  Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

I have fixed that issue, we do not need to include any Vue libraries, laravel by default provides this (this is for laravel 5.4 and > ) :

Go to your project-folder/public/js/app.js

Find the code where your passport clients, passport authorized clients and passport-personal-access-tokens are registered.

Replace the code with :

Vue.component('example-component', webpack_require(41));

Vue.component('passport-clients', webpack_require(44));

Vue.component('passport-authorized-clients', webpack_require(50));

Vue.component('passport-personal-access-tokens', webpack_require(55));

var app = new Vue({ el: '#app' });

Note : Register the Vue.component before "Var app = new Vue"

Make an OAuth2 server using Laravel Passport, Master, 7.x, 6.x · 5.8 · 5.7 · 5.6 · 5.5 · 5.4 · 5.3 · 5.2 · 5.1 · 5.0 · 4.2 APIs typically use tokens to authenticate users and do not maintain session state between requests. After running the passport:install command, add the In order to use the Passport Vue components, you must be using the Vue JavaScript framework. Vue Component not showing - Passport Implemenation Laravel 5.4 Posted 3 years ago by utsav.banerjee I am trying implement passport using Laravel 5.4 and I have followed the official documentation step by step.

Installing and Configuring Laravel Passport, This is not an OAuth or Laravel tutorial, so this article will focus solely on Copy the todo application without OAuth installed as that is what we will be working with. The artisan serve command quickly brings up a PHP server and helps components/passport/AuthorizedClients.vue') ); Vue.component(  In Laravel 5.3, it's easier than ever to write and use Vue components out of the box. This means 5.3 has a somewhat more opinionated default frontend stack than previous versions do. But never fear—it's easy to strip out the default components. Let's explore 5.3's JavaScript stack together. Spin up a sample app using the Laravel installer (or, if you're like me, use Lambo) and open up the

Introducing Laravel Passport, Part 3 of 48 in API Driven Development With Laravel and VueJS Laravel Passport was introduced in Laravel 5.3 and uses PHP League's oAuth2 server oAuth2 server up and running and people can log in across the web using your app. Up Next → Configuring JS and SASS for a Single Page App  Using Vue.js in Laravel 5.3 Posted 3 years ago by haakym In previous Laravel projects, I've dropped Vue.js into a page and created a Vue instance specific for that page.

This post is in a series on New Features in Laravel 5.3. package, registering it with Laravel, setting our User up to authenticate using it, adding a Out of the box, Passport comes with Vue components that show how you might Passport offers a helpful tool that's not built into other OAuth 2 packages: the  Passport ships with a JSON API that you may use to allow your users to create clients and personal access tokens. However, it can be time consuming to code a frontend to interact with these APIs. So, Passport also includes pre-built Vue components you may use as an example implementation or starting point for your own implementation.

Comments
  • Have you imported the components in your app.js file?
  • Yes, i have imported it indeed
  • Yeah exactly that
  • Here is the code for importing. I had actually forgotten to run gulp (sorry its late). However now i have it is coming up with some errors in console atleast. 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. Then the same for both other components.
  • Yeah i have published the components and here is the entire file to show you how i imported the components. I tried taking out the example component however then the errors didn't come up in console for the other tags however they still didn't load.
  • With laravel 5.6 the first solution worked for me! Thanks!
  • Kind of a duplicate of the above answer
  • Also try Ctrl / Cmd + F5 to clear browser cache while you refresh.