Custom plugins for app-wide functions

I have a bunch of methods that I use across the whole application, from various components. First of all, is this a good use-case for plug-ins?

I currently have a number of such plugins in my project, and sometimes I use the same function name across plugins. To clarify these are plugins that hold common functions that are used throughout the application, so I put them in plugins rather than duplicate them all over the place.

So for example, I have a find() method in my Customers.js plugin and a totally different find() method in my Products.js plugin.

Is there an elegant way to introduce a namespace such that I can do something like this in my components:
Vue.Customers.find() and Vue.Products.find() ?

Thanks in advance.

Took me a few days but, since no one replied to this, I thought I’d answer my own question.

First of all, yes, plug-ins are a very good use-case for common utility or helper methods being used application-wide and being called from various different components. And yes, you can split up the methods and ‘namespace’ them, such that you can have same-name methods in different ‘namespaces’.

Here’s one way to do it:

1. Create the utility js files under your plugins folder

// utils1.js
export default {
    utilMethodA: function() {
        return 'hello from utils1 methodA';
    }
};
// utils2.js
export default {
    utilMethodA: function() {
        return 'hello from utils2 methodA';
    },
    someOtherMethod: function(parm) {
      return `some other method - passed in:${parm}`;
    }
};

2. Create an install file in the same plugins folder

// plugin.js
import utils1 from './utils1';
import utils2 from './utils2';

const plugin = {};

plugin.install = function(Vue, options) {
    Vue.Utils1 = utils1;  
    Vue.Utils2 = utils2;  

}; // install

export default plugin;

3. In main.js import the plugin and use it

// add in main.js
import plugin from "./plugins/plugin";
Vue.use(plugin);

4. Call the methods as needed from any component, for example:

<!-- test.vue  -->
<template>
  <div>
    <p>{{this.someText}}</p>
    <p>{{this.someText2}}</p>      
  </div>
</template>
<script>
import Vue from "vue"; // need this to use the plugin methods
export default {
  name: "Test",
  data() {
    return {
      someText: Vue.Utils1.utilMethodA(), // call a plugin method      
      someText2: Vue.Utils2.utilMethodA(), // call a plugin method same name different utils file
    };
  },
};
</script>

Hope this is of some use to somebody.