Custom Components

The Ioto Device Manager is capable of handling most device management display and modification tasks, however, refined solutions will typically create custom components to extend the Manager to perform specific tasks or to provide a more appropriate user interface for some aspect of device management.

Regardless of how large your extensions are, you can still leverage the core Manager application including authentication, navigation and UI framework.

Extending the Manager

To extend the Ioto Device Manager, you create your own VueJS components and build these to be integrated into the Manager.

When a user navigates to the Manager (YourName.ioto.me) in their browser, they will run the Manager app together with any defined custom components in one seamless app.

Creating Custom Components

To integrate VueJS custom components into the Manager, the components must be built and packaged as a single package in a specific way.

Consider this sample (trivial) VueJS component:

<script setup>
//  Custom logic here
import {onMounted} from 'vue'
onMounted(() => {
    //  Your logic here
})
</script>

<template>
    <div>
        <h2 class="custom">Custom Logic</h3>
    </div>
</template>

<style lang="scss">
.custom {
    color: red;
}
</style>

You can build this with the following Vite vite.config.js configuration file.

This will create a Components.js file that can be uploaded to the Builder.

import vue from '@vitejs/plugin-vue2'
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"
const path = require('path')
const { defineConfig } = require('vite')

module.exports = defineConfig({
    plugins: [ vue(), cssInjectedByJsPlugin() ],
    build: {
        lib: {
            entry: path.resolve(__dirname, 'src/index.ts'),
            name: 'Custom',
            formats: [ 'es' ],
            fileName: (format) => `Components.js`,
        },
        rollupOptions: {
            external: ['vue'],
            output: {
                globals: { vue: 'Vue' },
            },
            manualChunks: undefined,
        },
        minify: false
    }
})

Uploading Your Components

To upload your package, using the Builder Cloud / Edit panel and select Update Manager UI and complete the UI Extension Components section. The builder will then add your package to the Manager UI site for your device cloud.

See the Kickstart sample application contains a working directory (./cloud) to demonstrate creating a packaged VueJS component.