├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── http-common.js
    └── main.js
└── vue-axios-example.png


/.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 Axios example with Rest API
 2 | 
 3 | Vue Client with Axios to make CRUD requests to Rest API in that:
 4 | - Vue Axios GET request: get all Tutorials, get Tutorial by Id, find Tutorial by title
 5 | - Vue Axios POST request: create new Tutorial
 6 | - Vue Axios PUT request: update an existing Tutorial
 7 | - Vue Axios DELETE request: delete a Tutorial, delete all Tutorials
 8 | 
 9 | ![vue-axios-example](vue-axios-example.png)
10 | 
11 | For instruction, please visit:
12 | > [Vue Axios example - Get/Post/Put/Delete with Rest API](https://www.bezkoder.com/vue-axios-example/)
13 | 
14 | Related Posts:
15 | > [Vue Fetch example - Get/Post/Put/Delete with Rest API](https://www.bezkoder.com/vue-fetch-example/)
16 | 
17 | > [Vue 2 CRUD example with Axios and Vue Router](https://www.bezkoder.com/vue-js-crud-app/)
18 | 
19 | > [Vue 3 CRUD example with Axios and Vue Router](https://www.bezkoder.com/vue-3-crud/)
20 | 
21 | More Practice:
22 | > [Vue Pagination with Axios and API example](https://www.bezkoder.com/vue-pagination-axios/)
23 | 
24 | > [Vue JWT Authentication with Vuex and Vue Router](https://www.bezkoder.com/jwt-vue-vuex-authentication/)
25 | 
26 | > [Vue File Upload example using Axios](https://www.bezkoder.com/vue-axios-file-upload/)
27 | 
28 | Fullstack with Node Express:
29 | > [Vue + Node Express + MySQL](https://www.bezkoder.com/vue-js-node-js-express-mysql-crud-example/)
30 | 
31 | > [Vue + Node Express + PostgreSQL](https://www.bezkoder.com/vue-node-express-postgresql/)
32 | 
33 | > [Vue + Node Express + MongoDB](https://www.bezkoder.com/vue-node-express-mongodb-mevn-crud/)
34 | 
35 | Fullstack with Spring Boot:
36 | > [Vue + Spring Boot](https://www.bezkoder.com/spring-boot-vue-js-crud-example/)
37 | 
38 | > [Vue + Spring Boot + MongoDB](https://www.bezkoder.com/spring-boot-vue-mongodb/)
39 | 
40 | Fullstack with Django:
41 | > [Vue + Django](https://www.bezkoder.com/django-vue-js-rest-framework/)
42 | 
43 | Integration (run back-end & front-end on same server/port)
44 | > [Integrate Vue with Spring Boot](https://www.bezkoder.com/integrate-vue-spring-boot/)
45 | 
46 | > [Integrate Vue App with Node Express](https://www.bezkoder.com/serve-vue-app-express/)
47 | 
48 | Serverless with Firebase:
49 | > [Vue Firebase Realtime Database: CRUD example](https://www.bezkoder.com/vue-firebase-realtime-database/)
50 | 
51 | > [Vue Firestore CRUD example](https://www.bezkoder.com/vue-firestore-crud/)
52 | 
53 | ## Project setup
54 | ```
55 | npm install
56 | ```
57 | 
58 | ### Compiles and hot-reloads for development
59 | ```
60 | npm run serve
61 | ```
62 | 
63 | ### Compiles and minifies for production
64 | ```
65 | npm run build
66 | ```
67 | 
68 | ### Lints and fixes files
69 | ```
70 | npm run lint
71 | ```
72 | 
73 | ### Customize configuration
74 | See [Configuration Reference](https://cli.vuejs.org/config/).
75 | 


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-axios-example",
 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.22.0",
12 |     "core-js": "^3.6.5",
13 |     "vue": "^3.0.0"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "~4.5.0",
17 |     "@vue/cli-plugin-eslint": "~4.5.0",
18 |     "@vue/cli-service": "~4.5.0",
19 |     "@vue/compiler-sfc": "^3.0.0",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-vue": "^7.0.0"
23 |   },
24 |   "eslintConfig": {
25 |     "root": true,
26 |     "env": {
27 |       "node": true
28 |     },
29 |     "extends": [
30 |       "plugin:vue/vue3-essential",
31 |       "eslint:recommended"
32 |     ],
33 |     "parserOptions": {
34 |       "parser": "babel-eslint"
35 |     },
36 |     "rules": {}
37 |   },
38 |   "browserslist": [
39 |     "> 1%",
40 |     "last 2 versions",
41 |     "not dead"
42 |   ]
43 | }
44 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bezkoder/vue-axios-example/c61b4eb58e80fb49d7b566e36e7f511fbe112ff2/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>Vue Axios example</title>
 9 |     <link
10 |       rel="stylesheet"
11 |       href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
12 |     />
13 |   </head>
14 |   <body>
15 |     <noscript>
16 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
17 |     </noscript>
18 |     <div id="app"></div>
19 |     <!-- built files will be auto injected -->
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app" class="container my-3">
  3 |     <h3>Vue Axios example</h3>
  4 | 
  5 |     <div class="card mt-3">
  6 |       <div class="card-header">Vue Axios GET - BezKoder.com</div>
  7 |       <div class="card-body">
  8 |         <div class="input-group input-group-sm">
  9 |           <button class="btn btn-sm btn-primary" @click="getAllData">Get All</button>
 10 | 
 11 |           <input type="text" ref="get_id" class="form-control ml-2" placeholder="Id" />
 12 |           <div class="input-group-append">
 13 |             <button class="btn btn-sm btn-primary" @click="getDataById">Get by Id</button>
 14 |           </div>
 15 | 
 16 |           <input type="text" ref="get_title" class="form-control ml-2" placeholder="Title" />
 17 |           <div class="input-group-append">
 18 |             <button class="btn btn-sm btn-primary" @click="getDataByTitle">Find By Title</button>
 19 |           </div>
 20 | 
 21 |           <button class="btn btn-sm btn-warning ml-2" @click="clearGetOutput">Clear</button>
 22 |         </div>   
 23 |         
 24 |         <div v-if="getResult" class="alert alert-secondary mt-2" role="alert"><pre>{{getResult}}</pre></div>
 25 |       </div>
 26 |     </div>
 27 | 
 28 |     <div class="card mt-3">
 29 |       <div class="card-header">Vue Axios POST - BezKoder.com</div>
 30 |       <div class="card-body">
 31 |         <div class="form-group">
 32 |           <input type="text" class="form-control" ref="post_title" placeholder="Title" />
 33 |         </div>
 34 |         <div class="form-group">
 35 |           <input type="text" class="form-control" ref="post_description" placeholder="Description" />
 36 |         </div>
 37 |         <button class="btn btn-sm btn-primary" @click="postData">Post Data</button>
 38 |         <button class="btn btn-sm btn-warning ml-2" @click="clearPostOutput">Clear</button>
 39 | 
 40 |         <div v-if="postResult" class="alert alert-secondary mt-2" role="alert"><pre>{{postResult}}</pre></div>
 41 |       </div>
 42 |     </div>
 43 | 
 44 |     <div class="card mt-3">
 45 |       <div class="card-header">Vue Axios PUT - BezKoder.com</div>
 46 |       <div class="card-body">
 47 |         <div class="form-group">
 48 |           <input type="text" class="form-control" ref="put_id" placeholder="Id" />
 49 |         </div>
 50 |         <div class="form-group">
 51 |           <input type="text" class="form-control" ref="put_title" placeholder="Title" />
 52 |         </div>
 53 |         <div class="form-group">
 54 |           <input type="text" class="form-control" ref="put_description" placeholder="Description" />
 55 |         </div>
 56 |         <div class="form-check mb-2">
 57 |           <input type="checkbox" class="form-check-input" ref="put_published" />
 58 |           <label class="form-check-label" for="put_published">Publish</label>
 59 |         </div>
 60 |         <button class="btn btn-sm btn-primary" @click="putData">Update Data</button>
 61 |         <button class="btn btn-sm btn-warning ml-2" @click="clearPutOutput">Clear</button>
 62 | 
 63 |         <div v-if="putResult" class="alert alert-secondary mt-2" role="alert"><pre>{{putResult}}</pre></div>
 64 |       </div>
 65 |     </div>
 66 | 
 67 |     <div class="card mt-3">
 68 |       <div class="card-header">Vue Axios DELETE - BezKoder.com</div>
 69 |       <div class="card-body">
 70 |         <div class="input-group input-group-sm">
 71 |           <button class="btn btn-sm btn-danger" @click="deleteAllData">Delete All</button>
 72 | 
 73 |           <input type="text" ref="delete_id" class="form-control ml-2" placeholder="Id" />
 74 |           <div class="input-group-append">
 75 |             <button class="btn btn-sm btn-danger" @click="deleteDataById">Delete by Id</button>
 76 |           </div>
 77 | 
 78 |           <button class="btn btn-sm btn-warning ml-2" @click="clearDeleteOutput">Clear</button>
 79 |         </div>    
 80 |         
 81 |         <div v-if="deleteResult" class="alert alert-secondary mt-2" role="alert"><pre>{{deleteResult}}</pre></div>      
 82 |       </div>
 83 |     </div>
 84 |  
 85 |   </div>
 86 | </template>
 87 | 
 88 | <script>
 89 | import http from "./http-common";
 90 | 
 91 | export default {
 92 |   name: "App",
 93 |   data() {
 94 |     return {
 95 |       getResult: null,
 96 |       postResult: null,
 97 |       putResult: null,
 98 |       deleteResult: null,
 99 |     }
100 |   },
101 |   methods: {
102 |     fortmatResponse(res) {
103 |       return JSON.stringify(res, null, 2);
104 |     },
105 | 
106 |     async getAllData() {
107 |       try {
108 |         const res = await http.get("/tutorials");
109 | 
110 |         const result = {
111 |           status: res.status + "-" + res.statusText,
112 |           headers: res.headers,
113 |           data: res.data,
114 |         };
115 | 
116 |         this.getResult = this.fortmatResponse(result);
117 |       } catch (err) {
118 |         this.getResult = this.fortmatResponse(err.response?.data) || err;
119 |       }
120 |     },
121 | 
122 |     async getDataById() {
123 |       const id = this.$refs.get_id.value;
124 | 
125 |       if (id) {
126 |         try {
127 |           const res = await http.get(`/tutorials/${id}`);
128 | 
129 |           const result = {
130 |             status: res.status + "-" + res.statusText,
131 |             headers: res.headers,
132 |             data: res.data,
133 |           };
134 | 
135 |           // const result = {
136 |           //   data: res.data,
137 |           //   status: res.status,
138 |           //   statusText: res.statusText,
139 |           //   headers: res.headers,
140 |           //   config: res.config,
141 |           // };
142 | 
143 |           this.getResult = this.fortmatResponse(result);
144 |         } catch (err) {
145 |           this.getResult = this.fortmatResponse(err.response?.data) || err;
146 |         }
147 |       }
148 |     },
149 | 
150 |     async getDataByTitle() {
151 |       const title = this.$refs.get_title.value;
152 | 
153 |       if (title) {
154 |         try {
155 |           // const res = await instance.get(`/tutorials?title=${title}`);
156 |           const res = await http.get("/tutorials", {
157 |             params: {
158 |               title: title,
159 |             },
160 |           });
161 | 
162 |           const result = {
163 |             status: res.status + "-" + res.statusText,
164 |             headers: res.headers,
165 |             data: res.data,
166 |           };
167 | 
168 |           this.getResult = this.fortmatResponse(result);
169 |         } catch (err) {
170 |           this.getResult = this.fortmatResponse(err.response?.data) || err;
171 |         }
172 |       }
173 |     },
174 | 
175 |     async postData() {
176 |       const postData = {
177 |         title: this.$refs.post_title.value,
178 |         description: this.$refs.post_description.value,
179 |       };
180 | 
181 |       try {
182 |         const res = await http.post("/tutorials", postData, {
183 |           headers: {
184 |             "x-access-token": "token-value",
185 |           },
186 |         });
187 | 
188 |         const result = {
189 |           status: res.status + "-" + res.statusText,
190 |           headers: res.headers,
191 |           data: res.data,
192 |         };
193 | 
194 |         this.postResult = this.fortmatResponse(result);
195 |       } catch (err) {
196 |         this.postResult = this.fortmatResponse(err.response?.data) || err;
197 |       }
198 |     },
199 | 
200 |     async putData() {
201 |       const { put_id, put_title, put_description, put_published } = this.$refs;
202 |       const id = put_id.value;
203 | 
204 |       if (id) {
205 |         const putData = {
206 |           title: put_title.value,
207 |           description: put_description.value,
208 |           published: put_published.checked,
209 |         };
210 | 
211 |         try {
212 |           const res = await http.put(`/tutorials/${id}`, putData, {
213 |             headers: {
214 |               "x-access-token": "token-value",
215 |             },
216 |           });
217 | 
218 |           const result = {
219 |             status: res.status + "-" + res.statusText,
220 |             headers: res.headers,
221 |             data: res.data,
222 |           };
223 | 
224 |           this.putResult = this.fortmatResponse(result);
225 |         } catch (err) {
226 |           this.putResult = this.fortmatResponse(err.response?.data) || err;
227 |         }
228 |       }
229 |     },
230 | 
231 |     async deleteAllData() {
232 |       try {
233 |         const res = await http.delete("/tutorials");
234 | 
235 |         const result = {
236 |           status: res.status + "-" + res.statusText,
237 |           headers: res.headers,
238 |           data: res.data,
239 |         };
240 | 
241 |         this.deleteResult = this.fortmatResponse(result);
242 |       } catch (err) {
243 |         this.deleteResult = this.fortmatResponse(err.response?.data) || err;
244 |       }
245 |     },
246 | 
247 |     async deleteDataById() {
248 |       const id = this.$refs.delete_id.value;
249 | 
250 |       if (id) {
251 |         try {
252 |           const res = await http.delete(`/tutorials/${id}`);
253 | 
254 |           const result = {
255 |             status: res.status + "-" + res.statusText,
256 |             headers: res.headers,
257 |             data: res.data,
258 |           };
259 | 
260 |           this.deleteResult = this.fortmatResponse(result);
261 |         } catch (err) {
262 |           this.deleteResult = this.fortmatResponse(err.response?.data) || err;
263 |         }
264 |       }
265 |     },
266 | 
267 |     clearGetOutput() {
268 |       this.getResult = null;
269 |     },
270 | 
271 |     clearPostOutput() {
272 |       this.postResult = null;
273 |     },
274 | 
275 |     clearPutOutput() {
276 |       this.putResult = null;
277 |     },
278 | 
279 |     clearDeleteOutput() {
280 |       this.deleteResult = null;
281 |     }
282 |   }
283 | }
284 | </script>
285 | 
286 | <style>
287 | #app {
288 |   max-width: 600px;
289 |   margin: auto;
290 | }
291 | </style>
292 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bezkoder/vue-axios-example/c61b4eb58e80fb49d7b566e36e7f511fbe112ff2/src/assets/logo.png


--------------------------------------------------------------------------------
/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 | 
4 | createApp(App).mount('#app')
5 | 


--------------------------------------------------------------------------------
/vue-axios-example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bezkoder/vue-axios-example/c61b4eb58e80fb49d7b566e36e7f511fbe112ff2/vue-axios-example.png


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