eva.js - higher level way to use Vue.jsinspired by choo

tl;dr

// model
app.model()
// router
app.router()
// bootstrap
app.start()

Play with the JSBin example or the simple webpack example 😀

Features

Battery included, Vue 2 and its friends (Vuex & Vue-Router)
Inspired by the choo framework which is inpired by the elm architecture

Install

$ npm install --save eva.js

In case you may want to use it directly in browser instead, view unpkg.com/eva.js/dist…, and add:

Usage

import eva from 'eva.js'

// Create app instance
const app = eva()

// A counter model
app.model({
  state: {count: 0},
  mutations: {
    INCREMENT(state) {state.count++}
  }
})

// A home view
const Home = {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  render(h) {
    return h(
      'div',
      [
        h('h1', 'Home'),
        h('button', {
          on: {click: () => this.$store.commit('INCREMENT')}
        }, this.count)
      ]
    )
  }
}

// Apply views to relevant routes
// route(path, view, child_routes)
app.router(route => [
  route('/', Home)
])

// Start app
const App = {
  render(h) {
    return (
      h(
        'div',
        {attrs: {id: 'app'}},
        [
          h('router-view')
        ]
      ),
    )
  }
}
app.start(App, '#app')

Concepts

Models

A model contains it's initial state and the methods you use to update its state, in fact, it's a typical Vuex module too.

Top-level model:

// An app instance only have at most one top-level model
app.model({
  state: {count: 0},
  mutations: {
    INCREMENT(state) {state.count++}
  }
})

Namespaced model:

// An app could have multiple namespaced models
app.model('user', {
  state: {login: false},
  mutations: {
    LOG_IN(state) {state.login = true}
  }
})

In most cases using namespaces is beneficial, as having clear boundaries makes it easier to follow logic.

Helpers:

As how you use Vuex^2, you can use its helpers too:

const {mapState, mapActions, mapGetters} = require('eva.js')
// or ES6 modules
import {mapState, mapActions, mapGetters} from 'eva.js'

Router

The router could render the component which matches the URL path. It has a route helper for creating an actual route object used in vue-router. routes as passed in as a nested array.

app.router(route => [
  route('/', Home),
  route('/settings', Settings, [
    route('/profile', SettingsProfile),
    route('/password', SettingsPassword)
  ])
])

View

A view is a simple Vue component, that easy :)

eva.js - higher level way to use Vue.js