Get Started with Vuetage library

Vuetage is a library of custom Vue components designed to simplify and enhance the web development experience for frontend developers. This library is open source, and anyone with good intentions can contribute new components and fix possible bugs.

Installation

Note (important)

To use the Vuetage library, you must have installed the Vue 3 in your project. Probably you will find problems if you try to use it on Vue 2.

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

bun i -D vuetage

Usage

To use the components, simply import them. For example, to use the BaseButton, BaseTextField, and BaseSelect component, import it as shown below.

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

Full example

<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:

{
  "name": "",
  "email": "",
  "country": {
    "text": "",
    "value": ""
  }
}