-
-
You've clicked {{ Counter }} Times!
- Click Me!
-
+
+
You've clicked {{ Counter }} Times!
+ Click Me!
+
```
@@ -94,7 +98,7 @@ Now that we have setup the vue file we need to start writing the `index.js` 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.
+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'
@@ -104,10 +108,10 @@ Then we need to call the function and fill in the paramaters.
```js
create({
- id: 'yourId',
- displayName: 'Click Me',
- icon: 'mdi-apple',
- component: Home
+ id: 'yourId',
+ displayName: 'Click Me',
+ icon: 'mdi-apple',
+ component: Home,
})
```
@@ -124,42 +128,47 @@ Again this may seem a little confusing so lets break it down again.
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
+
```js
-import { create } from '@bridge/sidebar';
-import { Home } from '@bridge/ui';
+import { create } from '@bridge/sidebar'
+import { Home } from '@bridge/ui'
create({
- id: 'yourId',
- displayName: 'Click Me',
- icon: 'mdi-apple',
- component: Home
+ id: 'yourId',
+ displayName: 'Click Me',
+ icon: 'mdi-apple',
+ component: Home,
})
```
+
### Home.vue
+
```vue