/glue

Configure Vue.js components using ClojureScript, manage global state using Atoms.

Primary LanguageClojureMIT LicenseMIT

glue

Downloads Dependencies Status Build Status License Clojars Project

Trying to glue cljs and vue together.

Overview

So far main idea is just to configure components via clojurescript.

Demo

Check out the glue cljs demo app for the usage example.

Example

    <template id="sample-template">
        <div>
            <span>{{ label }} | </span>
            <span>{{ counterLabel }}</span>
            <button @click="clickMe">Click</button>
            <hr/>
        </div>
    </template>

    <div id="app">
        <sample-template label="sample button"></sample-template>
    </div>
(ns app.core
  (:refer-clojure :exclude [atom])
  (:require [glue.api :as g :refer [atom]]))

(g/defcomponent
  :sample-component
  {:template "#sample-template"
   :props [:label]
   :state (fn [] {:counter (atom 0)})
   :computed {:counter-label (fn [this state]
                               (str @(:counter state) " clicks"))}
   :methods {:click-me (fn [this state _]
                         (println "Click happened on" (g/prop this :label))
                         (swap! (:counter state) inc))}})

(g/vue {:el "#app"})

License

Copyright © 2017 Max Gonzih gonzih @ gmail.com

Distributed under the MIT license.