Creating a plugin

To create a plugin i have made a nice scaffolding script. So to get started you can run npm run scaffold

This script will walk you trough some basic info and creates the plugin in the apropiate directory.

Folder structure

Now let's look at the plugin you created. The scaffolding tool creates a directory with your plugin ID.

Within that directory are a few files:

• plugin.json - This is where all the info is stored
• Main.vue - This is your main plugin view
• Settings.vue - This is the settings view that gets added to the settings modal (this is optional)

plugin.json

This is where most of the config data is stored. Lets discus some of the options:

Adding a sidebar

You can include a custom sidebar by adding "sidebar": "Sidebar" to the components object. This looks in your plugin folder to include Sidebar.vue

Changing the toolbar

You can include a custom sidebar by adding "toolbar": "Toolbar" to the components object. This looks in your plugin folder to include Toolbar.vue, when none is supplied it will fallback to the basicToolbar.

Main content

This shouldn't be changed normally, this view is the main overview of your plugin. You can change the value to match another component. Default should be Main.vue.

Settings

This is optional! If your plugin doesn't need settings, you can remove settings from your components object.

Variables

This part can be customized, so you can chose an icon, change the link or make the plugin enabled by default. Here are some docs for the options:

• Icon: http://quasar-framework.org/components/icons.html
• Enabled: True or false for the initial plugin state

One important option for more complex plugins is path, you can read more about it here: https://router.vuejs.org/en/essentials/getting-started.html or check out the devices plugin.

Main.vue

This is your main plugin view, everything you do here will show on the page. It's a basic VueJS component, for more info on VueJS and the possibilities you should look at Getting started with VueJS

A few notes:

• You have access to the this.settings object, thats in the computed part already
• The styling is done by default in stylus, you can change this to your own preferences

A few notes here as well:

• You have access to the settings object and plugin info by default (these are the props imported)
• To get to the plugin settings you need something like settings.SETTINGS_ID_HERE
• Plugins are disabled by default! To enable it go to your settings. If you want to enable it by default by default add "enabled": true to your plugin.json.