Integration with Vue

Quick start

Warning

Supported Vue version: at least 3

To use the Vue version of the JS API, simply connect the @mappable-world/mappable-vuefy module:

const mappableVue = await mappable.import('@mappable-world/mappable-vuefy');
const vuefy = mappableVue.vuefy.bindTo(Vue);
const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapMarker} = vuefy.module(mappable);

And then use any JS API objects as Vue components:

<template>
  <MMap :location="location">
    <MMapDefaultSchemeLayer />
    <MMapDefaultFeaturesLayer />
    <MMapMarker :coordinates="[34, 57]" draggable>
      <div class="marker marker_pill">I'm marker!</div>
    </MMapMarker>
  </MMap>
</template>

Specifying input props for your own classes

Vue components require explicit declaration of props so that Vue knows which of them should be treated as additional attributes.

For basic objects from the mappable namespace, the input parameters are defined by default, and no additional actions are required.

If you are a developer who creates your own classes (for example, within a separate package), then you can determine which input parameters will be in the component. The props definition supports the Vue format. For example, the custom class MMapSomeClass:

type MMapSomeClassProps = {
  id: string;
  counter?: number;
};
export class MMapSomeClass extends mappable.MMapComplexEntity<MMapSomeClassProps> {
  static [mappableVue.vuefy.optionsKey] = {props: ['id', 'counter']};
  //...
}

In addition to the array of strings, we can also use the object syntax:

export class MMapSomeClass extends mappable.MMapComplexEntity<MMapSomeClassProps> {
  static [mappableVue.vuefy.optionsKey] = {
    props: {
      id: String,
      counter: Number
    }
  };
  //...
}

or with validation of input parameters:

export class MMapSomeClass extends mappable.MMapComplexEntity<MMapSomeClassProps> {
  static [mappableVue.vuefy.optionsKey] = {
    props: {
      id: {type: String, required: true},
      counter: {type: Number, required: false}
    }
  };
  //...
}

Specifying input props when using third-party packages

If the developers of third-party packages haven't defined input parameters for their classes, you should specify them when calling vuefy yourself by passing them in as the second argument:

const mappableVue = await mappable.import('@mappable-world/mappable-vuefy');
const vuefy = mappableVue.vuefy.bindTo(Vue);
const {MMapSomeClass as MMapSomeClassV} = vuefy.module(
  {MMapSomeClass},
  {
    MMapSomeClass: ['id', 'counter'] // props for the MMapSomeClass
  }
);

Similarly, the object syntax and validations shown above are supported.

Custom implementations of objects mappable.MMapEntity for Vue

When the standard conversion is not sufficient, use the overrideKey key to specify your own implementation of vuefy:

type MMapSomeClassProps = {
  id: string;
  counter?: number;
};
/* object mappable.MMapEntity */
export class MMapSomeClass extends mappable.MMapComplexEntity<MMapSomeClassProps> {
  static [mappableVue.vuefy.overrideKey] = MMapSomeClassVuefyOverride;
  //...
}

MMapSomeClassVuefyOverride is the method that should return the Vue component. As parameters, it gets a base class, declared props, and an object with Vue and vuefy if their methods are required. In the example below, a wrapper MMapSomeClassV is created with additional logic around the component obtained by the basic vuefy method:

export const MMapSomeClassVuefyOverride: CustomVuefyFn<MMapSomeClass> = (
  MMapSomeClassI, // basic MMapSomeClass
  props, // declared props
  {vuefy, Vue}
) => {
  // Standard vuefy method
  const MMapSomeClassVuefied = vuefy.entity(MMapSomeClassI, props);
  const MMapSomeClassV = Vue.defineComponent({
    props,
    name: 'MMapSomeClassV',
    components: {MMapSomeClassVuefied},
    setup() {
      // additional logic of the user implementation
    },
    template: `<MMapSomeClassVuefied v-bind="$props" ... />`
  });
  return MMapSomeClassV;
};

the resulting component can be used in the application:

const mappableVue = await mappable.import('@mappable-world/mappable-vuefy');
const vuefy = mappableVue.vuefy.bindTo(Vue);
const MMapSomeClassV = vuefy.entity(MMapSomeClass);
const app = createApp({
  components: {MMapSomeClassV},
  template: `<MMapSomeClassV id="some_id" />`
});
app.mount('#app');
Previous
React
Next
Events