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

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:

• Vue 2
• Vue 2 Typescript
• Vue 3
• Vue 3 Typescript

– Backend:

• Node Express + MySQL (raw SQL): Rest API
• Node Express + Sequelize + MySQL: Rest API

Vue + Node.js Github with PostgreSQL

Tutorial: Vue + Node.js Express + PostgreSQL

Github Source code:
– Frontend:

• Vue 2
• Vue 2 Typescript
• Vue 3
• Vue 3 Typescript

– Backend: Node Express + Sequelize + PostgreSQL: Rest API

Vue + Node.js Github with MongoDB

Tutorial: Vue + Node.js Express + MongoDB

Github Source code:
– Frontend:

• Vue 2
• Vue 2 Typescript
• Vue 3
• Vue 3 Typescript

– Backend: Node Express + MongoDB: Rest API

Vue + Node.js Github with SQL Server (MSSQL)

Github Source code:
– Frontend:

• Vue 2
• Vue 2 Typescript
• Vue 3
• Vue 3 Typescript

– Backend: Node Express + MSSQL: Rest API

Vue + Node.js Authentication Github

– Tutorial: Vue + Node.js Express: JWT Authentication & Authorization

Github Source code:
– Frontend:

• Vue 2
• Vue 2 with Typescript
• Vue 3

– Backend:

• Node Express + MySQL
• Node Express + PostgreSQL
• Node Express + MongoDB

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.