docs(vue-query): vue2, nuxt3 examples (#4384)

TanStack · Nov 11, 2022 · 58f3cec · 58f3cec
1 parent 3c1959d
commit 58f3cec
Show file tree

Hide file tree

Showing 27 changed files with 605 additions and 115 deletions.
diff --git a/examples/vue/2.6-basic/.gitignore b/examples/vue/2.6-basic/.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/2.6-basic/README.md b/examples/vue/2.6-basic/README.md
@@ -0,0 +1,6 @@
+# 2.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/2.6-basic/index.html b/examples/vue/2.6-basic/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>Vue Query Example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/vue/2.6-basic/package.json b/examples/vue/2.6-basic/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@tanstack/query-example-vue-2.6-basic",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:dev": "vite build -m development",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/vue-query": "4.13.3",
+    "@vue/composition-api": "1.4.4",
+    "vue": "2.6.14",
+    "vue-template-compiler": "2.6.14"
+  },
+  "devDependencies": {
+    "typescript": "4.8.4",
+    "vite": "3.1.0",
+    "vite-plugin-vue2": "2.0.2"
+  }
+}
diff --git a/examples/vue/2.6-basic/src/App.vue b/examples/vue/2.6-basic/src/App.vue
@@ -0,0 +1,45 @@
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api'
+
+import Posts from './Posts.vue'
+import Post from './Post.vue'
+
+export default defineComponent({
+  name: 'App',
+  components: { Posts, Post },
+  setup() {
+    const visitedPosts = ref(new Set())
+    const isVisited = (id: number) => visitedPosts.value.has(id)
+
+    const postId = ref(-1)
+    const setPostId = (id: number) => {
+      visitedPosts.value.add(id)
+      postId.value = id
+    }
+
+    return {
+      isVisited,
+      postId,
+      setPostId,
+    }
+  },
+})
+</script>
+
+<template>
+  <div>
+    <h1>Vue Query - Basic</h1>
+    <p>
+      As you visit the posts below, you will notice them in a loading state the
+      first time you load them. However, after you return to this list and click
+      on any posts you have already visited again, you will see them load
+      instantly and background refresh right before your eyes!
+      <strong>
+        (You may need to throttle your network speed to simulate longer loading
+        sequences)
+      </strong>
+    </p>
+    <Post v-if="postId > -1" :postId="postId" @setPostId="setPostId" />
+    <Posts v-else :isVisited="isVisited" @setPostId="setPostId" />
+  </div>
+</template>
diff --git a/examples/vue/2.6-basic/src/Post.vue b/examples/vue/2.6-basic/src/Post.vue
@@ -0,0 +1,53 @@
+<script lang="ts">
+import { defineComponent, toRaw } from '@vue/composition-api'
+import { useQuery } from '@tanstack/vue-query'
+
+import { Post } from './types'
+
+const fetcher = async (id: number): Promise<Post> =>
+  await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
+    (response) => response.json(),
+  )
+
+export default defineComponent({
+  name: 'PostDetails',
+  props: {
+    postId: {
+      type: Number,
+      required: true,
+    },
+  },
+  emits: ['setPostId'],
+  setup(props) {
+    const { isLoading, isError, isFetching, data, error } = useQuery(
+      ['post', props.postId],
+      () => fetcher(props.postId),
+    )
+
+    return { isLoading, isError, isFetching, data, error }
+  },
+})
+</script>
+
+<template>
+  <div>
+    <h1>Post {{ postId }}</h1>
+    <a @click="$emit('setPostId', -1)" href="#"> Back </a>
+    <div v-if="isLoading" class="update">Loading...</div>
+    <div v-else-if="isError">An error has occurred: {{ error }}</div>
+    <div v-else-if="data">
+      <h1>{{ data.title }}</h1>
+      <div>
+        <p>{{ data.body }}</p>
+      </div>
+      <div v-if="isFetching" class="update">Background Updating...</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.update {
+  font-weight: bold;
+  color: green;
+}
+</style>
diff --git a/examples/vue/2.6-basic/src/Posts.vue b/examples/vue/2.6-basic/src/Posts.vue
@@ -0,0 +1,57 @@
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+import { useQuery } from '@tanstack/vue-query'
+
+import type { Post } from './types'
+
+const fetcher = async (): Promise<Post[]> =>
+  await fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
+    response.json(),
+  )
+
+export default defineComponent({
+  name: 'PostsList',
+  props: {
+    isVisited: {
+      type: Function,
+      required: true,
+    },
+  },
+  emits: ['setPostId'],
+  setup() {
+    const { isLoading, isError, isFetching, data, error, refetch } = useQuery(
+      ['posts'],
+      fetcher,
+    )
+
+    return { isLoading, isError, isFetching, data, error, refetch }
+  },
+})
+</script>
+
+<template>
+  <div>
+    <h1>Posts</h1>
+    <div v-if="isLoading">Loading...</div>
+    <div v-else-if="isError">An error has occurred: {{ error }}</div>
+    <div v-else-if="data">
+      <ul>
+        <li v-for="item in data" :key="item.id">
+          <a
+            @click="$emit('setPostId', item.id)"
+            href="#"
+            :class="{ visited: isVisited(item.id) }"
+            >{{ item.title }}</a
+          >
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.visited {
+  font-weight: bold;
+  color: green;
+}
+</style>
diff --git a/examples/vue/2.6-basic/src/main.ts b/examples/vue/2.6-basic/src/main.ts
@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import VueCompositionApi, { createApp, h } from '@vue/composition-api'
+import { VueQueryPlugin } from '@tanstack/vue-query'
+
+import App from './App.vue'
+
+Vue.use(VueCompositionApi)
+Vue.use(VueQueryPlugin)
+
+createApp({
+  render() {
+    return h(App)
+  },
+}).mount('#app')
diff --git a/examples/vue/2.6-basic/src/shims-vue.d.ts b/examples/vue/2.6-basic/src/shims-vue.d.ts
@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}
diff --git a/examples/vue/2.6-basic/src/types.d.ts b/examples/vue/2.6-basic/src/types.d.ts
@@ -0,0 +1,6 @@
+export interface Post {
+  userId: number
+  id: number
+  title: string
+  body: string
+}
diff --git a/examples/vue/2.6-basic/tsconfig.json b/examples/vue/2.6-basic/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/2.6-basic/vite.config.ts b/examples/vue/2.6-basic/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import { createVuePlugin } from 'vite-plugin-vue2'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [createVuePlugin()],
+})
diff --git a/examples/vue/basic/.gitignore b/examples/vue/basic/.gitignore
@@ -3,4 +3,7 @@ node_modules
 dist
 dist-ssr
 *.local
