This section of the docs deals with creating your own App Extensions.

It is assumed you have already installed one of the official App Extensions. Having this experience at your disposal is going to be very valuable when you start building your own App Extensions. If you run into problems, please visit our Discord server’s channel #app-extensions.

An App Extension is essentially just an npm package that Quasar CLI loads to provide the functionality that you supplied.

Creating the App Extension

pnpm create quasar@latest
# then pick the AppExtension option

It will prompt you about your specific needs. Do you need an install script, an uninstall script, will you be prompting the user with some questions? Pick only what you will be using. You can manually add these later if you decide otherwise.

For the sake of this documentation page, let’s assume we answered with my-ext to the App Extension ext-id question (regarding the prompts above). Remember that the folder name for the App Extension source folder can be different from the actual ext-id. At the end, we will publish our new npm package (quasar-app-extension-my-ext) from the /ae folder.

Based on your responses, a folder for your App Extension will be created with the following structure:

App Extension Scripts description

Except for /ae/src/index.js|ts, all the other files are optional. You can manually add or remove them at any point in time.

Handling package dependencies

If your App Extension has its own dependencies over some packages in order for it to be able to run (except for packages supplied by Quasar CLI, like “quasar”, “@quasar/extras”, “@quasar/app-vite” – you should use “api.compatibleWith()” for those in your /install.js and /index.js scripts – check Install API and Index API), then PNPM installing them into your App Extension folder will supply them into the hosting app.

Example: You are creating a UI component that depends on “my-table” npm package (name is bogus, just for making a point here), then you should PNPM install “my-table” in your App Extension folder.

Developing

Commands to use

Notice /package.json scripts that you can use:

# Lint & format
# (if you selected oxlint + oxfmt option)
pnpm run lint
pnpm run lint:check

# Use playground to develop;
# Helps you test the Index script as well
pnpm run dev
pnpm run dev -m ssr
# ...etc

# Invokes the AE into /playground when needed
# (like when changing the scripts themselves);
# Helps you run the Install & Prompts scripts
pnpm run invoke

# Uninstall & re-install AE;
# Helps you mainly to run the Uninstall script
pnpm run cycle

Install and Prompts scripts

You will notice mentions of invoking an AE. The invoking procedure, as opposed to the “adding” one, assumes that the App Extension’s package is already pnpm/yarn/npm/bun installed into the host app (and so, Quasar CLI skips that step).

quasar ext add <ext-id>
# or:
quasar ext invoke <ext-id>

Uninstall script

You will notice mentions of uninvoking an AE. The un-invoking procedure, as opposed to the “remove” one, un-registers the App Extension from the host app, but does NOT uninstalls its npm package.

quasar ext remove <ext-id>
# or:
quasar ext uninvoke <ext-id>

Index script

The Index script is the heart of your App Extension.

This is where you can tamper with all quasar.config file options, extend the Vite configuration, register Quasar CLI commands, start up external services required for developing your app and many more.

quasar dev
quasar build

A common use-case of what you can do with your Index script is to extend the host app’s Vite config as follows:

import { defineIndexScript } from '#q-app'

export default defineIndexScript(api => {
  api.extendViteConf (viteConf, { isClient, isServer }, api) {
    // similar in use to /quasar.config > build > extendViteConf
  }
})

Publishing

When you finalized your App Extension and you’re ready to deploy it, all you need to do is to publish it to the npm repository.

• Make sure to edit /ae/README.md.
• Also edit /ae/package.json > peerDependencies if needed.
• In order to publish the AE, do it from within the /ae folder:

# from /ae folder ONLY:
pnpm login
pnpm publish