How to set OpenSea.js provider from Onboard.js or Web3Modal.js then inject globally in Nuxt.js?

Question

Using opensea-js to build static generated storefront with Nuxt. As wallet providers seems like best options are onboard.js or Web3modal.

To share code and state across components used "inject" in Nuxt. Loaded onboard.js and opensea-js as a client plugin.

On initial load Onboard is injected globally. After user selects the Wallet, onboard subscription fires a callback function wallet: (wallet) => {...} and in its scope current provider becomes available. Then I pass the provider to OpenSeaPort and inject it globally. But it does not work, this.$seaport is not defined when called from other components (pages).

/plugins/onboardopensea.client.js

import { OpenSeaPort, Network } from "opensea-js";
import Onboard from "bnc-onboard";

export default ({ app }, inject) => {

  let seaport = {};

  const onboard = Onboard({
    dappId: "...",
    networkId: 1,
    subscriptions: {
      wallet: (wallet) => {

      seaport = new OpenSeaPort(wallet.provider, {
      networkName: Network.Main,
      apiKey: "...",
       });

      inject("seaport", seaport);
      },
    },
    walletSelect: {
      wallets: ...,
    },
)};

  inject("onboard", onboard);
}

Seems like inject function runs only once, on first load, and does run when called at later time from Onboard wallet callback function.

Answer 1

After researching more in-depth seems like "Inject" is called only once and attach to Vue instance and Nuxt app. Used "Vue.prototype.$seaport = seaport" instead which can be called at any time from Onboard Subscription callback function.