Prevue

Getting started

Prevue (pronounced as "preview") is a Vue 3 package based on Pinia that helps to manage BREAD/CRUD data exchange with external servers. The Prevue idea roots from Pinia-ORM package and tries to take the most of its strengths while simplifying usage.

Quick example

Take a quick look at Prevue in action.

First define a resource model:

import { defineController, Model } from '@kovalson/prevue';

// Define resource model with defaults
class User extends Model {
  public id = '';
  public first_name = '';
  public last_name = '';
  public email = '';
  public active = false;
}

// Define a controller
const useUserController = defineController(User);

// Export required objects
export {
  User,
  useUserController,
};

Then use it wherever you like:

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

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

const { fetchAll, repository } = useUserController();

fetchAll();
</script>

The fetchAll() method will automatically make an API request, await the response, convert it into an array of User models and save it into the repository that instantiates Pinia store by default (though it can be fully local as well).

This was a basic usage example. Read through to learn more on how Prevue can make your coding easier.