├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── AddTutorial.vue
    │   ├── Tutorial.vue
    │   └── TutorialsList.vue
    ├── http-common.js
    ├── main.js
    ├── router.js
    └── services
    │   └── TutorialDataService.js
├── vue-3-crud-example-axios-tutorial.png
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue 3 example with Axios & Vue Router: Build CRUD App
 2 | Build a Vue.js 3 CRUD example to consume REST APIs, display and modify data using Axios and Vue Router.
 3 | - Each Tutorial has id, title, description, published status.
 4 | - We can create, retrieve, update, delete Tutorials.
 5 | - There is a Search bar for finding Tutorials by title.
 6 | 
 7 | ![vue-3-crud-example-axios-tutorial](vue-3-crud-example-axios-tutorial.png)
 8 | 
 9 | For instruction, please visit:
10 | > [Vue 3 CRUD example with Axios & Vue Router](https://bezkoder.com/vue-3-crud/)
11 | 
12 | Typescript version:
13 | > [Vue 3 Typescript example with Axios: Build CRUD App](https://bezkoder.com/vue-3-typescript-axios/)
14 | 
15 | More Practice:
16 | > [Vue 2 CRUD App with Vue Router & Axios](https://bezkoder.com/vue-js-crud-app/)
17 | 
18 | > [Vue Pagination with Axios and API example](https://bezkoder.com/vue-pagination-axios/)
19 | 
20 | > [Vue.js JWT Authentication with Vuex and Vue Router](https://bezkoder.com/jwt-vue-vuex-authentication/)
21 | 
22 | > [Vue File Upload example using Axios](https://bezkoder.com/vue-axios-file-upload/)
23 | 
24 | Fullstack with Node.js Express:
25 | > [Vue.js + Node.js Express + MySQL](https://bezkoder.com/vue-js-node-js-express-mysql-crud-example/)
26 | 
27 | > [Vue.js + Node.js Express + PostgreSQL](https://bezkoder.com/vue-node-express-postgresql/)
28 | 
29 | > [Vue.js + Node.js Express + MongoDB](https://bezkoder.com/vue-node-express-mongodb-mevn-crud/)
30 | 
31 | Fullstack with Spring Boot:
32 | > [Vue.js + Spring Boot](https://bezkoder.com/spring-boot-vue-js-crud-example/)
33 | 
34 | > [Vue.js + Spring Boot + MongoDB](https://bezkoder.com/spring-boot-vue-mongodb/)
35 | 
36 | Fullstack with Django:
37 | > [Vue.js + Django](https://bezkoder.com/django-vue-js-rest-framework/)
38 | 
39 | Integration (run back-end & front-end on same server/port)
40 | > [Integrate Vue.js with Spring Boot](https://bezkoder.com/integrate-vue-spring-boot/)
41 | 
42 | > [Integrate Vue App with Node.js Express](https://bezkoder.com/serve-vue-app-express/)
43 | 
44 | Serverless with Firebase:
45 | > [Vue Firebase Realtime Database: CRUD example](https://bezkoder.com/vue-firebase-realtime-database/)
46 | 
47 | > [Vue Firestore CRUD example](https://bezkoder.com/vue-firestore-crud/)
48 | 
49 | ## Project setup
50 | ```
51 | npm install
52 | ```
53 | 
54 | ### Compiles and hot-reloads for development
55 | ```
56 | npm run serve
57 | ```
58 | 
59 | ### Compiles and minifies for production
60 | ```
61 | npm run build
62 | ```
63 | 
64 | ### Run your tests
65 | ```
66 | npm run test
67 | ```
68 | 
69 | ### Lints and fixes files
70 | ```
71 | npm run lint
72 | ```
73 | 
74 | ### Customize configuration
75 | See [Configuration Reference](https://cli.vuejs.org/config/).
76 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-3-crud",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.21.1",
12 |     "bootstrap": "^4.6.0",
13 |     "core-js": "^3.6.5",
14 |     "jquery": "^3.6.0",
15 |     "popper.js": "^1.16.1",
16 |     "vue": "^3.0.0",
17 |     "vue-router": "^4.0.6"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "~4.5.0",
21 |     "@vue/cli-plugin-eslint": "~4.5.0",
22 |     "@vue/cli-service": "~4.5.0",
23 |     "@vue/compiler-sfc": "^3.0.0",
24 |     "babel-eslint": "^10.1.0",
25 |     "eslint": "^6.7.2",
26 |     "eslint-plugin-vue": "^7.0.0"
27 |   },
28 |   "eslintConfig": {
29 |     "root": true,
30 |     "env": {
31 |       "node": true
32 |     },
33 |     "extends": [
34 |       "plugin:vue/vue3-essential",
35 |       "eslint:recommended"
36 |     ],
37 |     "parserOptions": {
38 |       "parser": "babel-eslint"
39 |     },
40 |     "rules": {}
41 |   },
42 |   "browserslist": [
43 |     "> 1%",
44 |     "last 2 versions",
45 |     "not dead"
46 |   ]
47 | }
48 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bezkoder/vue-3-crud/f593fc548a8d5091b21053a3671631ab7442d646/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <nav class="navbar navbar-expand navbar-dark bg-dark">
 4 |       <router-link to="/" class="navbar-brand">bezKoder</router-link>
 5 |       <div class="navbar-nav mr-auto">
 6 |         <li class="nav-item">
 7 |           <router-link to="/tutorials" class="nav-link">Tutorials</router-link>
 8 |         </li>
 9 |         <li class="nav-item">
10 |           <router-link to="/add" class="nav-link">Add</router-link>
11 |         </li>
12 |       </div>
13 |     </nav>
14 | 
15 |     <div class="container mt-3">
16 |       <router-view />
17 |     </div>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | export default {
23 |   name: "app"
24 | };
25 | </script>
26 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bezkoder/vue-3-crud/f593fc548a8d5091b21053a3671631ab7442d646/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/AddTutorial.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="submit-form">
 3 |     <div v-if="!submitted">
 4 |       <div class="form-group">
 5 |         <label for="title">Title</label>
 6 |         <input
 7 |           type="text"
 8 |           class="form-control"
 9 |           id="title"
10 |           required
11 |           v-model="tutorial.title"
12 |           name="title"
13 |         />
14 |       </div>
15 | 
16 |       <div class="form-group">
17 |         <label for="description">Description</label>
18 |         <input
19 |           class="form-control"
20 |           id="description"
21 |           required
22 |           v-model="tutorial.description"
23 |           name="description"
24 |         />
25 |       </div>
26 | 
27 |       <button @click="saveTutorial" class="btn btn-success">Submit</button>
28 |     </div>
29 | 
30 |     <div v-else>
31 |       <h4>You submitted successfully!</h4>
32 |       <button class="btn btn-success" @click="newTutorial">Add</button>
33 |     </div>
34 |   </div>
35 | </template>
36 | 
37 | <script>
38 | import TutorialDataService from "../services/TutorialDataService";
39 | 
40 | export default {
41 |   name: "add-tutorial",
42 |   data() {
43 |     return {
44 |       tutorial: {
45 |         id: null,
46 |         title: "",
47 |         description: "",
48 |         published: false
49 |       },
50 |       submitted: false
51 |     };
52 |   },
53 |   methods: {
54 |     saveTutorial() {
55 |       var data = {
56 |         title: this.tutorial.title,
57 |         description: this.tutorial.description
58 |       };
59 | 
60 |       TutorialDataService.create(data)
61 |         .then(response => {
62 |           this.tutorial.id = response.data.id;
63 |           console.log(response.data);
64 |           this.submitted = true;
65 |         })
66 |         .catch(e => {
67 |           console.log(e);
68 |         });
69 |     },
70 |     
71 |     newTutorial() {
72 |       this.submitted = false;
73 |       this.tutorial = {};
74 |     }
75 |   }
76 | };
77 | </script>
78 | 
79 | <style>
80 | .submit-form {
81 |   max-width: 300px;
82 |   margin: auto;
83 | }
84 | </style>
85 | 


--------------------------------------------------------------------------------
/src/components/Tutorial.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-if="currentTutorial" class="edit-form">
  3 |     <h4>Tutorial</h4>
  4 |     <form>
  5 |       <div class="form-group">
  6 |         <label for="title">Title</label>
  7 |         <input type="text" class="form-control" id="title"
  8 |           v-model="currentTutorial.title"
  9 |         />
 10 |       </div>
 11 |       <div class="form-group">
 12 |         <label for="description">Description</label>
 13 |         <input type="text" class="form-control" id="description"
 14 |           v-model="currentTutorial.description"
 15 |         />
 16 |       </div>
 17 | 
 18 |       <div class="form-group">
 19 |         <label><strong>Status:</strong></label>
 20 |         {{ currentTutorial.published ? "Published" : "Pending" }}
 21 |       </div>
 22 |     </form>
 23 | 
 24 |     <button class="badge badge-primary mr-2"
 25 |       v-if="currentTutorial.published"
 26 |       @click="updatePublished(false)"
 27 |     >
 28 |       UnPublish
 29 |     </button>
 30 |     <button v-else class="badge badge-primary mr-2"
 31 |       @click="updatePublished(true)"
 32 |     >
 33 |       Publish
 34 |     </button>
 35 | 
 36 |     <button class="badge badge-danger mr-2"
 37 |       @click="deleteTutorial"
 38 |     >
 39 |       Delete
 40 |     </button>
 41 | 
 42 |     <button type="submit" class="badge badge-success"
 43 |       @click="updateTutorial"
 44 |     >
 45 |       Update
 46 |     </button>
 47 |     <p>{{ message }}</p>
 48 |   </div>
 49 | 
 50 |   <div v-else>
 51 |     <br />
 52 |     <p>Please click on a Tutorial...</p>
 53 |   </div>
 54 | </template>
 55 | 
 56 | <script>
 57 | import TutorialDataService from "../services/TutorialDataService";
 58 | 
 59 | export default {
 60 |   name: "tutorial",
 61 |   data() {
 62 |     return {
 63 |       currentTutorial: null,
 64 |       message: ''
 65 |     };
 66 |   },
 67 |   methods: {
 68 |     getTutorial(id) {
 69 |       TutorialDataService.get(id)
 70 |         .then(response => {
 71 |           this.currentTutorial = response.data;
 72 |           console.log(response.data);
 73 |         })
 74 |         .catch(e => {
 75 |           console.log(e);
 76 |         });
 77 |     },
 78 | 
 79 |     updatePublished(status) {
 80 |       var data = {
 81 |         id: this.currentTutorial.id,
 82 |         title: this.currentTutorial.title,
 83 |         description: this.currentTutorial.description,
 84 |         published: status
 85 |       };
 86 | 
 87 |       TutorialDataService.update(this.currentTutorial.id, data)
 88 |         .then(response => {
 89 |           console.log(response.data);
 90 |           this.currentTutorial.published = status;
 91 |           this.message = 'The status was updated successfully!';
 92 |         })
 93 |         .catch(e => {
 94 |           console.log(e);
 95 |         });
 96 |     },
 97 | 
 98 |     updateTutorial() {
 99 |       TutorialDataService.update(this.currentTutorial.id, this.currentTutorial)
100 |         .then(response => {
101 |           console.log(response.data);
102 |           this.message = 'The tutorial was updated successfully!';
103 |         })
104 |         .catch(e => {
105 |           console.log(e);
106 |         });
107 |     },
108 | 
109 |     deleteTutorial() {
110 |       TutorialDataService.delete(this.currentTutorial.id)
111 |         .then(response => {
112 |           console.log(response.data);
113 |           this.$router.push({ name: "tutorials" });
114 |         })
115 |         .catch(e => {
116 |           console.log(e);
117 |         });
118 |     }
119 |   },
120 |   mounted() {
121 |     this.message = '';
122 |     this.getTutorial(this.$route.params.id);
123 |   }
124 | };
125 | </script>
126 | 
127 | <style>
128 | .edit-form {
129 |   max-width: 300px;
130 |   margin: auto;
131 | }
132 | </style>
133 | 


--------------------------------------------------------------------------------
/src/components/TutorialsList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="list row">
  3 |     <div class="col-md-8">
  4 |       <div class="input-group mb-3">
  5 |         <input type="text" class="form-control" placeholder="Search by title"
  6 |           v-model="title"/>
  7 |         <div class="input-group-append">
  8 |           <button class="btn btn-outline-secondary" type="button"
  9 |             @click="searchTitle"
 10 |           >
 11 |             Search
 12 |           </button>
 13 |         </div>
 14 |       </div>
 15 |     </div>
 16 |     <div class="col-md-6">
 17 |       <h4>Tutorials List</h4>
 18 |       <ul class="list-group">
 19 |         <li class="list-group-item"
 20 |           :class="{ active: index == currentIndex }"
 21 |           v-for="(tutorial, index) in tutorials"
 22 |           :key="index"
 23 |           @click="setActiveTutorial(tutorial, index)"
 24 |         >
 25 |           {{ tutorial.title }}
 26 |         </li>
 27 |       </ul>
 28 | 
 29 |       <button class="m-3 btn btn-sm btn-danger" @click="removeAllTutorials">
 30 |         Remove All
 31 |       </button>
 32 |     </div>
 33 |     <div class="col-md-6">
 34 |       <div v-if="currentTutorial">
 35 |         <h4>Tutorial</h4>
 36 |         <div>
 37 |           <label><strong>Title:</strong></label> {{ currentTutorial.title }}
 38 |         </div>
 39 |         <div>
 40 |           <label><strong>Description:</strong></label> {{ currentTutorial.description }}
 41 |         </div>
 42 |         <div>
 43 |           <label><strong>Status:</strong></label> {{ currentTutorial.published ? "Published" : "Pending" }}
 44 |         </div>
 45 | 
 46 |         <router-link :to="'/tutorials/' + currentTutorial.id" class="badge badge-warning">Edit</router-link>
 47 |       </div>
 48 |       <div v-else>
 49 |         <br />
 50 |         <p>Please click on a Tutorial...</p>
 51 |       </div>
 52 |     </div>
 53 |   </div>
 54 | </template>
 55 | 
 56 | <script>
 57 | import TutorialDataService from "../services/TutorialDataService";
 58 | 
 59 | export default {
 60 |   name: "tutorials-list",
 61 |   data() {
 62 |     return {
 63 |       tutorials: [],
 64 |       currentTutorial: null,
 65 |       currentIndex: -1,
 66 |       title: ""
 67 |     };
 68 |   },
 69 |   methods: {
 70 |     retrieveTutorials() {
 71 |       TutorialDataService.getAll()
 72 |         .then(response => {
 73 |           this.tutorials = response.data;
 74 |           console.log(response.data);
 75 |         })
 76 |         .catch(e => {
 77 |           console.log(e);
 78 |         });
 79 |     },
 80 | 
 81 |     refreshList() {
 82 |       this.retrieveTutorials();
 83 |       this.currentTutorial = null;
 84 |       this.currentIndex = -1;
 85 |     },
 86 | 
 87 |     setActiveTutorial(tutorial, index) {
 88 |       this.currentTutorial = tutorial;
 89 |       this.currentIndex = tutorial ? index : -1;
 90 |     },
 91 | 
 92 |     removeAllTutorials() {
 93 |       TutorialDataService.deleteAll()
 94 |         .then(response => {
 95 |           console.log(response.data);
 96 |           this.refreshList();
 97 |         })
 98 |         .catch(e => {
 99 |           console.log(e);
100 |         });
101 |     },
102 |     
103 |     searchTitle() {
104 |       TutorialDataService.findByTitle(this.title)
105 |         .then(response => {
106 |           this.tutorials = response.data;
107 |           this.setActiveTutorial(null);
108 |           console.log(response.data);
109 |         })
110 |         .catch(e => {
111 |           console.log(e);
112 |         });
113 |     }
114 |   },
115 |   mounted() {
116 |     this.retrieveTutorials();
117 |   }
118 | };
119 | </script>
120 | 
121 | <style>
122 | .list {
123 |   text-align: left;
124 |   max-width: 750px;
125 |   margin: auto;
126 | }
127 | </style>
128 | 


--------------------------------------------------------------------------------
/src/http-common.js:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 | 
3 | export default axios.create({
4 |   baseURL: "http://localhost:8080/api",
5 |   headers: {
6 |     "Content-type": "application/json"
7 |   }
8 | });
9 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import 'bootstrap'
4 | import 'bootstrap/dist/css/bootstrap.min.css'
5 | import router from './router'
6 | 
7 | createApp(App).use(router).mount('#app')
8 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import { createWebHistory, createRouter } from "vue-router";
 2 | 
 3 | const routes =  [
 4 |   {
 5 |     path: "/",
 6 |     alias: "/tutorials",
 7 |     name: "tutorials",
 8 |     component: () => import("./components/TutorialsList")
 9 |   },
10 |   {
11 |     path: "/tutorials/:id",
12 |     name: "tutorial-details",
13 |     component: () => import("./components/Tutorial")
14 |   },
15 |   {
16 |     path: "/add",
17 |     name: "add",
18 |     component: () => import("./components/AddTutorial")
19 |   }
20 | ];
21 | 
22 | const router = createRouter({
23 |   history: createWebHistory(),
24 |   routes,
25 | });
26 | 
27 | export default router;


--------------------------------------------------------------------------------
/src/services/TutorialDataService.js:
--------------------------------------------------------------------------------
 1 | import http from "../http-common";
 2 | 
 3 | class TutorialDataService {
 4 |   getAll() {
 5 |     return http.get("/tutorials");
 6 |   }
 7 | 
 8 |   get(id) {
 9 |     return http.get(`/tutorials/${id}`);
10 |   }
11 | 
12 |   create(data) {
13 |     return http.post("/tutorials", data);
14 |   }
15 | 
16 |   update(id, data) {
17 |     return http.put(`/tutorials/${id}`, data);
18 |   }
19 | 
20 |   delete(id) {
21 |     return http.delete(`/tutorials/${id}`);
22 |   }
23 | 
24 |   deleteAll() {
25 |     return http.delete(`/tutorials`);
26 |   }
27 | 
28 |   findByTitle(title) {
29 |     return http.get(`/tutorials?title=${title}`);
30 |   }
31 | }
32 | 
33 | export default new TutorialDataService();
34 | 


--------------------------------------------------------------------------------
/vue-3-crud-example-axios-tutorial.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bezkoder/vue-3-crud/f593fc548a8d5091b21053a3671631ab7442d646/vue-3-crud-example-axios-tutorial.png


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   devServer: {
3 |     port: 8081
4 |   }
5 | }


--------------------------------------------------------------------------------