Skip to content

Commit 79d46e6

Browse files
DamianOsipiukDamianOsipiuk
committed
feat: vue devtools
1 parent 22b038b commit 79d46e6

29 files changed

+1216
-180
lines changed

‎.changeset/gold-readers-create.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@tanstack/vue-devtools': minor
3+
'@tanstack/devtools': patch
4+
---
5+
6+
feat: vue devtools

‎examples/vue/basic/.gitignore‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local
6+
7+
package-lock.json
8+
yarn.lock
9+
pnpm-lock.yaml

‎examples/vue/basic/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Basic example
2+
3+
To run this example:
4+
5+
- `npm install` or `yarn` or `pnpm i` or `bun i`
6+
- `npm run dev` or `yarn dev` or `pnpm dev` or `bun dev`

‎examples/vue/basic/eslint.config.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// @ts-check
2+
3+
import pluginVue from 'eslint-plugin-vue'
4+
import rootConfig from '../../eslint.config.js'
5+
6+
export default [
7+
...rootConfig,
8+
{
9+
files: ['**/*.{ts,tsx,vue}'],
10+
...pluginVue.configs['flat/recommended'],
11+
},
12+
{
13+
files: ['**/__tests__/**'],
14+
rules: {
15+
// 'react-compiler/react-compiler': 'off',
16+
},
17+
},
18+
]

‎examples/vue/basic/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vue Query Example</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/src/main.ts"></script>
11+
</body>
12+
</html>

‎examples/vue/basic/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "@tanstack/query-example-vue-basic",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"preview": "vite preview"
9+
},
10+
"dependencies": {
11+
"@tanstack/devtools": "workspace:*",
12+
"@tanstack/vue-devtools": "workspace:*",
13+
"@tanstack/vue-query": "^5.90.5",
14+
"@tanstack/vue-query-devtools": "^5.91.0",
15+
"vue": "^3.5.22"
16+
},
17+
"devDependencies": {
18+
"@vitejs/plugin-vue": "^6.0.1",
19+
"typescript": "~5.9.2",
20+
"vite": "^7.1.7"
21+
}
22+
}

‎examples/vue/basic/src/App.vue‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<script lang="ts">
2+
import { defineComponent, ref } from 'vue'
3+
import { TanStackDevtools } from '@tanstack/vue-devtools'
4+
import { VueQueryDevtoolsPanel } from '@tanstack/vue-query-devtools'
5+
6+
import Posts from './Posts.vue'
7+
import Post from './Post.vue'
8+
9+
export default defineComponent({
10+
name: 'App',
11+
components: { Posts, Post, TanStackDevtools, VueQueryDevtoolsPanel },
12+
setup() {
13+
const visitedPosts = ref(new Set())
14+
const isVisited = (id: number) => visitedPosts.value.has(id)
15+
16+
const postId = ref(-1)
17+
const setPostId = (id: number) => {
18+
visitedPosts.value.add(id)
19+
postId.value = id
20+
}
21+
22+
const plugins = [{ name: 'Vue Query', component: VueQueryDevtoolsPanel }]
23+
24+
return {
25+
isVisited,
26+
postId,
27+
setPostId,
28+
plugins,
29+
}
30+
},
31+
})
32+
</script>
33+
34+
<template>
35+
<h1>Vue Query - Basic</h1>
36+
<p>
37+
As you visit the posts below, you will notice them in a loading state the
38+
first time you load them. However, after you return to this list and click
39+
on any posts you have already visited again, you will see them load
40+
instantly and background refresh right before your eyes!
41+
<strong>
42+
(You may need to throttle your network speed to simulate longer loading
43+
sequences)
44+
</strong>
45+
</p>
46+
<Post v-if="postId > -1" :postId="postId" @setPostId="setPostId" />
47+
<Posts v-else :isVisited="isVisited" @setPostId="setPostId" />
48+
<TanStackDevtools
49+
:eventBusConfig="{ connectToServerBus: true }"
50+
:plugins="plugins"
51+
/>
52+
</template>

‎examples/vue/basic/src/Post.vue‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<script lang="ts">
2+
import { defineComponent } from 'vue'
3+
import { useQuery } from '@tanstack/vue-query'
4+
5+
import { Post } from './types'
6+
7+
const fetcher = async (id: number): Promise<Post> =>
8+
await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
9+
(response) => response.json(),
10+
)
11+
12+
export default defineComponent({
13+
name: 'PostDetails',
14+
props: {
15+
postId: {
16+
type: Number,
17+
required: true,
18+
},
19+
},
20+
emits: ['setPostId'],
21+
setup(props) {
22+
const { isPending, isError, isFetching, data, error } = useQuery({
23+
queryKey: ['post', props.postId],
24+
queryFn: () => fetcher(props.postId),
25+
})
26+
27+
return { isPending, isError, isFetching, data, error }
28+
},
29+
})
30+
</script>
31+
32+
<template>
33+
<h1>Post {{ postId }}</h1>
34+
<a @click="$emit('setPostId', -1)" href="#"> Back </a>
35+
<div v-if="isPending" class="update">Loading...</div>
36+
<div v-else-if="isError">An error has occurred: {{ error }}</div>
37+
<div v-else-if="data">
38+
<h1>{{ data.title }}</h1>
39+
<div>
40+
<p>{{ data.body }}</p>
41+
</div>
42+
<div v-if="isFetching" class="update">Background Updating...</div>
43+
</div>
44+
</template>
45+
46+
<style scoped>
47+
.update {
48+
font-weight: bold;
49+
color: green;
50+
}
51+
</style>

‎examples/vue/basic/src/Posts.vue‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<script lang="ts">
2+
import { defineComponent } from 'vue'
3+
import { useQuery } from '@tanstack/vue-query'
4+
5+
import type { Post } from './types'
6+
7+
const fetcher = async (): Promise<Post[]> =>
8+
await fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
9+
response.json(),
10+
)
11+
12+
export default defineComponent({
13+
name: 'PostsList',
14+
props: {
15+
isVisited: {
16+
type: Function,
17+
required: true,
18+
},
19+
},
20+
emits: ['setPostId'],
21+
setup() {
22+
const { isPending, isError, isFetching, data, error, refetch } = useQuery({
23+
queryKey: ['posts'],
24+
queryFn: fetcher,
25+
})
26+
27+
return { isPending, isError, isFetching, data, error, refetch }
28+
},
29+
})
30+
</script>
31+
32+
<template>
33+
<h1>Posts</h1>
34+
<div v-if="isPending">Loading...</div>
35+
<div v-else-if="isError">An error has occurred: {{ error }}</div>
36+
<div v-else-if="data">
37+
<ul>
38+
<li v-for="item in data" :key="item.id">
39+
<a
40+
@click="$emit('setPostId', item.id)"
41+
href="#"
42+
:class="{ visited: isVisited(item.id) }"
43+
>{{ item.title }}</a
44+
>
45+
</li>
46+
</ul>
47+
</div>
48+
</template>
49+
50+
<style scoped>
51+
.visited {
52+
font-weight: bold;
53+
color: green;
54+
}
55+
</style>

‎examples/vue/basic/src/main.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createApp } from 'vue'
2+
import { VueQueryPlugin } from '@tanstack/vue-query'
3+
4+
import App from './App.vue'
5+
6+
createApp(App).use(VueQueryPlugin).mount('#app')

0 commit comments

Comments
 (0)