# 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 ```javascript new $this.notification('Title').show(); ``` ### Title and message ```javascript new $this.notification('Title').message('Message').show(); ``` ### Timeout ```javascript new $this.notification('Title').timeout().show(); // 7500ms timeout, or: new $this.notification('Title').timeout(5000).show(); // Custom (5000ms) timeout ``` ### Indeterminate ```javascript new $this.notification('Title').indeterminate().show(); ``` ### Confirm ```javascript new $this.notification('Title').confirm().show().then((result) => { /* result is boolean */ }); ``` ### Prompt ```javascript new $this.notification('Title').prompt('Value').show().then((result) => { /* result is the entered text or false */ }); ``` ### Select ```javascript new $this.notification('Title').select({ key: 'Value' }).show().then((result) => { /* result is a key or false */ }); ``` ### Methods | **Method** | **Description** | **Arguments** | | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | constructor | Creates a new notification | title: string, the title | | title | Sets the title of a notification | title: string, the title | | message | Sets the message of a notification | message: string, the message | | icon | Sets the icon of the notification | icon: string, the name of an icon | | color | Sets the color of the notification | color: string, any of the available colors | | timeout | Sets the timeout after which the notification will automatically close | timeout: ?int, number of ms after which the notification will close. Dont pass this arguments to timeout after 7500ms | | indetermine | Shows an infinite bar | None | | prompt | Shows an input box. Automatically adds buttons when no other exist | value: string, the default value or a variable that will be modified | | confirm | Shows a `Yes` and a `No` button | None | | select | Show a select box. Automatically adds buttons when no other exist | options: Object, the options as a key: value pair. Use this method multiple times to add multiple selects. | | addButton | Add 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 | | show | Show the notification. If `confirm`, `prompt` or `select` is used, will return a `Promise` | None | ## 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](https://github.com/voyager-admin/voyager/blob/2.x/resources/assets/js/store.ts) In your Vue components you are able to access the store as easy as: ```javascript 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: ```javascript 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): ```javascript 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](https://github.com/simov/slugify) under the hood.\ Check out its README to learn about its usage. ```javascript export default { mounted() { console.log(${this.$slugify('A not slugged string!')}); } } ``` ## Axios Voyager uses [axios](https://axios-http.com/) to make Ajax requests.\ To use axios in your own code, use: ```javascript import axios from 'axios'; export default { methods: { load() { axios.post(...); } } } ``` Please read [this](#a-note-on-vite) to found out how to import axios without installing it locally. ## Debounce To use [debounce](https://github.com/component/debounce) simply use: ```javascript 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: ```javascript export default defineConfig({ rollupOptions: { external: ['vue', 'axios'], output: { globals: { vue: 'Vue', axios: 'axios', } } } }) ``` The rest of the methods/APIs are set into Vues `globalProperties`. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://tcg.gitbook.io/voyager-2/javascript.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.