Navigating with Nuxt/Vue.js

Is there anyone who has successfully integrated Paddle with Nuxt? I am attempting to incorporate it into a Nuxt app page (component):

<script src="https://cdn.paddle.com/paddle/paddle.js"></script>
<script type="text/javascript">
    Paddle.Setup({ vendor: 1234567 });
</script>

I have made several unsuccessful attempts.

  1. Using NPM with paddle-sdk

https://www.npmjs.com/package/paddle-sdk

The dependencies are outdated and do not work in a modern project. When trying to install npm i --save paddle-sdk, I encounter the following errors. Some of these dependencies are not available through npm:

 WARN  in ./node_modules/paddle-sdk/node_modules/keyv/src/index.js                                                                    friendly-errors 09:02:21

Critical dependency: the request of a dependency is an expression                                                                     friendly-errors 09:02:21
                                                                                                                                      friendly-errors 09:02:21

 ERROR  Failed to compile with 4 errors                                                                                               friendly-errors 09:02:21

These dependencies were not found:                                                                                                    friendly-errors 09:02:21
                                                                                                                                      friendly-errors 09:02:21
* dns in ./node_modules/cacheable-lookup/index.js                                                                                     friendly-errors 09:02:21
* fs in ./node_modules/paddle-sdk/node_modules/got/dist/source/request-as-event-emitter.js, ./node_modules/paddle-sdk/node_modules/got/dist/source/utils/get-body-size.js
* net in ./node_modules/paddle-sdk/node_modules/got/dist/source/utils/timed-out.js                                                    friendly-errors 09:02:21
                                                                                                                                      friendly-errors 09:02:21
To install them, you can run: npm install --save dns fs net                                                                           friendly-errors 09:02:21
  1. Trying Nuxt Plugins

https://nuxtjs.org/docs/2.x/directory-structure/plugins/

It seems impossible to create a nuxt plugin with an external (third party) script, only local scripts in the plugins directory. According to Paddle's website, they advise against self-hosting Paddle.js as it may prevent you from receiving updates and new features.

  1. Utilizing the Head method

I have managed to include the script using the head method within the page, but I cannot execute methods from the script on the nuxt page. In other words, this works:

<script src="https://cdn.paddle.com/paddle/paddle.js"></script>

But this does not:

<script type="text/javascript">
    Paddle.Setup({ vendor: 1234567 });
</script>

Below is the head portion of my .vue file:

 head: {
    script: [
      {
        hid: 'Paddle',
        src: 'https://cdn.paddle.com/paddle/paddle.js',
        async: true,
        defer: false
      }
    ]
  },

Has anyone found a solution or alternative approach?

javascriptvue.jsvue-componentnuxt.jspaddle-paddle

Answer №1

To recreate your issue, I included the script in nuxt.config.js:

head: {
    script: [{
        src: 'https://cdn.paddle.com/paddle/paddle.js',
    }]
}

I then implemented it on my page:

mounted() {
    Paddle.Setup({ vendor: 1234567 });
}

As expected, the result was 

You must specify a valid Paddle Vendor ID
.

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

This TypeScript error occurs when the props are not compatible and cannot be assigned to

Hello fellow Internet dwellers! I am a novice in the world of coding and TypeScript, seeking some assistance here. I am attempting to extract an array of objects from props, transform it into a new object with specific information, and then return it - ho ...

javascriptreactjstypescriptredux-thunk

What is the best way to clear a dynamically populated form using ajax?

Is there a way to clear a form that has been loaded via ajax using only JavaScript or jQuery? I attempted document.forms[0].reset(); and $('#new-staff-form')[0].reset();, but both resulted in an undefined error. Update <div class="box col-md ...

javascriptjqueryajaxformsreset

Excluding /build/ path from the URL in Laravel Vue 3

I am relatively new to Laravel and English is not my primary language, so please forgive any grammar mistakes. My project consists of a Laravel API with a Vue front-end. The Laravel web routing directs all traffic to a single blade file that contains the V ...

laravelvue.jsroutes

Images failing to load in jQuery Colorbox plugin

I am having an issue with the Color Box jQuery plugin. You can find more information about the plugin here: Here is the HTML code I am using: <center> <div class='images'> <a class="group1" href="http://placehold.it/ ...

javascriptjquerycolorbox

Is there a way to integrate Prettify with Blogger/BlogSpot?

I am currently utilizing blogger.com as a platform to showcase programming texts and I am interested in incorporating Prettify (similar to Stack Overflow) to enhance the appearance of my code samples. What is the best method for installing the Prettify sc ...

