Overview Version History Q & A Rating & Review
🌿 Kafeel ERP Frontend Snippets
A collection of handy Vue 3 and TypeScript snippets designed for faster and cleaner development in Kafeel ERP Frontend projects.ERP-UiKit components, MSW mock APIs , and validation utilities .
📦 Installation
You can install the extension from the Visual Studio Marketplace once it’s published:
ext install yuosifraedhashem.alkafeel-erp-f-snippets
📋 Snippet Reference
Snippet Name
Prefix
Description
Fetch Data From (MSW) msw-fetchFetch mock data using MSW API and useApi composable.
Import KFAdvancedSelect kf-i-advanced-selectImport the KFAdvancedSelect component from ERP-UiKit.
Import KFDataTable kf-i-datatableImport the KFDataTable component from ERP-UiKit.
Import RequiredValidation kf-i-requiredValidationImport the requiredValidator method from ERP-UiKit.
Import KFTree kf-i-tree-componentsImport the KFTree component from ERP-UiKit.
Import KFDialogWithDiscard kf-i-dialog-with-discardImport the KFDialogWithDiscard component from ERP-UiKit.
Import AppTextField i-app-text-areaImport the AppTextField component from ERP-UiKit.
Import AppTextArea i-app-text-fieldImport the AppTextArea component from ERP-UiKit.
Import AppDateTimePicker i-app-time-pickerImport the AppDateTimePicker component from ERP-UiKit.
Use RequiredValidation kf-u-requiredValidationApply the requiredValidator helper in templates.
Use AppTextField kf-u-app-text-fieldApply the AppTextField helper in templates.
🧩 Snippet Examples
Fetch Data From (MSW) // Fetch pets data
const { data: data } = await useApi<any>(createUrl('/pages/fake-feature', {
query: {
search: ''
},
}));
const features = computed((): Feature[] => data.value.features)
