├── .browserslistrc
├── .eslintrc.js
├── .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
    │   ├── TutorialDetails.vue
    │   └── TutorialsList.vue
    ├── http-common.ts
    ├── main.ts
    ├── router.ts
    ├── services
    │   └── TutorialDataService.ts
    ├── shims-vue.d.ts
    └── types
    │   ├── ResponseData.ts
    │   └── Tutorial.ts
├── tsconfig.json
├── vue-3-typescript-example-axios-tutorial.png
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   extends: [
 7 |     "plugin:vue/vue3-essential",
 8 |     "eslint:recommended",
 9 |     "@vue/typescript/recommended",
10 |     "@vue/prettier",
11 |     "@vue/prettier/@typescript-eslint",
12 |   ],
13 |   parserOptions: {
14 |     ecmaVersion: 2020,
15 |   },
16 |   rules: {
17 |     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
18 |     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
19 |   },
20 | };
21 | 


--------------------------------------------------------------------------------
/.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 Typescript example with Axios & Vue Router: Build CRUD App
 2 | Build a Vue.js 3 Typescript 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-typescript-example-axios-tutorial](vue-3-typescript-example-axios-tutorial.png)
 8 | 
 9 | For instruction, please visit:
10 | > [Vue 3 Typescript example with Axios: Build CRUD App](https://bezkoder.com/vue-3-typescript-axios/)
11 | 
12 | More Practice:
13 | > [Vue 3 CRUD example with Axios & Vue Router](https://bezkoder.com/vue-3-crud/)
14 | 
15 | > [Vue 2 CRUD App with Vue Router & Axios](https://bezkoder.com/vue-js-crud-app/)
16 | 
17 | > [Vue Pagination with Axios and API example](https://bezkoder.com/vue-pagination-axios/)
18 | 
19 | > [Vue.js JWT Authentication with Vuex and Vue Router](https://bezkoder.com/jwt-vue-vuex-authentication/)
20 | 
21 | > [Vue File Upload example using Axios](https://bezkoder.com/vue-axios-file-upload/)
22 | 
23 | Fullstack with Node.js Express:
24 | > [Vue.js + Node.js Express + MySQL](https://bezkoder.com/vue-js-node-js-express-mysql-crud-example/)
25 | 
26 | > [Vue.js + Node.js Express + PostgreSQL](https://bezkoder.com/vue-node-express-postgresql/)
27 | 
28 | > [Vue.js + Node.js Express + MongoDB](https://bezkoder.com/vue-node-express-mongodb-mevn-crud/)
29 | 
30 | Fullstack with Spring Boot:
31 | > [Vue.js + Spring Boot](https://bezkoder.com/spring-boot-vue-js-crud-example/)
32 | 
33 | > [Vue.js + Spring Boot + MongoDB](https://bezkoder.com/spring-boot-vue-mongodb/)
34 | 
35 | Fullstack with Django:
36 | > [Vue.js + Django](https://bezkoder.com/django-vue-js-rest-framework/)
37 | 
38 | Integration (run back-end & front-end on same server/port)
39 | > [Integrate Vue.js with Spring Boot](https://bezkoder.com/integrate-vue-spring-boot/)
40 | 
41 | > [Integrate Vue App with Node.js Express](https://bezkoder.com/serve-vue-app-express/)
42 | 
43 | Serverless with Firebase:
44 | > [Vue Firebase Realtime Database: CRUD example](https://bezkoder.com/vue-firebase-realtime-database/)
45 | 
46 | > [Vue Firestore CRUD example](https://bezkoder.com/vue-firestore-crud/)
47 | 
48 | ## Project setup
49 | ```
50 | npm install
51 | ```
52 | 
53 | ### Compiles and hot-reloads for development
54 | ```
55 | npm run serve
56 | ```
57 | 
58 | ### Compiles and minifies for production
59 | ```
60 | npm run build
61 | ```
62 | 
63 | ### Run your tests
64 | ```
65 | npm run test
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: ["@vue/cli-plugin-babel/preset"],
3 | };
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-3-typescript-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.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 |     "@typescript-eslint/eslint-plugin": "^4.18.0",
21 |     "@typescript-eslint/parser": "^4.18.0",
22 |     "@vue/cli-plugin-babel": "~4.5.0",
23 |     "@vue/cli-plugin-eslint": "~4.5.0",
24 |     "@vue/cli-plugin-typescript": "~4.5.0",
25 |     "@vue/cli-service": "~4.5.0",
26 |     "@vue/compiler-sfc": "^3.0.0",
27 |     "@vue/eslint-config-prettier": "^6.0.0",
28 |     "@vue/eslint-config-typescript": "^7.0.0",
29 |     "eslint": "^6.7.2",
30 |     "eslint-plugin-prettier": "^3.3.1",
31 |     "eslint-plugin-vue": "^7.0.0",
32 |     "prettier": "^2.2.1",
33 |     "typescript": "~4.1.5"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bezkoder/vue-3-typescript-example/edac9de9e77b4fe83ccd53e86217d87a8006efee/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 lang="ts">
22 | import { defineComponent } from "vue";
23 | 
24 | export default defineComponent({
25 |   name: "App",
26 | });
27 | </script>
28 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bezkoder/vue-3-typescript-example/edac9de9e77b4fe83ccd53e86217d87a8006efee/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 lang="ts">
38 | import { defineComponent } from "vue";
39 | import TutorialDataService from "@/services/TutorialDataService";
40 | import Tutorial from "@/types/Tutorial";
41 | import ResponseData from "@/types/ResponseData";
42 | 
43 | export default defineComponent({
44 |   name: "add-tutorial",
45 |   data() {
46 |     return {
47 |       tutorial: {
48 |         id: null,
49 |         title: "",
50 |         description: "",
51 |         published: false,
52 |       } as Tutorial,
53 |       submitted: false,
54 |     };
55 |   },
56 |   methods: {
57 |     saveTutorial() {
58 |       let data = {
59 |         title: this.tutorial.title,
60 |         description: this.tutorial.description,
61 |       };
62 | 
63 |       TutorialDataService.create(data)
64 |         .then((response: ResponseData) => {
65 |           this.tutorial.id = response.data.id;
66 |           console.log(response.data);
67 |           this.submitted = true;
68 |         })
69 |         .catch((e: Error) => {
70 |           console.log(e);
71 |         });
72 |     },
73 | 
74 |     newTutorial() {
75 |       this.submitted = false;
76 |       this.tutorial = {} as Tutorial;
77 |     },
78 |   },
79 | });
80 | </script>
81 | 
82 | <style>
83 | .submit-form {
84 |   max-width: 300px;
85 |   margin: auto;
86 | }
87 | </style>
88 | 


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


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


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


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


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


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
 1 | import VueRouter, { Route } from 'vue-router'
 2 | 
 3 | /* eslint-disable */
 4 | declare module '*.vue' {
 5 |   import type { DefineComponent } from 'vue'
 6 |   const component: DefineComponent<{}, {}, any>
 7 |   export default component
 8 | }
 9 | 
10 | declare module 'vue/types/vue' {
11 |   interface Vue {
12 |     $router: VueRouter
13 |   }
14 | }


--------------------------------------------------------------------------------
/src/types/ResponseData.ts:
--------------------------------------------------------------------------------
1 | export default interface ResponseData {
2 |   data: any;
3 | }


--------------------------------------------------------------------------------
/src/types/Tutorial.ts:
--------------------------------------------------------------------------------
1 | export default interface Tutorial {
2 |   id: null;
3 |   title: string;
4 |   description: string;
5 |   published: boolean;
6 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "skipLibCheck": true,
10 |     "esModuleInterop": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "sourceMap": true,
13 |     "baseUrl": ".",
14 |     "types": [
15 |       "webpack-env"
16 |     ],
17 |     "paths": {
18 |       "@/*": [
19 |         "src/*"
20 |       ]
21 |     },
22 |     "lib": [
23 |       "esnext",
24 |       "dom",
25 |       "dom.iterable",
26 |       "scripthost"
27 |     ]
28 |   },
29 |   "include": [
30 |     "src/**/*.ts",
31 |     "src/**/*.tsx",
32 |     "src/**/*.vue",
33 |     "tests/**/*.ts",
34 |     "tests/**/*.tsx"
35 |   ],
36 |   "exclude": [
37 |     "node_modules"
38 |   ]
39 | }
40 | 


--------------------------------------------------------------------------------
/vue-3-typescript-example-axios-tutorial.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bezkoder/vue-3-typescript-example/edac9de9e77b4fe83ccd53e86217d87a8006efee/vue-3-typescript-example-axios-tutorial.png


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


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