@alessiajs/vue

The basics of Alessia, for Vue 2 and Vue 3!

Find out more about Alessia: https://gitlab.com/nodopianogit/alessia

Usage

In Vue 2

First, install Alessia as a dependency:

yarn add @alessiajs/vue # npm i @alessiajs/vue

Then, simply import AlessiaRender in your SFC and start using it!

<template>
  <div>
    <alessia-render :blocks="blocks" :content.sync="content" />
  </div>
</template>

<script>
import { AlessiaRender } from '@alessiajs/vue'

export default {
  components: { AlessiaRender },

  data() {
    return {
      blocks: {}, // Alessia - compatibile blocks: https://gitlab.com/nodopianogit/alessia/-/blob/master/specs/English.md#json-response-specification
      content: {}
    }
  }
}
</script>

Add your custom blocks

Alessia doesn't provide any default block, but you can easily create or transform an existing component into an Alessia-compatible block component.

Simply use the provided BlockMixin and register the component globally using the kebab-case syntax following the {block-name}-block pattern.

For example, if you have a custom AwesomeText component, make sure to:

1. Use BlockMixin:

<template>
  <div>
  <!-- Your template -->
  </div>
</template>

<script>
import { BlockMixin } from '@alessiajs/vue'

export default {
  mixins: [BlockMixin],
  // ...
}
</script>

2. Register your component globally:

import Vue from 'vue'
import AwesomeText from './path/to/AwesomeText.vue'

// Kebab case and -block at the end
Vue.component('awesome-text-block', AwesomeText)

And you are done!

Thanks to

Thanks to Vue Use and Vue Demi, that allowed us to develop AlessiaJS for both Vue 2 and Vue 3 at the same time.

---

Made by Nodopiano