kitten.sh
1# With Vue 3
2
3<p>
4 <a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-vue3">
5 <img
6 alt="Open in StackBlitz"
7 src="https://img.shields.io/badge/open_in_stackblitz-1269D3?logo=stackblitz&style=for-the-badge"
8 />
9 </a>
10 <a href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-vue3">
11 <img
12 alt="Open in CodeSandbox"
13 src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox&style=for-the-badge"
14 />
15 </a>
16</p>
17
18This example shows `@urql/vue` in use with Vue 3, as explained on the ["Vue" page of the "Basics"
19documentation.](https://formidable.com/open-source/urql/docs/basics/vue/)
20
21To run this example install dependencies and run the `start` script:
22
23```sh
24yarn install
25yarn run start
26# or
27npm install
28npm run start
29```
30
31This example contains:
32
33- The `@urql/vue` bindings with a client set up in [`src/App.vue`](src/App.vue)
34- A suspense loading boundary in the `App` component in [`src/App.vue`](src/App.vue)
35- A query for pokémon in [`src/PokemonList.vue`](src/pages/PokemonList.vue)