Building your website

Pruvious provides all essential tools and utilities for creating highly scalable and optimized websites that can be easily managed by end users.

Dashboard

When running your Nuxt app in development or production mode, the http://localhost:3000/dashboard will be automatically accessible. Once you have set up a blank project, opening this URL will prompt you to create an admin account. After that, you can freely explore the dashboard.

Layouts

Layouts are utilized to create consistent and reusable page structures. To add a layout, create a Vue component in the layouts directory of your project.

# layouts/default.vue

<template>
  <div>
    <header>Header</header>
    <slot />
    <footer>Footer</footer>
  </div>
</template>

Once you create a layout, it will be automatically available for selection in the dashboard when editing pages.

Blocks

Blocks are Vue components that allow you to add content to your pages. To add a block, simply place a Vue component inside the blocks directory in your project. Here's an example of a basic button counter block that allows customizing the increment.

// blocks/ButtonCounter.vue

<template>
  <button @click="count += increment ?? 1">
    Count: {{ count }}
  </button>
</template>

<script lang="ts" setup>
import { numberField } from '#pruvious'

defineProps({
  increment: numberField(),
})

const count = ref(0)
</script>

Block components differ from normal Vue components in that they can define fields along with standard props. This enables them to store their prop values in the database.

Fields

Fields are models that represent database columns or the values of their nested objects. They can be defined within blocks or collections. Here's an example usage of the image field within a block:

# blocks/Image.vue

<template>
  <PruviousPicture
    :image="image"
    :imgAttrs="{ class: 'block w-full h-auto' }"
    :lazy="true"
  />
</template>

<script lang="ts" setup>
import { imageField } from '#pruvious'

defineProps({
  image: imageField({
    minWidth: 2560,
    description: 'Select an image with a minimum width of 2560px',
    sources: [
      { format: 'webp', width: 2560, quality: 90 },
      { format: 'webp', width: 1280, quality: 82, media: '(max-width: 767px)' },
      { format: 'jpeg', width: 2560, quality: 90 },
      { format: 'jpeg', width: 1280, quality: 82, media: '(max-width: 767px)' },
    ],
  }),
})
</script>

Each field has a unique set of options that are suitable for its type. In the example above, the image field will produce a validation error if the user selects an image with a width less than 2560 pixels. Additionally, the original image is converted and resized according to the specified sources.

Collections

Collections are used to store CMS data such as pages, users, and other information in the database. They provide CRUD API endpoints to facilitate data management through the website and dashboard. Here's an example of a subscribers collection that stores email addresses:

# collections/subscribers.ts

import { defineCollection } from '#pruvious'
import { emailValidator, uniqueValidator } from '#pruvious/server'

export default defineCollection({
  name: 'subscribers',
  mode: 'multi',
  dashboard: { icon: 'Mail' },
  fields: {
    email: {
      type: 'text',
      options: {
        label: 'Email address',
        required: true,
        type: 'email',
        autocomplete: 'email',
      },
      additional: {
        index: true,
        unique: 'allLanguages',
        validators: [emailValidator, uniqueValidator],
      },
    },
  },
})

Pruvious has two collection modes: one for storing multiple records (e.g., products, categories, etc.) and another for storing a single record (e.g., settings, keys, etc.).

Deployment

Pruvious' CLI enables you to effortlessly deploy your website to numerous remote servers with just one command. Additionally, you can conveniently create backups, restore them, and synchronize content between a live site and your local environment.

# Terminal

## pnpm
pnpm dlx pruvious -h

## npm
npx pruvious -h