🧩 Extend the asset details page with custom tabs #

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

✨ What you'll build #

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

💡 This is useful for embedding asset-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 asset view #

In apps/web/src/views/asset/Asset.vue, create the following component:

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

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

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

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

2. Register your custom view #

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

import AssetView from './views/asset/Asset.vue';

app.appChunks.get('assets')?.removeChildrenRoute('asset-details');

app.appChunks.get('assets')?.addChildrenRoute({
  path: ':assetId/:activeTab',
  name: 'asset-details',
  meta: { isDetailPage: true, redirectTo: 'assets' },
  component: AssetView,
});

app.appChunks.get('assets')?.addChildrenRoute({
  path: ':assetId',
  name: 'asset-details',
  meta: { isDetailPage: true, redirectTo: 'assets' },
  component: AssetView,
});

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

3. Run and test #

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