[bug][docs] Vue Docs are not good enough & Vue Support in General is Lacking Severely

[ZachHandley]

Summary

There's not really a better way to describe it other than nobody is using the Vue docs or?

It sticks with React in a lot of the installation steps

The getAccount is incorrect, as is the useDisconnect, which literally references a react function in the composables section (see screenshot)

'Compostable'

I mean hell, this is in the Dashboard for gods sake

I can't open Swap Menu

I know there's more, I just am not going to go through the docs entirely and bash my head against the wall trying to find them

I get that you guys did some big fancy rebrand, but I am trying to migrate and it's as if you didn't even check the docs or try to use them (not from a developer of Reown's perspective) -- cause these are crap and missing so many answers.

Link to the related docs page

https://docs.reown.com/appkit/vue/core/composables

[ZachHandley]

It's kinda sad I even have to do this, but bump.

This is an entire framework you are just... ignoring?

[obumnwabude]

I confirm that Vue doesn't work out of the box. You keep seeing console errors like:

SignInButton.vue:27 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

But this is Vue and I wander what React and hooks is doing in the errors.

Even worse, you see other errors like:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'useContext')
at useContext (chunk-5DQ77UTZ.js?v=eadcb66c:1347:29)
at useConfig (wagmi.js?v=eadcb66c:1492:68)
at useDisconnect (wagmi.js?v=eadcb66c:4267:18)
at setup (SignInButton.vue:27:39)

useContext is React stuff just you @ZachHandley is saying. I was expecting Pinia stores or something is similar. Please what's the way forward?

[rtomas]

hi !

• useDisconnect is available since v1.1.7
• Quickstart for vue is wrong in cloud ... we will fix it .. thanks for reporting it.
• "I can't open Swap Menu" .. can you give us more context (packages/version) and some code snippets.

This is a place to help each other and try to improve together. I'm here to assist you and enhance our communication. :)

[rtomas]

hi @obumnwabude

Can you please share with me what would you like to improve in our docs ?

[ZachHandley]

@rtomas Please man, this is like, so tone deaf.

I know there's more, I just am not going to go through the docs entirely and bash my head against the wall trying to find them

I get that you'd like me to provide you with all instances where the Vue docs are busted, but like. Try setting up a project with Vue. Open up each of the modals. Just like, give things a try and see if you can successfully open every single modal, triggered, and setup the configuration options, and you'll see where all of the yeah just add tanstack-react type deal stuff is, and it's so evident that nobody is using Vue on the dev team. I'm happy to hop in a call with you guys and go over it or something, but like all I did was uninstall walletconnect and wagmi/viem and what not, and then install the recommended packages into the project, and try to use it.

[rtomas]

Thanks for reporting the issue. We will be working on vue docs ASAP.

Also our repository is open and you can contribute.This would be greatly appreciated.

I can transfer the Issue, so I'm closing it. You can reopen in the Docs Repository.

[obumnwabude]

Hi @rtomas

After I wrote in this issue above, I kept searching and landed on this solution. Installing @wagmi/vue and @tanstack/vue-query as the solution suggested, and configuring Vue Plugin integration both helped. But with help of my programming expertise, I figured out how to manoeuvre imports and to get it things to work.

You've closed this issue and as you rightly said, doc-related problems should be mentioned in the docs repo. But please here are my two cents.

As for what I want updated in the docs, add the @wagmi/vue and @tanstack/vue-query packages to the list of packages during installation in Vue. Also, update the code examples, ensure they work, and provide more.

Cheers.

[ZachHandley]

so like, things like this for instance, still broken. I think it's laughable a company would close this ticket, you're providing a service and doing it pathetically.

[enesozturk]

Hey @ZachHandley, following the conversation here. You're right that the docs might be a bit out of date or not really helpful at some points. Recently we've updated all our Vue examples in the repo: #3157, you can see our example setups for each adapter here: https://github.com/reown-com/appkit/tree/main/examples.

Please let me know if you still encounter any setup issues.

things like this for instance, still broken

Could you be more specific about the issues please? The issue I'm seeing in the pic is that your value for view property is not one of the options we've provided so far. For which use cases you want to trigger other views manually? We could make the other screens enable to call.

[ZachHandley]

@enesozturk a few things

1. The Vue example is the bare minimum for something to work, I am trying to read the blockchain using wagmi/tanstack alongside it, or other things that I am currently unable to do

2. Please let me know if you still encounter any setup issues.

When I show the type support missing, it's because those things do, in fact, exist. The screens I'm referring to aren't typed correctly, so the screens are busted.

When I say setup issues I mean the fact that I can rarely get wagmi and vue-tanstack to accept the WAGMI Config you guys use because the types are rarely in sync

