Prevue

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.

See the full documentation.

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 {
  protected $convertCase = true;

  readonly id: string = '';
  readonly firstName: string | null = null;
  readonly lastName: string | null = null;
  readonly email: string = '';
  readonly active: boolean = 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>

Note several things in the example above:

• The fetchAll() method will automatically make an API request and await the response.
• The response is automatically converted into an array of User objects.
• The objects are automatically saved in the repository that instantiates Pinia store by default (though it can be a local repository as well).
• The $convertCase property will cause the incoming response object keys to be automatically converted to camelCase so that every model stays consistent throughout the app.

This was a basic usage example. See the full documentation to learn more on how Prevue can make your coding easier.