Skip to main content

​
Overview

Beils Dashboard is configured through a combination of environment variables, configuration files, and database settings. This page covers all configuration options available to administrators.
Configuration changes can affect system behavior and security. Always test changes in a development environment first.

​
Environment Variables

Environment variables control critical system settings and integrations.

​
Database Configuration

Configure your MariaDB database connection: 
DATABASE_URL="mysql://user:password@localhost:3306/beils_dashboard"
The database URL follows the format: mysql://USER:PASSWORD@HOST:PORT/DATABASE
Required fields:
  • USER - Database username
  • PASSWORD - Database password
  • HOST - Database server hostname or IP
  • PORT - Database port (default: 3306)
  • DATABASE - Database name

​
Authentication Configuration

Configure JWT-based authentication: 
JWT_SECRET="your-super-secret-key-here"
Critical Security Setting: Use a strong, random secret in production. This secret signs all authentication tokens.
Best practices:
  • Minimum 32 characters
  • Mix of letters, numbers, and special characters
  • Never commit to version control
  • Rotate periodically for enhanced security
Generate a secure secret: 
node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

​
Application Settings

NODE_ENV="production"
PORT="3000"
  • NODE_ENV - Environment mode (development or production)
  • PORT - Server port (default: 3000)

​
Session Configuration

Authentication cookies are configured in the auth store: 
const token = useCookie('auth_token', {
  maxAge: 60 * 60 * 24, // 24 hours
  path: '/',
  sameSite: 'lax',
  secure: process.env.NODE_ENV === 'production'
})
Cookie settings:
  • maxAge: Token lifetime in seconds (default: 86400 = 24 hours)
  • secure: HTTPS-only in production
  • sameSite: CSRF protection (lax recommended)

​
Nuxt Configuration

The main application configuration is in nuxt.config.ts.

​
Core Settings

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  css: ['~/assets/css/main.css'],
  devtools: { enabled: false },
  telemetry: false,
})

​
Modules

Enabled Nuxt modules:

@nuxt/eslint

Code quality and linting

@nuxt/fonts

Font optimization and loading

@nuxtjs/google-fonts

Google Fonts integration

@pinia/nuxt

State management with Pinia

@nuxt/image

Image optimization

​
Google Fonts

Customize font configuration: 
googleFonts: {
  families: {
    Roboto: [300, 400, 500, 700],
    'Roboto Condensed': [300, 400, 700],
  },
  display: 'swap',
}

​
Vite Configuration

Advanced build settings: 
vite: {
  server: {
    allowedHosts: [
      'disclamatory-boraginaceous-cedric.ngrok-free.dev',
      'localhost'
    ],
  },
  plugins: [tailwindcss()],
  optimizeDeps: {
    include: [
      'aos',
      'lucide-vue-next',
      '@tanstack/vue-query',
      'vue-i18n',
      'zod'
    ],
  },
}
Add your custom domain to allowedHosts when deploying to production or using tunnel services.

​
Prisma Configuration

Database schema and ORM settings are managed through Prisma.

​
Schema Location

prisma/schema.prisma defines your database structure: 
generator client {
  provider   = "prisma-client-js"
  engineType = "library"
}

datasource db {
  provider = "mysql"
}

​
Prisma Commands

Common database operations: 
# Generate Prisma Client after schema changes
pnpm prisma:generate

# Create and apply migrations
pnpm prisma:migrate

# Pull schema from existing database
pnpm prisma:pull

# Reset database (⚠️ deletes all data)
pnpm prisma:reset
prisma:reset will delete all data in your database. Only use in development.

​
Business Configuration

​
Tax Rates

Default tax rate is configured in the Prisma schema: 
tax_rate Float @default(21.0) @db.Double
This applies to:
  • Products
  • Services
  • Packs
  • Cart items
To change default tax rates, update the Prisma schema and run migrations. Individual items can override this rate.

​
Product Defaults

New products receive these default values: 
status     String @default("activo") @db.VarChar(20)
stock      Int    @default(0)
min_stock  Int    @default(0)
tax_rate   Float  @default(21.0) @db.Double

​
Service Defaults

status   String @default("activo") @db.VarChar(20)
tax_rate Float  @default(21.0) @db.Double
duration Int    @default(30) // Minutes

​
Payment Methods

Configured payment methods for transactions: 
payment_method String? @db.VarChar(50)
// Supported values: cash, card, transfer, mixed
These are stored as strings in the Cart model.
To add new payment methods, update the frontend cart components to include the new option.

​
Document Types

Supported identification document types: 
enum DocumentType {
  DNI
  PASSPORT
  NIE
}
These are used for user and client identification.

​
Status Enums

​
User Status

enum UserStatus {
  ON   // Active user
  OFF  // Inactive user
}

​
Item Status

