Reusable Vue components

Finished components

AppButton
FormInputField
AppModal

Usage

Add components to project using the following commands

npx @wisemen/vue-cli init
npx @wisemen/vue-cli add
npx @wisemen/vue-cli add all

Init installs global dependencies and components such as your tailwind config, transitions and icons.
With the add command you can install specific components, which will install all their relevant dependencies.
Use add all to install all possible components.

Adding components

Making component

Inside the modules/ui folder, add your relevant components / composables / other dependencies.

Registering components

Once the code is made, inside the componentsTypes.ts file inside the /scripts folder, add your component name.
After add a corresponding file inside the scripts/components folder.
Each component has a name, a component, possible internal dependencies, possible dependencies and a series of files.

Name	Description
`name`	Name in the cli tool
`component`	Name used to identify the component
`internalDependencies`	Other components this components relies on
`dependencies`	Packages this components relies on
`files`	Files relevant to this component

Each file has a type of file, a path and a folder.

Name	Description
`type`	Component / Composable / ... -> Used to generate the correct folder placement
`path`	Location of the file in this project
`folder`	Location of the file inside the project you are installing the component

E.g appButton.ts

import { ComponentName, ComponentType } from '../../componentsTypes'

export const appButton = {
  component: ComponentName.APP_BUTTON,
  name: 'Button',
  files: [
    {
      type: ComponentType.COMPONENTS,
      path: './src/modules/ui/components/buttons/app-button/AppButton.vue',
      folder: 'buttons',
    },
    {
      type: ComponentType.COMPONENTS,
      path: './src/modules/ui/components/buttons/app-button/appButtonVariants.ts',
      folder: 'buttons',
    },
    {
      type: ComponentType.COMPONENTS,
      path: './src/modules/ui/components/buttons/app-button/AppButtonLoader.vue',
      folder: 'buttons',
    },
  ],
  internalDependencies: [ComponentName.TRANSITIONS, ComponentName.APP_ICON],
}

Finally add the component to the components.ts file

Building components.json

Run the command

pnpm build:components

wisemen-digital/vue-components