Hologram Widget Class

The widget class is in your index.js file. It will contain the programming logic for your widget.

Widgets are built using the Vue.js Javascript framework. If you've worked with Vue before you'll feel right at home developing a Hologram widget. If you are new to Vue we recommend you spend some time on the Vue.js website reading their docs. Because Hologram widgets are non-interactable, even knowing some Vue basics will get you pretty far.

When creating a new widget you must extend the HologramWidget Vue component, and have a template.

export default {
    extends: HologramWidget,
    template: /* html */ `
        <div>Hello World!<div>
    `
}

Accessing Widget Assets

Widgets will often contain images or other assets. You can store those within your widget folder, organized however you want. In order to access your assets you will use the following method:

this.asset(path)

The path will always be relative to your widget folder. For example, if you want to access an image contained in a folder called "images" you would use the following code:

export default {
    extends: HologramWidget,
    methods: {
        example() {
            // You can also use the asset function in code:
            const iconPath = this.asset('images/icon.svg')
        }
    },
    template: /* html */ `
        <!-- Use the asset function directly in a tag -->
        <img :src="asset('images/icon.svg')" />
    `
}