In my project directory built on vue 2 , the main.js file is importing mixin but its not adding the mixin in the vue instance, However I can see all the mixin being avilable in the components, I am not understanding how importing the object is add the mixin, is This using closure in someway. kindly help.
My main.js look like this
import Vue from "vue";
const App = () => import("./App");
// Mixins
import QuoteFlowHelper from "./mixins/quote_flow_helper";
import "./mixins/number_utils";
import "./mixins/countries";
import "./mixins/coverage_amounts";
import "./mixins/customized_quote_helper";```
import "./mixins/date_utils";
import "./mixins/email_validation_methods";
import "./mixins/errors";
import "./mixins/health_period_mapper";
new Vue({
el: "#app",
mounted() {
if(!this.inIframe())
this.loadThirdPartyScripts();
},
router,
store,
i18n,
mq: {
desktop: "(min-width: 1024px)",
tablet: "(min-width: 768px) and (max-width: 1023px)",
phone: "(max-width: 767px)"
},
components: {
App
},
mixins: {
QuoteFlowHelper
},
template: "<App/>"
})
The mixin file is as shown below
import Vue from "vue";
const Countries = Vue.mixin({
methods: {
countries() {
return [
{ value: "Wallis and Futuna", label: "Wallis and Futuna" },
{ value: "Western Sahara", label: "Western Sahara" },
{ value: "Yemen", label: "Yemen" },
{ value: "Zambia", label: "Zambia" },
{ value: "Zimbabwe", label: "Zimbabwe" }
];
},
}
});
export default Countries;