# Vue 3 CRUD example with Axios & Vue Router

{% file src="/files/-MiDSXxLv5JF1jjYvPTQ" %}

<https://github.com/bezkoder/vue-3-typescript-example>

## Vue 3 CRUD example with Axios & Vue Router

&#x20;[Last modified: August 14, 2021](https://www.bezkoder.com/vue-3-crud/)  [bezkoder](https://www.bezkoder.com/author/bezkoder/)  [Vue.js](https://www.bezkoder.com/category/vue/)

In this tutorial, I will show you how to build a Vue.js 3 CRUD example to consume REST APIs, display and modify data using Axios and Vue Router.

More Practice:\
– [Vue 3 Authentication with JWT, Vuex, Axios and Vue Router](https://bezkoder.com/vue-3-authentication-jwt/)\
– [Vue File Upload example using Axios](https://bezkoder.com/vue-axios-file-upload/)

Fullstack:\
– [Vue.js + Node.js + Express + MySQL example](https://bezkoder.com/vue-js-node-js-express-mysql-crud-example/)\
– [Vue.js + Node.js + Express + PostgreSQL example](https://bezkoder.com/vue-node-express-postgresql/)\
– [Vue.js + Node.js + Express + MongoDB example](https://bezkoder.com/vue-node-express-mongodb-mevn-crud/)\
– [Vue.js + Spring Boot + MySQL example](https://bezkoder.com/spring-boot-vue-js-crud-example/)\
– [Vue.js + Spring Boot + PostgreSQL example](https://bezkoder.com/spring-boot-vue-js-postgresql/)\
– [Vue.js + Spring Boot + MongoDB example](https://bezkoder.com/spring-boot-vue-mongodb/)\
– [Vue.js + Django example](https://bezkoder.com/django-vue-js-rest-framework/)

Typescript version at:\
[Vue 3 Typescript example with Axios: Build CRUD App](https://bezkoder.com/vue-3-typescript-axios/)

Vuetify version: [Vuetify data-table example with a CRUD App | v-data-table](https://bezkoder.com/vuetify-data-table-example/)

Serverless with Firebase:\
– [Vue Firebase Realtime Database: CRUD example](https://bezkoder.com/vue-firebase-realtime-database/)\
– [Vue Firestore: Build a CRUD App example](https://bezkoder.com/vue-firestore-crud/)

Contents \[[hide](https://www.bezkoder.com/vue-3-crud/#)]

* [Overview of Vue.js 3 CRUD example](https://www.bezkoder.com/vue-3-crud/#Overview_of_Vuejs_3_CRUD_example)
* [Vue.js 3 Component Diagram with Vue Router & Axios](https://www.bezkoder.com/vue-3-crud/#Vuejs_3_Component_Diagram_with_Vue_Router_038_Axios)
* [Technology](https://www.bezkoder.com/vue-3-crud/#Technology)
* [Project Structure](https://www.bezkoder.com/vue-3-crud/#Project_Structure)
* [Setup Vue 3 Project](https://www.bezkoder.com/vue-3-crud/#Setup_Vue_3_Project)
* [Add Bootstrap to Vue 3 CRUD example](https://www.bezkoder.com/vue-3-crud/#Add_Bootstrap_to_Vue_3_CRUD_example)
* [Add Vue Router to Vue 3 CRUD example](https://www.bezkoder.com/vue-3-crud/#Add_Vue_Router_to_Vue_3_CRUD_example)
* [Add Navbar and Router View to Vue 3 CRUD example](https://www.bezkoder.com/vue-3-crud/#Add_Navbar_and_Router_View_to_Vue_3_CRUD_example)
* [Initialize Axios for Vue 3 CRUD HTTP Client](https://www.bezkoder.com/vue-3-crud/#Initialize_Axios_for_Vue_3_CRUD_HTTP_Client)
* [Create Data Service](https://www.bezkoder.com/vue-3-crud/#Create_Data_Service)
* [Create Vue 3 Components](https://www.bezkoder.com/vue-3-crud/#Create_Vue_3_Components)
  * [Add item Component](https://www.bezkoder.com/vue-3-crud/#Add_item_Component)
  * [List of items Component](https://www.bezkoder.com/vue-3-crud/#List_of_items_Component)
  * [Item details Component](https://www.bezkoder.com/vue-3-crud/#Item_details_Component)
* [Configure Port for Vue 3 CRUD example](https://www.bezkoder.com/vue-3-crud/#Configure_Port_for_Vue_3_CRUD_example)
* [Run Vue.js 3 CRUD example](https://www.bezkoder.com/vue-3-crud/#Run_Vuejs_3_CRUD_example)
* [Conclusion](https://www.bezkoder.com/vue-3-crud/#Conclusion)
* [Further Reading](https://www.bezkoder.com/vue-3-crud/#Further_Reading)
* [Source Code](https://www.bezkoder.com/vue-3-crud/#Source_Code)

### Overview of Vue.js 3 CRUD example

We will build a Vue.js front-end Tutorial Application in that:

* Each Tutorial has id, title, description, published status.
* We can create, retrieve, update, delete Tutorials.
* There is a Search bar for finding Tutorials by title.

Here are screenshots of our Vue.js 3 CRUD Application.

– Create a Tutorial:

![vue-3-crud-example-axios-create-tutorial](https://bezkoder.com/wp-content/uploads/2021/04/vue-3-crud-example-axios-create-tutorial.png)

– Retrieve all Tutorials:

![vue-3-crud-example-axios-retrieve-tutorial](https://bezkoder.com/wp-content/uploads/2021/04/vue-3-crud-example-axios-retrieve-tutorial.png)

– Click on **Edit** button to update a Tutorial:

![vue-3-crud-example-axios-retrieve-one-tutorial](https://bezkoder.com/wp-content/uploads/2021/04/vue-3-crud-example-axios-retrieve-one-tutorial.png)

On this Page, you can:

* change status to **Published** using **Publish** button
* delete the Tutorial using **Delete** button
* update the Tutorial details with **Update** button

![vue-3-crud-example-axios-update-tutorial](https://bezkoder.com/wp-content/uploads/2021/04/vue-3-crud-example-axios-update-tutorial.png)

– Search Tutorials by title:

![vue-3-crud-example-axios-search-tutorial](https://bezkoder.com/wp-content/uploads/2021/04/vue-3-crud-example-axios-search-tutorial.png)

The introduction above is for Vue 3 Client with assumption that we have a Server exporting REST APIs:

| Methods | Urls                            | Actions                                           |
| ------- | ------------------------------- | ------------------------------------------------- |
| POST    | /api/tutorials                  | create new Tutorial                               |
| GET     | /api/tutorials                  | retrieve all Tutorials                            |
| GET     | /api/tutorials/:id              | retrieve a Tutorial by `:id`                      |
| PUT     | /api/tutorials/:id              | update a Tutorial by `:id`                        |
| DELETE  | /api/tutorials/:id              | delete a Tutorial by `:id`                        |
| DELETE  | /api/tutorials                  | delete all Tutorials                              |
| GET     | /api/tutorials?title=\[keyword] | find all Tutorials which title contains `keyword` |

You can find step by step to build a Server like this in one of these posts:\
– [Express, Sequelize & MySQL](https://bezkoder.com/node-js-express-sequelize-mysql/)\
– [Express, Sequelize & PostgreSQL](https://bezkoder.com/node-express-sequelize-postgresql/)\
– [Express, Sequelize & SQL Server](https://www.bezkoder.com/node-js-sql-server-crud/)\
– [Express & MongoDb](https://bezkoder.com/node-express-mongodb-crud-rest-api/)\
– [Spring Boot & MySQL](https://bezkoder.com/spring-boot-jpa-crud-rest-api/)\
– [Spring Boot & PostgreSQL](https://bezkoder.com/spring-boot-postgresql-example/)\
– [Spring Boot & MongoDB](https://bezkoder.com/spring-boot-mongodb-crud/)\
– [Spring Boot & SQL Server](https://www.bezkoder.com/spring-boot-sql-server/)\
– [Spring Boot & H2](https://bezkoder.com/spring-boot-jpa-h2-example/)\
– [Spring Boot & Cassandra](https://bezkoder.com/spring-boot-cassandra-crud/)\
– [Spring Boot & Oracle](https://bezkoder.com/spring-boot-hibernate-oracle/)\
– [Python/Django & MySQL](https://bezkoder.com/django-crud-mysql-rest-framework/)\
– [Python/Django & PostgreSQL](https://bezkoder.com/django-postgresql-crud-rest-framework/)\
– [Python/Django & MongoDB](https://bezkoder.com/django-mongodb-crud-rest-framework/)

All of them can work well with this Vue App.

### Vue.js 3 Component Diagram with Vue Router & Axios

![vue-3-crud-example-axios-router-app-diagram](https://bezkoder.com/wp-content/uploads/2021/04/vue-3-crud-example-axios-router-app-diagram.png)

– The `App` component is a container with `router-view`. It has navbar that links to routes paths.

– `TutorialsList` component gets and displays Tutorials.\
– `Tutorial` component has form for editing Tutorial’s details based on `:id`.\
– `AddTutorial` component has form for submission new Tutorial.

– These Components call `TutorialDataService` methods which use `axios` to make HTTP requests and receive responses.

### Technology

* vue 3
* vue-router 4
* axios 0.21.1
* bootstrap 4

### Project Structure

![vue-3-crud-example-axios-project-structure](https://bezkoder.com/wp-content/uploads/2021/04/vue-3-crud-example-axios-project-structure.png)

Let me explain it briefly.

– **package.json** contains 4 main modules: `vue`, `vue-router`, `axios`, `bootstrap`.\
– There are 3 components: `TutorialsList`, `Tutorial`, `AddTutorial`.\
– **router.js** defines routes for each component.\
– **http-common.js** initializes axios with HTTP base Url and headers.\
– `TutorialDataService` has methods for sending HTTP requests to the Apis.\
– **vue.config.js** configures *port* for this Vue Client.

### Setup Vue 3 Project

Open cmd at the folder you want to save Project folder, run command:\
`vue create vue-3-crud`

You will see some options, choose **Default (\[Vue 3] babel, eslint)**.\
After the process is done. We create new folders and files like the following tree:

&#x20;public

&#x20;src

&#x20;components

&#x20;AddTutorial.vue

&#x20;Tutorial.vue

&#x20;TutorialsList.vue

&#x20;services

&#x20;TutorialDataService.js

&#x20;App.vue

&#x20;main.js

&#x20;package.json

### Add Bootstrap to Vue 3 CRUD example

Run command: `npm install bootstrap jquery popper.js`.

Open **src**/*main.js* and import Bootstrap as following-

```
import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
...

```

### Add Vue Router to Vue 3 CRUD example

– Run the command: `npm install vue-router@4`.

– In **src** folder, create *router.js* and define `Router` as following code:

```
import { createWebHistory, createRouter } from "vue-router";

const routes =  [
  {
    path: "/",
    alias: "/tutorials",
    name: "tutorials",
    component: () => import("./components/TutorialsList")
  },
  {
    path: "/tutorials/:id",
    name: "tutorial-details",
    component: () => import("./components/Tutorial")
  },
  {
    path: "/add",
    name: "add",
    component: () => import("./components/AddTutorial")
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;
```

We create the `routes` as an array, each route has:

* `path`: the URL path where this route can be found.
* `name`: optional name to use when we link to this route.
* `component`: component to load when this route is called.

We also use `createWebHistory` to switch from using hash to `history` mode inside the browser, using the HTML5 history API.

– Open **src**/*main.js* and import the router in our application:

```
...
import router from './router'

createApp(App).use(router).mount('#app')
```

### Add Navbar and Router View to Vue 3 CRUD example

Let’s open **src**/*App.vue*, this `App` component is the root container for our application, it will contain a `navbar`.

```
<template>
  <div id="app">
    <nav class="navbar navbar-expand navbar-dark bg-dark">
      <router-link to="/" class="navbar-brand">bezKoder</router-link>
      <div class="navbar-nav mr-auto">
        <li class="nav-item">
          <router-link to="/tutorials" class="nav-link">Tutorials</router-link>
        </li>
        <li class="nav-item">
          <router-link to="/add" class="nav-link">Add</router-link>
        </li>
      </div>
    </nav>

    <div class="container mt-3">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: "app"
};
</script>
```

### Initialize Axios for Vue 3 CRUD HTTP Client

Now we’re gonna install *axios* with command: `npm install axios`.\
Then, under **src** folder, we create *http-common.js* file like this:

```
import axios from "axios";

export default axios.create({
  baseURL: "http://localhost:8080/api",
  headers: {
    "Content-type": "application/json"
  }
});
```

Remember to change the `baseURL`, it depends on REST APIs url that your Server configures.

For more details about ways to use Axios, please visit:\
[Axios request: Get/Post/Put/Delete example](https://www.bezkoder.com/axios-request/)

### Create Data Service

Our service will use axios from HTTP client above to send HTTP requests.

**services**/*TutorialDataService.js*

```
import http from "../http-common";

class TutorialDataService {
  getAll() {
    return http.get("/tutorials");
  }

  get(id) {
    return http.get(`/tutorials/${id}`);
  }

  create(data) {
    return http.post("/tutorials", data);
  }

  update(id, data) {
    return http.put(`/tutorials/${id}`, data);
  }

  delete(id) {
    return http.delete(`/tutorials/${id}`);
  }

  deleteAll() {
    return http.delete(`/tutorials`);
  }

  findByTitle(title) {
    return http.get(`/tutorials?title=${title}`);
  }
}

export default new TutorialDataService();
```

### Create Vue 3 Components

As I’ve said before, we have 3 components corresponding to 3 routes defined in Vue Router.

#### Add item Component

This component has a Form to submit new Tutorial with 2 fields: `title` & `description`. It calls `TutorialDataService.create()` method.

**components**/*AddTutorial.vue*

```
<template>
  <div class="submit-form">
    <div v-if="!submitted">
      <div class="form-group">
        <label for="title">Title</label>
        <input
          type="text"
          class="form-control"
          id="title"
          required
          v-model="tutorial.title"
          name="title"
        />
      </div>

      <div class="form-group">
        <label for="description">Description</label>
        <input
          class="form-control"
          id="description"
          required
          v-model="tutorial.description"
          name="description"
        />
      </div>

      <button @click="saveTutorial" class="btn btn-success">Submit</button>
    </div>

    <div v-else>
      <h4>You submitted successfully!</h4>
      <button class="btn btn-success" @click="newTutorial">Add</button>
    </div>
  </div>
</template>

<script>
import TutorialDataService from "../services/TutorialDataService";

export default {
  name: "add-tutorial",
  data() {
    return {
      tutorial: {
        id: null,
        title: "",
        description: "",
        published: false
      },
      submitted: false
    };
  },
  methods: {
    saveTutorial() {
      var data = {
        title: this.tutorial.title,
        description: this.tutorial.description
      };

      TutorialDataService.create(data)
        .then(response => {
          this.tutorial.id = response.data.id;
          console.log(response.data);
          this.submitted = true;
        })
        .catch(e => {
          console.log(e);
        });
    },
    
    newTutorial() {
      this.submitted = false;
      this.tutorial = {};
    }
  }
};
</script>

<style>
.submit-form {
  max-width: 300px;
  margin: auto;
}
</style>
```

#### List of items Component

This component calls 3 TutorialDataService methods:

* `getAll()`
* `deleteAll()`
* `findByTitle()`

**components**/*TutorialsList.vue*

```
<template>
  <div class="list row">
    <div class="col-md-8">
      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Search by title"
          v-model="title"/>
        <div class="input-group-append">
          <button class="btn btn-outline-secondary" type="button"
            @click="searchTitle"
          >
            Search
          </button>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <h4>Tutorials List</h4>
      <ul class="list-group">
        <li class="list-group-item"
          :class="{ active: index == currentIndex }"
          v-for="(tutorial, index) in tutorials"
          :key="index"
          @click="setActiveTutorial(tutorial, index)"
        >
          {{ tutorial.title }}
        </li>
      </ul>

      <button class="m-3 btn btn-sm btn-danger" @click="removeAllTutorials">
        Remove All
      </button>
    </div>
    <div class="col-md-6">
      <div v-if="currentTutorial">
        <h4>Tutorial</h4>
        <div>
          <label><strong>Title:</strong></label> {{ currentTutorial.title }}
        </div>
        <div>
          <label><strong>Description:</strong></label> {{ currentTutorial.description }}
        </div>
        <div>
          <label><strong>Status:</strong></label> {{ currentTutorial.published ? "Published" : "Pending" }}
        </div>

        <router-link :to="'/tutorials/' + currentTutorial.id" class="badge badge-warning">Edit</router-link>
      </div>
      <div v-else>
        <br />
        <p>Please click on a Tutorial...</p>
      </div>
    </div>
  </div>
</template>

<script>
import TutorialDataService from "../services/TutorialDataService";

export default {
  name: "tutorials-list",
  data() {
    return {
      tutorials: [],
      currentTutorial: null,
      currentIndex: -1,
      title: ""
    };
  },
  methods: {
    retrieveTutorials() {
      TutorialDataService.getAll()
        .then(response => {
          this.tutorials = response.data;
          console.log(response.data);
        })
        .catch(e => {
          console.log(e);
        });
    },

    refreshList() {
      this.retrieveTutorials();
      this.currentTutorial = null;
      this.currentIndex = -1;
    },

    setActiveTutorial(tutorial, index) {
      this.currentTutorial = tutorial;
      this.currentIndex = tutorial ? index : -1;
    },

    removeAllTutorials() {
      TutorialDataService.deleteAll()
        .then(response => {
          console.log(response.data);
          this.refreshList();
        })
        .catch(e => {
          console.log(e);
        });
    },
    
    searchTitle() {
      TutorialDataService.findByTitle(this.title)
        .then(response => {
          this.tutorials = response.data;
          this.setActiveTutorial(null);
          console.log(response.data);
        })
        .catch(e => {
          console.log(e);
        });
    }
  },
  mounted() {
    this.retrieveTutorials();
  }
};
</script>

<style>
.list {
  text-align: left;
  max-width: 750px;
  margin: auto;
}
</style>
```

If you click on **Edit** button of any Tutorial, the app will direct you to *Tutorial* page with url: `/tutorials/:tutorialId`.

You can add Pagination to this Component, just follow instruction in the post:\
[Vue Pagination with Axios and API (Server Side pagination) example](https://bezkoder.com/vue-pagination-axios/)

#### Item details Component

For getting data & update, delete the Tutorial, this component will use 3 TutorialDataService methods:

* `get()`
* `update()`
* `delete()`

**components**/*Tutorial.vue*

```
<template>
  <div v-if="currentTutorial" class="edit-form">
    <h4>Tutorial</h4>
    <form>
      <div class="form-group">
        <label for="title">Title</label>
        <input type="text" class="form-control" id="title"
          v-model="currentTutorial.title"
        />
      </div>
      <div class="form-group">
        <label for="description">Description</label>
        <input type="text" class="form-control" id="description"
          v-model="currentTutorial.description"
        />
      </div>

      <div class="form-group">
        <label><strong>Status:</strong></label>
        {{ currentTutorial.published ? "Published" : "Pending" }}
      </div>
    </form>

    <button class="badge badge-primary mr-2"
      v-if="currentTutorial.published"
      @click="updatePublished(false)"
    >
      UnPublish
    </button>
    <button v-else class="badge badge-primary mr-2"
      @click="updatePublished(true)"
    >
      Publish
    </button>

    <button class="badge badge-danger mr-2"
      @click="deleteTutorial"
    >
      Delete
    </button>

    <button type="submit" class="badge badge-success"
      @click="updateTutorial"
    >
      Update
    </button>
    <p>{{ message }}</p>
  </div>

  <div v-else>
    <br />
    <p>Please click on a Tutorial...</p>
  </div>
</template>

<script>
import TutorialDataService from "../services/TutorialDataService";

export default {
  name: "tutorial",
  data() {
    return {
      currentTutorial: null,
      message: ''
    };
  },
  methods: {
    getTutorial(id) {
      TutorialDataService.get(id)
        .then(response => {
          this.currentTutorial = response.data;
          console.log(response.data);
        })
        .catch(e => {
          console.log(e);
        });
    },

    updatePublished(status) {
      var data = {
        id: this.currentTutorial.id,
        title: this.currentTutorial.title,
        description: this.currentTutorial.description,
        published: status
      };

      TutorialDataService.update(this.currentTutorial.id, data)
        .then(response => {
          console.log(response.data);
          this.currentTutorial.published = status;
          this.message = 'The status was updated successfully!';
        })
        .catch(e => {
          console.log(e);
        });
    },

    updateTutorial() {
      TutorialDataService.update(this.currentTutorial.id, this.currentTutorial)
        .then(response => {
          console.log(response.data);
          this.message = 'The tutorial was updated successfully!';
        })
        .catch(e => {
          console.log(e);
        });
    },

    deleteTutorial() {
      TutorialDataService.delete(this.currentTutorial.id)
        .then(response => {
          console.log(response.data);
          this.$router.push({ name: "tutorials" });
        })
        .catch(e => {
          console.log(e);
        });
    }
  },
  mounted() {
    this.message = '';
    this.getTutorial(this.$route.params.id);
  }
};
</script>

<style>
.edit-form {
  max-width: 300px;
  margin: auto;
}
</style>
```

### Configure Port for Vue 3 CRUD example

Because most of HTTP Server use CORS configuration that accepts resource sharing restricted to some sites or ports, so we also need to configure port for our App.

In project root folder, create *vue.config.js* file with following content:

```
module.exports = {
  devServer: {
    port: 8081
  }
}
```

We’ve set our app running at port `8081`.

### Run Vue.js 3 CRUD example

You can run our App with command: `npm run serve`.\
If the process is successful, open Browser with Url: `http://localhost:8081/` and check it.

This Vue Client will work well with following back-end Rest APIs:\
– [Express, Sequelize & MySQL](https://bezkoder.com/node-js-express-sequelize-mysql/)\
– [Express, Sequelize & PostgreSQL](https://bezkoder.com/node-express-sequelize-postgresql/)\
– [Express, Sequelize & SQL Server](https://www.bezkoder.com/node-js-sql-server-crud/)\
– [Express & MongoDb](https://bezkoder.com/node-express-mongodb-crud-rest-api/)\
– [Spring Boot & MySQL](https://bezkoder.com/spring-boot-jpa-crud-rest-api/)\
– [Spring Boot & PostgreSQL](https://bezkoder.com/spring-boot-postgresql-example/)\
– [Spring Boot & MongoDB](https://bezkoder.com/spring-boot-mongodb-crud/)\
– [Spring Boot & SQL Server](https://www.bezkoder.com/spring-boot-sql-server/)\
– [Spring Boot & H2](https://bezkoder.com/spring-boot-jpa-h2-example/)\
– [Spring Boot & Cassandra](https://bezkoder.com/spring-boot-cassandra-crud/)\
– [Spring Boot & Oracle](https://bezkoder.com/spring-boot-hibernate-oracle/)\
– [Python/Django & MySQL](https://bezkoder.com/django-crud-mysql-rest-framework/)\
– [Python/Django & PostgreSQL](https://bezkoder.com/django-postgresql-crud-rest-framework/)\
– [Python/Django & MongoDB](https://bezkoder.com/django-mongodb-crud-rest-framework/)

### Conclusion

Today we’ve built a Vue.js 3 CRUD example successfully with Axios and Vue Router. Now we can consume REST APIs, display and modify data in a clean way. I hope you apply it in your project at ease.

There is Typescript version at:\
[Vue 3 Typescript example with Axios: Build CRUD App](https://bezkoder.com/vue-3-typescript-axios/)

Or you can add Pagination Component:\
[Vue Pagination with Axios and API example](https://bezkoder.com/vue-pagination-axios/)

![vue-pagination-axios-api-bootstrap-vue-page-change](https://bezkoder.com/wp-content/uploads/2020/08/vue-pagination-axios-api-bootstrap-vue-page-change.png)

Or Vuetify version: [Vuetify data-table example with a CRUD App | v-data-table](https://bezkoder.com/vuetify-data-table-example/)

![vuetify-data-table-example-crud-app-retrieve-all](https://bezkoder.com/wp-content/uploads/2020/09/vuetify-data-table-example-crud-app-retrieve-all.png)

Happy learning, see you again!

### Further Reading

* [Vue Router guide](https://router.vuejs.org/)
* <https://www.npmjs.com/package/axios>

For more details about ways to use Axios, please visit:\
[Axios request: Get/Post/Put/Delete example](https://www.bezkoder.com/axios-request/)

Fullstack CRUD App:

* [Vue.js + Node.js + Express + MySQL](https://bezkoder.com/vue-js-node-js-express-mysql-crud-example/)
* [Vue.js + Node.js + Express + PostgreSQL](https://bezkoder.com/vue-node-express-postgresql/)
* [Vue.js + Node.js + Express + MongoDB](https://bezkoder.com/vue-node-express-mongodb-mevn-crud/)
* [Vue.js + Spring Boot + MySQL](https://bezkoder.com/spring-boot-vue-js-crud-example/)
* [Vue.js + Spring Boot + PostgreSQL example](https://bezkoder.com/spring-boot-vue-js-postgresql/)
* [Vue.js + Spring Boot + MongoDB](https://bezkoder.com/spring-boot-vue-mongodb/)
* [Vue.js + Django Rest Framework](https://bezkoder.com/django-vue-js-rest-framework/)

Integration:\
– [Integrate Vue.js with Spring Boot](https://bezkoder.com/integrate-vue-spring-boot/)\
– [Integrate Vue App with Node.js Express](https://bezkoder.com/serve-vue-app-express/)

Serverless with Firebase:\
– [Vue Firebase Realtime Database: CRUD example](https://bezkoder.com/vue-firebase-realtime-database/)\
– [Vue Firestore: Build a CRUD App example](https://bezkoder.com/vue-firestore-crud/)

### Source Code

You can find the complete source code for this tutorial on [Github](https://github.com/bezkoder/vue-3-crud).

Typescript version at:\
[Vue 3 Typescript example with Axios: Build CRUD App](https://bezkoder.com/vue-3-typescript-axios/)

Security: [Vue 3 Authentication with JWT, Vuex, Axios and Vue Router](https://bezkoder.com/vue-3-authentication-jwt/)<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learnmagento.gitbook.io/vuejs/https-www.bezkoder.com-vue-3-crud.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.