Gridsome: How to add Vue.use(MyPlugin) for a single page only?

Question

I have added ReCaptcha plugin using Vue.use(ReCaptcha, {some options}) in Gridsome main.js which is displaying on all pages.

How to add plugin for a particular page only in gridsome?

Answer 1

I've never used ReCaptcha or Gridsome before, but generally, if you install a plugin using npm, then the simplest way to use it on a single page would be to import the plugin to the specific component rendered on the route you want to use it on. i.e

/* === MyComponent.vue  === */
<script>
import plugin from 'packageName'; 
// or 
import { pluginExport } from 'packageName';

export Default{
  // You can then use the plugin/pluginExport here 
}

From there you should be able to use the package in that specific component as you normally would if you implemented it app-wide with Vue.use. In some cases, depending on how the plugin is meant to be used, you may need to register the imported plugin Module as a child component in the components object. Like this vuejs QR Code generator for example.