Third party Vue.js components [WIP]

Using a third party Vue.js component based on an example integrating https://soal.github.io/vue-mapbox/

Untested!

Ruby Component

class Components::MglMap < Matestack::Ui::VueJsComponent

  vue_name "mgl-map-component"

  optional :custom_map_style_hash

  def response
    plain tag.mglmap(":accessToken": "access_token", "mapStyle": "map_style")
  end

  private

    def access_token
      get_global_access_token_from_env
      #...
    end

    def map_style
      some_global_map_style_hash.merge!(context.custom_map_style_hash)
      #...
    end
end

Vue.js Component

import Vue from "vue/dist/vue.esm";
import MatestackUiCore from "matestack-ui-core";

import Mapbox from "mapbox-gl";
import { MglMap } from "vue-mapbox";

Vue.component('mgl-map-component', {
  mixins: [MatestackUiCore.componentMixin],
  data() {
    return {
      mapbox: undefined
    };
  },
  created(){
    this.mapbox = Mapbox;
  }
});

Usage

class SomePage < Matestack::Ui::Page

  def response
    div class: "some-layout" do
      Components::MglMap.(custom_map_style_hash: { ... })
    end
  end

end