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)

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:

vue-node-js-github-crud-create

– Retrieve Tutorials:

vue-node-js-github-crud-retrieve

– Click on Edit button to go to a Tutorial page:

vue-node-js-github-crud-retrieve-one

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

vue-node-js-github-crud-update

– Search Tutorials by title:

vue-node-js-github-crud-search

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:

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

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.

You may also like...

Leave a Reply

Your email address will not be published.