search

Home  >  Q&A  >  body text

Tips and guidelines for using the Nuxt Composition API and the Nuxt Apollo module

<p>Why can I use the nuxt apollo module with the nuxt composition API? If I try to use this plugin example: </p> <pre class="brush:php;toolbar:false;">import {Context} from '@nuxt/types' import { provide, onGlobalSetup, defineNuxtPlugin } from '@nuxtjs/composition-api' import {DefaultApolloClient} from '@vue/apollo-composable/dist' /*** This plugin will connect @nuxt/apollojs and @vue/apollo-composable*/ export default defineNuxtPlugin(({app}: Context): void => { onGlobalSetup(() => { provide(DefaultApolloClient, app.apolloProvider?.defaultClient) }) })</pre> <p>I got this error: <code>Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup</code></p>
P粉134288794P粉134288794486 days ago610

reply all(1)I'll reply

  • P粉399585024

    P粉3995850242023-08-27 00:00:55

    1. Install vue/apollo-composable: npm install --save @vue/apollo-composable

    2. Create nuxt plug-in (provide-apollo-client.ts):

    import { Context } from '@nuxt/types'
    import {
      onGlobalSetup,
      defineNuxtPlugin
    } from '@nuxtjs/composition-api'
    // @ts-ignore
    import { provideApolloClient } from '@vue/apollo-composable'
    
    /**
     * This plugin will connect @nuxt/apollojs with @vue/apollo-composable
     */
    
    export default defineNuxtPlugin(({ app }: Context): void => {
      onGlobalSetup(() => {
        provideApolloClient(app.apolloProvider?.defaultClient)
      })
    })

    reply
    0
  • Cancelreply