@volverjs/monorepo-starter

vue volverjs ui vue3 vite template starter nx
fastify pwa drizzle orm postgres docker

maintained with ❤️ by

Features

• ⚡️ Vue 3, Vite, 💾, esbuild - born with fastness
• 🎉 Monorepo with Nx
• 😺 Fastify
• 🔑 Better Auth - the authentication framework
• 🗂 File based routing
• 📦 Components auto importing
• 🍍 State Management via Pinia
• 📲 PWA
• 🎨 @volverjs/ui-vue
• 🌍 I18n ready
• 📥 Auto importing - use Composition API and others directly
• 💾 Drizzle ORM
• 🦾 TypeScript, of course

Pre-packed

Volverjs

• @volverjs/style - The easy way to style
• @volverjs/ui-vue - The lightweight Vue 3 component library
• @volvejs/form-vue - Form validation and submission
• @volverjs/zod-vue-i18n - Zod validation with Vue 3 and i18n
• @volverjs/query-vue - Query state management
• @volverjs/data - Tiny HttpClient based on Fetch API

Plugins

• Vue Router
  • unplugin-vue-router - File system based routing
• Pinia - Intuitive, type safe, light and flexible Store for Vue using the composition api
• unplugin-vue-components - Components auto import
• unplugin-auto-import - Directly use Vue Composition API and others without importing
• vite-plugin-pwa - PWA
• Vue I18n - Internationalization
  • unplugin-vue-i18n - Unplugin for Vue I18n
• VueUse - Collection of useful composition APIs
• @vueuse/head - Manipulate document head reactively

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint with typescript and vue3 recommended
• Stylelint with recommended rules
• Prettier with single quotes, no semi, trailing comma and four spaces of tab width

Dev tools

• TypeScript
• pnpm - Fast, disk space efficient package manager
• VS Code Extensions
  • Volar - Vue 3 <script setup> IDE support
  • Iconify IntelliSense - Icon inline display and autocomplete
  • i18n Ally - All in one i18n support
  • ESLint
  • Prettier
  • Stylelint

Requirements

• Node.js
• pnpm
• docker

Try it now!

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

npx degit volverjs/monorepo-starter my-app
cd my-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

Checklist

When you use this template, try follow the checklist to update your info properly

• Change the author name in LICENSE
• Update package.json with your info
• Change .env settings in apps/backend/.env (expecially generate the VITE_BETTER_AUTH_SECRET)
• Change .env settings in apps/frontend/.env
• Change the favicon in apps/frontend/public
• Clean up the README

And, enjoy :)

Usage

Quick Start

docker compose up -d
pnpm install
pnpm db:migrate

Development

pnpm dev

Just run and visit https://localhost:8080

You can read the APIs documentation with Swagger at https://localhost:3000/swagger or Scalar at https://localhost:3000/scalar.

Build

To build the App, run

pnpm build

And you will see the generated file in dist that ready to be served.

Access to postgres:

• localhost:5432
• Username: postgres (as a default)
• Password: Volverjs! (as a default)
• Database: postgres (as a default)

Access to PgAdmin:

• URL: https://localhost:5050
• Username: pgadmin4@dpage.com (as a default)
• Password: Volverjs! (as a default)

Add a new server in PgAdmin:

• Host name/address postgres
• Port 5432
• Database postgres
• Username as POSTGRES_USER, by default: postgres
• Password as POSTGRES_PASSWORD, by default Volverjs!

Acknoledgements

This repo is inspired by 🏕 antfu/vitesse

License

MIT