Vue Use function for module configuration without createApp() function? Nuxt3

Question

In the following code, is there a Vue function that I can use to get the same effect as app.use(UseWagmiPlugin, config); without importing './app.vue and using createApp()? (Link to github docs here: https://github.com/unicape/use-wagmi#documentation)

import { UseWagmiPlugin, createConfig, sepolia } from 'use-wagmi'
import { createPublicClient, http } from 'viem'
import App from './app.vue'

const config = createConfig({
  autoConnect: true,
  publicClient: createPublicClient({
    chain: sepolia,
    transport: http(),
  }),
})

const app = createApp(App);
app.use(UseWagmiPlugin, config);
app.mount('#app');

I know nuxt3 doesn't need routing like this (the 'use-wagmi' .readme seems to be for a straight vue.js app) and as far as I can see there isn't a glaringly obvious reason that I should need to and that the use-wagmi module shouldn't be working but it doesn't, the error message says that I have to use useConfig with UseWagmiPlugin. And using just import statements for 'wagmi' breaks my Nuxt app.

I have roamed around all the best forums and discords and I can't find anyone who's posted a good answer for this situation. Straight ethers.js has not been successful with vue either and I think this is a ssr/client/websocket issue, 'wagmi' is react based and the 'use-wagmi' module is a roll out specifically for nuxt so I feel like I'm missing something seemingly simple. Any suggestions for any of these issues would be greatly appreciated!

Answer 1

Nuxt plugins are generally expected to do the same thing as regular Vue plugins but with some Nuxt-specific functionality. But it can be seen in the example that custom Nuxt plugin also needs to be used to install the plugin to Vue instance in addition to @use-wagmi/nuxt plugin:

export default defineNuxtPlugin(nuxtApp => {
  ...
  nuxtApp.vueApp.use(UseWagmiPlugin, config)
})