docs: add simple example for document homepage (#6857)

* docs: add simple example for document homepage * chore: run prettier
TanStack · Feb 12, 2024 · 5f1b505 · 5f1b505
1 parent 3b6c32a
commit 5f1b505
Show file tree

Hide file tree

Showing 11 changed files with 164 additions and 0 deletions.
diff --git a/examples/vue/simple/.gitignore b/examples/vue/simple/.gitignore
@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
diff --git a/examples/vue/simple/README.md b/examples/vue/simple/README.md
@@ -0,0 +1,6 @@
+# Basic example
+
+To run this example:
+
+- `npm install` or `yarn` or `pnpm i`
+- `npm run dev` or `yarn dev` or `pnpm dev`
diff --git a/examples/vue/simple/index.html b/examples/vue/simple/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TanStack Query Vue Simple Example App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/vue/simple/package.json b/examples/vue/simple/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "@tanstack/query-example-vue-simple",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/vue-query": "^5.18.1",
+    "@tanstack/vue-query-devtools": "^5.18.1",
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.5.2",
+    "typescript": "5.2.2",
+    "vite": "^5.0.10"
+  }
+}
diff --git a/examples/vue/simple/src/App.vue b/examples/vue/simple/src/App.vue
@@ -0,0 +1,43 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
+import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
+
+export default defineComponent({
+  name: 'App',
+  components: { VueQueryDevtools },
+  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(),
+        )
+      },
+    })
+
+    return {
+      data,
+      error,
+      isFetching,
+      isPending,
+    }
+  },
+})
+</script>
+
+<template>
+  <template v-if="isPending"> Loading... </template>
+  <template v-else-if="error">
+    'An error has occurred: {{ error.message }}
+  </template>
+  <template v-else>
+    <h1>{{ data.name }}</h1>
+    <p>{{ data.description }}</p>
+    <strong>👀 {{ data.subscribers_count }}</strong>
+    <strong>✨ {{ data.stargazers_count }}</strong>
+    <strong>🍴 {{ data.forks_count }}</strong>
+    <div>{{ isFetching ? 'Updating...' : '' }}</div>
+  </template>
+  <VueQueryDevtools />
+</template>
diff --git a/examples/vue/simple/src/main.ts b/examples/vue/simple/src/main.ts
@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import { VueQueryPlugin } from '@tanstack/vue-query'
+
+import App from './App.vue'
+
+createApp(App).use(VueQueryPlugin).mount('#app')
diff --git a/examples/vue/simple/src/shims-vue.d.ts b/examples/vue/simple/src/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/examples/vue/simple/src/types.d.ts b/examples/vue/simple/src/types.d.ts
@@ -0,0 +1,6 @@
+export interface Post {
+  userId: number
+  id: number
+  title: string
+  body: string
+}
diff --git a/examples/vue/simple/tsconfig.json b/examples/vue/simple/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
+}
diff --git a/examples/vue/simple/vite.config.ts b/examples/vue/simple/vite.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  optimizeDeps: {
+    exclude: ['@tanstack/vue-query', 'vue-demi'],
+  },
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml