Currently in the process of learning app development with Vuejs. In my main.js file, I have the code for setting up Vue.js. Recently, I created a new directory called /mixins and added a file named api.js. My intention is to use this as a mixin so that every component can access a function to interact with my API. However, I am unsure about how to proceed.
This is the content of my /mixins/api.js file:
export default{
callapi() {
alert('code to call an api');
},
};
The contents of my main.js file are as follows:
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import { configRouter } from './routeconfig';
import CallAPI from './mixins/api.js';
// Registering to vue
Vue.use(VueResource);
Vue.use(VueRouter);
// Creating Router
const router = new VueRouter({
history: true,
saveScrollPosition: true,
});
// Configuring Router
configRouter(router);
// Running the App
const App = Vue.extend(
require('./components/app.vue')
);
router.start(App, '#app');
What would be the correct way to include my mixin now, ensuring that every component has access to the callapi() function?