A simple CRUD application built with Vue.js

by Vue.js Examples

A simple CRUD application.

Back-end API

The backend of the application is written in Express using the MongoDB Compass database. It is located in the Express backend 01-backend-mongo folder. The repo is located at sezginibis/vue-mongo-crud

In addition to express;

modules are used.

Warning:

You might be using atlas instead of mongodb compass. Before all operations, make sure to change the settings in the .env file on the backend and the settings in the src/config/URIPath.js file on the frontend for the frontend.

For backend setup

  • Declare the required MongoDB URI in the .env file.
  • npm install
  • npm run dev

Front-end

Vue 3 is used for front-end. Fetch is used to call backend API data. The homepage is currently blank. Future actions are noted on the About page. CRUD operations are available in the Posts link. It is located in the Vue frontend 02-vue-frontend folder. Composition API is used in all Vue scripts.

Vue-CLI

Unfortunately Vue-Cli is slow. Also, it is no longer supported. However, when you install Vue with Vite, you cannot run it without a server even if you set your router to createWebHashHistory. But build this application that we use vue-cli. You will see that it works without the need for a server. I haven’t found a solution for this issue yet.

Planned

  • Props will be created for the title.
  • Validations were not made.
  • Bootstrap is so rustic, it needs to change.
  • Pagination not done.
  • It should be researched that the page seems to be reloaded when deleting, updating and adding a new one.
  • Image upload should be worked on.
  • User login and authorization must be done for the backend. Unfortunately not yet.

For frontend setup

  • src/config/URIPath.js file in URI change
  • npm install
  • npm run serve

I hope it will be a useful example for your education.

ScreenShot

GitHub

View Github