chore: Update playgrounds

.changeset/config.json

@@ -11,5 +11,5 @@
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true
   },
-  "ignore": ["vite-vue"]
+  "ignore": ["vite-vue", "vite-vue2.6", "nuxt"]
 }

playgrounds/nuxt/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).

playgrounds/nuxt/app.vue

@@ -0,0 +1,17 @@
+<script setup>
+const { address, chainId, status } = useAccount()
+const { disconnect } = useDisconnect()
+</script>
+
+<template>
+  <div>
+    <h2>Account</h2>
+    <div>
+      account: {{ address }}
+      chainId: {{ chainId }}
+      status: {{ status }}
+    </div>
+
+    <button v-if="status !== 'disconnected'" type="button" @click="() => disconnect()">Disconnect</button>
+  </div>
+</template>

playgrounds/nuxt/nuxt.config.ts

@@ -0,0 +1,24 @@
+import inject from '@rollup/plugin-inject'
+import { defineNuxtConfig } from 'nuxt/config'
+
+// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
+export default defineNuxtConfig({
+  ssr: false,
+
+  vite: {
+    build: {
+      rollupOptions: {
+        plugins: [inject({ Buffer: ['buffer', 'Buffer'] })],
+      },
+    },
+  },
+
+  modules: [
+    [
+      '@use-wagmi/nuxt',
+      {
+        excludeImports: ['useQuery'],
+      },
+    ],
+  ],
+})

playgrounds/nuxt/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "nuxt",
+  "private": true,
+  "scripts": {
+    "dev": "nuxi dev",
+    "build": "nuxi build",
+    "start": "node .output/server/index.mjs"
+  },
+  "dependencies": {
+    "@tanstack/query-persist-client-core": "5.8.1",
+    "@tanstack/query-sync-storage-persister": "5.8.1",
+    "@tanstack/vue-query": "5.8.1",
+    "@use-wagmi/nuxt": "^2.0.0",
+    "use-wagmi": "^1.0.0",
+    "viem": "^2.0.0",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@rollup/plugin-inject": "^5.0.5",
+    "buffer": "^6.0.3",
+    "nuxt": "^3.5.2"
+  }
+}

playgrounds/nuxt/plugins/query.ts

@@ -0,0 +1,31 @@
+import { persistQueryClient } from '@tanstack/query-persist-client-core'
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
+import { VueQueryPlugin } from '@tanstack/vue-query'
+import { deserialize, serialize } from 'use-wagmi'
+
+export default defineNuxtPlugin((nuxt) => {
+  nuxt.vueApp.use(VueQueryPlugin, {
+    queryClientConfig: {
+      defaultOptions: {
+        queries: {
+          gcTime: 1_000 * 60 * 60 * 24, // 24 hours
+          networkMode: 'offlineFirst',
+          refetchOnWindowFocus: false,
+          retry: 0,
+        },
+        mutations: { networkMode: 'offlineFirst' },
+      },
+    },
+    clientPersister: (queryClient) => {
+      return persistQueryClient({
+        queryClient,
+        persister: createSyncStoragePersister({
+          key: 'vite-vue.cache',
+          serialize,
+          storage: window.localStorage,
+          deserialize,
+        }),
+      })
+    },
+  })
+})

playgrounds/nuxt/plugins/wagmi.ts

@@ -0,0 +1,29 @@
+import { http, UseWagmiPlugin, createConfig } from 'use-wagmi'
+import { celo, mainnet, optimism, sepolia } from 'use-wagmi/chains'
+import { coinbaseWallet, walletConnect } from 'use-wagmi/connectors'
+
+export default defineNuxtPlugin((nuxt) => {
+  const runtimeConfig = useRuntimeConfig()
+
+  const config = createConfig({
+    chains: [mainnet, sepolia, optimism, celo],
+    connectors: [
+      walletConnect({
+        projectId: runtimeConfig.public.VITE_WC_PROJECT_ID as string,
+      }),
+      coinbaseWallet({ appName: 'Vite Vue Playground', darkMode: true }),
+    ],
+    transports: {
+      [mainnet.id]: http(
+        'https://eth-mainnet.g.alchemy.com/v2/StF61Ht3J9nXAojZX-b21LVt9l0qDL38',
+      ),
+      [sepolia.id]: http(
+        'https://eth-sepolia.g.alchemy.com/v2/roJyEHxkj7XWg1T9wmYnxvktDodQrFAS',
+      ),
+      [optimism.id]: http(),
+      [celo.id]: http(),
+    },
+  })
+
+  nuxt.vueApp.use(UseWagmiPlugin, { config })
+})