feat: allow to use render function as message

README.md

@@ -36,6 +36,7 @@ const toaster = createToaster({ /* options */ });
 toaster.show(`Hey! I'm here`);
 ```
 
+
 ## Usage
 
 ```js
@@ -50,6 +51,34 @@ this.$toast.info(`Hey! I'm here`);
 setTimeout(this.$toast.clear, 3000);
 ```
 
+### Usage with tailwindcss and render function
+
+```js
+import { h } from 'vue'
+import { createToaster } from "@meforma/vue-toaster";
+
+const toaster = createToaster({ 
+  useDefaultCss: false,
+  transition: {
+    enterActiveClass: "transition duration-100 ease-out"
+    enterFromClass: "transform scale-95 opacity-0"
+    enterToClass: "transform scale-100 opacity-100"
+    leaveActiveClass: "transition duration-75 ease-out"
+    leaveFromClass: "transform scale-100 opacity-100"
+    leaveToClass: "transform scale-95 opacity-0"
+  }
+});
+
+// use render function
+// see: https://vuejs.org/api/render-function.html#h
+toaster.show(() =>
+  h('div', { class: 'flex bg-white rounded text-md gap-4 p-6' }, [
+    h('strong', { class: 'text-semibold' }, `Toast title`),
+    h('span', `Toast message`),
+  ])
+);
+```
+
 ## Available options
 
 The API methods accepts these options:
@@ -67,6 +96,7 @@ The API methods accepts these options:
 | maxToasts     | Number or false |    `false`     | Defines the max of toasts showed in simultaneous                              |
 | pauseOnHover  |     Boolean     |     `true`     | Pause the timer when mouse on over a toast                                    |
 | useDefaultCss |     Boolean     |     `true`     | User default css styles                                                       |
+| transition    |     Object      |       --       | Custom toast transition ([see all props](https://vuejs.org/api/built-in-components.html#transition))                                                     |
 
 ## API methods
 

package.json

@@ -32,5 +32,8 @@
   "dependencies": {
     "stylus": "~0.54.8",
     "stylus-loader": "~3.0.2"
+  },
+  "devDependencies": {
+    "vue": "^3.2.37"
   }
 }