[UPDATE] docs

README.md

@@ -27,7 +27,7 @@ const { regex, required } = require('vuito');
 const regex = require('vuito/validators/regex.cjs');
 ```
 
-Vuito is fully tree-shakable, so you can import only the methods you need.
+Vuito is fully tree-shakable, so you can import only methods you need.
 
 **ES6**
 ```javascript

docs/content/en/index.md

@@ -1,27 +1,49 @@
 ---
-title: Introduction
+title: Get Started
 description: ''
-position: 1
+position: 10
 category: ''
 features:
-  - Feature 1
-  - Feature 2
-  - Feature 3
+  - Easy to set up
+  - Lightweight (< 2KB)
+  - Isomorphic
+  - Template-based
+  - No dependencies
+  - Actively maintained
 ---
 
-<img src="/preview.png" class="light-img" width="1280" height="640" alt=""/>
-<img src="/preview-dark.png" class="dark-img" width="1280" height="640" alt=""/>
+Simple, lightweight, isomorphic, template-based validation library.
 
-[Module]() for [NuxtJS](https://nuxtjs.org).
+If you want to play with the library, you can do so [right here](https://runkit.com/mathix420/vuito-example).
 
-<alert type="success">
+## Installation
 
-Your documentation has been created successfully!
+Add `vuito` dependency to your project:
 
-</alert>
+<code-group>
+  <code-block label="NPM" active>
+
+  ```bash
+  npm install vuito
+  ```
+
+  </code-block>
+  <code-block label="Yarn">
+
+  ```bash
+  yarn add vuito
+  ```
+
+  </code-block>
+</code-group>
 
 ## Features
 
 <list :items="features"></list>
 
-<p class="flex items-center">Enjoy light and dark mode:&nbsp;<app-color-switcher class="inline-flex ml-2"></app-color-switcher></p>
+## Notes
+
+<p class="flex items-center">
+  Enjoy light and dark mode:&nbsp;
+  <app-color-switcher class="inline-flex ml-2"></app-color-switcher>
+</p>

docs/content/en/templates.md

@@ -0,0 +1,56 @@
+---
+title: Templates
+description: ''
+position: 20
+category: API Reference
+---
+
+## What is a template
+
+Templates are designed to group validations for fields.
+
+For example if you need to validate account creation,
+you could imagine a template named `signin` containing
+the needed checks for the `username` and `password` fields.
+
+Using templates allows you to check a whole form in just one line.
+Simply regroup your forms data in an object to match the template structure, and run `signin.check(formObj)`.
+
+## Define a template
+
+<alert type="info">
+    A good practice is to create a new directory to store all your validation templates.
+</alert>
+
+Here we use `~/validations/`.
+
+```js[~/validations/auth.js]
+import { Template, required, minLength, maxLength } from 'vuito';
+
+export const signin = new Template({
+  username: [
+    { test: required, message: 'Please enter a username.' },
+    { test: minLength(3), message: 'Username is too short.' },
+    { test: maxLength(20), message: 'Username is too big.' },
+  ],
+  password: [
+    { test: required, message: 'Please enter a password.' },
+    { test: minLength(12), message: 'Password is too short.' },
+  ],
+});
+```
+
+## Use a template
+
+```js[~/app.js]
+import { signin } from '~/validations/auth.js';
+
+const formData = {
+    username: 'bwayne',
+    password: 'GothamIsMyCity123',
+};
+
+signin.check(formData)
+    .then(() => alert("You're good bro!"))
+    .catch((err) => alert(`Nah, ${err}`));
+```

docs/content/en/validators.md

@@ -0,0 +1,96 @@
+---
+title: Validators
+description: ''
+position: 21
+category: API Reference
+---
+
+Vuito implements some basic validators, to speed up your development.
+
+This package is 100% tree-shakeable so you if you don't use thems, they will not take space.
+
+```js
+import { regex, required } from 'vuito';
+// OR
+const { regex, required } = require('vuito');
+// OR
+const regex = require('vuito/validators/regex.cjs');
+```
+
+## `required` 
+
+> Check if the input value is truthy.
+
+**Usage:**
+```js
+{ test: required, message: "Can't be empty." }
+```
+
+## `minLength` 
+
+> Check if string/array length is at least `n` long.
+
+**Usage:**
+```js
+{ test: minLength(5), message: 'Should be at least 5 long.' }
+```
+
+## `maxLength` 
+
+> Check if string/array length is at most `n` long.
+
+**Usage:**
+```js
+{ test: maxLength(5), message: 'Should be at most 5 long.' }
+```
+
+## `minValue` 
+
+> Check if string/number value is `>= n`.
+
+**Usage:**
+```js
+{ test: minValue(5), message: 'Should be less or equal to 5.' }
+```
+
+## `maxValue` 
+
+> Check if string/number value is `<= n`.
+
+**Usage:**
+```js
+{ test: maxValue(5), message: 'Should be more or equal to 5.' }
+```
+
+## `minValue` 
+
+> Check if string/number value is `>= n`.
+
+**Usage:**
+```js
+{ test: minValue(5), message: 'Should be less or equal to 5.' }
+```
+
+## `onlyText` 
+
+> Check if string input contains only alphanumeric chars or white spaces.
+
+<alert type="info">
+
+Handle diactirics removal.
+
+</alert>
+
+**Usage:**
+```js
+{ test: onlyText, message: 'Should be more or equal to 5.' }
+```
+
+## `regex` 
+
+> Check if string input match the given regex.
+
+**Usage:**
+```js
+{ test: regex(/^ac?b$/i), message: 'Should be "ab" or "acb".' }
+```

docs/content/en/vue.md

@@ -0,0 +1,56 @@
+---
+title: Vue
+description: ''
+position: 30
+category: Integrations
+---
+
+Use vuito with Vue.js or Nuxt.js like a breeze!
+
+## Installation
+
+<code-group>
+  <code-block label="NPM" active>
+
+  ```bash
+  npm install @vuito/vue
+  ```
+
+  </code-block>
+  <code-block label="Yarn">
+
+  ```bash
+  yarn add @vuito/vue
+  ```
+
+  </code-block>
+</code-group>
+
+## Usage
+
+Using the template defined in [Setup](/setup).
+
+```html [pages/signin.vue]
+<template>
+  <span>{{ errors.username }}</span>
+  <input type="text" id="username"
+    :class="{error: !!errors.username}"
+    v-model="fields.username" @input.capture="onInput"
+  >
+
+  <span>{{ errors.password }}</span>
+  <input type="password" id="password"
+    :class="{error: !!errors.password}"
+    v-model="fields.password" @input.capture="onInput"
+  >
+</template>
+
+<script>
+import { signIn } from '~/validations/auth';
+import Vuito from '@vuito/vue';
+
+export default {
+  mixins: [Vuito(signIn)]
+}
+</script>
+```