Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/maniruzzamanakash/vue-3-advance-crud

A Complete Single Page Application using Vue, Vue Router, Bootstrap-Vue, Vuex and all....
https://github.com/maniruzzamanakash/vue-3-advance-crud

bootstrap-vue crud vue vue-router vue3-demo vuejs vuejs-router vuejs3 vuex

Last synced: 24 days ago
JSON representation

A Complete Single Page Application using Vue, Vue Router, Bootstrap-Vue, Vuex and all....

Awesome Lists containing this project

README

        

# Vue-CRUD Application
A Complete Single Page Application (SPA) or Product CRUD Application using Vue 3, Vue Router, Vue-Pagination, Searching, Sweet Alert, Vuex and all....

---

## Vue-3 CRUD Project Demo

Let's check the whole demo of the application of Vue-3 Complete CRUD with Vuex:

![Demo of Main Page](https://i.ibb.co/JKM6FPN/Vue-3-Advance-CRUD.png)

#### View Demo From Youtube -


## Vue-3 CRUD Project Todo List

### Setup Part

- [x] Vue JS Page Setup
- [x] Vue Router Setup
- [x] Vue-Bootstrap Setup
- [x] Vuex Setup for Central Storage Management

### CRUD Part
- [x] Page Design
- [x] Product List Page Design
- [x] Product Create/Edit Page Design
- [x] Product View Page Design
- [x] Product Delete Modal
- [x] Product List
- [x] Product List API Integration
- [x] Product Pagination
- [x] Product Searching
- [x] Product Create
- [x] Form Validation throw `Vue-validate`
- [x] Product Edit
- [x] Product Details Loading and Edit
- [x] Product Delete
- [x] Sweet Alert or other alert system

## Project setup

```bash
git clone https://github.com/ManiruzzamanAkash/Vue-3-Advance-CRUD.git
cd Vue-3-Advance-CRUD
```

Copy `.env.example` to `.env` and run

```bash
npm install
```

## API Project Setup (Laravel API)

https://github.com/ManiruzzamanAkash/Laravel-Basic-CRUD-API
> Note: It could be your api if you want. Just follow the process. It's super simple by using Laravel with PHP

### Compiles and hot-reloads for development
```bash
npm run serve
```

### Compiles and minifies for production
```bash
npm run build
```

### Lints and fixes files
```bash
npm run lint
```