v-portal-components

V-Portal Components Library

Overview

The V-Portal Components Library provides a set of reusable Vue.js components designed for building modules within the V-Portal ecosystem.

These components ensure consistency in UI/UX and streamline development for V-Portal modules.

V-Portal is a modular, robot-agnostic platform developed by VIKASO to manage and deploy robotic applications across industrial projects. Its modular architecture allows developers to create custom plug-ins (modules) that integrate seamlessly with the platform.

Storybook Preview

Styling

Components are built on Nuxt UI and styled with vikaso-design-tokens semantic utilities (bg-default, text-muted, bg-primary…). The app's Nuxt UI theme (vikaso-nuxt-ui) themes the Nuxt UI parts. Colours follow the app's theme (.dark class) and any runtime overrides of the --vk-* variables.

Peer dependencies: vue, @nuxt/ui, vikaso-design-tokens, vikaso-nuxt-ui. The app sets up Nuxt UI with ui(vikasoNuxtUi()); the library imports Nuxt UI components but never bundles them.

In a Tailwind CSS v4 app:

@import "tailwindcss";
@import "@nuxt/ui";
@import "vikaso-design-tokens/tailwind.css";
@import "vikaso-nuxt-ui";
@import "v-portal-components/tailwind.css";

v-portal-components/tailwind.css makes the app's Tailwind compile the classes the components use (one compile, so utilities never conflict).

import vpc from 'v-portal-components';
app.use(vpc); // registers vpTable, vpTablePage, vpDialogActions…

Types such as StepperStep and UploadProgress are exported from the package root.

Development

npm run storybook   # Storybook with Nuxt UI and the VIKASO theme (dark, light, split)
npm run build       # types + library build into dist/