5. Global Component Composition

Activity 5.01: Building a Vue.js Application with Plugins and Reusable Components

Solution:

Perform the following steps to complete the activity:

Note

To access the code files for this activity, refer to https://packt.live/35UlWpj.

1. Install axios into the project:

   npm install --save axios

2. To inject axios as a property on this component instances, create a src/plugins/axios.js plugin file that, on install, will mean component instances have an axios property:

   import axios from 'axios'
   export default {
     install(Vue) {
       Vue.prototype.axios = axios
     }
   }

3. For the plugin to work, import and register it in src/main.js:

   // other imports
   import axiosPlugin from './plugins/axios.js'
   Vue.use(axiosPlugin)
   // other initialisation code

4. We also want to inject our API's baseUrl into all our components. We will create a plugin inline of the src/main.js file to do this:

   const...