App Extensions are a way to painlessly inject complicated (or simple) libraries with a variety of dependencies, boot files, templates and custom logic. They can extend webpack,
quasar.config.js, tightly couple external UI components to core, and even register new commands with the Quasar CLI. They can be run with
quasar dev and have complete access to the current live
The patterns for development literally open the floodgates to making Quasar one of the most extensible and powerful frameworks out there - now limited only by your imagination and innovation. This page will introduce you to the usage of App Extensions.
App Extensions are designed specifically for Quasar CLI only. This means that you will not be able to install them or run them with the Quasar Vite plugin or with Vue CLI or in UMD environments.
What can an App Extension do?
- Enhance CLI behavior with new commands
- Make a Quasar UI plug-in
- Install an accompanying application
- Create and share a custom component
- Create and share added features to the framework or other applications
- Build, launch and control an API server
- Hook, combine and extend Quasar core components
- Modify code based on dynamically changing values that sit outside of the Quasar environment
- Create and manage abstractions of platform specific interfaces
- … and a whole lot more
App Extensions replace the need to create custom starter kits. Anything you add on top of the official starter kit can come in the form of an App Extension. This also eliminates maintenance overhead of keeping unofficial starter kits up to date with the official one and so we can ensure that every developer will always get the latest and greatest Quasar specs out of the box.
App Extension ext-id
All App Extensions must prefix their name with
quasar-app-extension-. Everything that follows after this prefix is considered to be the short alias of it. We call this the
ext-id throughout the documentation.
- ext-id for
- ext-id for
One of the benefits of this naming scheme is that it makes Quasar App Extensions discoverability easy while searching for their npm packages: App Extension - Discover.
Anatomy of App Extensions
App Extensions can be installed, executed and also uninstalled. The following guide discusses this in an abstract way. For details about individual extensions and how to work with them, please consult their respective repositories.
Installing an App Extension
$ quasar ext add <ext-id>
This command will find and install the extension’s module. After installation is complete, there may be one or more prompts asking you to make choices or add information needed by the extension. When the installation is concluded, you will be returned to the command line.
List Installed App Extensions
There are several ways to “discover” what App Extensions have been installed:
$ quasar ext $ quasar info $ cat quasar.extensions.json
“Running” App Extensions
There is no one way to run app extensions, because some of them might not even have any code to run (i.e. are merely template files copied to specific folders within your project), whereas others may merely be installation helpers and others might choose to add a new command to the Quasar CLI.
Nevertheless, each and every App Extension will be initialized during
quasar dev and
Updating an App Extension
You may need to update your extension, and this is done with the same command as used for installation:
$ quasar ext add <ext-id>
Reinstalling the extension MIGHT overwrite files that you have changed. You will be presented with the option to overwrite the files detected.
Removing an App Extension
You can remove an App Extension from being hooked from the Quasar CLI by running this command. Depending upon the author and the extension itself, you may have to manually clean up files though.
$ quasar ext remove <ext-id>
List of official app-extensions
Check out Discover App Extensions page.