Globally-available mixin in VueJS

Question

I'm trying to create a mixin that's globally available, but not automatically injected into every component. i.e. i do NOT want this: Vue.mixin({...});

I set up the project according to these instructions. This is my project structure. I also have assets/js/mixins.js file in there containing my mixins.

I would like to be able to do this in my individual .vue files (many of my components use myMixin but not all of them):

<script>
export default {
    mixins:[myMixin],
    data:{....}
}
</script>
<template>
  <!-- some template code -->
</template>

So far the only way to do that is to add this line to the top of every component that needs it:

import {myMixin} from './assets/js/mixins.js"

but is there a way to do this once and have myMixin variable available globally? I've tried including it in main.js and in app.vue but I still get "myMixin is not defined" error if I try to use myMixin in any of the child components.

Or is there another way to register a mixin that doesn't require me typing the path to the mixins.js file in each component?

Detainer

This is not a good idea. One of the reasons to use a bundler and modules is to prevent using globals. The price we pay is writing import statements, and for good reason. You always know where your modules dependencies come from, instead of having to guess where you instroduced this global or that one. – Gunstock

Answer 1

I would suggest setting your mixin up as a plugin. To do that, wrap it within an function call install and export the install function. Then, wherever your instantiate your app, you can simply do Vue.use(yourMixin):

Docs:

https://vuejs.org/guide/plugins.html

http://vuejs.org/api/#Vue-mixin

Example:

//- build your mixin
const mixin = {
  // do something
}

//- export it as a plugin
export default {
  install (Vue, options) {
    Vue.mixin(mixin)
  }
}

//- make it globally available
import myMixin from './myMixin'
Vue.use(myMixin)

Vue.use calls in the install fn(), so all subsequent Vues (or all if none have yet been created) have the mixin functionality

Careful of namespace clashes on globally available mixins (!)

Kazmirci

I'm not sure if this used to work, as I notice this answer's from 2016, but it doesn't seem to do the trick anymore. (Currently using Vue version 2.6.14) It seems the above still injects my mixins globally to all components. Instead, just like in the question, I just like to be able to call the mixin without importing it – Driftage

Answer 2

A couple of ideas:

1. In main.js you can declare window.myMixin = {...}, which I believe will make it available in any component loaded after that.

edit: this is even better if you use this.myMixin, as this will refer to the global scope. That way you aren't depending on window existing, so it could be used in more environments

2. To not have to declare the full path in each file, you could create the mixin as a local NPM module as per Installing a local module using npm?. Then you could just import myMixin from 'myMixin'. This would be the more proper way to do it I think, that way you're still loading dependencies in each component, just with some shorthand.

Bidle

Answer 3

Here is the correct way to register a mixin globally in app.js

 Vue.mixin(myMixin);

Attaway

i literally said that's not what I want in the 2nd line of my question... – Detainer

anyway, this helped me alot... +1 – Purim