Компоненты Vue не отображаются с паспортом в laravel 5.3

#php #laravel-passport

#php #laravel-паспорт

Вопрос:

Здравствуйте, я пытаюсь использовать паспорт в laravel 5.3, используя следующую ссылку https://laravel.com/docs/5.3/passport

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

в моем представлении файл

 @extends('layouts.app')

@section('content')

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <passport-clients></passport-clients>
            <passport-authorized-clients></passport-authorized-clients>
            <passport-personal-access-tokens></passport-personal-access-tokens>
        </div>
    </div>
</div>
@endsection
  

я устал обновлять узел до 6.4.0 также на 6.7.0, но, отметив, что это сработало для меня
, также изменил файл gulp

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

require('laravel-elixir-vue');

/*
 |--------------------------------------------------------------------------
 | 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(function (mix){
    mix.sass('app.scss')
       .webpack('app.js');
});
  

но шаблоны не отображаются в моих представлениях даже в исходном коде, отмечая добавленные против включений

Ответ №1:

Убедитесь, что вы включили файл js в layouts.app

 @yield('content')
</div>

<!-- Scripts -->
**<script src="/js/app.js"></script>**
</body>
</html>
  

и в вашем app.js измените тело на #app

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

Я столкнулся с той же проблемой, и это сработало для меня.

Комментарии:

1. Хотя это старый пост, кто-то здесь с подобной проблемой может получить некоторую подсказку.