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')
Related
Hello hope you are well!
I am creating a crud app in vuejs I have installed global vuejs, bootstrap and after that import file bootstrap in main.js.
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
But when I run command npm run serve me display error:
WARNING Compiled with 1 warning 6:43:27 PM
warning in ./node_modules/bootstrap/dist/css/bootstrap.css
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning
(2482:3) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
Do you have any idea how to solve it?
Thanks in advance!
I had the same issue, solved by running
npm install bootstrap#5.2.0-beta1
After installing bootstrap and jquery and popper.js , Nothing was displaying on my live server but no error was detected after compiling
import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'jquery/src/jquery.js'
import 'bootstrap/dist/js/bootstrap.min.js'
createApp(App).mount('#app')
<script>
import Home from './components/Home.vue'
export default {
name: 'App',
components: {
Home
}
}
</script>
You installed properly?
npm install bootstrap#4.0.0-beta popper.js jquery
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')
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({...}}
I've installed this with npm : https://github.com/hchstera/vue-charts
Doing npm install hchs-vue-charts
Which is a package to make charts in my views.
I just want to know how to import this lib from node_modules in a single component in Vuejs with the Vue-cli app (https://github.com/vuejs/vue-cli) because in their examples they do it with an instance of Vue.
Thank you
you must install module in main.js
import Vue from 'vue'
import VueCharts from 'hchs-vue-charts'
Vue.use(VueCharts)
then use component everywhere in you app, like this:
<template>
<div id="app">
<chartjs-line></chartjs-line>
</div>
</template>
other components in lib:
<chartjs-bar/>
<chartjs-horizontal-bar/>
<chartjs-radar/>
<chartjs-polar-area/>
<chartjs-pie/>
<chartjs-doughnut/>
In main.js import vue-charts and init the plugin like this:
import VueCharts from 'hchs-vue-charts'
Vue.use(VueCharts)