CODEWITHSUNDEEP
javascriptwebpackvuejs2
Jiawei Tan
Jiawei Tan

Reputation: 144

Organizing all additional plugins/extensions into main.js [VueJs]

Is there any way where I can include all my additional extensions such as (bootstrap.css, vue-moment, vue-axios, bootstrap-vue and etc) into main.js and register it as a global component to be used by all of the other .vue files in my components page?

As I have many pages that might need to use axios and other extensions, I do not want to include this code in every .vue page.

 import axios from "axios"

I have tried including all of the imports into main.js and added 

 Vue.use()
However some extensions like moment or axios or datetimepicker will still be required to be included in the component page for it to work properly. Else it will say that it is not defined.

For example.

Components folder - main.vue

 import axios from "axios"; <-- (I do not want to include this here)
 import moment from "moment"; <-- (I do not want to include this here)

Main.js

//I want all my extensions to be listed here and able to use throughout all of the components pages
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import moment from 'vue-moment'

Vue.use(axios, moment);  

new Vue({
   router,
   render: h => h(App)
}).$mount('#app')

Thanks!

Upvotes: 0

Views: 184

Answers (2)

Jiawei Tan
Jiawei Tan

Reputation: 144

This article explains it really well https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/

For me, I decided to go with this method.

main.js

import Vue from 'vue'
import VueAxios from 'vue-axios'
import axios from 'axios'

Vue.use(VueAxios,axios);

filename.vue - this is how I will access it

//By adding "this" in front, it seems to be working fine. this.axios({...}}

Upvotes: 0

chrfs
chrfs

Reputation: 402

Typically you can use the prototype of your Vue instance for JS libraries like moment or axios.

main.js:

import axios from 'axios'

Vue.prototype.$http = axios

Login.vue:

export default {
    mounted () {
        this.$http.get(...)
    }
}

BootstrapVue is providing a very good documentation with explanations on how to register the components and import the styles.

main.js:

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue);

App.vue:

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Upvotes: 1

Related Questions