@vincent99/vlib

Reusable library + scaffold generator for building Vue 3 + SQLite webapps.

What's included

• Vue 3 + Vite + TypeScript + Tailwind CSS + SCSS
• SQLite backend via better-sqlite3 + Express API server
• Numbered SQL schema migration system with auto-backup
• Session-based authentication (PBKDF2 passwords, cookie sessions)
• File-based routing (Nuxt-style, no Nuxt dependency)
• Responsive layout: sticky header, collapsible sidebar, hamburger menu for mobile
• Admin panel: reads DB tables at runtime, provides full CRUD for every table
• Multi-row editing with "— Multiple —" placeholder support
• Docker Compose configs for dev (live reload) and production

Scaffold a new app

# Via npx (after publishing)
npx @vincent99/vlib --name "My App"

# Or during local development (after yarn build)
node dist/cli.js --name "My App"

This creates a new directory my-app/ with a ready-to-run application.

Generated app quick-start

cd my-app
cp .env.example .env
yarn install
yarn migrate          # creates DB + admin user (admin/admin)
yarn dev              # Vite on :5173, Express on :3001

Docker

# Development (live reload)
docker compose up

# Production build
docker compose -f docker-compose.prod.yml up --build

Building vlib

yarn install
yarn build            # compiles server TS + builds Vue component library

Package exports

Import path	Contents
@vincent99/vlib	Vue components + router utilities
@vincent99/vlib/components	AppLayout, NavSidebar, TableView, AdminTable, AdminForm
@vincent99/vlib/router	buildRoutes(), createAuthGuard()
@vincent99/vlib/server	createServer(), startServer(), runMigrations(), DB + auth utils

Database schema rules

Schema files live in schemas/ in each generated app:

• Numbered sequentially: 001-initial.sql, 002-add-posts.sql, etc.
• Never edit an already-applied file — create a new numbered file instead
• Run yarn migrate to apply pending migrations (auto-backs up the DB first)
• The server refuses to start if the DB schema version doesn't match the latest file

Responsive breakpoints

Name	Width	Usage
small	≤ 767px	Portrait phone — sidebar hidden, hamburger shown
medium	768–1023px	Tablet
large	≥ 1024px	Desktop

SCSS variables: $bp-small, $bp-medium, $bp-large (available in all component styles)

Theme colors

Set as CSS custom properties in src/styles/main.scss:

• --color-primary (#1e40af), --color-primary-light, --color-primary-dark
• --color-sidebar (#1e3a5f), --color-header (#1e40af)
• --color-background, --color-surface, --color-text, --color-border
• --color-danger, --color-success, --color-warning

License

Copyright (c) 2026 Vincent Fiduccia

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.