Developing Electron Apps

Misc

App Plugins

A common use case for Quasar applications is to run code before the root Vue instance is instantiated.Quasar provides an elegant solution to that problem by allowing users to define so-called app plugins.

IMPORTANTDo not confuse app plugins with Quasar plugins, like ActionSheet, Dialog, Notify. Quasar plugins are something else entirely and will be covered in the Components section.

In earlier Quasar versions, to run code before the root Vue instance was instantiated, you could alter the /src/main.js file and add any code you needed to execute.

There is a major problem with this approach: With a growing project, your main.js file was very likely to get cluttered and challenging to maintain, which breaks with Quasar’s concept of encouraging developers to write maintainable and elegant cross-platform applications.

With app plugins, it is possible to split each of your dependencies into a self-contained, easy to maintain file. It is also trivial to disable any of the app plugins or even contextually determine which of the app plugins get into the build through quasar.conf.js configuration.

Anatomy of an app plugin

An app plugin is a simple JavaScript file which needs to export a function. Quasar will then call the exported function when it boots the application and additionally pass an object with the following properties to the function:

Prop name

Description

app

Object with which the root component gets instantiated by Vue

router

Instance of Vue Router from ‘src/router/index.js’

store

Instance of the app Vuex Store - store only will be passed if your project uses Vuex (you have src/store)

Vue

Is same as if we do import Vue from 'vue' and it’s there for convenience

When to use app plugins

IMPORTANTPlease make sure you understand what problem app plugins solve and when it is appropriate to use them, to avoid applying them in cases where they are not needed.

App plugins fulfill one special purpose: they run code before the App’s Vue root component is instantiated while giving you access to certain variables, which is required if you need to initialize a library, interfere with Vue Router, inject Vue prototype or inject the root instance of the Vue app.

Examples of appropriate usage of app plugins

Your Vue plugin has installation instructions, like needing to call Vue.use() on it.

Your Vue plugin requires instantiation of data that is added to the root instance - An example would be vue-i18n.

You want to add something to the Vue prototype for convenient access - An example would be to conveniently use this.$axios inside your Vue files instead of importing Axios in each such file.

You want to interfere with the router - An example would be to use router.beforeEach for authentication

You want to interfere with the Vuex store instance - An example would be to use vuex-router-sync package

Configure aspects of libraries - An example would be to create an instance of Axios with a base URL; you can then inject it into Vue prototype and/or export it (so you can import the instance from anywhere else in your app)

Examples of unneeded usage of app plugins

For plain JavaScript libraries like Lodash, which don’t need any initialization prior to their usage. Lodash, for example, might make sense to use as an app plugin only if you want to inject Vue prototype with it, like being able to use this.$_ inside your Vue files.

Make API requests - You probably want to do this inside your pages Vue component

Usage of app plugins

The first step is always to generate a new plugin using Quasar CLI:

$ quasar new plugin <name>

Where <name> should be exchanged by a suitable name for your plugin.

This command creates a new file: /src/plugins/<name>.js with the following content:

You can now add content to that file depending on the intended use of your plugin.

Do not forget that your default export needs to be a function.However, you can have as many named exports as you want, should the plugin expose something for later usage. In this case, you can import any of these named exports anywhere in your app.

The last step is to tell Quasar to use your new plugin. For this to happen you need to add the plugin in /quasar.conf.js

plugins: ['<name>'// references /src/plugins/<name>.js]

Quasar App Flow

In order to better understand how a plugin works and what it does, you need to understand how your website/app boots:

Examples of app plugins

Axios

import axios from'axios'exportdefault ({ Vue }) => {// we add it to Vue prototype// so we can reference it in Vue files// without the need to import axios Vue.prototype.$axios = axios// Example: this.$axios will reference Axios now so you don't need stuff like vue-axios}

Accessing data from plugins

Sometimes you want to access data that you configure in your app plugin in files where you don’t have access to the root Vue instance.

Fortunately, because app plugins are just normal JavaScript files you can add as many named exports to your app plugin as you want.

Let’s take the example of Axios. Sometimes you want to access your Axios instance inside your JavaScript files, but you can not access the root Vue instance. To solve this you can export the Axios instance in your plugin and import it elsewhere.

Consider the following plugin file for axios:

// axios app plugin file (src/plugins/axios.js)import axios from'axios'// We create our own axios instance and set a custom base URL.// Note that if we wouldn't set any config here we do not need// a named export, as we could just `import axios from 'axios'`const axiosInstance = axios.create({ baseURL: 'https://api.example.com'})exportdefault ({ Vue }) => {// for use inside Vue files through this.$axios Vue.prototype.$axios = axiosInstance}// Here we define a named export// that we can later use inside .js files:export { axiosInstance }

In any JavaScript file, you’ll be able to import the axios instance like this.

// we import one of the named exports from src/plugins/axios.jsimport { axiosInstance } from'plugins/axios'

IMPORTANTThe name “boot” for your plugin has a special meaning to Quasar CLI. It runs this plugin after all other app initialization has been executed and right before kicking off Vue with new Vue(). By adding this plugin you are responsible for kicking off Vue yourself, as we’ll see next.