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!
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'
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({...}}
Related
Using a node JS yo ko command I have created a single-page application with Knockout-JS.
After that, I installed jquery packages. with the command npm install jquery
It is getting successfully installed. But now what I want to do is I want to use that jquery in my knockout.js Single page application. Is there any way or command by using which I can directly Import the Jquery library in required files?
Currently, files like Startup.js have the following code
import ko from 'knockout';
import crossroads from 'crossroads';
import hasher from 'hasher';
And I want something like
import 'jquery';
import 'bootstrap';
import 'jquery-ui';
import ko from 'knockout';
import 'knockout-projections'
import 'knockout-postbox'
import 'jquery-hotkeys'
import 'bootstrap-wysiwyg'
import 'summernote'
import 'knockout-validation'
import 'jqueryNotific8'
import 'commanJs'
import 'moment'
import 'daterangePicker'
Asking this for 2 reasons.
Avoiding manual efforts of writing a code of import libraries
And I am not sure among all files wherever I want to add import and where exactly need to put all files of Jquery.
If you want to use Jquery within your modules, you can use:
import jquery from "jquery";
Or put whatever alias you want to hold the module's default export, as in:
import $ from "jquery";
Same applies to all the other modules.
import jquery from 'jquery';
import bootstrap from 'bootstrap';
import jqueryUi from 'jquery-ui';
...
I trying to use v-mask package in vue using npm. i run the npm install v-mask as the documentation says, but where exactly I should put in code to initialization? i tried to put it in the main.js file:
import { createApp } from 'vue'
import App from './App.vue'
import VueMask from 'v-mask'
Vue.use(VueMask);
createApp(App).mount('#app')
but get an error 'Vue' is not defined. what am I doing wrong?
v-mask is built for Vue 2, so you can't use it in Vue 3 (unless you use the migration build, but that's not really intended for third party plugins).
Consider using maska, which is a masking library that supports Vue 3:
npm i -S maska
Example usage:
import { createApp } from 'vue'
import App from './App.vue'
import Maska from 'maska'
createApp(App).use(Maska).mount('#app')
demo
try to save the app in a variable and execute use for app
import { createApp } from 'vue'
import App from './App.vue'
import VueMask from 'v-mask'
const app = createApp(App)
app.use(VueMask)
app.mount('#app')
someone knows how can I include Buefy in Vue3, becuause I am doing this (main.js) but I get an error:
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';
createApp(App)
.use(store)
.use(router)
.use(Buefy)
.mount("#app");
And the error is:
Uncaught TypeError: Vue.prototype is undefined
Buefy support for Vue3 is still in the planning phase. I think that its going to a while.
https://github.com/buefy/buefy/issues/2505
As of 7 Dec 2020:
https://github.com/buefy/buefy/issues/2505#issuecomment-739899697
Btw there is a new branch and I'll try to migrate other components to show you my main idea:
Typescript
Options API
In my opinion the problem is not migrate all to Vue 3 but maintain two versions.
Vue 3 is the future but official and not official libraries and frameworks (for example Nuxt) are not ready so I don't understand the really need at the moment.
I have been using the Buefy css library with Vue 3 and the CLI framework.
I installed it with npm install and have been using it with no problem.
That is until I wanted to use the dialog.alert feature.
The example on Buefy shown says to use,
this.$Buefy.dialog.alert("My Alert Msg");
This does not work. I don't have this.$Buefy, $Buefy, or Buefy as a defined object.
So I tried to define Buefy as a global object.
The Buefy example shown says to write the following:
import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
Vue.use(Buefy)
The example above does not say where to write this, so I tried to write it in my main.js file.
But the code in that file looks like nothing that will work with the suggested code.
The code in main.js is:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/scss/app.scss'
createApp(App).use(router).mount('#app')
There is no 'Vue' to use with Vue.use(Buefy)
App.use does not work either.
I am at a loss as to how to implement a global Buefy object that will allow me to use implement features like the alert dialog.
I seems you are using vue 3 createApp method, with that, you can do this
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/scss/app.scss'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
const app=createApp(App);
app.use(router);
app.use(Buefy);
app.mount('#app')
A lot of examples use the syntax import React, { Component } from 'react'; to import React class which should be a default export in a module exported from a file with name react. However it is a rule that import statements need to have a path information like ./react in it and cannot be bare. Is webpack or some other library being used to make this work ?