Making a global server connection in vue 3

[britisharmy]

I want to make a connection to typesense server and pass the searchClient to all my widgets in other components

import TypesenseInstantSearchAdapter from "typesense-instantsearch-adapter"; 
 
 const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
  server: {
    apiKey: "", 
    nodes: [
      {
        host: "example.com",
        path: "", 
        port: "8108",
        protocol: "https",
      },
    ],
    cacheSearchResultsForSeconds: 2 * 60, 
  },

  additionalSearchParameters: {
    query_by: "title,region,location,search_data"
  },
});
const searchClient = typesenseInstantsearchAdapter.searchClient;



<ais-instant-search :search-client="searchClient" index-name="latest_catalog" style="width:100%;padding:5px;padding-right:10px;" >



<ais-configure
  :hits-per-page.camel="hpp_number"
  :filters="car_model"
  :query="search_query"
/>

   

How can the typesense connection in my vue main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router';
import OneSignal from 'onesignal-cordova-plugin';
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import VueApexCharts from "vue3-apexcharts";

import InstantSearch from 'vue-instantsearch/vue3/es';


import { IonicVue } from '@ionic/vue';

/* Core CSS required for Ionic components to work properly */
import '@ionic/vue/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/vue/css/normalize.css';
import '@ionic/vue/css/structure.css';
import '@ionic/vue/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/vue/css/padding.css';
import '@ionic/vue/css/float-elements.css';
import '@ionic/vue/css/text-alignment.css';
import '@ionic/vue/css/text-transformation.css';
import '@ionic/vue/css/flex-utils.css';
import '@ionic/vue/css/display.css';

/* Theme variables */
import './theme/variables.css';

 

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

const app = createApp(App)
  .use(IonicVue)
  .use(router)
  .use(VueApexCharts)
  .use(InstantSearch)
  .use(pinia);
  
router.isReady().then(() => {
  app.mount('#app');
});

and access searchClient in my instant search widgets across the application?