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

Overview

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
Issues
  • feature: podman image for the api

    feature: podman image for the api

    would be awesome if there would be some kind of docker image for the api part so one can easily start the backend stuff without hassling with php etc.

    opened by damnms 0
Owner
Maniruzzaman Akash
System Designer & Architect. Can develop/architect your system's Frontend with React/Vue and Backend with Laravel/Node JS. Interested to work with AI too...
Maniruzzaman Akash
一个关于vite2+vue3项目开发中常见任务实践的库

Vite2项目最佳实践 配套视频演示 我专门录了一套视频演示本文所做的所有操作,喜欢看视频学习的小伙伴移步: 「备战2021」Vite2 + Vue3项目最佳实践 制作不易,求3连,求关注 vite2来了 Vite1还没用上,Vite2已经更新了,全新插件架构,丝滑的开发体验,和Vue3的完美结合。

村长 129 Jun 2, 2021
A Complete Single Page Application using Vue, Vue Router, Bootstrap-Vue, Vuex and all....

Vue-CRUD Application A Complete Single Page Application (SPA) or Product CRUD Application using Vue 3, Vue Router, Vue-Pagination, Searching, Sweet Al

Maniruzzaman Akash 15 Jun 12, 2021
这是基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex,适配手机、平板、pc 的后台开源免费模板库(vue2.x请切换vue-prev-admin分支)

介绍 基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex,适配手机、平板、pc 的后台开源免费模板,希望减少工作量,帮助大家实现快速开发。 线上预览 vue3.x 版本

null 61 Jun 8, 2021
@Django integrated with a full-featured @Webpack + (@vuejs / vue-loader) setup with hot reload, linting, testing & css extraction.

vue-django-webpack-boilerplate @NdagiStanley has mirrored the fork to have this repo here. This starterpack has proved useful to many and I thank you

Stanley Ndagi 508 Jun 8, 2021
A seed project with vue, vuex, typescript & webpack with hot reloading and all the good stuf

Vue Vuex TypeScript Webpack seed This seed project includes some of the 'hot' and latests web technologies such as TypeScript, Vue, Vuex,Vuex-Typescri

Israel Zablianov 34 Sep 4, 2020
An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.

Vue Enterprise Boilerplate This is an ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI. Questio

Ben Hong 7k Jun 5, 2021
An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.

An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.

Ben Hong 7k Jun 3, 2021
Vue project template for authoring component and their use case

vue-authoring-template Click one of this badge for more info This template is to help authoring Vue component with it's use case in story-scenario (st

Fahmi Akbar Wildana 14 Jul 30, 2020
A Vue.js starter kit that lets you focus on more programming and less configuration.

vue-starter A Vue.js starter kit that lets you focus on more programming and less configuration. A full-featured Webpack setup with hot-reload, lint-o

Rohit Rai 57 Jul 30, 2020
vue-seed

vue-seed The de facto vue-seed repo for building scalable apps with Vue, Vuex, ES6, Webpack 2 and CSS framework Bulma This repo serves as a minimal se

null 23 Apr 30, 2021
😍 Awesome Vue Boilerplate 🥳 Vue 🥰 Vuex, vuex-pathify 🤗 element-ui 🤲 tailwindcss

Awesome Vue Boilerplate This is an ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI 3. Getting

Narek Hakobyan 55 May 30, 2021
a front end template development by vue3.x typescript vite2.x vuex4.x vue-router 4.x mock element-plus

Vue 3 + Typescript + Vite + Vuex + Vue-Router This template should help get you started developing with Vue 3 and Typescript and Vuex and Vu

coderly 21 May 13, 2021
A highly opinionated Vue 2.0 template.

VueCharged Template An opinionated feature-first Vue 2.0 template with CLI scaffolding superpowers. Key Features Features First! Each component create

Daniel Escobedo 17 Mar 24, 2021
Rails view with webpack=vue optimizer

RailsVueMelt Rails view with webpack=vue optimizer Installation Add this line to your application's Gemfile: gem 'rails_vue_melt' And then execute: $

midnightSuyama 16 Dec 23, 2020