All Projects → ManiruzzamanAkash → Vue-3-Advance-CRUD

ManiruzzamanAkash / Vue-3-Advance-CRUD

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

Programming Languages

Vue
7211 projects
javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to Vue-3-Advance-CRUD

vuejs-3-examples
Some examples of Vue.js 3.0.
Stars: ✭ 26 (-36.59%)
Mutual labels:  vuejs3, vue3-demo
Newbee Mall Vue3 App
🔥 🎉Vue3 全家桶 + Vant 搭建大型单页面商城项目,新蜂商城 Vue3 版本,技术栈为 Vue 3.0 + Vue-Router 4.0 + Vuex 4.0 + Vant 3.0。
Stars: ✭ 3,011 (+7243.9%)
Mutual labels:  vuejs3, vue3-demo
vuex-router
Move a Vue app's location state into the Vuex store. Allows super-easy page-based routing with built-in slide transitions.
Stars: ✭ 20 (-51.22%)
Mutual labels:  vue-router, vuejs-router
Cool Admin Vue
cool-admin一个很酷的后台权限管理框架,模块化、插件化、CRUD极速开发,永久开源免费,基于midway.js 2.0、typeorm、mysql、jwt、element-ui、vuex、vue-router、vue等构建
Stars: ✭ 73 (+78.05%)
Mutual labels:  crud, vue-router
vue3-docs
vue中文社区,vue3 中文文档
Stars: ✭ 180 (+339.02%)
Mutual labels:  vue-router, vue3-demo
vue-loopback
A Vue project template with Loopback framework optionally with Vuex, Vue-router, and Auth boilerplaite
Stars: ✭ 52 (+26.83%)
Mutual labels:  vue-router, bootstrap-vue
vue-bootstrap-boilerplate
📦 Vue 2/3, Bootstrap 5, Vuex, Vue-Router, Sass/Scss, ESLint, Axios (switch to vue3 branch)
Stars: ✭ 86 (+109.76%)
Mutual labels:  vue-router, bootstrap-vue
ts-cnode
🎉🎉🎉vue typescript cnodejs.org
Stars: ✭ 60 (+46.34%)
Mutual labels:  vue-router
hiroki
create a REST api faster than ever
Stars: ✭ 13 (-68.29%)
Mutual labels:  crud
angular2-crud-auth-routing
Sample Angular (2.x, 4.x) project with Contacts CRUD + routing + simple authentication
Stars: ✭ 60 (+46.34%)
Mutual labels:  crud
router
🚦 The official router for Vue.js
Stars: ✭ 2,077 (+4965.85%)
Mutual labels:  vue-router
Code-VueWapDemo
“Vue教程--Wap端项目搭建从0到1”的源码
Stars: ✭ 19 (-53.66%)
Mutual labels:  vue-router
vue-douban
高仿豆瓣app
Stars: ✭ 22 (-46.34%)
Mutual labels:  vue-router
laravel-livewire-ui
Laravel Livewire UI, Auth, & CRUD starter kit.
Stars: ✭ 92 (+124.39%)
Mutual labels:  crud
spring-boot-data-jpa-mysql
Spring Boot Rest CRUD API example - Spring Data JPA to interact with MySQL/PostgreSQL database.
Stars: ✭ 89 (+117.07%)
Mutual labels:  crud
PlanitFront
새해 목표, 이젠 플래닛에서 "함께" 달성해보세요! - 프론트
Stars: ✭ 13 (-68.29%)
Mutual labels:  vue-router
nativescript-vue-router
A simple router implementation that is suitable for NativeScript-Vue.
Stars: ✭ 14 (-65.85%)
Mutual labels:  vue-router
stack
A starter repository for MongoDB, Node.js, and Vue.js, with a local environment based on Docker.
Stars: ✭ 48 (+17.07%)
Mutual labels:  vuejs3
login push
vue+koa2+jwt实现单点登录 + todolist增删改查
Stars: ✭ 20 (-51.22%)
Mutual labels:  vue-router
vue-cnode
cnode build by vue2
Stars: ✭ 13 (-68.29%)
Mutual labels:  vue-router

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

View Demo From Youtube -

Vue-3 CRUD Project Todo List

Setup Part

  • Vue JS Page Setup
  • Vue Router Setup
  • Vue-Bootstrap Setup
  • Vuex Setup for Central Storage Management

CRUD Part

  • Page Design
    • Product List Page Design
    • Product Create/Edit Page Design
    • Product View Page Design
    • Product Delete Modal
  • Product List
    • Product List API Integration
    • Product Pagination
    • Product Searching
  • Product Create
    • Form Validation throw Vue-validate
  • Product Edit
    • Product Details Loading and Edit
  • Product Delete
    • Sweet Alert or other alert system

Project setup

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

Copy .env.example to .env and run

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

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].