Nodejs Vuejs Mysql Boilerplate

Node.js (REST API) + Vue.js/Nuxt.js (Frontend/Backend) + MySQL Boilerplate
Alternatives To Nodejs Vuejs Mysql Boilerplate
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Directus23,87823921 hours ago95November 16, 2023381otherTypeScript
The Modern Data Stack 🐰 — Directus is an instant REST+GraphQL API and intuitive no-code data collaboration app for any SQL database.
Ruoyi Vue Pro20,881216 hours ago4August 11, 20229mitJava
🔥 官方推荐 🔥 RuoYi-Vue 全新 Pro 版本,优化重构所有功能。基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 微信小程序,支持 RBAC 动态权限、数据权限、SaaS 多租户、Flowable 工作流、三方登录、支付、短信、商城等功能。你的 ⭐️ Star ⭐️,是作者生发的动力!
Beekeeper Studio14,064
2 days ago520gpl-3.0Vue
Modern and easy to use SQL client for MySQL, Postgres, SQLite, SQL Server, and more. Linux, MacOS, and Windows.
16 hours ago44apache-2.0PHP
An open-source & self-hostable Heroku / Netlify / Vercel alternative. Cloud version available here ->
10 days ago81mitJava
Music Website3,957
6 months ago93apache-2.0Vue
🎧 Vue + SpringBoot + MyBatis 音乐网站
6 months ago8gpl-3.0Java
基于Spring Boot 2.x的一站式前后端分离快速开发平台XBoot 微信小程序+Uniapp 前端:Vue+iView Admin 后端:Spring Boot 2.x/Spring Security/JWT/JPA+Mybatis-Plus/Redis/Elasticsearch/Activiti 分布式限流/同步锁/验证码/SnowFlake雪花算法ID 动态权限 数据权限 工作流 代码生成 定时任务 社交账号 短信登录 单点登录 OAuth2开放平台 客服机器人 数据大屏 暗黑模式
Sql Generator3,320
2 months ago1May 18, 202212apache-2.0Vue
🔨 用 JSON 来生成结构化的 SQL 语句,基于 Vue3 + TypeScript + Vite + Ant Design + MonacoEditor 实现,项目简单(重逻辑轻页面)、适合练手~
Goxygen3,20123 months ago24September 09, 202315apache-2.0Go
Generate a modern Web project with Go and Angular, React, or Vue in seconds 🎲
4 days ago12apache-2.0Java
Alternatives To Nodejs Vuejs Mysql Boilerplate
Select To Compare

Alternative Project Comparisons

Node.js (REST API) + Vue.js/Nuxt.js (Frontend/Backend) + MySQL Boilerplate

This is a boilerplate project. The project contains Node.js REST API and frontend/backend developed by Vue.js with BootstrapVue.

  • API
    • Node.js, Express, Webpack, Express Validator, JWT, Bunyan, Promise MySQL, Node Mailer, Jest, Supertest, Nodemon, DB migrate
  • Frontend - Nuxt.js
    • Nuxt.js, Vue.js, Vuex, Vuelidate, BootstrapVue, Jest
  • Frontend - Vue.js
    • Vue.js, Vuex, Vue Router, Vue Draggable, Vuelidate, BootstrapVue, Jest, Cypress
  • Backend
    • Vue.js, Vuex, Vue Router, Vuelidate, BootstrapVue, Jest, Cypress


Service Endpoint
Frontend - Nuxt.js
Frontend - Vue.js

How to start in your local environment

$ docker-compose up -d

Once docker containers are up, then you can access services with below URL.

Service Endpoint
API http://localhost/api
Frontend - Nuxt.js http://localhost/frontend-nuxt
Frontend - Vue.js http://localhost/frontend-vue
Backend http://localhost/backend
Mailhog http://localhost/mailhog
MySQL localhost:3307

There are three users in the database initially. You can use them to login Frontend/Backend.

Service Username Email Password
Backend admin [email protected] 123456
Backend staff [email protected] 123456
Frontend user [email protected] 123456


API docker container will be launched as development mode with nodemon. However, it won't detect any changes unless uncomment volumes.

To enable live change for the API, simply uncomment following lines in docker-compose.yml

    - ./api:/srv

Please make sure you run npm install in the api folder.

Frontend & Backend

Currently, Frontend (Nuxt.js/Vue.js) and Backend docker container is configured to serve production mode due to the limitation of setting development environment of Vue.js in sub directory.

If you want to have Hot Reload feature, then you should launch the Frontend separately by npm run serve.

cd frontend-vue
npm run serve

# or

cd frontend-nuxt
npm run dev

# or

cd backend
npm run serve

Then access Frontend - Nuxt.js with http://localhost:3000, Frontend - Vue.js with http://localhost:8080 and Backend with http://localhost:8081 via your browser.


Currently, API is configured to point Mailhog to send an email. Any email sent by the API can be viewed in Mailhog web interface.

Access via your browser http://localhost/mailhog


MySQL port is mapped to 3307.


  • API

    • Database migration
  • Frontend - Vue.js

    • User registration
    • Confirm user email address
    • Reset user password
    • User login/logout
    • Manage todo
    • Manage account information
  • Frontend - Nuxt.js

    • Support all features that "Frontend - Vue.js"
    • Server Side Render (SSR)
  • Backend

    • Staff login/logout
    • Staff permission management
    • List todo
    • Manage users
    • Manage staffs
    • Manage settings
  • CI/CD

    • Gitlab: .gitlab-ci.yml
    • Github: .github/workflows/main.yml


  • [x] Unit tests
  • [x] E2E tests
Popular Mysql Projects
Popular Vue Projects
Popular Data Storage Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Vue Router