@mekari/mekari-ui-vue/src/components/Toast/stories/content/ToastIntroduction.mdx

--- General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses [Mekari UI Toolkit](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/). Don't forget to import

> Available since version: `1.0.0`

> Styling from Mekari UI Toolkit that must be used on this component are (or with its `.scss`):
> - `./css/components/mekari-ui-reboot-bootstrap`
> - `./css/components/mekari-ui-icons`
> - `./css/components/mekari-ui-alert`

Mekari UI Vue comes with `Toast` component. It will allow you to display toast inside your application. `Toast` component is based on `Alert` component, so in term of styling, you need to import the styling from `Alert` component to make the `Toast` component displayed as intended. To make `Toast` component work on Vue, you need to import the respective plugin.
```js
import Vue from 'vue';
import { MToastPlugin, MToast } from '@mekari/mekari-ui-vue';

Vue.use(MToastPlugin);
```

## Usage

```js
this.$toastPlugin.open({
  title: "Hooray!",
  description: "Congratulations, you win!",
  type: 'success | error | warning | info',
  icon: 'default | success | error | warning | info',
  position: 'top | top-left | top-right | bottom | bottom-left | bottom-right',
  linksText: '["firstText", "secondText"]',
  linksHref: '["firstUrl", "secondUrl"]',
  linksTarget: '[null, "_blank"]',
  singleToast: true | false,
  duration: 3000,
});
```