vue.js - Vue Apollo instance option issues, can't configure properly

Question

I'm working on integrating Vue-Apollo into a Laravel project right now. I was able to get Vue up and running just fine. Now I am trying to integrate Apollo and it isn't working. I feel like I'm missing something really simple but can't locate it. Here's my App component:

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

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

my blade template:

@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

Lastly, my JS where I instantiate my 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)
 });

The thing is it does mount the App component briefly, I see a flash of the h1 content reloading the page, but then goes blank. No errors pop up, I've stepped through the loading process and can't find anything sticking out as wrong. No errors are thrown either.

标签： vue.jsapollo-client

Answer 1

安装后，刀片文件中的 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