VueJS UI components for 3dwayfinder floor plan SDK. Uses Vuex to make the SDK data bindable. Read more.

Include 3dwayfinder SDK into your HTML head.

npm install @3dwayfinder/wayfinder-vue-components

import Vuex from 'vuex'
import WayfinderVueComponents from '@3dwayfinder/wayfinder-vue-components';

const store = new Vuex.Store({
    state: {
        appName: "Wayfinder Vue Components",
        currentPOI: null,
    },
    mutations: {
        setPOI (state, poi) {
        state.currentPOI = poi;
        },
    },
    actions: {
            setPOI : (context, poi) => {
                context.commit('setPOI',  Object.freeze(poi));
            },
    }
})

const WF_MAP_TYPE = "2d"; // "3d"

Vue.prototype.$WF_MAP_TYPE = WF_MAP_TYPE;
new Vue({
    store,
    render: h => h(App),
    created () {
        Vue.use(WayfinderVueComponents, this.$store) // Create it by passing in the store you want to use
    }
}).$mount('#app')

You need to change the project argument from demo to your project ID (a long hash found in the admin area in Projects page)

<script>
    import { WFMap } from '@3dwayfinder/wayfinder-vue-components'

    export default {
        name: 'app',
        components: {
            WFMap,
        },
        methods: {
            mapLoaded () {
                console.log('mapLoaded')
            },
	        onMapPOIClick (poi) {
                console.log('onMapPOIClick', poi)
            }
        }
    }
</script>

<template>
    <div id="app">
	    <div class="map-area-container">
            <WFMap project="demo" @poiClicked="onMapPOIClick" @loaded="mapLoaded" ref="map"/>
        </div>
    </div>
</template>

Components