Implementing a Custom HTML Attribute to the Script Tag in Vue JS

I have decided to switch from using Google Analytics to Plausible analytics for my website. However, I am encountering an issue with adding the Plausible script to the head of my Nuxt JS document. I have created a custom plugin to handle this, but the Vue Meta api does not seem to allow for adding custom attributes to a script tag. Specifically, I need to include a custom attribute "data-domain" in the script and I am struggling to find a solution.

Below is my custom plugin file located at ~/plugins/plausible.js:

export default ({ app: { head, router, context } }, inject) => {

 head.scripts.push({
    src: "https://plausible.io/js/plausible.js",
    async: true,
    defer: true,
    "data-domain": "jmcardle.co"
  });
};

Here is the relevant section from my nuxt.config.js file:

plugins: [{
        src: '~plugins/plausible.js',
        mode: 'client'
    }],

Any assistance would be greatly appreciated. Thank you!

javascriptvue.jsnuxt.js

Answer №1

Is vue meta not functioning correctly?

export default {
  head() {
    return {
      script: [
        {
          src:
            'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js',
          customattribute: 'customvalue',
        },
      ],
    }
  },
}

https://example.com/image.png

It's working perfectly for me

Answer №2

Vue JS users can take advantage of a helpful library known as vue-head to easily modify the head-tag on their websites.

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

Encountering Routing Issues in Express.js Following Passport.js Authentication

My authentication setup with Passport.js is pretty straightforward. After the user successfully authenticates, I redirect them to /work like this. app.post('/login', passport.authenticate('local', { successRedirect: '/ ...

javascriptnode.jsexpressroutespassport.js

The "results per page" ajax dropdown in Yii stops working after other ajax content is loaded on the page

One of the views in Yii framework is the "Patients" view, which contains several CGridViews and other elements that are loaded via ajax after the initial view has loaded. Some of these elements are nested within multiple levels of ajax-loaded divs. Within ...

javascriptjquerygridviewyii

Switching the positions of the date and month in VueJS Datepicker

Recently, I have been utilizing the datepicker component from vuejs-datepicker. However, I encountered an issue where upon form submission, the date and month switch places. For instance, 10/08/2018 (dd/MM/yyyy) eventually displays as 08/10/2018, leading ...

javascriptvue.jsdatepicker

Issue with saving cookie from Express.js backend to Nuxt.js frontend

After successfully creating an authorization server using Express.js, I encountered a problem when trying to save the access and rotating refresh tokens as signed cookies. The issue arose from having separate backend and frontend servers with different dom ...

javascriptnode.jsexpresscookiesnuxt.js

Developing Functions using MongoDB Console

When running the query db.graduates.find({student_id: '2010-01016'}).pretty(), it returns a result. Afterwards, I created a function: function findStud(name,value){ return db.graduates.find({name:value}); } However, while executing findStud("s ...

javascriptmongodbnosql

Using lodash in JavaScript to flatten a nested object structure

I'm looking to flatten a hierarchical json structure. Here is an example of my json data: { "id": "111", "name": "v5", "define": { "system": "abc", "concept": [{ "code": "y7", "concept": [{ "code": "AGG", "di ...

javascriptangularjsjsonnode.jslodash

What is the best way to create a TypeScript function similar to a 'map' in React?

I recently started learning TS and am having trouble typing this arrow function: const mapLikeGet = (obj, key) => { if (Object.prototype.hasOwnProperty.call(obj, key)) return obj[key] } ...

javascriptreactjstypescript

Save the output of a knex query to a variable

I'm struggling to assign the result of a select query using Knexjs to a variable. Here is my code: function getAllCategories() { let categories; categories = database.from("categories").select("category").then(function (rows) { for (let row of ro ...

javascriptnode.jselectronknex.js

At what point is the rendering process of ng-switch completed?

I am currently utilizing ui-router and facing a challenge in instantiating a widget that requires a DOM element specified by its id as a parameter. The specific DOM element is nested within a <div ng-switch>, and I need to ensure the widget construct ...

javascripthtmlangularjsangular-ui-routerng-switch

Troubleshooting issue: Failure in proper functionality of Jquery's slideDown

My form is divided into 3 sections, with the latter two initially hidden using CSS. When users click the next button in the first section, the second section is supposed to slide down into view. However, I'm experiencing an issue where the animation s ...

javascriptjqueryhtmlcss

Trouble with scrolling on Kendo chart while using mobile device

I am facing an issue with multiple kendo charts on my website. These charts have panning and zooming enabled, but in the mobile view, they take up 100% of the width which causes touch events to not work properly for scrolling. I attempted to attach an even ...

javascriptangularjquery-mobilekendo-uikendo-chart

Guide to shuffling an array with a simple click of a button

To simplify, I have an array that I would like to randomize by clicking a button. Once randomized, I want to display the first result from the array with another button. The array is currently randomized when opened in Chrome, and checking the results in t ...

javascriptarraysbutton

Do not allow negative values to be displayed in the text box

Plunker I need to restrict negative values from being entered into a text field. If the user tries to input a negative value, I want the text box to remain unchanged. Although I have a directive that prevents negative values from being entered, it seems ...

javascripthtmlangularjs

Tips for transferring a DotNetObjectReference to a JS DOM event

My goal is to implement JS drag & drop in Blazor, which is working well overall. However, I am facing an issue where I want to set a custom drag image during the ondragstart event. Below is a snippet of my code: <div class="some-draggable-conta ...

javascriptc#blazor

Is it possible to load the response from the $.post function, which contains GIF content, into a JavaScript Image object

How can I preload an image that the server only returns on a POST request? I want to load the image before displaying it. How can I store the result in a JavaScript object? $.post('image.php', {params: complexParamsObject}, function(result) { ...

javascriptjqueryajaximagedownload

Unable to bring in the specified export 'Directive' from a non-EcmaScript module - only the default export is accessible

I am currently working on an ionic angular project and utilizing the ng-lazyload-image plugin. However, I am encountering errors during compilation that look like this: Error: ./node_modules/ng-lazyload-image/fesm2015/ng-lazyload-image.mjs 401:10-19 Can ...

javascriptangularionic-framework

Node/Express: The $ symbol is failing to recognize the input for PORT 8080

What steps should I follow to run my PORT on 8080? Is it necessary to install any dependencies? const app = require('express')(); const PORT = 8080; app.listen( PORT, () => console.log('It's now running on http://localhost:$ ...

javascriptnode.jsexpressvisual-studio-codeserver

What is the ideal way to utilize Vue within the framework of multiple pages?

When using the default Vue CLI setup, Vue is loaded from the index.html page. To work with Vue and dynamic content on the page, everything is typically handled in the App.vue file. But what if you want to make significant layout changes to the page? How d ...

javascriptvue.js

Incorrectly colored buttons upon clicking

I am experiencing an issue with my website where the color of the container div is not changing to the correct color when a button representing a color is clicked. Instead, it seems to be displaying the next color in the array of color codes that I have se ...

javascriptjquerycss

Vue seems to be experiencing some difficulty displaying the data

I am facing an issue with loading data from firestore asynchronously. Although I can see the data in the log, Vue is only displaying the initial value before the data is loaded. I have tried calling the loading method both using beforeMount() and from a c ...

javascriptvue.jsgoogle-cloud-firestore