🧩 Extend the device details page with custom tabs #

This guide explains how to extend the device details page by injecting custom tabs using a named slot.

✨ What you'll build #

You'll create a new tab inside the device details page that displays custom content.

💡 This is useful for embedding device-specific widgets, controls, or analytics.

🛠 Prerequisites #

You're using the @kuzzleio/iot-platform-frontend library.

Your app is already configured and running with the IoT Platform frontend.

You have access to the apps/web/src folder in your frontend project.

🧪 Step-by-step #

1. Create a custom device view #

In apps/web/src/views/device/Device.vue, create the following component:

<template>
    <KDevice :current-index="currentIndex">
        <template #tabs="{ device }">
            <KTab name="my-tab" title="My Tab">
                <div>Content</div>
            </KTab>
        </template>
    </KDevice>
</template>

<script lang="ts" setup>
import { KDevice, KTab } from '@kuzzleio/iot-platform-frontend';

export interface DeviceProps {
  currentIndex: string;
}
defineProps<DeviceProps>();
</script>

This adds a new tab labeled My Tab to the device details view.

2. Register your custom view #

In your main entry file (apps/web/src/main.ts), replace the default route:

import DeviceView from './views/device/Device.vue';

app.appChunks.get('devices')?.removeChildrenRoute('device-details');

app.appChunks.get('devices')?.addChildrenRoute({
  path: ':deviceId/:activeTab',
  name: 'device-details',
  meta: { isDetailPage: true, redirectTo: 'devices' },
  component: DeviceView,
});

app.appChunks.get('devices')?.addChildrenRoute({
  path: ':deviceId',
  name: 'device-details',
  meta: { isDetailPage: true, redirectTo: 'devices' },
  component: DeviceView,
});

📝 You must re-declare both routes (:deviceId and :deviceId/:activeTab) for full compatibility.

3. Run and test #

Now you can run your iot-platform and go to a device details page to see your new tab.