scottcorgan · January 23, 2017 17:36 · Dec 19, 2016 · Dec 19, 2016 · Dec 19, 2016 · Dec 19, 2016
diff --git a/vue_adapter.coffee b/vue_adapter.coffee
@@ -1,3 +1,4 @@
+# Vue adapter to mount/destroy components
 VueAdapter =
   init: ->
     @vueModels = []

diff --git a/my_component.coffee → my_vue_component.coffee b/my_component.coffee → my_vue_component.coffee
diff --git a/component.html.erb → vue_component.html.erb b/component.html.erb → vue_component.html.erb
diff --git a/component.html.erb b/component.html.erb
@@ -0,0 +1,8 @@
+<%= vue_component 'MyComponent', my_prop: 'awesome prop!' %>
+
+<!--
+Final Outpout:
+<div data-vue-component="MyComponent" data-vue-props="{&quot;my-prop&quot;:&quot;awesome prop!&quot;}">
+   <div>A custom component with awesome prop!</div>
+</div>
+-->
diff --git a/my_component.coffee b/my_component.coffee
@@ -0,0 +1,3 @@
+@MyComponent =
+  props: ['myProp']
+  template: '<div>A custom component with {{myProp}}</div>'
diff --git a/vue_adapter.coffee b/vue_adapter.coffee
@@ -0,0 +1,36 @@
+VueAdapter =
+  init: ->
+    @vueModels = []
+    vueComponents = document.querySelectorAll('[data-vue-component]')
+    return if vueComponents.length <= 0
+    self = this
+    for i in [0...vueComponents.length]
+      self.mountComponent(vueComponents[i])
+
+  mountComponent: (component) ->
+    name = component.getAttribute('data-vue-component')
+    props = JSON.parse(component.getAttribute('data-vue-props'))
+    if typeof window[name] == 'object'
+      vm = @newVueInstance(name, props)
+      component.innerHTML = ""
+      component.appendChild(vm.$el)
+      @vueModels.push(vm)
+
+  newVueInstance: (name, props) ->
+    element = document.createElement(name)
+    for key, value of props
+      element.setAttribute(key, value)
+    new Vue({
+      template: element.outerHTML
+      components: { "#{name.toLowerCase()}": window[name] }
+    }).$mount()
+
+  destroy: ->
+    for vm in @vueModels
+      for child in vm.$children
+        child.$destroy()
+      vm.$destroy()
+    @vueModels = []
+
+document.addEventListener 'turbolinks:load', -> VueAdapter.init()
+document.addEventListener 'turbolinks:before-cache', -> VueAdapter.destroy()
diff --git a/vue_helper.rb b/vue_helper.rb
@@ -0,0 +1,28 @@
+module VueHelper
+  def vue_component(component_name, props = {}, html_options = {})
+    html_options = html_options.reverse_merge(data: {})
+    props = VueHelper.dasherize_props(props)
+    html_options[:data].tap do |data|
+      data[:vue_component] = component_name
+      data[:vue_props] = props.to_json
+    end
+    html_tag = html_options[:tag] || :div
+    html_options.except!(:tag)
+    content_tag(html_tag, '', html_options)
+  end
+
+  def self.dasherize_props(props)
+    case props
+      when Hash
+        props.each_with_object({}) do |(key, value), new_props|
+          new_key = key.to_s.dasherize
+          new_value = VueHelper.dasherize_props(value)
+          new_props[new_key] = new_value
+        end
+      when Array
+        props.map { |item| VueHelper.dasherize_props(item) }
+      else
+        props
+    end
+  end
+end
No results found