Best way to declare an object globally in quasar v2 ?

[RejDev]

Hello everyone,
I am in the process of migrating a large application made with quasar v1 to v2, but i found some difficulties...
If you could help me please I would be very grateful to you.

what is the best way to declare an object globally :
is using boot files like this is correct ?

/src/boot/aos.ts

/* eslint-disable @typescript-eslint/no-unsafe-member-access */
import { boot } from 'quasar/wrappers';
import VueAnimate from 'vue-animate-scroll';
import * as AOS from 'aos';
import 'aos/dist/aos.css';


declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $aos: AOS.Aos;
  }
}
const Aos : AOS.Aos = AOS;

export default boot(({ app }) => {

  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
  AOS.init();

  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
  app.config.globalProperties.$aos = AOS;

  app.use(VueAnimate, { animateClass: '', activeClass: 'animated' });
});

export { Aos };

and use it like this (in view) :

import {  defineComponent  } from 'vue';
import { Aos } from 'src/boot/aos'

export default defineComponent({
  name: 'MainLayout',
  components: { EssentialLink },

setup(props, ctx) {
    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
     Aos.refresh();
}


}

thank you in advance for your help.

[dany-eudes]

I'd like to see some explanation on this subject. I'm trying to declare some similar object for vue-gapi

Maybe that could be a direction:
Create a i18n Plugin with Composition API in Vue.js 3

[RejDev]

Here is another way to do it :
js-singletons

[dany-eudes]

Thanks, @RejDev ! That's true. Singleton is always a option.

I think maybe it's possible to write a solution like this as following:

const gHelloWorldSymbol = Symbol()

export function provideMyHelloWorld(someParams) {
   
   // some code to do the job

  const myHelloWorld = ( ) =>  'hello world!'
  provide(gHelloWorldSymbol, myHelloWorld)
}

export function useMyHelloWorld) {
  const myHelloWorld = inject(gHelloWorldSymbol );
  if (!myHelloWorld ) throw new Error('No Hello World provided!!!');

  return myHelloWorld ;
} 

// somewhere in the code
import {useMyHelloWorld} from 'my-hello-world-module'

const myHelloWorld = useMyHelloWorld();

Is it Okay?

[hawkeye64]

@dany-eudes This is how I am currently doing it, which is very close to what you have:

in assets folder, create a store file(s) and symbols.js file

symbols.js

const hasSymbol = typeof Symbol === 'function'
  && typeof Symbol.toStringTag === 'symbol'

export const markdownStoreKey = hasSymbol === true
  ? Symbol('_markdown_store_')
  : '_markdown_store_'

export const themeBuilderStoreKey = hasSymbol === true
  ? Symbol('_theme-builder_store_')
  : '_theme-builder_store_'

I'll just do the markdown-store.js:

import { inject, provide, reactive } from 'vue'
import { markdownStoreKey } from './symbols.js'

export function useMarkdownStore () {
  return inject(markdownStoreKey)
}

export function provideMarkdownStore () {
  const store = {
    toc: [],
    title: 'Build Beautiful, Responsive Calendars'
  }

  provide(
    markdownStoreKey,
    process.env.SERVER === true ? store : reactive(store)
  )
}

In App.vue file:

import { provideMarkdownStore } from 'assets/markdown-store.js'
import { provideThemeBuilderStore } from 'assets/theme-builder-store.js'
.
.
.
export default defineComponent({
  name: 'App',

  setup () {
    provideMarkdownStore()
    provideThemeBuilderStore()
  }
})

and then, when I need to access the store:

import { useMarkdownStore } from 'assets/markdown-store.js'
.
.
.
  setup () {
    const store = useMarkdownStore()
.
.
.

Hope that helps anyone needing it...