Is it possible to implement include a script only where it is needed rather than in nuxt.config.js in nuxtjs

Question

I am using Razorpay for my payment service. Other than the checkout page, no page is using it. I have included it in nuxt.config.js file. Is it possible in nuxtjs to use a script only where you might need it? not in all pages. (My lighthouse score is degrading due to this)

Answer 1

Yes, it is possible. You can use the Local Settings to include your resources in your .vue file inside the pages/ directory (here in the head function):

<template>
  <h1>About page with jQuery and Roboto font</h1>
</template>

<script>
export default {
  head () {
    return {
      script: [
        { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
      ],
      link: [
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap' }
      ]
    }
  }
}
</script>

<style scoped>
h1 {
  font-family: Roboto, sans-serif;
}
</style>

Here, this jQuery js file and Roboto font css will only be included in this page, instead of all the pages.