Vue + Node.js example
In this post, I will show you some Github examples that use Vue with Node.js backend. You will see Github links for making following projects:
- Vue + Node.js with MySQL
- Vue + Node.js with PostgreSQL
- Vue + Node.js with MongoDB
- Vue + Node.js with SQL Server (MSSQL)
- Vue + Node.js: JWT Authentication and Authorization
Contents
Overview
The Github source code shows many full stack Vue and Node.js eample Projects with CRUD Operations. The back-end server uses Node.js with Express for REST API and specific library for interacting with database. Front-end side is made with Vue 2/Vue 3/Vue Typescript, Vue Router, Axios and Bootstrap.
Each of them is the Tutorial CRUD Application in that:
- Each Tutorial has id, title, description, published status.
- We can create, retrieve, update, delete Tutorials.
- We can also find Tutorials by title.
The images below shows screenshots of our System.
– Add Tutorial:
– Retrieve Tutorials:
– Click on Edit button to go to a Tutorial page:
On this Page, you can:
- change status to Published using Publish button
- delete the Tutorial using Delete button
- update the Tutorial details with Update button
– Search Tutorials by title:
How to Run
Node Express server:
Open command line at the project root folder, run:
npm install node .
The Node App will export Rest APIs at port 8080
, CORS configuration for working with port 8081
.
Vue Client:
Create .env file with content:
PORT=8081
Choose Vue Github source code as you need.
Open command line at the project root folder, run:
npm install npm start
Or:
yarn install yarn start
Vue + Node.js Github with MySQL
Tutorial: Vue + Node.js Express + MySQL
Github Source code:
– Frontend:
– Backend:
- Node Express + MySQL (raw SQL): Rest API
- Node Express + Sequelize + MySQL: Rest API
- Node Express Typescript + MySQL: Rest API
- Node Express Typescript + Sequelize + MySQL: Rest API
Vue + Node.js Github with PostgreSQL
Tutorial: Vue + Node.js Express + PostgreSQL
Github Source code:
– Frontend:
– Backend: Node Express + Sequelize + PostgreSQL: Rest API
Vue + Node.js Github with MongoDB
Tutorial: Vue + Node.js Express + MongoDB
Github Source code:
– Frontend:
– Backend: Node Express + MongoDB: Rest API
Vue + Node.js Github with SQL Server (MSSQL)
Github Source code:
– Frontend:
– Backend: Node Express + MSSQL: Rest API
Vue + Node.js Authentication Github
– Tutorial: Vue + Node.js Express: JWT Authentication & Authorization
Github Source code:
– Frontend:
– Backend:
How to Run Vue and Node.js App on same Port
Assume that we have 2 projects: Vue & Node.
If we run them separately:
- Node Express Server exports Rest Apis at Url:
http://localhost:8080/
- Vue Client runs at url:
http://localhost:8081/
Otherwise, when deploying Vue production-build with Node project, we only need to run Node Project for the fullstack (Vue + Node) system.
In this example, we access http://localhost:8080/
for the UI.
You can find step by step instruction at How to serve/combine Vue App with Express.