Anyone know a way to insert a telephone field with a country code dropdown similar to the one in the link for vue3?
https://www.npmjs.com/package/vue-tel-input
I had tried to use the package in the link but it throws the following error in console.
Uncaught (in promise) TypeError: selfHook.bind is not a function
attempted implementation:
main.js
import { createApp } from 'vue'
import VueTelInput from 'vue-tel-input'
const app = createApp(App);
app.use(VueTelInput)
app.mount('#app');
in the App.vue I just imported it like a component using the following code:
<vue-tel-input></vue-tel-input>
Someone posted on an open issue regarding Vue3 support for the library that they have created a Vue3 version of it: https://github.com/victorybiz/vue3-tel-input
I have tried it and it seems to work fine!
This library supports Vue 3 now. https://iamstevendao.github.io/vue-tel-input/documentation/next.html
npm install vue-tel-input#next
import { createApp } from 'vue';
import App from './App.vue';
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/dist/vue-tel-input.css';
const app = createApp(App);
app.use(VueTelInput);
app.mount('#app');
...
<template>
<vue-tel-input v-model="phone"></vue-tel-input>
></template>
Related
I'm very new in nuxt and vuejs so this might be a dumb question.
I'm trying to import ref and computed to my Sidebar component but I'm getting a warning.
enter image description here
What can I do to fix that ?
this is how I tried to do it
import {ref,computed} from 'vue';
Case and problem
I´m working on a private project with Vue.js and have the following error, which occurs when I´m trying to use the FileUpload component of PrimeVue:
[Vue warn]: Property "$primevue" was accessed during render but is not defined on instance.
Trying to use FileUpload in my component:
<template>
<FileUpload name="demo[]" url="" #upload="onUpload" :multiple="true" :maxFileSize="1000000">
<template #empty>
<p>Drag and drop files to here to upload.</p>
</template>
</FileUpload>
</template>
The error only occurs, when I try to use FileUpload, if I remove it, the component works. FileUpload and PrimeVue are imported like they should, in the main.js:
import {createApp} from 'vue'
import router from "./router";
import store from "./store";
import PrimeVue from "primevue/config";
import PrimeIcons from "primevue/config";
import App from "./App";
const app = createApp(App);
app.use(
router,
PrimeVue,
PrimeIcons,
store
)
import 'primevue/resources/primevue.min.css'
import 'primeflex/primeflex.css'
import 'primeicons/primeicons.css'
import 'primevue/resources/themes/bootstrap4-dark-purple/theme.css'
import Card from "primevue/card";
import Menubar from "primevue/menubar";
import FileUpload from "primevue/fileupload";
app.component('Card', Card)
app.component('Menubar', Menubar)
app.component('FileUpload', FileUpload)
app.mount('#app')
What I tried so far
I searched this issue, but the only exact match for this error is an old closed issue on GitHub regarding the Calendar component: Issue #808. The error in this issue was caused because of the breaking change with the new PrimeVue API. This should not be my case, because it was introduced with V3.1 and I´m using V3.7.
In case the version is the problem I tested different versions of PrimeVue, like 3.1, 3.2, 3.3 but the error still shows. Thats why the actual dependencie is still the latest:
"primevue": "^3.7.0"
Maybe there is an already existing solution on SO or Google, but either my english is to bad to understand or I´m still to fresh at Vue.js to comprehend the problem.
Thanks in advance!
Your usage of app.use() is incorrect:
app.use(
router,
PrimeVue,
PrimeIcons,
store
)
app.use() takes only two arguments:
first argument: the Vue plugin
second argument: the plugin options
Also, PrimeIcons is not a plugin, so that should not be passed to app.use().
Solution
Pass each plugin individually to app.use():
app.use(router)
.use(PrimeVue)
//.use(PrimeIcons) // not a plugin
.use(store)
i have use realm sdk in vue2 with this syntax
// file scr/plugins/realm.js
import Vue from 'vue';
import {App} from 'realm-web';
Vue.prototype.realmApp = new App({id: 'artes-realm-vl12'})
//file scr/main.js
import './plugins/realm';
but in Vue3 this syntax is't working anymore can you please help me how to solve with this problem thank you
In main.js add that app as global property :
import {createApp} from 'vue'
import {App} from 'realm-web';
import app from './App.vue'
const myApp=createApp(app)
myApp.config.globalProperties.realmApp = new App({id: 'artes-realm-vl12'})
myApp.mount('#app');
I am learning Vue.js.
I have this code which runs fine :
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App).use(store).use(router)
app.mount('#app')
Now I would like to add some import, for example 'axios'. This code does not run :
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
const app = createApp(App).use(store).use(router).use(axios)
app.mount('#app')
The error is:
Uncaught RangeError: Maximum call stack size exceeded
at merge (utils.js?c532:276)
at assignValue (utils.js?c532:282)
at forEach (utils.js?c532:253)
at merge (utils.js?c532:291)
at assignValue (utils.js?c532:282)
at forEach (utils.js?c532:253)
at merge (utils.js?c532:291)
at assignValue (utils.js?c532:282)
at forEach (utils.js?c532:253)
at merge (utils.js?c532:291)
So how to add some other "use" in the main.js file ? It is certainly very basic but I am a beginner.
You're using vue 3 and axios is not a plugin (we cannot register it like app.use()) it's a javascript module that could be add to the app instance like :
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
const app = createApp(App).use(store).use(router)
app.config.globalProperties.axios=axios
app.mount('#app')
and in child component reference it like :
this.axios
Note: the code below is valid for Vue 2.x. Since version 3, some stuff has changed regarding initialization (createApp function is now required).
What I usually do in my code is the following:
import Vue from 'vue';
import axios from 'axios';
// Add it to Vue prototype (use any variable you like, preferrably prefixed with a $).
Vue.prototype.$http = axios;
// Instantiate the main vue app.
let app = new Vue({
//
});
This means that the $http object is now available in all your components using this.$http. Since it is assigned as a prototype variable, it is considered a singleton (it is re-used everywhere), so you can add any options you need to the axios variable before assigning it to Vue.prototype.$http.
Additionally:
Vue.use() is made specifically for enabling Vue plugins. That means the given parameter must use the exact syntax as described here https://v2.vuejs.org/v2/guide/plugins.html . Since axios is not a Vue plugin but just a regular JavaScript library, you cannot use it with this function.
If you want to make it especially nice (or convoluted), you can use the following syntax:
Vue.use({
install(v) {
v.prototype.$http = axios;
// Do other stuff like adding mixins etc.
}
})
This may clear up your code if you move this code to another file, so it could end up like this:
import myCustomAxiosLoader from './bootstrap/axios';
Vue.use(myCustomAxiosLoader);
I am using vue-recaptcha-v3 in a VueJS app but am immediately getting an error. My main.js looks like this:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
import { VueReCaptcha } from 'vue-recaptcha-v3'
Vue.use(VueReCaptcha, { siteKey: 'MYSITEKEY' })
Vue.use(Buefy)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Unfortunately when I hit save I get the error below (screenshot included):
Uncaught TypeError: vue_1.ref is not a function
which relates to the following piece of the vue-recaptcha-v3 package:
exports.VueReCaptcha = {
install: function (app, options) {
var isLoaded = vue_1.ref(false);
var instance = vue_1.ref(undefined);
Not sure where to go from here...
I have had the same issue, it seems the most recent package version has this obvious runtime error. However version 1.9.0 works great. So just remove the current package if you use yarn run the following (otherwise the npm equivalent):
yarn add vue-recaptcha-v3#1.9.0
vue-recaptcha-v3 master branch is now using Vue 3.
You're probably using Vue 2, so you should follow the instructions here.
If the type of the package does not influence much what you need. here's one that i use and that works for me.
Link: https://www.npmjs.com/package/vue-recaptcha
After installing you just need to import it into your form.
import VueRecaptcha from 'vue-recaptcha';
Using:
<vue-recaptcha
#expired="captchar = false"
class="mr-8"
#render="cargarCaptchar = true"
#error="captchar = false"
#verify="captchar = true"
sitekey="your code"/>
If that doesn't work, add the following tag to the page header:
<script src = "https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" defer> </script>
If you find that this is not feasible for your project. No problem, as I still think you can help other fellow beginners.