Проблемы с экземпляром Vue Apollo, не могут быть правильно настроены - PullRequest
Новая
       4

Проблемы с экземпляром Vue Apollo, не могут быть правильно настроены

0 голосов
/ 08 декабря 2018

Я сейчас работаю над интеграцией Vue-Apollo в проект Laravel.Я был в состоянии получить Vue и работает просто отлично.Сейчас я пытаюсь интегрировать Apollo, и это не работает.Я чувствую, что упускаю что-то действительно простое, но не могу найти это.Вот мой App компонент: 

<template>
    <div>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: 'app',
    }
</script>

мой шаблон лезвия: 

@extends('layouts.app')

@section('content')
    <div id="app">
        <div class="container">
            <div class="row justify-content-center">
                <App>
                    <h1>Here</h1>
                    <manufacturers-component></manufacturers-component>
                    <product-groups-component></product-groups-component>
                    <products-component></products-component>
                </App>
            </div>
        </div>
    </div>
@endsection

Наконец, мой JS, где я создаю экземпляр моего Vue: 

require('./bootstrap');


import Vue from 'vue'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'

import App from './components/App'

Vue.component('manufacturers-component', require('./components/ManufacturersComponent.vue'));
Vue.component('product-groups-component', require('./components/ProductGroupsComponent.vue'));
Vue.component('products-component', require('./components/ProductsComponent.vue'));

 const httpLink = new HttpLink({
     uri: 'http://homestead.test/graphql'
 })

 const apolloClient = new ApolloClient({
     link: httpLink,
     cache: new InMemoryCache()
 })

 Vue.use(VueApollo)

 const apolloProvider = new VueApollo({
     defaultClient: apolloClient
 })

 const vue_app = new Vue({
    el: '#app',
    components: { App },
    apolloClient,
    render: h => h(App)
 });

вещьесли он кратко монтирует компонент App, я вижу вспышку содержимого h1, перезагружающего страницу, но затем гаснет.Никаких ошибок не появляется, я прошел процесс загрузки и не могу найти ничего, что выглядело как неправильное.Также не выдается никаких ошибок.

1 Ответ

0 голосов
/ 08 декабря 2018

HTML-код в файле блейда заменяется содержимым компонента App после его монтирования, отсюда краткий вид и последующая белая страница.Переместите разметку из блейд-файла в компонент приложения:

App.vue 

<template>
  <div class="container">
     <div class="row justify-content-center">
        <h1>Here</h1>
        <manufacturers-component></manufacturers-component>
        <product-groups-component></product-groups-component>
        <products-component></products-component>
     </div>
  </div>
</template>
<script>
    export default {
        name: 'app',
    }
</script>

index.blade.php 

@extends('layouts.app')

@section('content')
    <div id="app"></div>
@endsection
...