Passport: Vue Components Not Rending on Page

[hellozach]

(Edit: using Laravel 5.3, Vue 2)

Went through the official documentation for installation but I can't seem to get the components rendering through Vue.

Here are the console errors I'm receiving:

vue.js?0598:2574[Vue warn]: Property or method "showCreateClientForm" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component <passport-clients>)warn @ vue.js?0598:2574has @ vue.js?0598:510(anonymous function) @ VM5178:2Vue._render @ vue.js?0598:2205(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381init @ vue.js?0598:1943createElm @ vue.js?0598:3775createChildren @ vue.js?0598:3821createElm @ vue.js?0598:3806patch @ vue.js?0598:4152Vue._update @ vue.js?0598:1694(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381init @ vue.js?0598:1943createElm @ vue.js?0598:3775createChildren @ vue.js?0598:3821createElm @ vue.js?0598:3806patch @ vue.js?0598:4187Vue._update @ vue.js?0598:1694(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381(anonymous function) @ app.js?8b67:34(anonymous function) @ app.js:225__webpack_require__ @ app.js:20(anonymous function) @ app.js:64(anonymous function) @ app.js:67
vue.js?0598:2574[Vue warn]: Property or method "clients" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component <passport-clients>)warn @ vue.js?0598:2574has @ vue.js?0598:510(anonymous function) @ VM5178:2Vue._render @ vue.js?0598:2205(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381init @ vue.js?0598:1943createElm @ vue.js?0598:3775createChildren @ vue.js?0598:3821createElm @ vue.js?0598:3806patch @ vue.js?0598:4152Vue._update @ vue.js?0598:1694(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381init @ vue.js?0598:1943createElm @ vue.js?0598:3775createChildren @ vue.js?0598:3821createElm @ vue.js?0598:3806patch @ vue.js?0598:4187Vue._update @ vue.js?0598:1694(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381(anonymous function) @ app.js?8b67:34(anonymous function) @ app.js:225__webpack_require__ @ app.js:20(anonymous function) @ app.js:64(anonymous function) @ app.js:67
vue.js?0598:2574[Vue warn]: Error when rendering component <passport-clients>: warn @ vue.js?0598:2574Vue._render @ vue.js?0598:2208(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381init @ vue.js?0598:1943createElm @ vue.js?0598:3775createChildren @ vue.js?0598:3821createElm @ vue.js?0598:3806patch @ vue.js?0598:4152Vue._update @ vue.js?0598:1694(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381init @ vue.js?0598:1943createElm @ vue.js?0598:3775createChildren @ vue.js?0598:3821createElm @ vue.js?0598:3806patch @ vue.js?0598:4187Vue._update @ vue.js?0598:1694(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381(anonymous function) @ app.js?8b67:34(anonymous function) @ app.js:225__webpack_require__ @ app.js:20(anonymous function) @ app.js:64(anonymous function) @ app.js:67
vue.js?0598:2574[Vue warn]: Property or method "tokens" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component <passport-authorized-clients>)warn @ vue.js?0598:2574has @ vue.js?0598:510(anonymous function) @ VM5199:2Vue._render @ vue.js?0598:2205(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381init @ vue.js?0598:1943createElm @ vue.js?0598:3775createChildren @ vue.js?0598:3821createElm @ vue.js?0598:3806patch @ vue.js?0598:4152Vue._update @ vue.js?0598:1694(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381init @ vue.js?0598:1943createElm @ vue.js?0598:3775createChildren @ vue.js?0598:3821createElm @ vue.js?0598:3806patch @ vue.js?0598:4187Vue._update @ vue.js?0598:1694(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381(anonymous function) @ app.js?8b67:34(anonymous function) @ app.js:225__webpack_require__ @ app.js:20(anonymous function) @ app.js:64(anonymous function) @ app.js:67
vue.js?0598:2574[Vue warn]: Error when rendering component <passport-authorized-clients>: warn @ vue.js?0598:2574Vue._render @ vue.js?0598:2208(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381init @ vue.js?0598:1943createElm @ vue.js?0598:3775createChildren @ vue.js?0598:3821createElm @ vue.js?0598:3806patch @ vue.js?0598:4152Vue._update @ vue.js?0598:1694(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381init @ vue.js?0598:1943createElm @ vue.js?0598:3775createChildren @ vue.js?0598:3821createElm @ vue.js?0598:3806patch @ vue.js?0598:4187Vue._update @ vue.js?0598:1694(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381(anonymous function) @ app.js?8b67:34(anonymous function) @ app.js:225__webpack_require__ @ app.js:20(anonymous function) @ app.js:64(anonymous function) @ app.js:67
vue.js?0598:2574[Vue warn]: Property or method "showCreateTokenForm" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component <passport-personal-access-tokens>)warn @ vue.js?0598:2574has @ vue.js?0598:510(anonymous function) @ VM5203:2Vue._render @ vue.js?0598:2205(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381init @ vue.js?0598:1943createElm @ vue.js?0598:3775createChildren @ vue.js?0598:3821createElm @ vue.js?0598:3806patch @ vue.js?0598:4152Vue._update @ vue.js?0598:1694(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381init @ vue.js?0598:1943createElm @ vue.js?0598:3775createChildren @ vue.js?0598:3821createElm @ vue.js?0598:3806patch @ vue.js?0598:4187Vue._update @ vue.js?0598:1694(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381(anonymous function) @ app.js?8b67:34(anonymous function) @ app.js:225__webpack_require__ @ app.js:20(anonymous function) @ app.js:64(anonymous function) @ app.js:67
vue.js?0598:2574[Vue warn]: Property or method "tokens" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component <passport-personal-access-tokens>)warn @ vue.js?0598:2574has @ vue.js?0598:510(anonymous function) @ VM5203:2Vue._render @ vue.js?0598:2205(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381init @ vue.js?0598:1943createElm @ vue.js?0598:3775createChildren @ vue.js?0598:3821createElm @ vue.js?0598:3806patch @ vue.js?0598:4152Vue._update @ vue.js?0598:1694(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381init @ vue.js?0598:1943createElm @ vue.js?0598:3775createChildren @ vue.js?0598:3821createElm @ vue.js?0598:3806patch @ vue.js?0598:4187Vue._update @ vue.js?0598:1694(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381(anonymous function) @ app.js?8b67:34(anonymous function) @ app.js:225__webpack_require__ @ app.js:20(anonymous function) @ app.js:64(anonymous function) @ app.js:67
vue.js?0598:2574 [Vue warn]: Error when rendering component <passport-personal-access-tokens>: warn @ vue.js?0598:2574Vue._render @ vue.js?0598:2208(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381init @ vue.js?0598:1943createElm @ vue.js?0598:3775createChildren @ vue.js?0598:3821createElm @ vue.js?0598:3806patch @ vue.js?0598:4152Vue._update @ vue.js?0598:1694(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381init @ vue.js?0598:1943createElm @ vue.js?0598:3775createChildren @ vue.js?0598:3821createElm @ vue.js?0598:3806patch @ vue.js?0598:4187Vue._update @ vue.js?0598:1694(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381(anonymous function) @ app.js?8b67:34(anonymous function) @ app.js:225__webpack_require__ @ app.js:20(anonymous function) @ app.js:64(anonymous function) @ app.js:67
vue.js?0598:2217 Uncaught TypeError: Cannot read property 'length' of undefined(anonymous function) @ VM5178:2Vue._render @ vue.js?0598:2205(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381init @ vue.js?0598:1943createElm @ vue.js?0598:3775createChildren @ vue.js?0598:3821createElm @ vue.js?0598:3806patch @ vue.js?0598:4152Vue._update @ vue.js?0598:1694(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381init @ vue.js?0598:1943createElm @ vue.js?0598:3775createChildren @ vue.js?0598:3821createElm @ vue.js?0598:3806patch @ vue.js?0598:4187Vue._update @ vue.js?0598:1694(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381(anonymous function) @ app.js?8b67:34(anonymous function) @ app.js:225__webpack_require__ @ app.js:20(anonymous function) @ app.js:64(anonymous function) @ app.js:67
vue.js?0598:2217 Uncaught TypeError: Cannot read property 'length' of undefined(anonymous function) @ VM5199:2Vue._render @ vue.js?0598:2205(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381init @ vue.js?0598:1943createElm @ vue.js?0598:3775createChildren @ vue.js?0598:3821createElm @ vue.js?0598:3806patch @ vue.js?0598:4152Vue._update @ vue.js?0598:1694(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381init @ vue.js?0598:1943createElm @ vue.js?0598:3775createChildren @ vue.js?0598:3821createElm @ vue.js?0598:3806patch @ vue.js?0598:4187Vue._update @ vue.js?0598:1694(anonymous function) @ vue.js?0598:1669get @ vue.js?0598:738Watcher @ vue.js?0598:730Vue._mount @ vue.js?0598:1668Vue$3.$mount @ vue.js?0598:5506Vue$3.$mount @ vue.js?0598:7381(anonymous function) @ app.js?8b67:34(anonymous function) @ app.js:225__webpack_require__ @ app.js:20(anonymous function) @ app.js:64(anonymous function) @ app.js:67
vue.js?0598:2217 Uncaught TypeError: Cannot read property 'length' of undefined

My blade template being loaded (viewing the source I can see these are being loaded):

    <div id="app">
        <passport-clients></passport-clients>
        <passport-authorized-clients></passport-authorized-clients>
        <passport-personal-access-tokens></passport-personal-access-tokens>
    </div>

And my app.js file:

require('./bootstrap')

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

const app = new Vue().$mount('#app');

Just in case, here is my package.json file:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap": "^4.0.0-alpha.4",
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3",
    "vue-router": "^2.0.0"
  }
}

No errors are being displayed when running gulp and if I use an incorrect path for the .vue files I get errors so I know they are being compiled in with the rest of the JS.

[craigpaul]

Hey @hellozach,

The problem you're having is because of your laravel-elixir version. Update to the most recent version (6.0.0-11 at the time of writing) and you should be all good to go. Let me know if you run into further issues.

[hellozach]

Thanks for that!

Unfortunately that didn't seem to do the trick. Still receiving the same console errors as originally posted.

[craigpaul]

@hellozach did you remove /node_modules and reinstall them? Once I got my project to receive the same errors as yours, I had to remove that folder, reinstall for the proper elixir version and then it worked as expected. Could you give that a try and make sure to run npm cache clean to make sure it will install the newest version.

I'm not sure what else it could be because the only way I could replicate your problem was by using that exact version of laravel-elixir and then the only way I could fix it by upgrading the version. You're using the newest version of laravel/passport and laravel/laravel?

[hellozach]

You're my hero. Thank you so much!!!

[hellozach]

And thank you to @taylorotwell for an immediate fix for everyone else. Your support is superb.

[craigpaul]

@hellozach no problem man, glad we figured it out. Would you mind closing the issue :) Thanks!

[adamgriffin93]

@taylorotwell @craigpaul

I am having a similar issue. None of the vue components are working. They all shows as fragments.

**Edited I updated vue
Now I get:

- [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. (found in component <passport-personal-access-tokens>)

app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the body of the page. From here, you may begin adding components to
 * the application, or feel free to tweak this setup for your needs.
 */

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

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

const app = new Vue({
    el: '#passport-vue'
});

gulpfile.js

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(mix => {
    mix.sass('app.scss').webpack('app.js');
});

package.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-15",
    "laravel-elixir-vue-2": "^0.3.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.17.4",
    "vue": "^2.1.8",
    "vue-resource": "^1.0.3",
    "vue-router": "^2.1.1"
  }
}

@extends('BaseApp::layouts.dashboard.index')

<!-- Body Setting -->
@section('body_class', 'api-page-home')

<!-- Page Header -->
@section('page_header')
    @include('BaseApp::layouts.dashboard.templates.header', ['section' => trans('BaseApp::page.api.section'), 'icon' => 'inbox'])
@endsection

<!-- Main Content Area -->
@section('main_content')
    <div id="passport-vue">
        <passport-clients></passport-clients>
        <passport-authorized-clients></passport-authorized-clients>
        <passport-personal-access-tokens></passport-personal-access-tokens>
    </div>
@endsection

<!-- Additional Javascript -->
@push('scripts')
    <script src="{{ elixir('/js/app.js') }}"></script>
@endpush

[craigpaul]

@adamgriffin93 Could you try changing this line in your gulpfile.js

require('laravel-elixir-vue');

to this

require('laravel-elixir-vue-2');

[adamgriffin93]

@craigpaul

Sorry I forgot to update that in my comment edit. I replaced laravel-elixir-vue with laravel-elixir-vue-2 and I have the error.

[adamgriffin93]

@craigpaul

Do you have another guess what the problem maybe?

[craigpaul]

@adamgriffin93 I might, gotta play around with it first, just a little busy. Soon as I have an answer I'll let you know.

[craigpaul]

@adamgriffin93 I can't get this error to occur for me, but there might be one of two things you can check to fix it. First, you didn't modify that bootstrap.js file did you? You will get that error if you do this

import Vue from 'vue';

instead of this

window.Vue = require('vue');

So hopefully you didn't modify that. The other thing I would suggest is doing what I put above for zach. Remove your node_modules folder, then run npm cache clean and reinstall your deps. Besides that, I really can't think of anything wrong with what you gave for code examples.

[adamgriffin93]

@craigpaul This is my bootstrap.js:

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.Vue = require('vue');
require('vue-resource');

/**
 * We'll register a HTTP interceptor to attach the "CSRF" header to each of
 * the outgoing requests issued by this application. The CSRF middleware
 * included with Laravel will automatically verify the header's value.
 */

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from "laravel-echo"

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

[adamgriffin93]

@craigpaul

I found the problem in gulpfile.js I was calling elixir twice. Once for the vue files and once for the other assets.

[raphcadiz]

I'm still having this problem, at first I had the error about babel and so I run
npm install babel-core
npm install babel-loader
then this vue components are not found

[adamgriffin93]

@raphcadiz

What's your package.json?

[raphcadiz]

I'm good with this. It turns out it was an issue on the installation using Windows. I re-installed the project using Mac, I guess maybe there are dependencies not being pulled.

[citti]

@raphcadiz I am seeing this issue on windows as well!
@craigpaul is this a known issue for windows?
I am going from my dev environment - mac|homestead and pushing the code to the live environment which happens to be windows and the vue components are failing for me...

Have tried nuking /node_modules -> clearing cache -> running the latest laravel 5.4.
Not using windows unfortunately is not an option for me.

Thanks all
Citti

[BigAndini]

This was the first post I found when searching for passport vue components unvisible. My problem was: Really check if you layout.blade.php includes your app.js file. :) Second I needed to change the Vue components to camelCase, like this:

Vue.component('passportClients', require('./components/passport/Clients.vue'));
Vue.component('passportAuthorizedClients', require('./components/passport/AuthorizedClients.vue'));
Vue.component('passportPersonalAccessTokens', require('./components/passport/PersonalAccessTokens.vue'));

Maybe this helps somebody.