Injecting Quasar Plugin | Quasar Framework

This guide is for when you want to ensure that a Quasar Plugin will be injected into the hosting app, because you depend on it for your own App Extension to work.

TIP

In order for creating an App Extension project folder, please first read the Development Guide > Introduction.

Full Example

To see an example of what we will build, head over to full example, which is a GitHub repo with this App Extension.

We will only need the /index.js script for this, because we can use the Index API to configure quasar.config file from the host app to include our required Quasar Plugin.

package.json

src/

index.js

# Described in Index API

And /index.js would look like this:

export default function (api) {
  // (Optional!)
  // Quasar compatibility check; you may need
  // hard dependencies, as in a minimum version of the "quasar"
  // package or a minimum version of Quasar App CLI
  api.compatibleWith('quasar', '^2.0.0')

  if (api.hasVite === true) {
    api.compatibleWith('@quasar/app-vite', '^2.0.0')
  }
  else { // api.hasWebpack === true
    api.compatibleWith('@quasar/app-webpack', '^4.0.0')
  }

  // Here we extend /quasar.config file, so we can add
  // a boot file which registers our new Vue directive;
  // "extendConf" will be defined below (keep reading the tutorial)
  api.extendQuasarConf(extendConf)
}

Our “extendConf” method, in the same file as above:

function extendConf (conf) {
  // we push to /quasar.config file > framework > plugins:
  conf.framework.plugins.push('AppVisibility')
}

Caught a mistake?Edit this page in browser