Skip to content

Commit d781f4f

Browse files
DamianOsipiukautofix-ci[bot]
DamianOsipiuk
and
autofix-ci[bot]
authored
feat: vue devtools (#226)
* feat: vue devtools * fix(vue-devtools): fix jsdoc, bump sherif * fix: pass props to plugin component * feat: utils and props passing * fix: plugin util * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 5ae6ded commit d781f4f

33 files changed

+1077
-4
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: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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+
...pluginVue.configs['flat/recommended'],
9+
{
10+
files: ['*.vue', '**/*.vue'],
11+
languageOptions: {
12+
parserOptions: {
13+
parser: '@typescript-eslint/parser',
14+
},
15+
},
16+
},
17+
]

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