@finema/core playground

Working examples of every part of the kit. Each example is a real file: what you see running is exactly the code printed under it, so you can copy it into an app that has the module installed.

Starter template

Starting a new project? Use the template

A Nuxt 3 project with @finema/core already installed and configured. Clone it and start building instead of setting everything up by hand.

$git clone https://gitlab.finema.co/finema/shared/nuxt3-template-with-uikit.git my-app
Open the template on GitLab

How to use this playground

  • Examples live in playground/examples/ ; the path is shown on each card. Copy code copies the whole file.
  • Nothing in an example is imported from the kit: components, composables, helpers, v and useForm are auto-imported, exactly as in your app.
  • Live state under an example shows its real values (form values, loader status) as you interact.
  • Data comes from an in-memory mock API ( playground/server/api/mock/ ) with pagination, search, CRUD and validation errors. It resets when the server restarts.
  • New here? Read Setup , Form basics , Loaders , then the CRUD cookbook , in that order.

Start here

Setup & config

Install the module, app.config options, texts, theme

Forms

Form basics

Schema, fields, submit, validation, conditional fields, server errors, layout

Field catalogue

Every INPUT_TYPES value with its most useful props

Upload fields

File, auto-upload, multiple files, image with dimension rules

Data

Loaders

usePageLoader, useListLoader, useObjectLoader: status, errors, cancel, cache

Table

useTable, column types, cell slots, search, row links, TableSimple

FlexDeck

Card layouts on the same loader, with pagination or infinite scroll

Feedback

Dialog

Alerts, confirm, and the blocking loading dialog

Notification

Toasts for success, error, info and warning

Components

Loader, Empty, Image, Log

Utilities

Helpers

NumberHelper, TimeHelper, StringHelper, ArrayHelper, ObjectHelper, useWatch*

Cookbook

CRUD page

List, search, create, edit and delete in one page, the way real screens are built

Register page

A complete sign-up form