README
Nova Vue Bridge
This package contains a Vue component named Nova
that renders a placeholder also known as Nova Directive
Rendered placeholder:
<div data-hypernova-key="NavBar" data-hypernova-id="d0a0b082-dad0-4bf2-ae4f-08eff16575b4"></div>
<script type="application/json" data-hypernova-key="NavBar" data-hypernova-id="d0a0b082-dad0-4bf2-ae4f-08eff16575b4"><!--{"brand":"Ara Framework","links":[{"url":"https://github.com/ara-framework","text":"Github"}]}--></script>
On Client-Side Rendering the placeholder is where the component is going to be mounted or hydrated depending of the framework or library.
On Server-Side Rendering the placeholder is used by Nova Proxy or Nova Static to Server-Side Include the html rendered by Hypernova.
Install
npm install nova-vue-bridge
Usage
The Nova
component requires the props name
and data
name
is the registered view in Hypernova.data
is the data necessary to render the view.
<template>
<div class="container">
<nova name="Example" :data="{ title: 'Ara Framework' }" />
</div>
</template>
<script>
import Nova from 'nova-vue-bridge'
export default {
components: {
Nova
},
}
</script>
Mounting Hypernova Client Component
The Nova
component emits an custom event called NovaMount
on the document
when the Vue component is mounted. The event needs to be listen by the Hypernova's client script in order to mount the view when the placeholders is ready.
import { renderInPlaceholder } from 'hypernova-svelte'
import Example from './components/Example.svelte'
const { document } = global
document.addEventListener('NovaMount', (event) => {
const { detail: { name, id } } = event
if (name === 'Example') {
return renderInPlaceholder(name, Example, id)
}
})
The example above is using the method renderInPlaceholder
from hypernova-svelte
, this method should be available for the other supported bindings.