docs: update setup to Vue 3

packages/docs/src/guide-components/setup.md

@@ -14,18 +14,25 @@ Or:
 yarn add @vue/apollo-option @vue/apollo-components
 ```
 
-## 2. Install the plugin into Vue
+## 2. Create the Apollo client
 
 ```js
-import Vue from 'vue'
-import VueApollo from '@vue/apollo-option'
-import VueApolloComponents from '@vue/apollo-components'
+import { ApolloClient, InMemoryCache } from '@apollo/client/core'
+
+const cache = new InMemoryCache()
+
+const apolloClient = new ApolloClient({
+  cache,
+  uri: 'http://localhost:4042/graphql',
+})
 
-Vue.use(VueApollo)
-Vue.use(VueApolloComponents)
 ```
 
-## 3. Inject the Apollo provider
+::: warning
+Use the `@apollo/client/core` import path otherwise you will also import React.
+:::
+
+## 3. Create the Apollo provider
 
 The provider holds the Apollo client instances that can then be used by all the child components.
 
@@ -35,15 +42,28 @@ const apolloProvider = new VueApollo({
 })
 ```
 
-Add it to your app with the `apolloProvider` option:
+## 4. Add the provider to your app
+
+Add it to your app with the `app.use` function:
 
 ```js
-new Vue({
-  el: '#app',
-  // inject apolloProvider here like vue-router or vuex
-  apolloProvider,
-  render: h => h(App),
+import { createApp, h } from 'vue'
+
+const app = createApp({
+  render: () => h(App),
 })
+
+app.use(apolloProvider)
+```
+
+## 5. Add the components to your app
+
+```js
+import VueApolloComponents from '@vue/apollo-components'
+
+// ...
+
+app.use(VueApolloComponents)
 ```
 
 You are now ready to use Apollo in your components!

packages/docs/src/guide-option/setup.md

@@ -14,16 +14,25 @@ Or:
 yarn add @vue/apollo-option
 ```
 
-## 2. Install the plugin into Vue
+## 2. Create the Apollo client
 
 ```js
-import Vue from 'vue'
-import VueApollo from '@vue/apollo-option'
+import { ApolloClient, InMemoryCache } from '@apollo/client/core'
+
+const cache = new InMemoryCache()
+
+const apolloClient = new ApolloClient({
+  cache,
+  uri: 'http://localhost:4042/graphql',
+})
 
-Vue.use(VueApollo)
 ```
 
-## 3. Inject the Apollo provider
+::: warning
+Use the `@apollo/client/core` import path otherwise you will also import React.
+:::
+
+## 3. Create the Apollo provider
 
 The provider holds the Apollo client instances that can then be used by all the child components.
 
@@ -33,15 +42,18 @@ const apolloProvider = new VueApollo({
 })
 ```
 
-Add it to your app with the `apolloProvider` option:
+## 4. Add the provider to your app
+
+Add it to your app with the `app.use` function:
 
 ```js
-new Vue({
-  el: '#app',
-  // inject apolloProvider here like vue-router or vuex
-  apolloProvider,
-  render: h => h(App),
+import { createApp, h } from 'vue'
+
+const app = createApp({
+  render: () => h(App),
 })
+
+app.use(apolloProvider)
 ```
 
 You are now ready to use Apollo in your components!

packages/test-e2e/src/main.js

@@ -8,6 +8,6 @@ import { apolloProvider } from './vue-apollo'
 const app = createApp(App)
 app.use(router)
 app.use(store)
-app.use(VueApolloComponents)
 app.use(apolloProvider)
+app.use(VueApolloComponents)
 app.mount('#app')