Search code examples
phplaravelvue.jsvue-componentlaravel-passport

Vue component showing up in local host but not on server using Laravel 5.4: Passport

I was trying to set up an Oauth2.0 server using Passport on Laravel 5.4 by following https://laracasts.com/series/whats-new-in-laravel-5-3/episodes/13. I was able to set it up at the local host, but when I copied the directory on my prod server and tried to access it , my vue components didn't load. My DB and all the things were working and I was able to register the new clients but it didn't load the vue component panel.

P.S i think it may be related to a way in which i copied the folder to server but I don't know> I can provide any other information if required

I am somewhat new to laravel and noob in Vue, so any help will be greatly appreciated.

My app.js

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique 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: '#app'
});

my home.blade

@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">
                <passport-clients></passport-clients>
                <passport-authorized-clients></passport-authorized-clients>
                <passport-personal-access-tokens></passport-personal-access-tokens>
        </div>
    </div>
</div>
@endsection
Solution

  • The problem I faced was due to the fact I ran the mix build via npm run dev i.e for development. The correct course of action was to build it using npm run production and then upload it to server.