Vueless file structure
All Vueless components follow a consistent file structure. We recommend adopting this structure when creating your own local components to ensure maintainability and consistency.
U[component]/
├─ storybook/
│ ├─ docs.mdx
│ └─ stories.ts
├─ tests/
│ ├─ U[component].test.ts
│ ├─ util[service].test.ts
│ ├─ use[composable].test.ts
│ └─ ... # rest tests
├─ config.ts
├─ constants.ts
├─ types.ts
├─ U[component].vue
│ # optional
├─ U[component][child].vue
├─ ... # rest child components
├─ use[composable].ts
├─ ... # rest composable
├─ util[service].ts
└─ ... # rest utilsui.form-date-picker-range/
├─ storybook/
│ ├─ docs.mdx
│ └─ stories.ts
├─ tests/
│ ├─ UDatePickerRange.test.ts
│ ├─ UDatePickerRangeInputs.test.ts
│ ├─ UDatePickerRangePeriodMenu.test.ts
│ └─ ... # rest tests
├─ config.ts
├─ constants.ts
├─ types.ts
├─ UDatePickerRange.vue
├─ UDatePickerRangeInputs.vue
├─ UDatePickerRangePeriodMenu.vue
├─ useLocale.ts
├─ useUserFormat.ts
├─ utilDateRange.ts
└─ utilValidation.ts📁 U[component]/
Each component should be contained within a single folder, maintaining a flat file structure. All component names must be prefixed with U to ensure proper recognition by Vueless.
📁 storybook/
Folder for Storybook-related files:
📜 docs.mdx – component docs page.
📜 stories.ts – component stories.
📁 tests/
Folder for test-related files:
📜 U[component].test.ts – component tests.
📜 util[service].test.ts – component utility service tests. (optional)
📜 use[composable].test.ts – component composable tests. (optional)
We recommend using vitest with @vue/test-utils for testing
📜 config.ts
Contains all styles, default prop values, internationalization (i18n), and other component-specific settings.
📜 constants.ts
Contains component constants.
📜 types.ts
Contains component types and props declaration.
📜 U[component].vue
Parent Vue component.
📜 U[component][child].vue (optional)
A child Vue component used within the parent component. The parent component may have multiple child components, all prefixed with the parent component’s name.
Example: UButtonIcon.vue (child of UButton.vue).
📜 use[composable].ts (optional)
Composables specific to the component. A component may have multiple composables, all prefixed with use keyword, following Vue conventions.
📜 util[service].ts (optional)
Utils, services and helpers specific to the component. A component may have multiple composables, all prefixed with util keyword.
Last updated