Getting Started #

Installation #

Vue Blox is available as a node package. For the latest stable version, run:

npm install vue-blox

Create Your Components #

Create one or more standard Vue components to map to Vue Blox. Here, we create a MyHeadingComponent that displays a "text" prop inside h1 tags, and a MyLabelComponent that displays a "text" prop inside span tags:

MyHeadingComponent:

// MyHeadingComponent.vue
<script lang="ts">
import { defineComponent} from 'vue'

export default defineComponent({
	name: 'MyHeadingComponent',
	components: {},
	props: {
		text: {
			type: String,
			required: false,
			default: undefined
		}
	},
	emits: [],
	setup() {
		return {}
	},
})

</script>

<template>
	<h1>
		{{ text }}
	</h1>
</template>

MyLabelComponent:

// MyLabelComponent.vue
<script lang="ts">
import { defineComponent} from 'vue'

export default defineComponent({
	name: 'MyLabelComponent',
	components: {},
	props: {
		text: {
			type: String,
			required: false,
			default: undefined
		}
	},
	emits: [],
	setup() {
		return {}
	},
})

</script>

<template>
	<span>
		{{ text }}
	</span>
</template>

Install the Plugin #

Register your components with Vue Blox globally using the registerBlox(...) composable with Vue's plugin API.

The strings in the catalog keys represent the values Vue Blox will look for in the "type" keys on any objects you pass to BloxComponents in your template. So, in this example, we would need to provide an object with a "type" property set to either "heading" or "label" in order for the corresponding component to be rendered.

import App  from  './App.vue'
import { createApp } from  'vue'
import { registerBlox } from  'vue-blox'
import MyHeadingComponent from './MyHeadingComponent.vue'
import MyLabelComponent from './MyLabelComponent.vue'

const app = createApp(App)

const blox = registerBlox({
	catalog: {
		'heading': MyHeadingComponent,
		'label': MyLabelComponent
	}
})

app.use(blox)
app.mount('#app')

Obtain a View #

Obtain a JS object (called a "view" in the Vue Blox world) describing your desired component to render (ensuring it at least has a "type" property with a string value matching one of the types you mapped via registerBlox(...) earlier). In this example, we will construct the object directly within the App component's setup(), but this could just as easily come from an API call, or be built in real-time based on user interactions.

Any other fields in your input view will be passed to the corresponding component as props. In this example, we have an additional "text" property of "Hello, Blox!", which will be passed to the rendered MyHeadingComponent's text prop at runtime.

Then, pass this view to a BloxComponent in your template.

// App.vue
<script lang="ts">
import { defineComponent } from 'vue'
import { BloxComponent } from 'vue-blox'

export default defineComponent({
	name: 'App',
	components: {},
	props: {},
	setup() {
		
		// Construct a JS object to render
		const view = {
			type: 'heading',
			text: 'Hello, Blox!'
		}

		return {
			view
		}
	},
})
</script>

<template>
	<main>
		<!-- Pass the view to a BloxComponent for rendering -->
		<BloxComponent :view="view"/>
	</main>
</template>