Seiten · Laravilt

Frontend Components

Build the Vue or React component for a custom infolist entry.

The built-in entries ship in both stacks. Vue components live in resources/js/components/entries/*.vue and React components in resources/react/components/entries/*.tsx of laravilt/infolists.

React support requires Laravilt v1.1 or later.

The component receives the entry's props: name, label, state, icon, color, plus your custom props (e.g. maxValue).

Vue

vue

React

tsx

How entries are resolved

React: the schema renderer (Schema.tsx) looks up unknown component types in the shared registry, so the registerComponent('laravilt-progress-entry', …) call above is enough there. The standalone InfoList component uses a fixed map of the eight built-in entries and shows unknown types as a TextEntry.
Vue: the schema renderer (Schema.vue) falls back to the app's global components. It tries the type itself, then laravilt-<type with _ replaced by ->. Register the entry with app.component('laravilt-progress-entry', ProgressEntry) and it renders in view pages. The standalone InfoList component uses a fixed map of the eight built-in entries and shows unknown types as a TextEntry.