Appearance

Components Overview ​

In previous iterations of Modular, I leveraged robust UI Toolkits like Vuetify and Prime Vue. While these are excellent options, a desire for more control over the components led to a change, guided by the following criteria:

  • Adoption of Vue 3 as the primary JavaScript framework.
  • Employment of Tailwind CSS for styling purposes.
  • Seamless integration of Custom Vue 3 Components with the Tailwind Theme System.
  • Easy customization of components by merely editing them. To facilitate this, components reside not in node_modules, but in "./resources/js/Components". Need some tweaking? Open the component, modify the Tailwind CSS classes, and save it. Done.
  • No use of Sass, Less, Stylus, etc. Tailwind CSS exclusively.
  • No TypeScript. Pure JavaScript only.
  • Light and exceedingly straightforward Common Components. If necessary, extend or create new components per project to imbue additional functionality.

Custom Built In Vue 3 Components ​

At present, Modular furnishes the following Custom Vue 3 Components:

bash
.
├── Auth
│   ├── AppAuthLogo.vue
│   └── AppAuthShell.vue
├── DataTable
│   ├── AppDataSearch.vue
│   ├── AppDataTable.vue
│   ├── AppDataTableData.vue
│   ├── AppDataTableHead.vue
│   ├── AppDataTableRow.vue
│   └── AppPaginator.vue
├── Form
│   ├── AppCheckbox.vue
│   ├── AppCombobox.vue
│   ├── AppFormErrors.vue
│   ├── AppInputDate.vue
│   ├── AppInputFile.vue
│   ├── AppInputPassword.vue
│   ├── AppInputText.vue
│   ├── AppLabel.vue
│   ├── AppRadioButton.vue
│   ├── AppTextArea.vue
│   ├── AppTipTapEditor.vue
│   └── TipTap
│       ├── TipTapButton.vue
│       ├── TipTapDivider.vue
│       └── extension-file-upload.js
├── Menu
│   ├── AppBreadCrumb.vue
│   ├── AppBreadCrumbItem.vue
│   ├── AppMenu.vue
│   ├── AppMenuItem.vue
│   └── AppMenuSection.vue
├── Message
│   ├── AppAlert.vue
│   ├── AppFlashMessage.vue
│   ├── AppToast.vue
│   └── AppTooltip.vue
├── Misc
│   ├── AppButton.vue
│   ├── AppCard.vue
│   ├── AppImageNotAvailable.vue
│   ├── AppLink.vue
│   ├── AppSectionHeader.vue
│   └── AppTopBar.vue
└── Overlay
    ├── AppConfirmDialog.vue
    ├── AppModal.vue
    └── AppSideBar.vue

Each of these components is crafted to integrate seamlessly with Modular, ensuring the most straightforward developer experience possible.

TIP

You are free to integrate any other Vue 3 component library of your choice, like PrimeVue, into your Modular Project. They will work well alongside the custom Vue 3 components provided by Modular.

Automatic Component Registration ​

Modular has an AppComponentsResolver.js file that can be found in resources/js/Resolvers/AppComponentsResolver.js. This file configures Unplugin for on-demand, tree-shakable Vue components auto importing. This means that you can use any of the Modular Vue Components in your application without having to import them manually.

Using External UI Libraries ​

If you want to use Vue Components from an external UI library in your project, you can do so. All Modular components are prefixed with the App prefix, allowing you to import external components as needed without major issues.