@cerebral/vue

@cerebral/vue

Vue.js view for Cerebral.

Install

npm install @cerebral/vue vue

Container

import Vue from 'vue/dist/vue'
import App from 'cerebral'
import { Container, connect } from '@cerebral/vue'
import main from './main'

const app = App(main)

var vue = new Vue({
  el: '#app',
  components: {
    container: Container(app)
  }
})

Note! The HTML of the root element must use the container:

<div id="app">
  <container>
    <my-component></my-component>
  </container>
</div>

connect

MyComponent.js

import { connect } from '@cerebral/vue'
import { state, signal } from 'cerebral/proxy'

export default connect(
  {
    foo: state.foo,
    click: signal.clicked
  },
  {
    template: '<div v-on:click="click()">{{foo}}</div>'
  }
)

main.js

import Vue from 'vue/dist/vue'
import App from 'cerebral'
import { Container, connect } from '@cerebral/vue'
import MyComponent from './MyComponent'
import main from './main'

const app = App(main)

var vue = new Vue({
  el: '#app',
  components: {
    container: Container(app),
    'my-component': MyComponent
  }
})

.vue file

You can also connect inside a .vue file. When using ParcelJS this requires additional packages.

npm install parcel-plugin-vue babel-preset-env --save-dev

Then add the preset to your .babelrc file:

{
  "presets": ["env"],
  "plugins": ["cerebral"]
}

Your component file can now be written as:

MyComponent.vue

<template>
  <div v-on:click="click()">{{foo}}</div>
</template>
<script>
import { connect } from '@cerebral/vue'
import { state, signal } from 'cerebral/proxy'

export default connect(
  {
    foo: state.foo,
    click: signal.clicked
  }
)
</script>