vue-simple-chatbot
v0.2.0
Published
simple chatbot ui
Downloads
12
Maintainers
Readme
Vue Simple Chatbot
Getting Start
npm install vue-simple-chatbot --save
# or use yarn
yarn add vue-simple-chatbot
Usage
Import as local component
import VueChatbot from 'vue-simple-chatbot';
export default {
name: 'App',
components: {
VueChatbot
}
}
Import as global component
import { createApp } from 'vue'
import VueChatbot from 'vue-simple-chatbot';
import App from './App.vue'
const app = createApp(App)
app.use(VueChatbot)
app.mount('#app')
Use the component
<template>
<vue-chatbot :steps="steps">
<template v-slot:header>
<div>Hi, Chatbot Here</div>
</template>
</vue-chatbot>
</template>
<script>
export default {
name: 'App',
data() {
return {
steps: [
{
id: '1',
hideInput: true,
message: 'Hello There...',
trigger: '2'
},
{
id: '2',
hideInput: true,
options: [
{ id: '1', label: 'Please try again', trigger: '1' },
{ id: '2', label: 'I am busy', trigger: '3' },
{ id: '3', label: 'Ask me phone number', trigger: '4' },
],
},
{
id: '4',
message: 'What is your phone number?',
trigger: 'phone',
},
{
id: 'phone',
user: true,
validator: (value) => {
if (isNaN(value)) {
return 'Value should be a number';
}
return true;
},
trigger: '3'
},
{
id: '3',
hideInput: true,
message: 'Enjoy your activities!',
end: true
},
]
}
}
}
</script>
Api Reference
Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| steps
| Array | [] | Step by step chat declare here, you can check through this doc example |
| width
| String | '350px' | Define width of chat |
| styleConfig
| Object | { theme: 'rgb(110, 72, 170)' } | Set theme color of chat |
| delay
| Number | 1000 | Set delay response chat both user and bot (1000 = 1 second) |
| botAvatar
| Image | | Set bot image |
| userAvatar
| Image | | Set user image |
Slot
| Name | Description |
| --- | --- |
| header
| Replace header content, you can refer to this doc example |
Credit
Inspired by React Simple Chatbot
License
MIT