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]/
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 β custom component docs page.
π stories.ts β component stories.
π 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].test.ts
Contains unit tests for the component. We recommend using vitest
with @vue/test-utils
for testing.
π 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