How can I append an attribute to minified JS script tags within Nuxt?

Our app has a feature that minifies all necessary JS files. The process of how Nuxt minifies the JS scripts when the app loads inside the <head> looks something like this:

<script src="/_nuxt/cc2978d89512be6a8374.js" type="text/javascript"></script>

I'm wondering, is there a way to add an attribute to this file? Essentially transforming that line into:

<script someAttribute src="/_nuxt/cc2978d89512be6a8374.js" type="text/javascript"></script>

I've explored the nuxt.config.js but couldn't figure out how to add it. I also searched through the Nuxt documentation and didn't find anything relevant, so any assistance would be highly appreciated. Thank you in advance!

javascriptvue.jscompilationnuxt.js

Answer №1

How about this solution?

  var elements = document.querySelectorAll('elements');
  var i = 0;
  while (i<elements.length) {
    if (elements[i].src == '/_nuxt/abcdef123456.js') {
      elements[i].setAttribute('PROPERTY', 'ATTRIBUTE');
    }
    i++;
  }

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

Utilize the power of both $push and save functions in MongoDB for efficient

While developing my pet application, I encountered a problem. I am using nodejs and the mongojs library to interact with MongoDB. The code I wrote goes like this: db.users.findOne({_id: ObjectId(id)}, function (err, doc) { if (err) { res.sta ...

javascriptnode.jsmongodb

iOS device experiencing issue with resolving promise after attempting to signInWithEmailAndPassword using Ionic, Vue, and Firebase

I've been struggling with this issue for a while now and have reached a point where I am unable to find a solution on my own. Therefore, I have decided to reach out and ask for help by posting my own question. In my Ionic 7 Vue application, I am usin ...

javascriptiosvue.jsionic-frameworkfirebase-authentication

Having trouble scrolling with Selenium WebDriver and JavaScript Executor

Can you help me locate and click on the 5th element in this list? The following is a list of all the rooms stored: @FindBy(xpath="//p[@class='css-6v9gpl-Text eczcs4p0']") List<WebElement> placeListings; Code to click on t ...

javascriptjavaseleniumwebdriver

Unable to set values to an array of objects in JavaScript

Currently, I am facing an issue in my node.js project where I am unable to assign values to an array of objects. This problem has occurred before, but I just can't seem to figure out the root cause. My suspicion is that it might be related to variable ...

javascriptnode.js

Sort array of objects alphabetically and move objects with value to the beginning

I have a dataset that consists of different arrays of objects. When I log myData, the output looks something like this: [ { name: 'Cdb', image: 'xxx', coll: 'xxx' }, { name: 'Bcd', image: &a ...

javascriptarrayssortingobject

I seem to be having trouble getting the home page to display properly in the app, even though I believe my code is correct. I would greatly appreciate any help in identifying the mistake

I have been struggling to render the HomePage using react Router for the past two days. I would greatly appreciate any support you can provide. Despite my numerous attempts, I have been unable to solve this problem. I even tried tools like chatgpt but al ...

javascripthtmlreactjsrenderingrouter

Remove dynamically inserted list item using a button

I have dynamically created an unordered list (<ul>) that adds list items (<li>) when a button is clicked, along with a remove button. Initially, the default list item should not contain a remove button so I added it in the script. SCRIPT $(d ...

javascriptjqueryhtml

Websocket item deletion protocol

I am currently in the process of setting up a WebSocket client to showcase a synchronized list of items that mirror the server's state. My backend is powered by Spring, while my front-end utilizes AngularJS. I have scoured through numerous examples, a ...

javascriptangularjswebsocketstompspring-websocket

Utilizing bootstrap's switch feature with the power of AJAX

As I am still new to web application development, I kindly request some leniency in your feedback. My dilemma lies in binding the Bootstrap "switch" to a JavaScript function that triggers an AJAX request to update a database record. Below is my attempt: ...

javascriptphpjqueryajax

Unlocking Global Opportunities with Stencil for Internationalization

Hi there, I've been attempting to implement Internationalization in my stencil project but unfortunately, it's not working as expected. I'm not sure what's causing the issue, and all I'm seeing is a 404 error. I followed these arti ...

javascripttypescriptfrontendinternationalizationstenciljs

Adding Labels to Doughnut Charts in React using Chart.js 2.0

Currently, I'm exploring the world of data visualizations using react, react-chartjs-2, and chart.js version 2.2.1. While searching for a solution to my inquiry, I came across a potentially relevant answer on this link (specifically check out the upda ...

javascriptreactjschart.jsreact-chartjs

"Exploring the incredible powers of Ionic2, Angular2, HTTP requests, and

Despite all the research I've done on observables, I still struggle to grasp how they function. The HTTP request code snippet is as follows: import { Component, OnInit, Injectable } from '@angular/core'; import { Http, Response, Headers, R ...

javascriptangulartypescriptionic2observable

Php/JavaScript Error: Identifier Not Found

I've double-checked my code multiple times, but it still doesn't seem to be working properly. When the PHP runs, the browser console displays the following error: Uncaught SyntaxError: Unexpected identifier. I'm not sure if this is a si ...

javascriptphpcsshtmlbootstrap-4

Integrating external components with Vue 3 and Vite

It seems like I'm encountering difficulties with loading an external UMD component in Vue. I am attempting to achieve something similar to what is discussed in Vue 3 external component/plugin loading in runtime This method worked well for me with V ...

vue.js

Observing Firebase data retrieval in an AngularJS application

Currently, I am developing an Angular application integrated with Firebase, and one of the features I'm working on is a one-to-one chat system. My goal is to check if a chat room already exists between the user using the application and the person the ...

javascriptangularjsfirebaseangularfire

Flask static serving causes Vue app to not render

Currently, I am in the process of developing a basic web application utilizing Flask for the backend and Vue for the client side. Here is an overview of my folder structure: . ├── client/ │ ├── dist/ │ │ ├── css/ │ │ ...

pythonvue.jsflaskvuejs3

Guidelines for Naming Data Attribute Values in JavaScript

When it comes to the Data Attribute Value, should one use hyphens or camelCase as a convention? Hyphen Example: <input type="text" name="some_input" data-target="to-grab-input-via-javascript"> Camel Case Example <input type="text" name="some_ ...

javascriptjqueryhtml

What is the best way to conceal all lists except for the one that has been chosen?

Looking to enhance my sortable list with jQuery UI - currently it's functional, but I'd like to incorporate a dropdown menu for each item to designate the active one when clicked. Is there a way to modify the code so that upon selection, only th ...

javascriptjqueryhtmlhtml-lists

Exploring the concept of generator functions in ES6

I'm grappling with understanding JS generators and why the asynchronous operations in the example below are returning undefined. I thought that using yield was supposed to wait for asynchronous calls to finish. function getUsers(){ var users; $.aj ...

javascriptnode.jsfunctionecmascript-6

Having trouble implementing tailwind headless UI in Vue 2: Getting an error that says "Object(...) is not a function"

Attempting to use headless ui popover in my vue 2 project and encountering this error: Uncaught TypeError: Object(...) is not a function at eval (headlessui.esm.js?d511:670) at Module../node_modules/@headlessui/vue/dist/headlessui.esm.js (chunk-ven ...

vue.jsvuejs2tailwind-csstailwind-ui