DEV Community

Cover image for Nuxt 3 + Apollo Client

Nuxt 3 + Apollo Client

Josh Corbett on January 10, 2022

If you're working on a Nuxt 3 project, and trying to get Apollo up and running, only to find that the nuxt module isn't updated yet for v3, then fo...
Read full post
Collapse
 
elmatella profile image
Mathieu Marteau •

Hey! Thank you for this post!

Collapse
 
megabam5 profile image
megabam5 • • Edited

Awesome post, exactly what I was looking for!

Unfortunately when installing the dependencies it seems like @vue/apollo-composables has not been installed and installing it manually gives me dependency conflicts :(

Collapse
 
joshistoast profile image
Josh Corbett •

Try moving @vue/apollo-composable and vue-apollo to devDependencies

Collapse
 
sharkfin009 profile image
Sharkfin •

me too...

Collapse
 
thevalleydev profile image
thevalleydev •

Thanks for the post. It worked great for dev but when I build and start the app I get errors when attempting to load a page.

`Directory import '.output\server\node_modules\@apollo\client\core' is not supported resolving ES modules imported

Did you mean to import @apollo/client/core/index.js?`

Collapse
 
namvvo profile image
namvvo •

I always get error "networkError: FetchError: request to localhost:5001/api/data failed, reason: self signed certificate as stated at stackoverflow.com/questions/758840...

anyone know how to fix it ?

Collapse
 
namvvo profile image
namvvo •

thanks a lot. But how can I provide multiple client endpoints.

vue4 setup provide:

provide(ApolloClients, {
default: apolloClient,
clientA: apolloClientA,
clientB: apolloClientB,
})

how to get nuxt to provide same?

nuxtApp.vueApp.provide(DefaultApolloClient, {
default: apolloClient => not working
});

Collapse
 
kagigz profile image
Katia GIL GUZMAN • • Edited

Thank you for this post, that's also exactly what I'm looking for.
However, like the others below, I get an error with @vue/apollo-composables:

Could you please help?

Here are my dependencies:

    "@antfu/eslint-config": "^0.10.0",
    "@apollo/client": "^3.5.9",
    "@iconify/json": "^1.1.431",
    "@nuxt/bridge-edge": "latest",
    "@nuxt/kit-edge": "latest",
    "@nuxtclub/feathericons": "^1.0.0",
    "@unocss/nuxt": "^0.11.1",
    "@vue/apollo-composable": "^4.0.0-alpha.16",
    "@vue/runtime-dom": "^3.2.22",
    "@vueuse/core": "^6.9.1",
    "eslint": "^8.2.0",
    "graphql": "^16.3.0",
    "graphql-tag": "^2.12.6",
    "nuxi-edge": "latest",
    "nuxt-edge": "latest",
    "nuxt-windicss": "^2.2.1",
    "sass": "^1.45.1",
    "typescript": "4.4.4",
    "vue-apollo": "^3.1.0"
Enter fullscreen mode Exit fullscreen mode
Collapse
 
joshistoast profile image
Josh Corbett •

Try moving @vue/apollo-composable and vue-apollo to devDependencies

Collapse
 
holyris profile image
Alexandre Thebault • • Edited

For those who get errors when installing @vue/apollo-composables, that talks about having vue@2.6 conflict or something like that, you could try adding this to your package.json :

  "overrides": {
    "vue": "3"
  }
Enter fullscreen mode Exit fullscreen mode

"Overrides" works with npm, with yarn I think it's "resolutions"

Collapse
 
daan_degooijer_495d5d94f profile image
Daan de Gooijer • • Edited

Thanks for the post, but cannot get this to work. When adding @apollo/client to transpile, i get the following error:
external_graphql_tag_default.a is not a function

Any help would be swell, trying to migrate my nuxt 2 to bridge and it isn't going well :D

Collapse
 
joshistoast profile image
Josh Corbett •

This is for nuxt 3, not sure how this measures up with bridge