Skip to content

Commit ad24a25

Browse files
AlemTuzlakAlemTuzlak
authored
Merge branch 'main' into o-az/set-dev-engines
2 parents a270b7b + d781f4f commit ad24a25

36 files changed

Lines changed: 1083 additions & 7 deletions

‎.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

‎docs/configuration.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ id: configuration
55

66
Both TanStack `DevTools` and `EventClient` can be configured.
77

8-
> [!IMPORTANT] all configuration is optional unless marked (required)
8+
> [!IMPORTANT]
9+
> All configuration is optional unless marked (required)
910
1011
## Devtools Component Configuration
1112

‎docs/framework/react/guides/custom-plugins.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,8 @@ export function createCounter() {
104104
}
105105
```
106106

107-
> [!IMPORTANT] `EventClient` is framework agnostic so this process will be the same regardless of framework or even in vanilla JavaScript.
107+
> [!IMPORTANT]
108+
> `EventClient` is framework agnostic so this process will be the same regardless of framework or even in vanilla JavaScript.
108109
109110
## Consuming The Event Client
110111

‎docs/vite-plugin.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,8 @@ export default {
7373

7474
### editor
7575

76-
> [!IMPORTANT] `editor` is used as an escape hatch to implement your own go-to-source functionality if your system/editor does not work OOTB. We use `launch-editor` under the hood which supports a lot of editors but not all. If your editor is not supported you can implement your own version here. Here is the list of supported editors: https://github.com/yyx990803/launch-editor?tab=readme-ov-file#supported-editors
76+
> [!IMPORTANT]
77+
> `editor` is used as an escape hatch to implement your own go-to-source functionality if your system/editor does not work OOTB. We use `launch-editor` under the hood which supports a lot of editors but not all. If your editor is not supported you can implement your own version here. Here is the list of supported editors: https://github.com/yyx990803/launch-editor?tab=readme-ov-file#supported-editors
7778
7879
The open in editor configuration which has two fields, `name` and `open`,
7980
`name` is the name of your editor, and `open` is a function that opens the editor with the given file and line number. You can implement your version for your editor as follows:

‎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>

0 commit comments

Comments
 (0)