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.
Related
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>
I'm new to svelte and I am trying to use an installed node module in my dependancies called momentum-slider. In the script tags of my svelte component I have:
import MomentumSlider from "../../node_modules/momentum-slider";
let slider = new MomentumSlider({
el: ".ms-container",
});
In my component's html markup I have the suggested markup as shown in the tutorial at https://scotch.io/tutorials/building-a-fancy-countdown-timer-with-momentumsliderjs
However, I am getting a typeError in the browser console:
I am new to development in general and I am not sure if this is a problem with momentum-slider or an error on my part. Any insights would be much appreciated.
Not sure how to use this library but you should take care of 2 things. First import your package like the following:
import MomentumSlider from "momentum-slider";
Second you need to initialise the MomentumSlider class when the component is mounted using onMount:
import { onMount } from "svelte";
import MomentumSlider from "momentum-slider";
let slider;
onMount(() => {
slider = new MomentumSlider({
el: ".ms-container"
});
});
If you have installed the package properly: npm install momentum-slider
the package is listed in your package.json.
When this fits, you just have to import:
import MomentumSlider from "momentum-slider";
I have a Vue 2 web app that uses AWS Amplify. I have another app almost exactly like it in every way and it works fine, but for some reason I cannot get this one to work in production.
Locally in dev, everything works just fine.
When I build and launch it with Express, it doesn't load the website. Only when I remove "Amplify.configure(awsconfig);" from src/main.js does it load, but, of course, none of the AWS related functionality (API calls) work.
I get the following error on the console:
Uncaught TypeError: at.a is undefined
56d7 main.js:12
Webpack 6
At main.js line 12 is "Amplify.configure(awsconfig);"
/* eslint-disable */
import Vue from "vue";
import App from "./App.vue";
import router from "./router.js";
import Amplify from "aws-amplify";
// Material plugins
import MaterialKit from "./plugins/material-kit";
import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);
Vue.config.productionTip = false;
Vue.use(MaterialKit);
new Vue({
router,
render: h => h(App)
}).$mount("#app");
The site is very simple and is set up just like my other one that works, so this is very confusing.
Any idea what the issue could be? Let me know if you need any other code snippets.
Where I import Amplify at the top, it shouldn't be
import Amplify from "aws-amplify";
but instead
import { Amplify } from "aws-amplify";
This is strange because my other project does the first version and works fine.
I have a question regarding importing an anime.js into my vue project. I am using vue cli. How do I include animejs to my project? I tried it this way:
import anime from 'animejs'
Vue.use(anime);
but I get an error in the console that says:
Uncaught TypeError: a.hasOwnProperty is not a function. . .
can you guys help me?
Vue.use() is used only for plugins designed for Vue.js. You can't simply add a library there, it won't work.
My suggestion is that you create that plugin and use it on your project to make anime.js acessible everywhere.
You could do it like this:
//vue-anime.js
import anime from 'animejs';
const VueAnime = {
install (Vue, options) {
Vue.prototype.$animeJS = anime;
}
}
export default VueAnime
Then later
import VueAnime from './vue-anime';
Vue.use(VueAnime);
Now every Vue component will be able to use anime acessing this.$animeJS.
Or simply -
import Vue from "vue";
import anime from 'animejs/lib/anime.min.js';
Vue.prototype.$anime = anime;
Then this.$anime in all components
#Phiter's answer looked good at first, but I wasn't able to get it to work in my vue-cli 3 environment. The below code worked though, so I think it may work for you. This is just a simple way to install an external library into your Vue app and expose it through a prototype:
// animejs.js
import anime from 'animejs'
const install = (Vue, options) => {
Vue.prototype.$animejs = anime
}
export default install
// Then, in your main.js (at least for me)
import VueAnime from './animejs'
Vue.use(VueAnime)
Now, when you need to access the library, just use this.$animejs in your project.
or simply like this in main.js after npm install:
import anime from 'animejs';
Object.defineProperty(Vue.prototype, '$anime', { value: anime });
then use this.$anime tu use it.
To use AnimeJS globally in Vue 3 project, just create a plugin (plugins/anime.js):
import anime from 'animejs';
export default {
install(app, options) {
app.config.globalProperties.$anime = anime;
},
};
Then include it (main.js or elsewhere):
import VueAnime from './plugins/anime';
createApp(App)
.use(VueAnime)
.mount('#app');
And now, it's accessible everywhere by this.$anime.
Please notice that a minor change from the previous version is installing the plugin for Vue 3.
I'm trying to use an ajax request by vue-resource to fill my data in vuejs.
But when I require the vue-resource returns in console this message:
Uncaught TypeError: Cannot redefine property: $url
The error occurs in code:
var Vue = require('vue');
Vue.use(require('vue-resource'));
It happens because you are calling the vue-resource twice!
As I know you are using Laravel + Vue + Vue Resource + Vueify + Browserify (sorry guys, I don't have enough reputation to add a comment on his question so I asked him through other way) make sure your code is like that:
main.js
'use strict';
import Vue from 'vue';
import VueResource from 'vue-resource';
import TrainingsList from './components/trainings/List.vue';
Vue.use(VueResource);
new Vue({
el: 'body',
});
As you are importing the VueResource through your main.js:
import VueResource from 'vue-resource';
BE SURE it's not on your gulpfile.js. The code bellow is your problem as you are importing Vuejs by Browserify and compiling through gulp
mix.scripts([
'/../../../node_modules/vue/vue.js',
'/../../../node_modules/vue-resource/vue-resource.js',
], 'public/js/scripts.js');
mix.browserify('main.js');
Everything you need to do is remove your vue and vue-resource from the gulpfile and your problem goes away!