Vue
Getting Started
The OneSchema Vue package contains a Vue plugin to help embed OneSchema into your application
Installation
You can install this package with npm:
npm i --save @oneschema/vue
Sample usage
Create an instance of the OneSchemaPlugin
by calling createOneSchemaImporter
and passing it to Vue's app.use()
import { createOneSchemaImporter } from '@oneschema/vue'
const app = createApp(App)
app.use(
createOneSchemaImporter({
/* required here */
clientId: 'YOUR_CLIENT_ID',
/* required here or at launch */
templateKey: 'YOUR_TEMPLATE_KEY',
userJwt: 'YOUR_USER_JWT',
/* optional */
importConfig: { type: "local" },
devMode: true,
className: 'oneschema-importer',
})
)
app.mount('#app')
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>
API Reference
Table of Contents
The following functions are exported from the @oneschema/vue
package.
createOneSchemaImporter function
Calling this function inside of the app.use()
will register the OneSchemaPlugin
to your app.
params
Required | |
Type | Object (OneSchemaParams) |
Description | The parameters given at initialization |
useOneSchemaImporter function
Returns a OneSchemaImporterClass
object, which can be used to launch and close the importer. See documentation for more information.
Sample usage:
importer.launch(params)
importer.close(clean)
importer.on('success', (data) => {
console.log(data)
})
importer.on('cancel', () => {
console.log('OneSchema embed flow cancelled')
})
importer.on('error', (message) => {
console.log(message)
})
Updated about 1 year ago