Share global functions within Quasar and/or in general within Vue3

Question

I just wonder if this is the right way to share functionality (not data, for that I use stores) within an Quasar-/Vue3-app:

// boot/generic_stuff.js

import {boot} from 'quasar/wrappers'

const function_list = { /* stuff in here */ };

export default boot(async ({app}) => {
  app.provide('my_functions', function_list);
  app.provide('my_api_key', 'abc-def');
});

In my Vue-component, I do this:

<template>
  This is my key: {{ my_api_key }}
</template>

<script>
import { inject } from "vue";

export default {
  name: 'MyComponentsName',

  setup() {
    const $my_functions = inject('my_functions');
    const $my_api_key = inject('my_api_key');
    $myFunction.callToSomeFunction();

    return {   
      my_api_key: $my_api_key
    }
  }
}
</script>

Is this the way to go if I do not want to import lots of stuff, such as Axios, or functions I need within several scripts, such as filters, etc?

Answer 1

For reusable parts of your application, composables are the thing you are looking for.

In the context of Vue applications, a "composable" is a function that leverages Vue Composition API to encapsulate and reuse stateful logic.

Structure is as follows:

1. Inside a separate file:

import { ref, onMounted, onUnmounted } from 'vue'

// by convention, composable function names start with "use"
export function useSample() {
  ...
}

2. Inside your component:

<script setup>
import { useSample } from './sample.js'

const { x, y, z } = useSample()
</script>

Follow the docs for a detailed guide with best practices and naming conventions.