Voyager II

Javascript

This page covers some of the publicy available APIs Voyager exposes for you to use.

Notifications

Allows you to fluently display notifications in the UI.

Simple 

new $this.notification('Title').show();

Title and message 

new $this.notification('Title').message('Message').show();

Timeout 

new $this.notification('Title').timeout().show(); // 7500ms timeout, or:
new $this.notification('Title').timeout(5000).show(); // Custom (5000ms) timeout

Indeterminate 

new $this.notification('Title').indeterminate().show();

Confirm 

new $this.notification('Title').confirm().show().then((result) => { /* result is boolean */ });

Prompt 

new $this.notification('Title').prompt('Value').show().then((result) => { /* result is the entered text or false */ });

Select 

new $this.notification('Title').select({ key: 'Value' }).show().then((result) => { /* result is a key or false */ });

Methods

MethodDescriptionArguments
constructorCreates a new notificationtitle: string, the title
titleSets the title of a notificationtitle: string, the title
messageSets the message of a notificationmessage: string, the message
iconSets the icon of the notificationicon: string, the name of an icon
colorSets the color of the notificationcolor: string, any of the available colors
timeoutSets the timeout after which the notification will automatically closetimeout: ?int, number of ms after which the notification will close. Dont pass this arguments to timeout after 7500ms
indetermineShows an infinite barNone
promptShows an input box. Automatically adds buttons when no other existvalue: string, the default value or a variable that will be modified
confirmShows a Yes and a No buttonNone
selectShow a select box. Automatically adds buttons when no other existoptions: Object, the options as a key: value pair. Use this method multiple times to add multiple selects.
addButtonAdd a button to the notification. When this method is called before calling confirm , select or prompt it will override the standard buttons.button: Object, Button data containing: key will be passed to the promise value will be shown as button text (can be a translation key) color the color of the button
showShow the notification. If confirm, prompt or select is used, will return a PromiseNone

Store

Voyager implements a very simple store that holds some of the most important data used throughout of Voyager.
This includes BREADs, menu items, tables, formfields and much more.
Check the whole store here

In your Vue components you are able to access the store as easy as:

export default {
    mounted() {
        console.log(`You are logged in as ${this.$store.user.name}`);
    }
}

Eventbus

Voyager fires various events and listenes to them in another place.
For example, when updating the admin.sidebar_title setting, it will automatically update while you are typing.
To fire and listen to your own events, use the following example:

export default {
    methods: {
        click() {
            this.$eventbus.emit('my-event', 'My payload');
        }
    },
    mounted() {
        this.$eventbus.on('my-event', (e) {
            console.log(e);
        });
    }
}

To only listen for an event (setting-updated in this example):

export default {
    mounted() {
        this.$eventbus.on('setting-updated', (setting) {
            console.log(`Setting ${setting.group}.${setting.key} has been updated to: ${setting.value}`);
        });
    }
}

Slugify

Voyager uses slugify under the hood.
Check out its README to learn about its usage.

export default {
    mounted() {
        console.log(${this.$slugify('A not slugged string!')});
    }
}

Axios

Voyager uses axios to make Ajax requests.
To use axios in your own code, use:

import axios from 'axios';

export default {
    methods: {
        load() {
            axios.post(...);
        }
    }
}

Please read this to found out how to import axios without installing it locally.

Debounce

To use debounce simply use:

export default {
    methods: {
        load() {
            this.$debounce(() => {
                console.log('I am debounced');
            });
        }
    }
}

A note on Vite

Axios and Vue are exposed to the browsers window object.
This allows you to use those plugins in your code without installing them locally and thus reducing bundle size.
In your vite.config.js you can use the following to exclude them from being bundled:

export default defineConfig({
    rollupOptions: {
        external: ['vue', 'axios'],
        output: {
            globals: {
                vue: 'Vue',
                axios: 'axios',
            }
        }
    }
})

The rest of the methods/APIs are set into Vues globalProperties.