{"id":19671746,"url":"https://github.com/3dtech/wayfinder-vue-components","last_synced_at":"2025-04-29T01:30:39.406Z","repository":{"id":57093630,"uuid":"392241855","full_name":"3dtech/wayfinder-vue-components","owner":"3dtech","description":"VueJS components for 3D Wayfinder Front End application","archived":false,"fork":false,"pushed_at":"2025-02-28T13:15:37.000Z","size":1523,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-05T12:04:11.554Z","etag":null,"topics":["floor","floorplan","javascript","map","vue","vuejs","wayfinding"],"latest_commit_sha":null,"homepage":"https://3dwayfinder.com/documentation/javascript-api/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/3dtech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-03T08:14:51.000Z","updated_at":"2025-02-28T13:15:40.000Z","dependencies_parsed_at":"2023-01-30T18:01:19.507Z","dependency_job_id":"43818467-229a-4d26-92b9-bc2816ac1d31","html_url":"https://github.com/3dtech/wayfinder-vue-components","commit_stats":{"total_commits":171,"total_committers":2,"mean_commits":85.5,"dds":"0.42105263157894735","last_synced_commit":"9076eb36bec998b88d47beeb991a5698ae1fa4ff"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3dtech%2Fwayfinder-vue-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3dtech%2Fwayfinder-vue-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3dtech%2Fwayfinder-vue-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3dtech%2Fwayfinder-vue-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/3dtech","download_url":"https://codeload.github.com/3dtech/wayfinder-vue-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251415581,"owners_count":21585856,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["floor","floorplan","javascript","map","vue","vuejs","wayfinding"],"created_at":"2024-11-11T17:09:39.271Z","updated_at":"2025-04-29T01:30:38.794Z","avatar_url":"https://github.com/3dtech.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# wayfinder-vue-components\nVueJS UI components for 3dwayfinder floor plan SDK.\nUses Vuex to make the SDK data bindable.\n[Read more](https://3dwayfinder.com).\n\n# Installation\nInclude 3dwayfinder SDK into your HTML head.\n### Install with npm\n\n    npm install @3dwayfinder/wayfinder-vue-components\n\n### Add into main.js\n\n    import Vuex from 'vuex'\n    import WayfinderVueComponents from '@3dwayfinder/wayfinder-vue-components';\n\n### Create a store or use a existing one. 3DWayfinder creates namespaced ('wf') store itself.\n\n    const store = new Vuex.Store({\n        state: {\n            appName: \"Wayfinder Vue Components\",\n            currentPOI: null,\n        },\n        mutations: {\n            setPOI (state, poi) {\n            state.currentPOI = poi;\n            },\n        },\n        actions: {\n                setPOI : (context, poi) =\u003e {\n                    context.commit('setPOI',  Object.freeze(poi));\n                },\n        }\n    })\n### Set which map type is used\n\n    const WF_MAP_TYPE = \"2d\"; // \"3d\"\n\n### Load wayfinder and the vuex store. Notice that wayfinder is passed a little differently than usual. This is because of wayfinder needs Vuex as a dependcy.\n\n    Vue.prototype.$WF_MAP_TYPE = WF_MAP_TYPE;\n    new Vue({\n        store,\n        render: h =\u003e h(App),\n        created () {\n            Vue.use(WayfinderVueComponents, this.$store) // Create it by passing in the store you want to use\n        }\n    }).$mount('#app')\n\n# Usage\nYou need to change the project argument from **demo** to your **project ID** (a long hash found in the admin area in Projects page)\n\n    \u003cscript\u003e\n        import { WFMap } from '@3dwayfinder/wayfinder-vue-components'\n\n        export default {\n            name: 'app',\n            components: {\n                WFMap,\n            },\n            methods: {\n                mapLoaded () {\n                    console.log('mapLoaded')\n                },\n\t\t        onMapPOIClick (poi) {\n                    console.log('onMapPOIClick', poi)\n                }\n            }\n        }\n    \u003c/script\u003e\n\n    \u003ctemplate\u003e\n\t    \u003cdiv id=\"app\"\u003e\n\t\t    \u003cdiv class=\"map-area-container\"\u003e\n                \u003cWFMap project=\"demo\" @poiClicked=\"onMapPOIClick\" @loaded=\"mapLoaded\" ref=\"map\"/\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/template\u003e\n\n# Components\n\n[Components](./COMPONENTS.md)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3dtech%2Fwayfinder-vue-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F3dtech%2Fwayfinder-vue-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3dtech%2Fwayfinder-vue-components/lists"}