31:[] 2f:{"title":"Using Vue with Observable","cells":[{"id":0,"value":"md`# Using Vue with Observable\n\n${html`\n`}\n\n[Vue](https://vuejs.org/) is a popular library for building applications, and a rival of [React](https://reactjs.org/). Using Vue with Observable has a few gotchas, but on the whole it works like you’d expect.\n\n### Requiring Vue\n\nRequiring vue requires no funny business: just use import.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"Vue = import(\"https://unpkg.com/vue@3/dist/vue.esm-browser.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`Unlike React, Vue typically uses _templates_ that are real HTML with some special template syntax thrown in. Here’s an example from the Vue hello world example.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"appEl = htl.html`

\n {{ message }}\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`Now this code - that makes that previous cell ‘alive’ - is a little different from Vue’s example:\n\n\\`\\`\\`js\nconst app = Vue.createApp({\n data() {\n return {\n message: 'Hello Vue!'\n }\n }\n})\napp.mount('#app')\n\\`\\`\\`\n\nIf you’ve read my gotchas notebook, you’ll see one here: [this example is reselecting an element](https://beta.observablehq.com/@tmcw/observable-anti-patterns-and-code-smells#reselectingElements) by specifying '#app'. That’s not a good idea in Observable, because the order of cell evaluation is _reactive_, rather than _linear_: it’s preferable instead of use cell references to specify what we want to render into. So, here’s the slightly modified, working example:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"Vue.createApp({\n data() {\n return {\n message: 'Hello Vue!'\n }\n }\n}).mount(\"#app\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`We can also combine the cells into one by supplying an \\`html\\` value to the \\`mount\\` method and yielding the \\`html\\` element.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"{\n const el = htl.html`

\n {{ message }}\n

`\n yield el\n \n Vue.createApp({\n data() {\n return {\n message: 'Hello Vue!'\n }\n }\n }).mount(el)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"md`Now if we reference a reactive variable from the Vue cell, it’ll update, just like other reactive updates in Observable.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"viewof value = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"viewof app = {\n const el = htl.html`

\n {{ message }}\n

`\n yield el\n \n const app = Vue.createApp({\n data() {\n return {\n message: value\n }\n }\n })\n \n app.mount(el)\n\n el.value = app\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"md`Note that the cell above will re-run whenever value changes. This means that a new Vue component is created every time you type in the input box rather than updating the existing component reactively. This is probably not what you are expecting and may be a 'gotcha' if your component is also holding state. In order to overcome this limitation, you can add an event listener to Vue's \\`created\\` hook. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"viewof app_holding_state = {\n const el = htl.html`

\n {{ message }}\n

`\n yield el\n \n const app = Vue.createApp({\n data() {\n return {\n message: `${viewof value.value}`\n }\n },\n created() {\n viewof value.addEventListener(\"input\", e => {\n const updatedInput = viewof value.value\n this.message = updatedInput\n })\n }\n })\n \n app.mount(el)\n\n el.value = app\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`## Components\n\nIn Vue, there are two ways to register components: global and local.\nWe can make components available globally in the current [Vue application](https://vuejs.org/guide/essentials/application.html) using the \\`app.component()\\` method: \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"viewof global = {\n const app = Vue.createApp({})\n\n const el = htl.html`

\n \n \n

`\n yield el\n\n app\n .component(\"apples\", {\n template: `

Apples!

`\n })\n .component(\"bananas\", {\n template: `

Bananas!

`\n })\n\n app.mount(el)\n \n el.value = app\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"md`Local registration scopes the availability of the registered components to the current component only. It makes the dependency relationship more explicit, and should be the prefered way to include components.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"apples = ({\n template: `

Apples!

`\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"bananas = ({\n template: `

Bananas!

`\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"{\n const el = html`

\n \n \n

`\n yield el\n \n const app = Vue.createApp({\n components: { apples, bananas }\n })\n \n app.mount(el)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`_JavaScript note_: this is using the [fancy shorthand object syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Property_definitions): the line referencing components is equivalent to:\n\n\\`\\`\\`js\ncomponents: { apples: apples, bananas: bananas }\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"md`## Single-file components\n\nSo, Observable doesn’t have built-in support for Vue’s single-file components. We also don’t have built-in support for JSX, the equivalent non-standard magic for React. We’re figuring out a way to support these things in an opt-in basis rather than potentially adopting a bunch of syntaxes.\n\nSo consider this a TODO, or a challenge for the reader: using \\`@vue/component-compiler\\`, it probably _is_ possible, though unergonomic, to support these all-in-one files in Observable.`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}