Digging deeper

Explore further topics such as user authentication, translations, database management, standard collections, query builder, file handling, job queues, hooks, and creating custom dashboard pages.

Authentication

Pruvious has a built-in user authentication system that uses JSON web tokens (JWTs). Here's a quick example of how to log in a user using their email address and password in a Vue component:

# components/Login.vue

<template>
  <form @submit.prevent="submit()" class="flex flex-col gap-4 rounded bg-white p-4">
    <input v-model="email" placeholder="Email" type="email" class="rounded border px-3 py-2" />
    <input v-model="password" placeholder="Password" type="password" class="rounded border px-3 py-2" />
    <button
      type="submit"
      class="rounded bg-blue-600 px-3 py-2 text-white transition hover:bg-blue-700 focus:bg-blue-800 focus:ring-4"
    >
      Login
    </button>
  </form>
</template>

<script lang="ts" setup>
import { login, useAuth } from '#pruvious/client'

const auth = useAuth()
const email = ref('')
const password = ref('')

async function submit() {
  const response = await login(email.value, password.value)

  if (response.success) {
    console.log('User ID:', auth.value.userId)
  } else {
    console.error(response.error)
  }
}
</script>

Pruvious provides functions for logging in and out of the current session, other active sessions, or all user sessions. Additionally, there are utility functions available for renewing the token, fetching the user profile, and updating it.

Translations

Pruvious offers superb support for internationalization. It allows you to translate collection records and code strings. Here's a quick example of how to define translatable strings:

# translatable-strings/default.de.ts


defineTranslatableStrings({
  domain: 'default',
  language: 'de',
  strings: {
    'Welcome': 'Welcome',               // Simply displays the text 'Welcome'
    'Displayed: $count $posts': {
      pattern: 'Angezeigt: $count $posts',
      input: {
        count: 'number',                // Replaces $count in the pattern
      },
      replacements: {
        posts: [                        // The resolved output replaces $entries in the pattern
          {
            conditions: [{ count: 1 }], // If all conditions are met...
            output: 'Beitrag',          // output 'Beitrag'
          },
          'Beiträge',                   // Otherwise, output 'Beiträge'
        ],
      },
    },
  },
})

Database

Pruvious allows you to store website data using SQLite and PostgreSQL. It also supports Redis for caching JSON web tokens and resource-intensive SQL queries.

Standard collections

Pruvious comes with the following 8 standard collections by default:

Query builder

Pruvious provides a fully-typed query builder for querying collection data with ease. You can create a new instance of the query builder by importing the query function from the #pruvious/server alias. Here's an example:

# examaples/query-builder.ts

import { query } from '#pruvious/server'

await query('products').whereGt('price', 100).paginate(1, 10)

File management

Pruvious allows easy file uploads to a local directory in your project or a remote S3 server. Here's an example of how to handle file uploads in a server handler:

# server/api/upload-file.ts

import { query, readInputData } from '#pruvious/server'

export default defineEventHandler(async (event) => {
  const input = await readInputData(event, 'uploads')

  if (input.errors.length) {
    setResponseStatus(event, 400)
    return input.errors.join('\n')
  }

  if (Array.isArray(input.data)) {
    return query('uploads').createMany(input.data as any)
  } else {
    return query('uploads').create(input.data as any)
  }
})

The file and image fields automatically handle uploads and optimize images.

Job queues

Jobs are tasks that are performed asynchronously, either at a set time or at regular intervals. They involve actions like sending emails, clearing CDN cache, synchronizing data with remote servers, and other operations that may affect the response time of an HTTP request.

Hooks

Hooks enable the execution of custom actions at specific stages during API operations. Here's an example of a hook:

# hooks/users/after-create.ts

import { defineHook } from '#pruvious'

export default defineHook('users', 'afterCreate', async ({ record }) => {
  // Send email to: record.email
})

Custom dashboard pages

Pruvious allows you to to add custom menu pages in the dashboard. You can achieve this by defining them in the dashboard directory located in the root of your project.