@jbaysolutions/floorplan-vue

Website · Live demo · Documentation

Floor plan editor, viewer and optional 3D viewer components for Vue 3, by JBay Solutions.

npm install @jbaysolutions/floorplan-vue
npm install three   # only if you use the 3D viewer
npm install @jbaysolutions/floorplan-pack-garden   # optional: trees, garden furniture and outdoor features
npm install @jbaysolutions/floorplan-pack-office   # optional: desks, office chairs, meeting tables, phone booths
npm install @jbaysolutions/floorplan-pack-supermarket   # optional: shelving, fridges, counters, checkouts, trolleys
npm install @jbaysolutions/floorplan-pack-events   # optional: booths, stages and AV, event seating, registration
npm install @jbaysolutions/floorplan-pack-mobility   # optional: parking bays, vehicles, road markings, street furniture

import { FloorPlanEditor, FloorPlanViewer } from '@jbaysolutions/floorplan-vue'
import { FloorPlanViewer3D } from '@jbaysolutions/floorplan-vue/3d' // optional
import '@jbaysolutions/floorplan-vue/style.css'

<FloorPlanEditor v-model="plan" />

<FloorPlanViewer :plan="plan" :markers="markers" @plan-click="({ x, y, room }) => ..." />

<FloorPlanViewer3D :plan="plan" :markers="markers" />

Each component fills its parent, so give the parent a height.

Documentation: floorplan.jbaysolutions.com/docs (guides, every prop and event, live examples). Not using Vue? See @jbaysolutions/floorplan-react and @jbaysolutions/floorplan-elements.

Licence

Free for open-source projects and for companies with under €1M yearly revenue, including in production. Other companies buy one commercial licence per company, per major version. Add-on packs are included. See LICENSE.md for the terms.

© JBay Solutions.