Tested VueQueryRewind on each example from the tanstack documentation and left comments where the componnets should be added to make testing simple for the end user

Author: austin-cavanagh

package-vue-vite/README.md

@@ -1,9 +1 @@
-# Vue 3 + TypeScript + Vite
-
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-## Recommended Setup
-
-- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
-
-- Use [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) for performing the same type checking from the command line, or for generating d.ts files for SFCs.
+# VueQueryRewind

package-vue-vite/examples/tanstack-examples/2.7-basic/src/App.vue

@@ -1,33 +1,41 @@
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref } from 'vue';
 
-import Posts from './Posts.vue'
-import Post from './Post.vue'
+import Posts from './Posts.vue';
+import Post from './Post.vue';
+
+// Import VueQueryRewind
+// @ts-ignore
+import { VueQueryRewind } from '@react-query-rewind/vue-query-rewind';
 
 export default defineComponent({
   name: 'App',
-  components: { Posts, Post },
+  // Register VueQueryRewind
+  components: { Posts, Post, VueQueryRewind },
   setup() {
-    const visitedPosts = ref(new Set())
-    const isVisited = (id: number) => visitedPosts.value.has(id)
+    const visitedPosts = ref(new Set());
+    const isVisited = (id: number) => visitedPosts.value.has(id);
 
-    const postId = ref(-1)
+    const postId = ref(-1);
     const setPostId = (id: number) => {
-      visitedPosts.value.add(id)
-      postId.value = id
-    }
+      visitedPosts.value.add(id);
+      postId.value = id;
+    };
 
     return {
       isVisited,
       postId,
       setPostId,
-    }
+    };
   },
-})
+});
 </script>
 
 <template>
   <div>
+    <!-- Add VueQueryRewind to application -->
+    <VueQueryRewind />
+
     <h1>Vue Query - Basic</h1>
     <p>
       As you visit the posts below, you will notice them in a loading state the

package-vue-vite/examples/tanstack-examples/basic/src/App.vue

@@ -2,13 +2,16 @@
 import { defineComponent, ref } from 'vue';
 import { VueQueryDevtools } from '@tanstack/vue-query-devtools';
 
-import { VueQueryRewind } from '@react-query-rewind/vue-query-rewind';
-
 import Posts from './Posts.vue';
 import Post from './Post.vue';
 
+// Import VueQueryRewind
+// @ts-ignore
+import { VueQueryRewind } from '@react-query-rewind/vue-query-rewind';
+
 export default defineComponent({
   name: 'App',
+  // Register VueQueryRewind
   components: { Posts, Post, VueQueryDevtools, VueQueryRewind },
   setup() {
     const visitedPosts = ref(new Set());
@@ -30,6 +33,7 @@ export default defineComponent({
 </script>
 
 <template>
+  <!-- Add VueQueryRewind to application -->
   <VueQueryRewind />
 
   <h1>Vue Query - Basic</h1>

package-vue-vite/examples/tanstack-examples/dependent-queries/src/App.vue

@@ -1,32 +1,40 @@
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref } from 'vue';
 
-import Posts from './Posts.vue'
-import Post from './Post.vue'
+import Posts from './Posts.vue';
+import Post from './Post.vue';
+
+// Import VueQueryRewind
+// @ts-ignore
+import { VueQueryRewind } from '@react-query-rewind/vue-query-rewind';
 
 export default defineComponent({
   name: 'App',
-  components: { Posts, Post },
+  // Register VueQueryRewind
+  components: { Posts, Post, VueQueryRewind },
   setup() {
-    const visitedPosts = ref(new Set())
-    const isVisited = (id: number) => visitedPosts.value.has(id)
+    const visitedPosts = ref(new Set());
+    const isVisited = (id: number) => visitedPosts.value.has(id);
 
-    const postId = ref(-1)
+    const postId = ref(-1);
     const setPostId = (id: number) => {
-      visitedPosts.value.add(id)
-      postId.value = id
-    }
+      visitedPosts.value.add(id);
+      postId.value = id;
+    };
 
     return {
       isVisited,
       postId,
       setPostId,
-    }
+    };
   },
-})
+});
 </script>
 
 <template>
