vuetage

vuetage

Vuetage is a library of custom Vue components designed to simplify and enhance your web development experience.

Installation

You can install the Vuetage library using your prefer package manager.

Bun

bun i -D vuetage

Usage

After installing the Vuetage library, you can import the components you need in your Vue project.

import { BaseButton, BaseSelect, BaseTextField } from 'vuetage'

Make sure to include the component's markup in your Vue template:

<template>
  <form @submit.prevent style="width: 240px; margin: 2em auto;">
      <BaseTextField
          label="Name"
          placeholder="Enter your name"
          v-model="name"
      />
      <BaseTextField
          label="Email"
          placeholder="Enter your email"
          v-model="email"
      />
      <BaseSelect
          label="Country"
          :options="countries"
          v-model="country"
      />
      <BaseButton
          rightIcon="fa fa-rocket"
          size="small"
          :disabled="isDisabled"
          :loading="isLoading"
          @click="submit"
      >
        Submit form
      </BaseButton>
  </form>
</template>

NOTE

There are a lot of props to modify the styles of component, this is just a default, you can edit the colors, size, effects, and add custom styles as you need.

The Result of this code will be:

If you want to see it in action, you can check it on storybook.

For a more comprehensive understanding of each component's capabilities and usage, consult the documentation.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

Contributions from the community are highly valued. Please review our CONTRIBUTION for more information.