🤔 How to: use libraries that need CSSUsing Less.js in ObservableGenerator batching
Using Vue with Observable
Vue = import("https://unpkg.com/vue@3/dist/vue.esm-browser.js")
appEl = htl.html`<div id="app">
{{ message }}
</div>`
Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount("#app")
{
const el = htl.html`<div id="app">
{{ message }}
</div>`
yield el
Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount(el)
}
viewof value = html`<input type='text' value='Hello Observable!' />`
viewof app = {
const el = htl.html`<div id="appCustomValue">
{{ message }}
</div>`
yield el
const app = Vue.createApp({
data() {
return {
message: value
}
}
})
app.mount(el)
el.value = app
}
viewof app_holding_state = {
const el = htl.html`<div id="appCustomValue">
{{ message }}
</div>`
yield el
const app = Vue.createApp({
data() {
return {
message: `${viewof value.value}`
}
},
created() {
viewof value.addEventListener("input", e => {
const updatedInput = viewof value.value
this.message = updatedInput
})
}
})
app.mount(el)
el.value = app
}
viewof global = {
const app = Vue.createApp({})
const el = htl.html`<div id="app">
<apples></apples>
<bananas></bananas>
</div>`
yield el
app
.component("apples", {
template: `<div style="color:red">Apples!</div>`
})
.component("bananas", {
template: `<div style="color:yellow;background:black;">Bananas!</div>`
})
app.mount(el)
el.value = app
}
apples = ({
template: `<div style="color:red">Apples!</div>`
})
bananas = ({
template: `<div style="color:yellow;background:black;">Bananas!</div>`
})
{
const el = html`<div id="app">
<apples></apples>
<bananas></bananas>
</div>`
yield el
const app = Vue.createApp({
components: { apples, bananas }
})
app.mount(el)
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