For products, services, coupons, etc.:
  • "activo" - Active and available
  • "inactivo" - Hidden or discontinued
  • Custom statuses can be added as needed

​
Security Configuration

​
Password Hashing

Passwords are hashed using bcrypt with 10 rounds: 
const hashedPassword = await bcrypt.hash(password, 10)
Increase the number of rounds (e.g., 12 or 14) for enhanced security at the cost of performance.

​
Authentication Middleware

Protected routes configuration: 
const PROTECTED_PREFIX = '/api/'
const PUBLIC_ROUTES = [
  '/api/auth/login',
  '/api/hello'
]
All API routes require authentication except those in PUBLIC_ROUTES. In production:
  • secure: true - HTTPS-only cookies
  • sameSite: ‘lax’ - CSRF protection
  • httpOnly: true - Prevents XSS attacks (recommended)

​
Frontend Configuration

​
Tailwind CSS

Styles are configured via Tailwind 4: 
import tailwindcss from '@tailwindcss/vite'

vite: {
  plugins: [tailwindcss()]
}
Custom styles in assets/css/main.css.

​
State Management

Pinia stores handle global state:
  • auth.ts - Authentication and user session
  • useUsersFilterStore.ts - User list filtering
Add new stores in app/stores/ directory.

​
Query Client

TanStack Query configuration for API calls: 
import { useQuery } from '@tanstack/vue-query'

const { data, refetch, isPending } = useQuery({
  queryKey: ['users'],
  queryFn: () => $fetch('/api/users')
})

​
Development Configuration

​
Dev Server

Start the development server: 
pnpm dev
Default URL: http://localhost:3000

​
Hot Module Replacement

Nuxt 4 provides automatic HMR for:
  • Vue components
  • Server routes
  • Styles
  • Configuration files

​
Database Seeding

Populate the database with test data: 
pnpm seed
Seed file location: seeds/seed-db.ts
Customize the seed file to generate test users, products, clients, and other data for development.

​
Production Configuration

​
Build Process

pnpm build
This generates:
  • Optimized frontend assets
  • Server bundles
  • Static files

​
Production Server

pnpm preview
Or deploy with: 
NODE_ENV=production node .output/server/index.mjs

​
Performance Optimization

Pre-bundled dependencies:
  • aos
  • lucide-vue-next
  • @tanstack/vue-query
  • vue-i18n
  • zod
Nuxt Image automatically:
  • Lazy loads images
  • Generates responsive sizes
  • Converts to modern formats (WebP)
Google Fonts with display: swap:
  • Prevents layout shift
  • Shows fallback fonts immediately
  • Loads custom fonts asynchronously

​
Environment Variables in Production

Set these environment variables on your production server: 
DATABASE_URL="mysql://prod_user:[email protected]:3306/beils_prod"
JWT_SECRET="production-secret-key-32-chars-minimum"
NODE_ENV="production"
PORT="3000"
Never use development credentials in production. Always use separate databases and secrets.

​
Backup Configuration

Regular database backups are essential: 
# Backup database
mysqldump -u user -p beils_dashboard > backup_$(date +%Y%m%d).sql

# Restore from backup
mysql -u user -p beils_dashboard < backup_20260305.sql
Automate backups using cron jobs or your hosting provider’s backup tools.

​
Monitoring and Logging

Consider implementing:
  • Application logs - Track errors and important events
  • Database query logs - Monitor slow queries
  • Authentication logs - Track login attempts and failures
  • API request logs - Monitor usage and errors

​
Error Handling

Nuxt provides error handling: 
try {
  // API call
} catch (error) {
  throw createError({
    statusCode: 500,
    statusMessage: 'Error message'
  })
}

​
Troubleshooting

  • Verify DATABASE_URL is correct
  • Check database server is running
  • Confirm user has proper permissions
  • Test connection with pnpm prisma:generate
  • Check JWT_SECRET is set
  • Verify token hasn’t expired
  • Confirm user status is ON
  • Check cookie settings in browser
  • Clear .nuxt and node_modules directories
  • Run pnpm install to reinstall dependencies
  • Check for TypeScript errors
  • Verify all environment variables are set
  • Enable production mode (NODE_ENV=production)
  • Check database query performance
  • Monitor server resources (CPU, memory)
  • Optimize images and assets

​
Configuration Checklist

Before going to production:
  • Set strong JWT_SECRET
  • Configure production DATABASE_URL
  • Enable HTTPS and secure cookies
  • Set NODE_ENV to “production”
  • Configure allowed hosts in Vite
  • Set up automated database backups
  • Configure error monitoring
  • Test authentication flow
  • Verify role permissions
  • Review security settings

User Management

Manage system users and accounts

Roles & Permissions

Configure access control

Data Management

Backup and restore data

Installation Guide

Initial setup instructions

Build docs developers (and LLMs) love

Get started for freeTalk to us