docs(vue-query): fix vue-query imports in docs, correct section repla…

…cements (#4728)

docs/react/graphql.md

@@ -51,4 +51,5 @@ function App() {
 _You can find a [complete example in the repo](https://github.com/dotansimha/graphql-code-generator/tree/7c25c4eeb77f88677fd79da557b7b5326e3f3950/examples/front-end/react/tanstack-react-query)_
 
 Get started with the [dedicated guide on GraphQL Code Generator documentation](https://www.the-guild.dev/graphql/codegen/docs/guides/react-vue).
-[//]: # (Codegen)
+
+[//]: # 'Codegen'

docs/react/overview.md

@@ -91,11 +91,11 @@ function Example() {
 ```
 
 [//]: # 'Example'
+[//]: # 'Materials'
 
 ## You talked me into it, so what now?
 
-[//]: # 'Course'
-
 - Consider taking the official [React Query Course](https://ui.dev/react-query?from=tanstack) (or buying it for your whole team!)
-[//]: # 'Course'
 - Learn React Query at your own pace with our amazingly thorough [Walkthrough Guide](../installation) and [API Reference](../reference/useQuery)
+
+[//]: # 'Materials'

docs/react/typescript.md

@@ -113,8 +113,11 @@ const { error } = useQuery<Group[], Error>(['groups'], fetchGroups)
 [typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAORToCGAxjALQCOO+VAsAFCiSw4dAB7AIqUuUpURY1Nx68YeMOjgBxcsjBwAvIjjAAJgC44AO2QgARriK9eDCOdTwS6GAwAWmiNon6ABQAlGYAClLAGAA8vtoA2gC6AHx6qbLiAHQA5h6BVAD02Vpg8sGZMF7o5oG0qJAuarqpdQ0YmUZ0MHTBDjxOLvBIuORQRHooGNi4eLElSQA0cACiUKPJgfFUxX6lVIlL7p4+Jai9PAUFcNc3AHoA-LxAA)
 
 [//]: # 'Playground6'
+[//]: # 'Materials'
 
 ## Further Reading
 
 For tips and tricks around type inference, have a look at [React Query and TypeScript](../community/tkdodos-blog#6-react-query-and-typescript) from
 the Community Resources.
+
+[//]: # 'Materials'

docs/vue/guides/initial-query-data.md

@@ -3,3 +3,6 @@ id: initial-query-data
 title: Initial Query Data
 ref: docs/react/guides/initial-query-data.md
 ---
+
+[//]: # 'Materials'
+[//]: # 'Materials'

docs/vue/guides/mutations.md

@@ -36,7 +36,7 @@ function addTodo() {
 
 ```vue
 <script>
-import { useMutation } from 'vue-query'
+import { useMutation } from '@tanstack/vue-query'
 
 const { error, mutate, reset } = useMutation({
   mutationFn: (newTodo) => axios.post('/todos', newTodo),

docs/vue/guides/paginated-queries.md

@@ -9,7 +9,7 @@ ref: docs/react/guides/paginated-queries.md
 ```vue
 <script setup lang="ts">
 import { ref, Ref } from 'vue'
-import { useQuery } from 'vue-query'
+import { useQuery } from '@tanstack/vue-query'
 
 const fetcher = (page: Ref<number>) =>
   fetch(

docs/vue/guides/queries.md

@@ -7,7 +7,7 @@ ref: docs/react/guides/queries.md
 [//]: # 'Example'
 
 ```ts
-import { useQuery } from 'vue-query'
+import { useQuery } from '@tanstack/vue-query'
 
 const result = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })
 ```
@@ -17,7 +17,7 @@ const result = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })
 
 ```vue
 <script setup>
-import { useQuery } from 'vue-query'
+import { useQuery } from '@tanstack/vue-query'
 
 const { isLoading, isError, data, error } = useQuery({
   queryKey: ['todos'],
@@ -40,7 +40,7 @@ const { isLoading, isError, data, error } = useQuery({
 
 ```vue
 <script setup>
-import { useQuery } from 'vue-query'
+import { useQuery } from '@tanstack/vue-query'
 
 const { status, data, error } = useQuery({
   queryKey: ['todos'],

docs/vue/guides/ssr.md

@@ -12,8 +12,8 @@ Vue Query supports prefetching multiple queries on the server and then _dehydrat
 First create `vue-query.ts` file in your `plugins` directory with the following content:
 
 ```ts
-import type { DehydratedState, VueQueryPluginOptions } from 'vue-query'
-import { VueQueryPlugin, QueryClient, hydrate, dehydrate } from 'vue-query'
+import type { DehydratedState, VueQueryPluginOptions } from '@tanstack/vue-query'
+import { VueQueryPlugin, QueryClient, hydrate, dehydrate } from '@tanstack/vue-query'
 // Nuxt 3 app aliases
 import { useState } from '#app'
 
@@ -66,7 +66,7 @@ First create `vue-query.js` file in your `plugins` directory with the following
 
 ```js
 import Vue from 'vue'
-import { VueQueryPlugin, QueryClient, hydrate } from 'vue-query'
+import { VueQueryPlugin, QueryClient, hydrate } from '@tanstack/vue-query'
 
 export default (context) => {
   // Modify your Vue Query global settings here
@@ -116,7 +116,7 @@ import {
   onServerPrefetch,
   useContext,
 } from "@nuxtjs/composition-api";
-import { useQuery, useQueryClient, dehydrate } from "vue-query";
+import { useQuery, useQueryClient, dehydrate } from "@tanstack/vue-query";
 
 export default defineComponent({
   setup() {
@@ -152,7 +152,7 @@ Sync VueQuery client state with [vite-ssr](https://github.com/frandiox/vite-ssr)
 // main.js (entry point)
 import App from './App.vue'
 import viteSSR from 'vite-ssr/vue'
-import { QueryClient, VueQueryPlugin, hydrate, dehydrate } from 'vue-query'
+import { QueryClient, VueQueryPlugin, hydrate, dehydrate } from '@tanstack/vue-query'
 
 export default viteSSR(App, { routes: [] }, ({ app, initialState }) => {
   // -- This is Vite SSR main hook, which is called once per request
@@ -186,7 +186,7 @@ Then, call VueQuery from any component using Vue's `onServerPrefetch`:
 </template>
 
 <script setup>
-  import { useQuery } from 'vue-query'
+  import { useQuery } from '@tanstack/vue-query'
   import { onServerPrefetch } from 'vue'
 
   // This will be prefetched and sent from the server

docs/vue/guides/suspense.md

@@ -31,7 +31,7 @@ And change your `setup` function in suspendable component to be `async`. Then yo
 ```vue
 <script>
 import { defineComponent } from 'vue'
-import { useQuery } from 'vue-query'
+import { useQuery } from '@tanstack/vue-query'
 
 const todoFetcher = async () =>
   await fetch('https://jsonplaceholder.cypress.io/todos').then((response) =>

docs/vue/overview.md

@@ -7,5 +7,10 @@ replace: { 'React': 'Vue', 'react-query': 'vue-query' }
 
 [//]: # 'Example'
 [//]: # 'Example'
-[//]: # 'Course'
-[//]: # 'Course'
+[//]: # 'Materials'
+
+## You talked me into it, so what now?
+
+- Learn Vue Query at your own pace with our amazingly thorough [Walkthrough Guide](../installation) and [API Reference](../reference/useQuery)
+
+[//]: # 'Materials'

docs/vue/typescript.md

@@ -36,3 +36,5 @@ replace:
 [typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPQBuOAtAEcc+KgFgAUKEiw49AB7AIqUuUpV5i1GPESYeMOjgBxcsjBwAvIjjAAJgC44jZCABGuIhImsIzeCXQYVgALEwgzZSsACgBKRwAFVWAMAB4wswBtAF0APks8jSUAOgBzQKiqThLTMC0Yophg9EYoqHRUSGZDCzy2jt8MItt6BhivcR8-a1xyKCJLFAxsXDw0muyAGjgAUShZnKiMqmrw2qosrYCg0JrUMfFOTjhnl4A9AH4JIA)
 
 [//]: # 'Playground6'
+[//]: # 'Materials'
+[//]: # 'Materials'

examples/vue/dependent-queries/vite.config.ts

@@ -5,6 +5,6 @@ import vue from "@vitejs/plugin-vue";
 export default defineConfig({
   plugins: [vue()],
   optimizeDeps: {
-    exclude: ["vue-query", "vue-demi"],
+    exclude: ["@tanstack/vue-query", "vue-demi"],
   },
 });

examples/vue/persister/vite.config.ts

@@ -5,6 +5,6 @@ import vue from "@vitejs/plugin-vue";
 export default defineConfig({
   plugins: [vue()],
   optimizeDeps: {
-    exclude: ["vue-query", "vue-demi"],
+    exclude: ["@tanstack/vue-query", "vue-demi"],
   },
 });