diff --git a/package.json b/package.json
index ecb61c2..92597b5 100644
--- a/package.json
+++ b/package.json
@@ -9,10 +9,12 @@
   },
   "dependencies": {
     "@vue/composition-api": "^0.4.0",
+    "validatorjs": "^3.18.1",
     "vue": "^2.6.11",
     "vue-router": "^3.1.5"
   },
   "devDependencies": {
+    "@types/validatorjs": "^3.15.0",
     "@typescript-eslint/eslint-plugin": "^2.18.0",
     "@typescript-eslint/parser": "^2.18.0",
     "@vue/cli-plugin-eslint": "~4.2.0",
diff --git a/src/App.vue b/src/App.vue
index f924722..36a65ae 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,11 @@
 <template>
   <div id="app">
     <div id="nav">
-      <router-link to="/">Home</router-link>
+      <router-link to="/">Home</router-link> |
+      <router-link :to="{ name: 'Counter' }">Counter</router-link> |
+      <router-link :to="{ name: 'Posts' }">Posts</router-link> |
+      <router-link :to="{ name: 'Pagination' }">Pagination</router-link> |
+      <router-link :to="{ name: 'Validation' }">Validation</router-link> |
     </div>
     <router-view />
   </div>
diff --git a/src/api/posts-api.ts b/src/api/posts-api.ts
new file mode 100644
index 0000000..670c356
--- /dev/null
+++ b/src/api/posts-api.ts
@@ -0,0 +1,21 @@
+export function getPosts(params: Params): Promise<Posts> {
+  return fetch(
+    `https://jsonplaceholder.typicode.com/posts?_start=${params.start}&_limit=${params.limit}`
+  )
+    .then(response => response.json())
+    .catch(error => {
+      throw error;
+    });
+}
+
+interface Params {
+  start: number;
+  limit: number;
+}
+
+interface Post {
+  id: number;
+  title: string;
+}
+
+export type Posts = Array<Post>;
diff --git a/src/api/users-api.ts b/src/api/users-api.ts
new file mode 100644
index 0000000..e19dbcf
--- /dev/null
+++ b/src/api/users-api.ts
@@ -0,0 +1,14 @@
+export function getUsers(): Promise<Users> {
+  return fetch("https://jsonplaceholder.typicode.com/users?_start=0&_limit=5")
+    .then(response => response.json())
+    .catch(error => {
+      throw error;
+    });
+}
+
+interface User {
+  id: number;
+  name: string;
+}
+
+export type Users = Array<User>;
diff --git a/src/composables/use-pagination.ts b/src/composables/use-pagination.ts
new file mode 100644
index 0000000..a2dc898
--- /dev/null
+++ b/src/composables/use-pagination.ts
@@ -0,0 +1,68 @@
+import { ref, computed } from "@vue/composition-api";
+
+function minMax(value: number, min: number, max: number): number {
+  if (value < min) return min;
+  if (value > max) return max;
+  return value;
+}
+
+export function usePagination(options: Options) {
+  // State
+  const _currentPage = ref<number>(options.startPage ?? 1);
+  const perPage = ref<number>(options.perPage ?? 10);
+  const total = ref<number>(options.total ?? 0);
+
+  // Computed
+  const currentPage = computed<number>(() => _currentPage.value);
+
+  const lastPage = computed<number>(() =>
+    Math.ceil(total.value / perPage.value)
+  );
+
+  const offset = computed<number>(
+    () => (_currentPage.value - 1) * perPage.value
+  );
+
+  // Functions
+  function setCurrentPage(page: number): void {
+    _currentPage.value = minMax(page, 1, lastPage.value);
+  }
+
+  function prev(): void {
+    setCurrentPage(_currentPage.value - 1);
+  }
+
+  function next(): void {
+    setCurrentPage(_currentPage.value + 1);
+  }
+
+  function first(): void {
+    setCurrentPage(1);
+  }
+
+  function last(): void {
+    setCurrentPage(lastPage.value);
+  }
+
+  return {
+    // State
+    currentPage,
+    perPage,
+
+    // Computed
+    lastPage,
+    offset,
+
+    // Functions
+    prev,
+    next,
+    first,
+    last
+  };
+}
+
+interface Options {
+  startPage?: number;
+  perPage?: number;
+  total: number;
+}
diff --git a/src/composables/use-promise.ts b/src/composables/use-promise.ts
new file mode 100644
index 0000000..8979ea2
--- /dev/null
+++ b/src/composables/use-promise.ts
@@ -0,0 +1,33 @@
+import { reactive } from "@vue/composition-api";
+
+export function usePromise<Data>(callback: () => Promise<Data>) {
+  const state = (reactive({
+    loading: false,
+    error: null,
+    data: null
+  }) as unknown) as State<Data>;
+
+  async function load() {
+    state.error = null;
+    state.loading = true;
+
+    try {
+      state.data = await callback();
+    } catch (error) {
+      state.error = error;
+    } finally {
+      state.loading = false;
+    }
+  }
+
+  return {
+    state,
+    load
+  };
+}
+
+interface State<Data> {
+  loading: boolean;
+  error: string | null;
+  data: Data | null;
+}
diff --git a/src/composables/use-validator.ts b/src/composables/use-validator.ts
new file mode 100644
index 0000000..c073f93
--- /dev/null
+++ b/src/composables/use-validator.ts
@@ -0,0 +1,20 @@
+import { ref, watch, Ref } from "@vue/composition-api";
+import Validator from "validatorjs";
+
+export function useValidator<Data>(data: Ref<Data>, rules: Validator.Rules) {
+  const passes = ref<boolean>(false);
+  const errors = ref<Validator.ValidationErrors>({});
+
+  function validate(): void {
+    const validator = new Validator(data.value, rules);
+    passes.value = validator.passes() as boolean;
+    errors.value = validator.errors.errors;
+  }
+
+  watch([data], () => validate(), { deep: true, lazy: true });
+
+  return {
+    passes,
+    errors
+  };
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index acdbef0..507b1eb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,10 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 import Home from "../views/Home.vue";
+import Counter from "../views/Counter.vue";
+import ValidationView from "../views/ValidationView.vue";
+import NewPostsView from "../views/getting-data/NewPostsView.vue";
+import NewPaginationView from "../views/pagination/NewPaginationView.vue";
 
 Vue.use(VueRouter);
 
@@ -9,6 +13,26 @@ const routes = [
     path: "/",
     name: "Home",
     component: Home
+  },
+  {
+    path: "/counter",
+    name: "Counter",
+    component: Counter
+  },
+  {
+    path: "/posts",
+    name: "Posts",
+    component: NewPostsView
+  },
+  {
+    path: "/pagination",
+    name: "Pagination",
+    component: NewPaginationView
+  },
+  {
+    path: "/validation",
+    name: "Validation",
+    component: ValidationView
   }
 ];
 
diff --git a/src/views/Counter.vue b/src/views/Counter.vue
new file mode 100644
index 0000000..f1f9a99
--- /dev/null
+++ b/src/views/Counter.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <button @click="increment">Increment</button>
+    <button @click="reset">Reset</button>
+    {{ count }}
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "@vue/composition-api";
+
+const Counter = defineComponent({
+  setup() {
+    const count = ref<number>(0);
+
+    function increment(): void {
+      count.value++;
+    }
+
+    function reset(): void {
+      count.value = 0;
+    }
+
+    return {
+      count,
+      increment,
+      reset
+    };
+  }
+});
+
+export default Counter;
+</script>
+
+<style scoped></style>
diff --git a/src/views/ValidationView.vue b/src/views/ValidationView.vue
new file mode 100644
index 0000000..eba024b
--- /dev/null
+++ b/src/views/ValidationView.vue
@@ -0,0 +1,96 @@
+<template>
+  <form @submit.prevent="onSubmit">
+    <fieldset>
+      <label for="firstName">First name</label>
+      <input
+        v-model="person.firstName"
+        type="text"
+        name="firstName"
+        id="firstName"
+      />
+      <p v-if="errors.firstName">{{ errors.firstName[0] }}</p>
+    </fieldset>
+
+    <fieldset>
+      <label for="lastName">Last name</label>
+      <input
+        v-model="person.lastName"
+        type="text"
+        name="lastName"
+        id="lastName"
+      />
+      <p v-if="errors.lastName">{{ errors.lastName[0] }}</p>
+    </fieldset>
+
+    <fieldset>
+      <label for="email">Email</label>
+      <input v-model="person.email" type="email" name="email" id="email" />
+      <p v-if="errors.email">{{ errors.email[0] }}</p>
+    </fieldset>
+
+    <button type="submit" :disabled="!passes">Save</button>
+  </form>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "@vue/composition-api";
+import { useValidator } from "../composables/use-validator";
+
+const personRules: PersonRules = {
+  firstName: ["required", "alpha", "between:3,15"],
+  lastName: ["required", "alpha", "between:3,15"],
+  email: ["required", "email"]
+};
+
+const ValidationView = defineComponent({
+  name: "ValidationView",
+
+  setup() {
+    const person = ref<Person>({
+      firstName: "",
+      lastName: "",
+      email: ""
+    });
+
+    const { passes, errors } = useValidator(person, personRules);
+
+    function onSubmit(): void {
+      console.log("submit");
+    }
+
+    return { person, passes, errors, onSubmit };
+  }
+});
+
+interface Person {
+  firstName: string;
+  lastName: string;
+  email: string;
+}
+
+interface PersonRules extends Validator.Rules {
+  firstName: string[];
+  lastName: string[];
+  email: string[];
+}
+
+export default ValidationView;
+</script>
+
+<style scoped>
+fieldset {
+  display: flex;
+  flex-direction: column;
+  border: none;
+}
+
+button {
+  margin-left: 1em;
+}
+
+p {
+  color: tomato;
+  margin-block-start: 0.5em;
+  margin-block-end: 0;
+}
+</style>
diff --git a/src/views/getting-data/NewPostsView.vue b/src/views/getting-data/NewPostsView.vue
new file mode 100644
index 0000000..ea2428b
--- /dev/null
+++ b/src/views/getting-data/NewPostsView.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <h1>Posts</h1>
+    <p v-if="posts.loading">Loading...</p>
+    <ul v-if="posts.data">
+      <li v-for="post in posts.data" :key="post.id">
+        {{ post.title }}
+      </li>
+    </ul>
+
+    <h1>Users</h1>
+    <p v-if="users.loading">Loading...</p>
+    <ul v-if="users.data">
+      <li v-for="user in users.data" :key="user.id">
+        {{ user.name }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/composition-api";
+import { usePromise } from "../../composables/use-promise";
+import { getPosts } from "../../api/posts-api";
+import { getUsers } from "../../api/users-api";
+
+const NewPostsView = defineComponent({
+  name: "NewPostsView",
+
+  setup() {
+    const { state: posts, load: loadPosts } = usePromise(() =>
+      getPosts({ start: 0, limit: 5 })
+    );
+    const { state: users, load: loadUsers } = usePromise(() => getUsers());
+
+    loadPosts();
+    loadUsers();
+
+    return {
+      posts,
+      users
+    };
+  }
+});
+
+export default NewPostsView;
+</script>
+
+<style scoped></style>
diff --git a/src/views/getting-data/OldPostsView.vue b/src/views/getting-data/OldPostsView.vue
new file mode 100644
index 0000000..f84baa5
--- /dev/null
+++ b/src/views/getting-data/OldPostsView.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <h1>Posts</h1>
+    <p v-if="posts.loading">Loading...</p>
+    <ul v-if="posts.data">
+      <li v-for="post in posts.data" :key="post.id">
+        {{ post.title }}
+      </li>
+    </ul>
+
+    <h1>Users</h1>
+    <p v-if="users.loading">Loading...</p>
+    <ul v-if="users.data">
+      <li v-for="user in users.data" :key="user.id">
+        {{ user.name }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { getPosts, Posts } from "../../api/posts-api";
+import { getUsers, Users } from "../../api/users-api";
+
+interface Data {
+  posts: {
+    loading: boolean;
+    error: string | null;
+    data: Posts;
+  };
+  users: {
+    loading: boolean;
+    error: string | null;
+    data: Users;
+  };
+}
+
+export default Vue.extend({
+  name: "OldPostsViews",
+
+  created() {
+    this.loadPosts();
+    this.loadUsers();
+  },
+
+  data(): Data {
+    return {
+      posts: {
+        loading: false,
+        error: null,
+        data: []
+      },
+      users: {
+        loading: false,
+        error: null,
+        data: []
+      }
+    };
+  },
+
+  methods: {
+    async loadPosts() {
+      this.posts.loading = true;
+
+      try {
+        this.posts.data = await getPosts({ start: 0, limit: 5 });
+      } catch (error) {
+        this.posts.error = error;
+      } finally {
+        this.posts.loading = false;
+      }
+    },
+
+    async loadUsers() {
+      this.users.loading = true;
+
+      try {
+        this.users.data = await getUsers();
+      } catch (error) {
+        this.users.error = error;
+      } finally {
+        this.users.loading = false;
+      }
+    }
+  }
+});
+</script>
+
+<style scoped></style>
diff --git a/src/views/pagination/NewPaginationView.vue b/src/views/pagination/NewPaginationView.vue
new file mode 100644
index 0000000..388506a
--- /dev/null
+++ b/src/views/pagination/NewPaginationView.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <h1>Posts</h1>
+    <p v-if="posts.loading">Loading...</p>
+    <ul v-if="!posts.loading && posts.data">
+      <li v-for="post in posts.data" :key="post.id">
+        {{ post.title }}
+      </li>
+    </ul>
+
+    <div>
+      <p>Current page: {{ pagination.currentPage.value }}</p>
+
+      <button @click="pagination.first">First</button>
+      <button @click="pagination.prev">Prev</button>
+      <button @click="pagination.next">Next</button>
+      <button @click="pagination.last">Last</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, watch } from "@vue/composition-api";
+import { usePromise } from "../../composables/use-promise";
+import { usePagination } from "../../composables/use-pagination";
+import { getPosts } from "../../api/posts-api";
+
+const NewPaginationView = defineComponent({
+  name: "NewPaginationView",
+
+  setup() {
+    const pagination = usePagination({ startPage: 1, perPage: 10, total: 100 });
+
+    const { state: posts, load: loadPosts } = usePromise(() =>
+      getPosts({
+        start: pagination.offset.value,
+        limit: pagination.perPage.value
+      })
+    );
+
+    loadPosts();
+
+    watch([pagination.currentPage], () => loadPosts());
+
+    return {
+      posts,
+      pagination
+    };
+  }
+});
+
+export default NewPaginationView;
+</script>
+
+<style scoped></style>