+  <!-- Add VueQueryRewind to application -->
+  <VueQueryRewind />
+
   <h1>Vue Query - Dependent Queries</h1>
   <p>
     As you visit the posts below, you will notice them in a loading state the

package-vue-vite/examples/tanstack-examples/nuxt3/app.vue

@@ -1,16 +1,23 @@
 <template>
+  <!-- Add VueQueryRewind to application -->
+  <VueQueryRewind />
+
   <div>{{ data }}</div>
 </template>
 
 <script setup lang="ts">
-import { useQuery } from '@tanstack/vue-query'
+import { useQuery } from '@tanstack/vue-query';
+
+// Import VueQueryRewind
+// @ts-ignore
+import { VueQueryRewind } from '@react-query-rewind/vue-query-rewind';
 
 const fetcher = async () =>
-  await fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
-    response.json(),
-  )
+  await fetch('https://jsonplaceholder.typicode.com/posts').then(response =>
+    response.json()
+  );
 
-const { data, suspense } = useQuery({ queryKey: ['test'], queryFn: fetcher })
+const { data, suspense } = useQuery({ queryKey: ['test'], queryFn: fetcher });
 
-await suspense()
+await suspense();
 </script>

package-vue-vite/examples/tanstack-examples/persister/src/App.vue

@@ -1,32 +1,40 @@
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref } from 'vue';
 
-import Posts from './Posts.vue'
-import Post from './Post.vue'
+import Posts from './Posts.vue';
+import Post from './Post.vue';
+
+// Import VueQueryRewind
+// @ts-ignore
+import { VueQueryRewind } from '@react-query-rewind/vue-query-rewind';
 
 export default defineComponent({
   name: 'App',
-  components: { Posts, Post },
+  // Register VueQueryRewind
+  components: { Posts, Post, VueQueryRewind },
   setup() {
-    const visitedPosts = ref(new Set())
-    const isVisited = (id: number) => visitedPosts.value.has(id)
+    const visitedPosts = ref(new Set());
+    const isVisited = (id: number) => visitedPosts.value.has(id);
 
-    const postId = ref(-1)
+    const postId = ref(-1);
     const setPostId = (id: number) => {
-      visitedPosts.value.add(id)
-      postId.value = id
-    }
+      visitedPosts.value.add(id);
+      postId.value = id;
+    };
 
     return {
       isVisited,
       postId,
       setPostId,
-    }
+    };
   },
-})
+});
 </script>
 
 <template>
+  <!-- Add VueQueryRewind to application -->
+  <VueQueryRewind />
+
   <h1>Vue Query - Basic</h1>
   <p>
     As you visit the posts below, you will notice them in a loading state the

package-vue-vite/examples/tanstack-examples/simple/src/App.vue

@@ -1,32 +1,43 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
-import { useQuery } from '@tanstack/vue-query'
-import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
+import { defineComponent } from 'vue';
+import { useQuery } from '@tanstack/vue-query';
+
+// Import was throwing a type error so we ignored it - this is from the docs so did not change it
+// @ts-ignore
+import { VueQueryDevtools } from '@tanstack/vue-query-devtools';
+
+// Import VueQueryRewind
+// @ts-ignore
+import { VueQueryRewind } from '@react-query-rewind/vue-query-rewind';
 
 export default defineComponent({
   name: 'App',
-  components: { VueQueryDevtools },
+  // Register VueQueryRewind
+  components: { VueQueryDevtools, VueQueryRewind },
   setup() {
     const { data, error, isFetching, isPending } = useQuery({
       queryKey: ['repoData'],
       async queryFn() {
         return await fetch('https://api.github.com/repos/Tanstack/query').then(
-          (response) => response.json(),
-        )
+          response => response.json()
+        );
       },
-    })
+    });
 
     return {
       data,
       error,
       isFetching,
       isPending,
-    }
+    };
   },
-})
+});
 </script>
 
 <template>
+  <!-- Add VueQueryRewind to application -->
+  <VueQueryRewind />
+
   <template v-if="isPending"> Loading... </template>
   <template v-else-if="error">
     'An error has occurred: {{ error.message }}