
Security News
Meet Socket at Black Hat and DEF CON 2025 in Las Vegas
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
obvious-vue
Advanced tools
The official library to help you use obvious in Vue application
npm:
npm install vue obvious-vue
umd:
<script src="https://unpkg.com/obvious-vue@{version}/dist/index.umd.js"></script>
import Vue from 'vue'
import ObviousVue from 'obvious-vue'
Vue.use(ObviousVue)
You should provide the $bus and $socket on the root, and they will be injected into all the child components and will be available on them as this.$bus
and this.$socket
const $bus = window.__Bus__.host
const $socket = $bus.createSocekt()
const app = new Vue({
$bus,
$socket
})
app.$mount(document.getElementById('root'))
You can declare the obviousData option to perform the two-way binding for Vue data and obvious state
<template>
<div :style="{color: theme}">{{ userName }}</div>
</template>
<script>
const anotherBus = window.__Bus__.anotherBus
const anotherSocket = anotherBus.createSocket()
export default {
name: 'SubComponent',
obviousData: {
userName: 'user.name', // Two-way binding for this.userName and this.$socket.getState('user.name')
theme: { // Two-way binding for this.theme and anotherSocket.getState('themeColor')
state: 'themeColor',
socket: anotherSocket
}
}
}
</script>
You can declare the broadcast and unicast option to register some broadcast and unicast events for obvious
<template>
<ul ref="container">
<li v-for="item of list">{{ item }}</li>
</div>
</template>
<script>
const anotherSocket = window.__Bus__.anotherBus.createSocket()
export default {
data: {
list: []
},
broadcast: {
addItem(item) { // this.$socket.onBroadcast('addItem', handler)
this.list.push(item)
},
addItemByAnotherSocket: { // anotherSocket.onBroadcast('addItemByAnotherSocket', handler)
handler(item) {
this.list.push(item)
},
socket: anotherSocket
},
deleteItem(index) {
this.list.splice(index, 1)
},
},
unicast: {
getItem(index) {// this.$socket.onUnicast('getItem', handler)
return this.list[index]
},
getItemByAnotherSocket:{// anotherSocket.onUnicast('getItem', handler)
handler(index) {
return this.list[index]
},
socket: anotherSocket
}
}
}
</script>
The default socket to handle all states and events is this.$socket, you can change it by declare the socket option
<script>
const anotherSocket = window.__Bus__.anotherBus.createSocket()
export default {
socket,
obviousData: {
name: 'name' // Two-way binding for this.name and anotherSocket.getState('name')
},
broadcast: {
changeName(value) { // anotherSocket.onBroadcast('changeName', handler)
this.name = value
},
getName() { // anotherSocket.onUnicast('getName', handler)
return this.name
}
}
}
</script>
after using ObviousVue, there will be a global component named obvious-app to help you easily activate an obvious app, the app will be bootstrapped when the component is mounted and will be reactivated once the props activate-config is changed, and when the component is destroyed, the app will be destroyed too
const bus = window.__Bus__.host
bus.createApp('react-app')
.bootstrap(async (config) => {
ReactDOM.render(<App />, config.mountPoint)
})
.activate(async (config) => {
console.log(config.message)
})
.destroy(async (config) => {
console.log(config.message)
ReactDOM.unmountComponentAtNode(config.mountPoint)
})
<template>
<obvious-app
ctx="react-app"
:activate-config="activateConfig"
:destroy-config="destroyConfig"
/>
</template>
<script>
export default {
data() {
return {
activateConfig: {
message: 'I was activated by a vue app'
},
destroyConfig: {
message: 'I was destroyed by a vue app'
}
}
}
}
</script>
all the props and events of obvious-app are below
props:
name | required | default | description |
---|---|---|---|
bus | false | this.$bus | the bus to activate the target app |
ctx | true | - | the context of the app to activate |
activate-config | false | {} | the config argument of activating |
destroy-config | false | {} | the config argument of destroying |
events:
name | description |
---|---|
activated | emitted after the app is activated |
destroyed | emitted after the app is destroyed |
error | emmited when an error is throwed during activating or destroying |
obvious-vue is MIT licensed
FAQs
a library to help using obvious in vue2.x application
The npm package obvious-vue receives a total of 0 weekly downloads. As such, obvious-vue popularity was classified as not popular.
We found that obvious-vue demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.