3

Has anyone implemented Paddle with Nuxt? Trying to run this within 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 tried three ways unsuccessfully.

  1. NPM with paddle-sdk

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

Out of data dependencies and will not build on a modern project. When installing npm i --save paddle-sdk, I get the following errors. Some of these dependencies are not available via 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. Nuxt Plugins

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

Cannot create a nuxt plugin with a remote (third party) script, only local in the plugins directory. Paddle from their website asks: "Please do not self-host Paddle.js, this will prevent you from receiving bug fixes and new features."

  1. Head method

I can implement the script in the head method within the page, but I cannot execute methods from the script within 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>

Here is my head portion of my .vue file:

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

Anyone had any luck or alternative solutions?

georgespatton2
  • 65
  • 5

1 Answers1

4

I simulate your problem, I imported the script in nuxt.config.js:

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

And use it in my page:

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

Of course, It'll output You must specify a valid Paddle Vendor ID.

Iman Shafiei
  • 1,497
  • 15
  • 21
  • This loads only on the second visit to the site, can I force it to load during the initial page load? – georgespatton2 Apr 23 '21 at 20:46
  • Do you mean that when you refresh the page, the `Paddle` variable is undefined? I tested it, and it was working. Also, maybe you want to use `defer: true` or `async: true`. See this https://www.w3schools.com/tags/att_script_defer.asp for more info. – Iman Shafiei Apr 23 '21 at 21:21
  • No, only on a refresh does the Paddle CSS and button work. – georgespatton2 Apr 25 '21 at 02:50
  • Ok, I see now. It's because we put the initiator in the `mounted()`. When do you want to `Paddle` initiate? I think you can put the initiator in a method and call it when you want. If you have more information, I'll be able to help you more. – Iman Shafiei Apr 25 '21 at 06:26
  • I moved it to beforeCreated and will see if that helps. Thank you for your assistance. – georgespatton2 Apr 26 '21 at 21:12