javascriptbloggershared-hostingprettify

Modification of file types (HTML input[type=file])

Is it feasible to generate a new file of a specific type from the currently uploaded file in the input? After uploading a file, I attempted to modify its type directly within an onChange event but received an error stating that it is a read-only property ...

javascripthtmlreactjs

Is it possible to leverage specific client-side Javascript APIs on the server-side?

Exploring APIs designed for web browsers that require their .js code to return audio streams. In a broader sense, these APIs provide byte streams (such as audio) for playback in the browser. Is it possible to use these APIs in server-side Javascript frame ...

javascriptnode.jshtmlbrowserhtml5-audio

Tips for setting up a cleanup function in useEffect when making API calls within a context provider

Looking to showcase a list of products categorized and fetched from an API? Check out the code snippet below: const API = "https://dummyjson.com/products"; const ProductsList = () => { const { cate } = useParams(); //retrieving category fro ...

javascriptreactjs

The NavLink in ReactJS is currently active

I am looking to understand how I can manage the className of a Navlink in React so that when the current path is X, the NavLink has the active class. In the past, I have accomplished this using Laravel and simple bootstrap, but I am unsure of how to achiev ...

javascriptcsstwitter-bootstrapreactjsreactstrap

Encountering a routing issue following the integration of Bootstrap

Embarking on a "Hack this site" project for fun, but ran into a routing error after incorporating the bootstrap gem and jquery. app/assets/stylesheets/Application.scss @import "bootstrap"; app/assets/javascripts/Application.js //= require jquery3 //= r ...

javascriptjqueryruby-on-railsrubybootstrap-4

Error: The function `map` cannot be applied to this.props.comments

I am new to coding in React and have been trying to create a comment box. However, I keep encountering errors such as TypeError: this.props.comments.map is not a function and Uncaught TypeError: comments.concat is not a function. I am feeling lost and conf ...

javascriptjqueryreactjs

Listening for events from an iframe can be achieved using a jQuery event listener on the parent element. However, transitioning to using

I'm exploring various methods to attach event listeners for custom events from an iFrame. While I can effectively listen to events from the iFrame using jQuery, I seem to face difficulties achieving the same with plain JavaScript code. I would greatl ...

javascriptjqueryhtmliframe

Stripes: Utilizing Table Pagination in HTML on a JSP Page

I'm currently utilizing the stripes java framework and have a jsp page that looks like this: <table id="mlTable" style=""> <col width="200"> <col width="250"> <thead> <tr> <th align="c ...

javascriptjqueryajaxjspstripes

Vim: Turn off autocomplete when using insert mode key bindings

I've set up a mapping in insert mode to automatically indent brackets: inoremap [;<CR> [<CR>];<Esc>O<Tab> When I use it, the result looks like this (the pipe character represents the cursor): const a = [ | ]; Now, I want ...

javascriptvim

What is the best way to send a selected value from a dropdown in a Jade template to a REST API in a Node.js application

I am working with a Jade template that includes two dropdown menus and a Load button. The goal is to send the selected values from these dropdowns to my Node API when the user clicks on the Load button. Here's the code I have been trying: extends lay ...

javascriptnode.jspug

Trouble concealing tab using slideUp function in Jquery

Whenever I click on the 'a' tag, it displays additional HTML content (list) that is controlled by generic JS code for tabs. However, I want to hide the list when I click on the "Title" link again. What can I do to achieve this? You can view a de ...

javascriptjqueryhtmlcss

Code functioning flawlessly on JSFiddle, but encountering errors on Chrome and IE

I recently implemented some JavaScript code to add a sliding animation effect to the login form that appears with an accompanying picture. After testing the code on JS Fiddle, everything worked perfectly. However, upon copying and pasting the same code in ...

javascripthtmlcssjsfiddle

How to Troubleshoot VueJS Component Render Issues After Importing/Calling Components

In one of my projects, I successfully implemented a file uploader component using import and component statements. import fileUploader from '../common/FileUploader.vue'; Vue.component('file-uploader', fileUploader); This implementation ...

javascriptvue.jsvue-component

An HTML attribute that evaluates to true if a condition is met

In my ng-repeat, each repeated item contains an input box where autofocus is set. This causes autofocus to be applied to all items, but in iOS, there's a bug that auto focuses on the last input box instead of the first one. To fix this issue, I need ...

javascriptangularjs

Traversing through data stored in a variable (JSON object)

Does anyone know how to loop through JSON data inside a variable? For example: var data = { $.each(data, function(i, item) { console.log(data[i].PageName); });​ ...

javascriptjson