+
 package-lock.json
+yarn.lock
+pnpm-lock.yaml
diff --git a/examples/vue/basic/README.md b/examples/vue/basic/README.md
@@ -2,5 +2,5 @@
 
 To run this example:
 
-- `npm install` or `yarn`
-- `npm run dev` or `yarn dev`
+- `npm install` or `yarn` or `pnpm i`
+- `npm run dev` or `yarn dev` or `pnpm dev`
diff --git a/examples/vue/basic/package.json b/examples/vue/basic/package.json
@@ -8,12 +8,12 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "vue": "3.2.39",
-    "@tanstack/vue-query": "^4.13.2"
+    "vue": "^3.2.41",
+    "@tanstack/vue-query": "^4.13.3"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "3.1.0",
-    "typescript": "4.8.4",
-    "vite": "3.1.4"
+    "@vitejs/plugin-vue": "^3.1.2",
+    "typescript": "^4.8.4",
+    "vite": "^3.1.8"
   }
 }
diff --git a/examples/vue/basic/src/Posts.vue b/examples/vue/basic/src/Posts.vue
@@ -2,7 +2,7 @@
 import { defineComponent } from "vue";
 import { useQuery } from "@tanstack/vue-query";
 
-import { Post } from "./types";
+import type { Post } from "./types";
 
 const fetcher = async (): Promise<Post[]> =>
   await fetch("https://jsonplaceholder.typicode.com/posts").then((response) =>

diff --git a/examples/vue/basic/tsconfig.json b/examples/vue/basic/tsconfig.json
@@ -11,5 +11,5 @@
     "lib": ["esnext", "dom"],
     "types": ["vite/client"]
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
 }
diff --git a/examples/vue/basic/vite.config.ts b/examples/vue/basic/vite.config.ts
@@ -1,10 +1,10 @@
 import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
+import createVuePlugin from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [createVuePlugin()],
   optimizeDeps: {
-    exclude: ["vue-query", "vue-demi"],
+    exclude: ["@tanstack/vue-query", "vue-demi"],
   },
 });
diff --git a/examples/vue/nuxt3/.gitignore b/examples/vue/nuxt3/.gitignore
@@ -0,0 +1,10 @@
+node_modules
+*.log
+.nuxt
+nuxt.d.ts
+.output
+.env
+
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
diff --git a/examples/vue/nuxt3/README.md b/examples/vue/nuxt3/README.md
@@ -0,0 +1,29 @@
+# Nuxt 3 Minimal Starter
+
+We recommend to look at the [documentation](https://v3.nuxtjs.org).
+
+## Setup
+
+Make sure to install the dependencies
+
+```bash
+yarn install
+```
+
+## Development
+
+Start the development server on http://localhost:3000
+
+```bash
+yarn dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+yarn build
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment).
diff --git a/examples/vue/nuxt3/app.vue b/examples/vue/nuxt3/app.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>{{ data }}</div>
+</template>
+
+<script setup lang="ts">
+import { useQuery } from "@tanstack/vue-query";
+
+const fetcher = async () =>
+  await fetch("https://jsonplaceholder.typicode.com/posts").then((response) =>
+    response.json()
+  );
+
+const { data, suspense } = useQuery(["test"], fetcher);
+
+await suspense();
+</script>
diff --git a/examples/vue/nuxt3/nuxt.config.ts b/examples/vue/nuxt3/nuxt.config.ts
@@ -0,0 +1,4 @@
+import { defineNuxtConfig } from "nuxt/config";
+
+// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
+export default defineNuxtConfig({});