@cerebral/vue

@cerebral/vue

Vue.js view for Cerebral.

Install

npm install @cerebral/vue vue

Container

import { createApp } from 'vue'
import App from 'cerebral'
import { Container, connect } from '@cerebral/vue'
import main from './main'
import AppComponent from './AppComponent'

const app = App(main)

createApp({
  components: {
    Container: Container(app),
    AppComponent
  },
  template: '<Container><AppComponent /></Container>'
}).mount('#app')

connect

MyComponent.js

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

export default connect(
  {
    foo: state`foo`,
    click: sequence`clicked`
  },
  {
    template: '<div @click="click">{{foo}}</div>'
  }
)

main.js

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

const app = App(main)

createApp({
  components: {
    Container: Container(app),
    'my-component': MyComponent
  },
  template: '<Container><my-component /></Container>'
}).mount('#app')

Vue 2 Support

For Vue 2, you need to use the complete Vue build that includes the template compiler:

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

const app = App(main)

new Vue({
  render: (h) =>
    h({
      components: {
        Container: Container(app),
        AppComponent: AppComponent
      },
      template: '<Container><AppComponent /></Container>'
    })
}).$mount('#app')

For projects created with vue-cli, add this to your vue.config.js:

module.exports = { runtimeCompiler: true }