Load Vue dynamically to implement reCAPTCHA script

I am looking for a way to dynamically load a script like recaptcha specifically within the Register.Vue / login.Vue component.

<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
</script>

When I try placing the script tag directly inside my Vue files, it triggers an error:

  - Templates are meant for mapping state to UI only. Avoid including tags with side effects in your templates, such as <script>, as they will not be parsed.

Any suggestions on how to resolve this issue?

javascriptvue.jsvuejs2

Answer №1

To enhance the security of your Vue login page, you can implement the following functions:

data: {
  
  // add
  addRecaptchaWidget() {
    let captchaScript = document.createElement('script');
    captchaScript.setAttribute('async', '');
    captchaScript.setAttribute('defer', '');
    captchaScript.id = 'captchaScript';
    captchaScript.src = 'https://www.google.com/recaptcha/api.js?onload=vueCaptchaApiLoaded&render=explicit';
    captchaScript.onload = function () {
      document.getElementsByTagName('head')[0].appendChild(captchaScript);
    }
  },
  
  // delete
  deleteRecaptchaWidget() {
    let scriptElement = document.getElementById('captchaScript');
    if(scriptElement) {
      scriptElement.remove();
    }
  }

},

// your implementation ...

mounted() {
  this.addRecaptchaWidget();
},

beforeDestroy() {
  this.deleteRecaptchaWidget();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting the value for a textbox using Jquery's .val() function works, while .attr() does not have the

//unable to get it working $("#TextBoxID1").attr("value","HI Value Change") //works perfectly fine $("#TextBoxID2").val("HI Value Change") <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <input type= ...

javascriptjqueryangularjs

Steps for inserting new text in front of an element's existing text

Is there a way to insert text before the original content of an element? I know how to add text after using createTextNode, as shown in this example: $("#button").click(function() { $( ".text" ).append( document.createTextNode( " Hello" ) ); }); < ...

javascriptjqueryhtml

Angular is the best method for properly loading a webpage

Struggling to solve this issue. I have a webpage where I need to load another webpage, specifically a page from a different site, into a div. Essentially, it's like a news ticker that I want to showcase. The problem is that the URL is stored in a Mon ...

javascriptangularjsnode.js

Organizing Angular project folders with the help of Node.js and Jade

I've been exploring different folder structures to ensure scalability as my project grows. While I found some useful resources, such as this one, I'm still struggling with how to actually implement these suggestions. Currently, I've adopted ...

javascriptangularjsnode.jsexpress

What is the reason behind the state of a transition not being preserved once it has concluded?

I was interested in enhancing the basic transitions example by having an element fade out in one div while simultaneously fading in on another: new Vue({ el: '#demo', data: { show: true } }) .fade-enter-active, .fade-leave-active { ...

vue.js

Currently, I am attempting to retrieve text input through the use of AngularJS

Having trouble retrieving text input values using Angular JS? The console keeps showing undefined. <div ng-controller="favouritesController" class="col-xs-12 favList"> <input type="text" ng-model="newFav" ng-keyup= "add($event)" class="col-xs-1 ...

javascriptangularjs

What is the process of setting up Express as an API web server and integrating a custom document renderer as middleware?

I have developed a code generator and I want to be able to execute it on the server. The generator utilizes pure native ECMA6 JavaScript to render HTML markup, but it is transpiled to ES5 before runtime using Babel and WebPack. I am looking to use this on ...

javascriptnode.jsexpressecmascript-6

Match one instance of a character in a regular expression pattern while simultaneously matching two occurrences of a different character

I am attempting to create a function that can match one occurrence of a certain character and two occurrences of another character simultaneously. For instance, in the string "_Hell_o", I want to match the first underscore (_) and in the string "++Hello", ...

javascriptregex

Utilizing Repurposed Three.js Shapes

I have been experimenting with Three.js to visualize the path of a particle in a random walk. However, I encountered an issue where geometries cannot be dynamically resized so I had to come up with a workaround by removing the existing line from the scene, ...

javascriptthree.js

Can a YouTube video be triggered to play when a specific CSS style is selected?

I am searching for a method to display and play different YouTube videos based on a selected CSS style from a drop-down menu. I believe JavaScript can be utilized to detect the chosen CSS. Include the following in the html header of the page. <script ...

javascriptcsshtmlyoutubeembed

Personalize buttons using SweetAlerts 2 customization options

In order to adhere to the custom design provided to me, I am currently using SweetAlerts 2 for all dialog boxes that require confirmation or cancellation. Specifically, I require the cancel button to have a white background with teal text and a teal border ...

javascriptreactjsmaterial-uisweetalert2

create a custom function to trigger when a new item is added to a Vuejs data property

Currently, I have a Vuejs application that is relatively simple as I am still in the learning process of Vuejs. My goal is to trigger another function whenever I add or delete from a specific data property. Here is an example code snippet: data: { prici ...

vue.jsvuejs2

Is there a way to emulate synchronous behavior in JavaScript?

var routeSearch = new MyGlobal.findRoutes({ originPlaceId: search.placeInputIds.originPlaceId, destinationPlaceId: search.placeInputIds.destinationPlaceId, directionsService: search.directionsService, directionsDisplay: sear ...

javascriptasynchronous

What is the best way to trigger two functions with an 'onPress' event in React Native?

I am encountering some issues while trying to call two methods on the onPress event in the code below. How can I achieve calling one method for starting chatting and another for changing images during the onPress event? The first method is for initiating ...

javascriptandroidreactjsreact-native

Encountered an error while trying to set up the route due to Router.use() needing

Within my app.js file, I have the following code: app.use('/', require('./routes')); //old routes app.use('/api', require('./api')); Additionally, I have an api folder containing an index.js file. This is what the ...

javascriptnode.jsexpress

Retrieving Value from Dynamic Content Using jQuery `.keypress()` and `.delegate()`

I have encountered an issue with my code that is unable to retrieve the value of a specific ID on the .keypress function after using .delegate. The ID and other contents are generated dynamically through an AJAX call. $(document).delegate('.edit_ ...

javascriptphpjqueryajax

Utilize JavaScript conditions to dynamically apply styles within your web application

I am facing a challenge with managing two separate <style> tags that each contain a large number of styles and media queries. The issue is that one set of styles is intended for desktop users, while the other is meant for mobile users. When both se ...

javascripthtmlcss

Leverage the power of Angular CLI within your current project

I am currently working on a project and I have decided to utilize the angular cli generator. After installing it, I created the following .angular-cli file: { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": " ...

javascriptangularangular-cli

Initialization of an empty array in Typescript

My promises array is structured as follows: export type PromisesArray = [ Promise<IApplicant> | null, Promise<ICampaign | ICampaignLight> | null, Promise<IApplication[]> | null, Promise<IComment[]> | null, Promise<{ st ...

javascripttypescriptpromise

Removing sourceMappingURL from an Angular Universal build: A step-by-step guide

Using this repository as my foundation, I have successfully resolved most of the plugin errors except for one that continues to elude me. It's puzzling because no other plugin anticipates a .map file in an SSR build since it is intended for productio ...

javascriptangularangular-universalserver-side-rendering