title: Paddle with Nuxt/Vue.js
body: <p>Has anyone implemented Paddle with Nuxt?  Trying to run this within a Nuxt app page (component):</p>
  <pre><code>&lt;script src=&quot;https://cdn.paddle.com/paddle/paddle.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
      Paddle.Setup({ vendor: 1234567 });
  &lt;/script&gt;
  </code></pre>
  <p>I have tried three ways unsuccessfully.</p>
  <ol>
  <li>NPM with paddle-sdk</li>
  </ol>
  <p><a href="https://www.npmjs.com/package/paddle-sdk" rel="nofollow noreferrer">https://www.npmjs.com/package/paddle-sdk</a></p>
  <p>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:</p>
  <pre><code> 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
  </code></pre>
  <ol start="2">
  <li>Nuxt Plugins</li>
  </ol>
  <p><a href="https://nuxtjs.org/docs/2.x/directory-structure/plugins/" rel="nofollow noreferrer">https://nuxtjs.org/docs/2.x/directory-structure/plugins/</a></p>
  <p>Cannot create a nuxt plugin with a remote (third party) script, only local in the plugins directory.  Paddle from their website asks: &quot;Please do not self-host Paddle.js, this will prevent you from receiving bug fixes and new features.&quot;</p>
  <ol start="3">
  <li>Head method</li>
  </ol>
  <p>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:</p>
  <p><code>&lt;script src=&quot;https://cdn.paddle.com/paddle/paddle.js&quot;&gt;&lt;/script&gt;</code></p>
  <p>But this does not:</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
      Paddle.Setup({ vendor: 1234567 });
  &lt;/script&gt;
  </code></pre>
  <p>Here is my head portion of my .vue file:</p>
  <pre><code> head: {
      script: [
        {
          hid: 'Paddle',
          src: 'https://cdn.paddle.com/paddle/paddle.js',
          async: true,
          defer: false
        }
      ]
    },
  
  </code></pre>
  <p>Anyone had any luck or alternative solutions?</p>