@oneschema/vue

A tool for embedding OneSchema into your application with Vue. This library contains a Vue plugin which will allow you to add an iframe to your application which can open OneSchema and import data into your application.

Getting Started

Installation

You can install this package with npm:

npm i --save @oneschema/vue

With pnpm, install eventemitter3 alongside it:

pnpm add @oneschema/vue eventemitter3@^4.0.7

The importer class this component wraps extends EventEmitter from eventemitter3, so that type is part of the published declarations. pnpm keeps each package's dependencies isolated instead of hoisting them, so your build cannot resolve eventemitter3 unless it is declared in your project too. npm and yarn hoist it for you.

Configure the SDK

Create an instance of the OneSchemaPlugin by calling createOneSchemaImporter and passing it to Vue's app.use()

import { createApp } from "vue"
import { createOneSchemaImporter } from "@oneschema/vue"
import App from "./App.vue"

const app = createApp(App)

app.use(
  createOneSchemaImporter({
    clientId: "<CLIENT_ID>",
    ...initParams,
  }),
)

app.mount("#app")

Sample usage

Once the OneSchema plugin has been registered, you can call the useOneSchemaImporter function to obtain the OneSchemaImporterClass instance.

<script setup lang="ts">
import { useOneSchemaImporter } from "@oneschema/vue"

const importer = useOneSchemaImporter()

const launchOneSchema = function () {
  importer.launch()

  importer.on("success", (data) => {
    // TODO: handle success
    console.log(data)
  })

  importer.on("cancel", () => {
    // TODO: handle cancel
  })

  importer.on("error", (message) => {
    // TODO: handle errors
    console.log(message)
  })
}
</script>
<template>
  <button @click="launchOneSchema">Launch embed</button>
</template>

<style>
.oneschema-iframe {
  width: 100vw;
  height: 100vh;
  border: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10000; /* adjust as needed */
}
</style>

Documentation

Please see 📚 OneSchema's documentation for 📒 API reference and other helpful guides.