Vue Components erscheint nicht mit Pass in Laravel 5.3

Question

Wie Sie aus dem Titel sehen können, probiere ich Laravel 5.3 und Pass.

Also ich habe die Schritte zur Installation Laravel Pass durchlaufen und soweit ich sehen kann, ist alles an seinem Platz.

ich die entsprechenden Vue Komponenten in das Markup meiner home.blade.php gesetzt haben, wie laut der Dokumentation zu testen folgt, die ich wie 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 getan haben, als läuft in meinem dev entdeckt Tools aber keine Vue-Komponenten angezeigt werden.

Hier ist meine 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

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. 

die Störung erhalte

Irgendeine Idee, wie ich dieses Problem beheben kann? Ich Vue recht neu bin

Answer 1

In Ihrem app.js Datei, importieren Sie die Komponenten direkt unter oder anstelle der Komponente example, aber bevor Sie das neue Objekt Vue erstellen, in dem es an das DOM gebunden wird.

Vergessen Sie nicht, auch gulp auszuführen. :)

Answer 2

hatte ich das gleiche Problem und es stellte sich heraus, dass dies wichtig ist: den Code setzen

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

am ENDE der app.js Datei.

Das fing an, die Komponenten auf der Webseite zu zeigen.

Answer 3

hatte ich das gleiche Problem mit der folgenden Auflösung mit Laravel 5.4:

resources/assets/app.js finden.

1. put all Vue.component... vor new Vue (nicht nach)
2. in jedem Vue.component ‚s import, hängen .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 
); 

Und dann npm run dev wieder laufen.

Answer 4

ich dieses Problem behoben haben, wir keine Vue Bibliotheken schließen müssen, Laravel standardmäßig bietet diese (dies ist für Laravel 5,4 und>):

Gehen Sie zu Ihrem Projekt-Ordner/public/js /app.js

Suchen Sie den Code, unter dem Ihre Passportkunden, Passport-autorisierten Clients und Pass-Personal-Access-Token registriert sind.

Ersetzen Sie den Code mit:

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

Hinweis: Um die Vue.component REGISTRIERUNG vor dem "Var app = new Vue"