No overload matches this call.
  Overload 1 of 2, '(plugin: Plugin<[options: WagmiPluginOptions]>, options: WagmiPluginOptions): App<any>', gave the following error.
    Type 'import("/home/zach/GitHub/myproject/webserver/node_modules/@wagmi/core/dist/types/createConfig").Config' is not assignable to type 'import("/home/zach/GitHub/myproject/webserver/node_modules/@wagmi/vue/node_modules/@wagmi/core/dist/types/createConfig").Config'.
      The types of '_internal.transports' are incompatible between these types.
        Type 'Record<number, import("/home/zach/GitHub/myproject/webserver/node_modules/@wagmi/core/dist/types/createConfig").Transport<string, Record<string, any>, import("/home/zach/GitHub/myproject/webserver/node_modules/viem/_types/types/eip1193").EIP1193RequestFn>>' is not assignable to type 'Record<number, import("/home/zach/GitHub/myproject/webserver/node_modules/@wagmi/vue/node_modules/@wagmi/core/dist/types/createConfig").Transport<string, Record<string, any>, import("/home/zach/GitHub/myproject/webserver/node_modules/viem/_types/types/eip1193").EIP1193RequestFn>>'.
          'number' index signatures are incompatible.
            Type 'import("/home/zach/GitHub/myproject/webserver/node_modules/@wagmi/core/dist/types/createConfig").Transport<string, Record<string, any>, import("/home/zach/GitHub/myproject/webserver/node_modules/viem/_types/types/eip1193").EIP1193RequestFn>' is not assignable to type 'import("/home/zach/GitHub/myproject/webserver/node_modules/@wagmi/vue/node_modules/@wagmi/core/dist/types/createConfig").Transport<string, Record<string, any>, import("/home/zach/GitHub/myproject/webserver/node_modules/viem/_types/types/eip1193").EIP1193RequestFn>'.
              Types of parameters 'params' and 'params' are incompatible.
                Type '{ chain?: import("/home/zach/GitHub/myproject/webserver/node_modules/viem/_types/types/chain").Chain | undefined; pollingInterval?: number | undefined; retryCount?: number | undefined; timeout?: number | undefined; } & { ...; }' is not assignable to type '{ chain?: import("/home/zach/GitHub/myproject/webserver/node_modules/viem/_types/types/chain").Chain | undefined; pollingInterval?: number | undefined; retryCount?: number | undefined; timeout?: number | undefined; } & { ...; }'. Two different types with this name exist, but they are unrelated.
                  Type '{ chain?: Chain | undefined; pollingInterval?: number | undefined; retryCount?: number | undefined; timeout?: number | undefined; } & { connectors?: StoreApi<Connector[]> | undefined; }' is not assignable to type '{ connectors?: StoreApi<Connector[]> | undefined; }'.
                    Types of property 'connectors' are incompatible.
                      Type 'import("/home/zach/GitHub/myproject/webserver/node_modules/@wagmi/vue/node_modules/@wagmi/core/node_modules/zustand/vanilla").StoreApi<import("/home/zach/GitHub/myproject/webserver/node_modules/@wagmi/vue/node_modules/@wagmi/core/dist/types/createConfig").Connector[]> | undefined' is not assignable to type 'import("/home/zach/GitHub/myproject/webserver/node_modules/zustand/esm/vanilla").StoreApi<import("/home/zach/GitHub/myproject/webserver/node_modules/@wagmi/core/dist/types/createConfig").Connector[]> | undefined'.
                        Property 'getInitialState' is missing in type 'import("/home/zach/GitHub/myproject/webserver/node_modules/@wagmi/vue/node_modules/@wagmi/core/node_modules/zustand/vanilla").StoreApi<import("/home/zach/GitHub/myproject/webserver/node_modules/@wagmi/vue/node_modules/@wagmi/core/dist/types/createConfig").Connector[]>' but required in type 'import("/home/zach/GitHub/myproject/webserver/node_modules/zustand/esm/vanilla").StoreApi<import("/home/zach/GitHub/myproject/webserver/node_modules/@wagmi/core/dist/types/createConfig").Connector[]>'.
  Overload 2 of 2, '(plugin: Plugin<[options: WagmiPluginOptions]>, options: [options: WagmiPluginOptions]): App<any>', gave the following error.
    Object literal may only specify known properties, and 'config' does not exist in type '[options: WagmiPluginOptions]'.ts(2769)
vanilla.d.mts(12, 5): 'getInitialState' is declared here.
plugin.d.ts(4, 5): The expected type comes from property 'config' which is declared here on type 'WagmiPluginOptions'

import { createAppKit, useAppKit } from "@reown/appkit/vue";

import { WagmiProvider } from "wagmi";
import { mainnet, sepolia } from "viem/chains";
import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";

import { WALLETCONNECT_ID } from "astro:env/client";
// import { createConfig } from "@wagmi/vue";
// import { http } from "viem";
// import { walletConnect, coinbaseWallet, injected } from "@wagmi/connectors";
// import { authConnector } from "@web3modal/wagmi";

const projectId = WALLETCONNECT_ID;
const metadata = {
  name: "ProjectName",
  description:
    "Our project name",
  url: import.meta.env.SITE,
  icons: ["ourlogo.svg"],
};

const networks = [mainnet, sepolia];

const wagmiAdapter = new WagmiAdapter({
  ssr: true,
  projectId,
  networks,
});

const modal = createAppKit({
  projectId: projectId,
  adapters: [wagmiAdapter],
  networks: [mainnet, sepolia],
  metadata: metadata,
  features: {
    swaps: true,
    onramp: true,
    email: true,
    socials: [
      "google",
      "x",
      "discord",
      "farcaster",
      "github",
      "apple",
      "facebook",
    ],
    history: true,
    analytics: true,
    allWallets: true,
  },
});

const appKit = useAppKit();
const wagmiConfig = wagmiAdapter.wagmiConfig;

export { wagmiAdapter, modal, appKit, wagmiConfig };

and then inside my ConnectWallet it doesn't even open -- you guys removed the watchAccount and other things, so I am using the AppKit to subscribe to changes

I can't open Swap view either. It does try, but it gives an error about react.