Introduction

Prevue (pronounced /ˈpriː.vjuː/, like preview) was initially a set of classes built upon Pinia ORM, utilizing Factory and Repository patterns, as well as controller-based flow to help implementing well-structured and safe-to-use, codebase. As much as it proved useful, it soon began to overwhelm with redundant, boilerplate code and unnecessary complexity.

Though the core idea was left untouched, many things were changed and reimplemented to eliminate redundancy and boilerplate leaving the sole functionality to use by developers.

Why should I use Prevue?

Prevue is an API resource management package. You may think of it as an overseer that helps to control and structure the communication between the API and your application. If you're tired of rewriting the same code responsible for communication with the API, again and again between the projects, this package is made for you. It provides the following main features:

• Easy model declaration
• Easy to use and read composables
• Consistent syntax and well-structured approach
• Out-of-the-box methods that instantly enable managing resources without any redundancy or boilerplate
• Highly configurable setup that allows creating custom functionality

Prevue takes care of the boring part of the data exchange and lets you decide what to do with the responses it gets.

What is Prevue not?

Prevue is not an ORM package. There are no advanced relation methods, such as hasMany(), belongsTo() or similar. Prevue does not aim to compete with packages like Pinia ORM, though it shares some ideas and approaches. It is also not designed to use outside Vue 3.

Basic Example

This is what using Prevue looks like. You define a model and a controller:

// models/User.ts
import { Model, defineController } from '@kovalson/prevue';

class User extends Model {
  public id: string = '';
  public name: string = '';
  public email: string = '';
  public login_count: number = 0;
}

const useUserController = defineController(User);

export {
  User,
  useUserController,
};

And then you may use it in any component you wish:

<template>
  <div>
    <UserCard
      v-for="user of repository.all()"
      :key="user.id"
      :user="user"
    />
  </div>
</template>

<script lang="ts" setup>
import UserCard from '~/components/users/UserCard.vue';
import { useUserController } from '~/models/User';

const { fetchAll, repository } = useUserController();

fetchAll();
</script>

Note few things in the example above:

• The User model is simply created by extending the abstract Model class. The only thing you need to do is to provide default values for its properties. All its properties are automatically inferred from all controllers', APIs' and repositories' methods and properties,
• The useUserController() composable returns many useful properties and methods that enable to easily manage all User entries,
• The fetchAll() method automatically performs an API request to the server, awaits the response, converts it to the User model and adds it into the repository. The repository can then be directly accessed from the controller's composable,
• The fetchAll() request URL is automatically derived from the class name with respect to the REST API URI Naming Conventions and Best Practices,
• By default, the model's repository is global (uses Pinia store), and therefore can be accessed from anywhere in the app, so any component using it can refresh immediately,
• Every method can be overridden by your custom implementation.