📚 Script Modules #

This page walks you through bridge's script module extension api system and details how to create your own windows and scripts.

In this page you will learn the following:

☑️ What is Vue file?
☑️ What is a script file?
☑️ How to make your very own page and script.

Basics #

Script modules is a collection of JavaScript files and Vue files that can be created within bridge's extension folder or outside of bridge that enable you to develop your own windows, scripts and request bridge to do certain things. Bridge's Script API uses the Vue V2 Engine. It is highly recommended to read the documentation of the Vue V2 Engine to understand how to write and use Vue files.

Creating A Simple Script and Window #

Setup #

Before you begin writing your script and Vue files, you must set up an extension to contain your files. Once you have a valid extension set up in the extension's folder, you can now create two folders named ui and scripts then create a file called index.js inside the scripts folder.

The ui folder will contain your Vue files while the scripts folder will contain your JavaScript files. See example setup below.

.
├─ 📁 ui
├─ 📁 scripts
|  └─ 📝 index.js

Writing The UI #

Now that we have made the files and folders required we will be adding a button to the sidebar that will open up a sidebar window. To do this we will be using the @bridge/sidebar and @bridge/ui module inside the index.js file.

However before we do this we need to setup and import the vue file in the ui folder.

Create a Vue file with any name you want to put inside the ui folder. I will be naming the vue file Home.vue. See example below.

.
├─ 📁 ui
|  └─ 📝 Home.vue

Now we need to begin setting up the vue file with the required template and script tags. The example below will be a simple counter that just displays a title and how many times you have clicked the button.

<template>
	<div style="padding:10px;">
		<h1>You've clicked {{ Counter }} Times!</h1>
		<v-btn block color="primary" @click="IncrementCounter">Click Me!</v-btn>
	</div>
</template>

<script>
export default {
	data: () => ({
		Counter: 0,
	}),
	methods: {
		IncrementCounter() {
			this.Counter = this.Counter + 1
		},
	},
}
</script>

Now that we have setup the vue file we need to start writing the index.js file. First we need to import @bridge/ui and @bridge/sidebar modules at the top of the file.

import { create } from '@bridge/sidebar'
import { Home } from '@bridge/ui'
/*
See how we are importing Home from @bridge/ui. This means we are importing the vue file Home.vue.
If we were to name the vue file SideBar.vue then we would need to do

import { SideBar } from '@bridge/ui'

Then we need to call the function and fill in the paramaters.

create({
	id: 'yourId',
	displayName: 'Click Me',
	icon: 'mdi-apple',
	component: Home,
})

Again this may seem a little confusing so lets break it down again.

id: is the identifier for the specific button. It must be unique from everything else. Here is a template for making your id. <YourAuthorName>.<YourExtensionName>.<YourButtonName>
displayName: is the hover text that appears when the cursor hovers over the button.
icon: is the icon that will be displayed on the button. To see the full list of icons click here.
component: is the vue file that you have imported from @bridge/ui which will link the file to the button.

Phew. Now you have made it this far, save your files and then reload your extension by going to Tools > Reload Extensions. If everything went correctly you should now see an apple icon on the sidebar if you have used the mdi-apple icon.

Full Setup Of Tutorial #

index.js #

import { create } from '@bridge/sidebar'
import { Home } from '@bridge/ui'

create({
	id: 'yourId',
	displayName: 'Click Me',
	icon: 'mdi-apple',
	component: Home,
})

Home.vue #

<template>
	<div style="padding:10px;">
		<h1>You've clicked {{ Counter }} Times!</h1>
		<v-btn block color="primary" @click="IncrementCounter">Click Me!</v-btn>
	</div>
</template>

<script>
export default {
	data: () => ({
		Counter: 0,
	}),
	methods: {
		IncrementCounter() {
			this.Counter = this.Counter + 1
		},
	},
}
</script>

File & Folder Setup #

📁 extensions
├─ 📁 YourExtension
|  ├─ 📁 ui
|  |  └─ 📝 Home.vue
|  ├─ 📁 scripts
|  |  └─ 📝 index.js
|  └─ 📝 manifest.json

Next Steps #

This guide only scratches the surface of what is possible with script modules. It is best to look at the extensions repository on github for examples and references when developing your extension or when you want to figure out something. It is best to start simple and get familiar with reading the documentation and understanding how certain things work.