# 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](https://prevue.kovalson.dev).

## Quick example

Take a quick look at Prevue in action.

First define a resource model:

```typescript
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:
```vue
<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](https://prevue.kovalson.dev) to learn more on how Prevue
can make your coding easier.