[Vuejs]-Force Nuxt to run script tag

by

0👍

✅

There is a head method (Docs) which will let you to load external scripts but
I can’t find the documentation for the script property.

I would dynamically load the script only on the client side like this:

<template>
  <div id="knack-dist_6">Loading...</div>
</template>

<script>
export default {
  // ...
  async created() {
    // Do not load the script on the server side
    if (!process.client) return
   
    // Function to load the external script
    function loadLib(id, distKey) {
      const scriptId = 'knack-js'

      return new Promise((resolve, reject) => {
        // If script already exists than do not load it again
        if (document.getElementById(scriptId)) {
          resolve()
          return
        }

        const s = document.createElement('script')

        s.src = `https://loader.knack.com/${id}/${distKey}/knack.js`
        s.id = scriptId
        s.type = 'text/javascript'

        s.onload = () => {
          resolve()
        }

        s.onerror = (e) => {
          reject(e)
        }

        document.head.appendChild(s)
      })
    }

    try {
     if (!window.app_id) {
        window.app_id = 'ID_HERE'
        window.distribution_key = 'dist_6'
     }

      await loadLib('ID_HERE', 'dist_6')
    } catch (e) {
      // Handle script loading error
      console.error(e)
    }
  }
}
</script>

Leave a comment