Out of the Vue

A functional component library based on Vue 3 and Vite

Introduction

Out-of-the-vue is a Vue component library focused on offering functionality rather than design. No more messing around with the same functionalities (such as form field validations, modals, etc.) for each project, so you can focus on your features.

The project provides a very minimal design for layout but other than that, you're completely free to make it your own.

Features

• Lightweight with automatic tree-shaking
• Rich features
• Out-of-the-box TypeScript support
• Fully tested using Vitest
• Functionalities can be used as both components as composables
• Build your own components using the base components as building blocks

Some functionalities:

Out-of-the-vue requires Vue >= v3

• Most common form field validations with the possibility to add custom validations
• Adding custom error messages, field helpers and labels
• User input debouncing
• Word / character counting
• Custom content in (for example) checkboxes and radio buttons
• Opening and closing of modals is provided by the component

Getting started

Installing the package:

$ npm install out-of-the-vue

Using a component in your project:

import { TextField } from 'out-of-the-vue';

<text-field name="myTextField" required :min="10" :max="255"
            @created="onCreated" @updated="onUpdated"
>
    <template #label>My text field</template>
    <template #required>This field is required</template>
    <template #min>Min 10 characters required</template>
    <template #max>Max 255 characters allowed</template>
</text-field>

License

MIT License © 2022-present Michael Verschoof and out-of-the-vue contributors.