CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Bhupender Keswani
Bhupender Keswani

Reputation: 1228

How to include plugins and import css file in vue js webpack

I have included plugins and their css files in main.js :-

import Vue from 'vue'
import App from './App'
import router from './router'
import 'moment'
import 'jquery'
import 'bootstrap'
import BootstrapDatePicker from 'vue-bootstrap-datetimepicker'

import vueMultiSelect from 'vue-multiselect'
import VueFormGenerator from 'vue-form-generator'

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

import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css'
import 'vue-form-generator/dist/vfg.css'

Vue.config.productionTip = false
Vue.use({vueMultiSelect, VueFormGenerator})
Vue.component(BootstrapDatePicker)
Vue.component('multiselect', vueMultiSelect.default)
Vue.component('vue-form-generator', VueFormGenerator.component)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

But I dunno if this is right way to do so. As, when i am trying to use jQuery or other variable in some component, I have to import them again

Upvotes: 0

Views: 996

Answers (1)

Nijikokun
Nijikokun

Reputation: 1524

If you want to import and use a library in Vue without having to redeclare use the Vue prototype:

Vue.prototype.$moment = require('moment')

Then inside of your Component:

method: {
  action () {
    let date = this.$moment()
  }
}

You can read more about Instance Properties here:

https://v2.vuejs.org/v2/cookbook/adding-instance-properties.html

Upvotes: 1

Related Questions