Quickstarters
How to Develop a CRUD App with Vue.js?

32min
Introduction
In this guide, you'll discover how to build a fully functional CRUD (create, read, update, delete) application using Vue.js. 
We'll harness the power of Back4app to handle your backend effortlessly. This tutorial walks you through setting up a Back4app project, crafting a dynamic data model, and implementing CRUD operations with Vue.js.
Initially, you'll set up a Back4app project named Basic-CRUD-App-Vue, providing a robust non-relational database for your app. You'll design your data model by configuring collections and fields manually or by using Back4app's intelligent AI Agent.
Next, you'll manage your data with the Back4app Admin App—a user-friendly, drag and drop interface—allowing you to create, read, update, and delete records with ease. 
Finally, you'll integrate your Vue.js frontend with Back4app via REST API calls (using axios) to execute secure and efficient CRUD operations.
By the end of this tutorial, you'll have a production-ready Vue.js application that performs essential CRUD functions along with secure user authentication and data management.
Key Takeaways
Learn to construct a Vue.js-based CRUD app backed by a scalable backend.
Understand how to structure a flexible backend and connect it with your Vue.js project.
Discover how to use Back4app’s intuitive Admin App for seamless CRUD operations.
Explore deployment techniques, including Docker containerization, for your Vue.js application.
﻿
Prerequisites
Before you begin, make sure you have:
A Back4app account with a new project set up.
Need help? See Getting Started with Back4app.
A Vue.js development environment.
Use the Vue CLI or your favorite IDE like VSCode.
Basic knowledge of Vue.js, modern JavaScript, and REST APIs.
Brush up on the Vue.js documentation if needed.
﻿
Step 1 – Project Setup
Creating a New Back4app Project
Log in to your Back4app account.
Click on the “New App” button from your dashboard.
Name your project: Basic-CRUD-App-Vue and follow the prompts to complete the setup.
Create New Project
﻿
After creating the project, it will appear in your dashboard, laying the foundation for your backend.
﻿
Step 2 – Designing the Data Model
Structuring Your Data
For this CRUD application, you'll define multiple collections within your Back4app project. The examples below illustrate the core collections and their fields necessary for CRUD functionality.
1. Items Collection
This collection stores details about each item.
Field
Data Type
Description
_id
ObjectId
Automatically generated unique ID.
title
String
The item's name.
description
String
A brief summary of the item.
createdAt
Date
Timestamp of item creation.
updatedAt
Date
Timestamp of the last update.
2. Users Collection
This collection handles user credentials and authentication data.
Field
Data Type
Description
_id
ObjectId
Automatically generated unique ID.
username
String
Unique username for the user.
email
String
Unique email address.
passwordHash
String
Encrypted password for login.
createdAt
Date
Account creation timestamp.
updatedAt
Date
Last account update timestamp.
You can add these collections and fields manually in the Back4app dashboard.
Create New Class
﻿
You can add fields by selecting the data type, providing the field name, setting a default value, and marking it as required if necessary.
Create Column
﻿
Utilizing the Back4app AI Agent for Schema Setup
The integrated Back4app AI Agent can automatically generate your data schema based on your description. This tool speeds up setup and ensures your model meets the CRUD requirements.
How to Use the AI Agent:
Open the AI Agent:
Log in to your Back4app dashboard and navigate to the AI Agent in your project settings.
Describe Your Data Model:
Input a detailed prompt describing the collections and fields you need.
Review and Confirm:
Once the AI Agent generates a proposed schema, review it and confirm to implement the configuration.
Example Prompt
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
This AI-driven approach saves time and ensures an optimized and consistent data model.
﻿
Step 3 – Enabling the Admin App & Managing CRUD Operations
Overview of the Admin App
The Back4app Admin App provides a no-code interface for backend management. With its drag and drop features, you can effortlessly perform CRUD operations such as creating, reading, updating, and deleting records.
Activating the Admin App
Go to the “More” menu in your Back4app dashboard.
Select “Admin App” and click “Enable Admin App.”
Set up admin credentials by creating your first admin account. This process also establishes roles (like B4aAdminUser) and system collections.
Enable Admin App
﻿
After enabling, log in to the Admin App to start managing your data.
Admin App Dashboard
﻿
Managing CRUD Operations via the Admin App
Inside the Admin App, you can:
Create New Records: Click “Add Record” in any collection (e.g., Items) to insert new data.
Edit or View Records: Select a record to view its details or modify its fields.
Delete Records: Remove records that are no longer needed.
This interface simplifies data handling and improves the overall user experience.
﻿
Step 4 – Connecting Your Vue.js Application with Back4app
Once your backend is ready, it's time to link your Vue.js app with Back4app.
Using REST API Calls with Axios
We will use REST API calls via axios to perform CRUD operations.
Install Axios:
Run the following command in your project directory:
Bash
npm install axios
npm install axios
﻿
Set Up Axios:
Create an axios instance in a file (e.g., api.js):
JS
// api.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://parseapi.back4app.com',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  }
});

export default apiClient;
// api.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://parseapi.back4app.com',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  }
});

export default apiClient;
﻿
Implement CRUD Methods in Vue Components:
Here’s an example of how to fetch and create items:
JS
// ItemsService.js
import apiClient from './api';

export default {
  fetchItems() {
    return apiClient.get('/classes/Items')
      .then(response => response.data.results)
      .catch(error => console.error('Error fetching items:', error));
  },

  addItem(title, description) {
    return apiClient.post('/classes/Items', {
      title,
      description
    })
    .then(response => response.data)
    .catch(error => console.error('Error adding item:', error));
  },

  updateItem(objectId, title, description) {
    return apiClient.put(`/classes/Items/${objectId}`, {
      title,
      description
    })
    .then(response => response.data)
    .catch(error => console.error('Error updating item:', error));
  },

  deleteItem(objectId) {
    return apiClient.delete(`/classes/Items/${objectId}`)
    .then(response => response.data)
    .catch(error => console.error('Error deleting item:', error));
  }
};
// ItemsService.js
import apiClient from './api';

export default {
  fetchItems() {
    return apiClient.get('/classes/Items')
      .then(response => response.data.results)
      .catch(error => console.error('Error fetching items:', error));
  },

  addItem(title, description) {
    return apiClient.post('/classes/Items', {
      title,
      description
    })
    .then(response => response.data)
    .catch(error => console.error('Error adding item:', error));
  },

  updateItem(objectId, title, description) {
    return apiClient.put(`/classes/Items/${objectId}`, {
      title,
      description
    })
    .then(response => response.data)
    .catch(error => console.error('Error updating item:', error));
  },

  deleteItem(objectId) {
    return apiClient.delete(`/classes/Items/${objectId}`)
    .then(response => response.data)
    .catch(error => console.error('Error deleting item:', error));
  }
};
﻿
Integrate these API methods into your Vue components to manage your app’s data.
﻿
Step 5 – Securing Your Backend
Configuring Access Control Lists (ACLs)
Protect your data by setting up ACLs for your records. For instance, to create an item that only its owner can view or modify:
JS
import apiClient from './api';

export function createPrivateItem(title, description, userId) {
  const acl = {
    "*": { "read": false, "write": false },
    [userId]: { "read": true, "write": true }
  };

  return apiClient.post('/classes/Items', {
    title,
    description,
    ACL: acl
  })
  .then(response => response.data)
  .catch(error => console.error('Error creating private item:', error));
}
import apiClient from './api';

export function createPrivateItem(title, description, userId) {
  const acl = {
    "*": { "read": false, "write": false },
    [userId]: { "read": true, "write": true }
  };

  return apiClient.post('/classes/Items', {
    title,
    description,
    ACL: acl
  })
  .then(response => response.data)
  .catch(error => console.error('Error creating private item:', error));
}
﻿
Setting Class-Level Permissions (CLPs)
Use your Back4app dashboard to configure CLPs so that only authenticated users can access certain collections. This ensures that your backend remains secure by default.
﻿
Step 6 – Implementing User Authentication
Setting Up User Registration and Login
Back4app leverages a built-in Users collection for authentication. In your Vue.js app, you can manage user sign-up and login using REST API calls. Here's how:
JS
// AuthService.js
import apiClient from './api';

export default {
  register(username, password, email) {
    return apiClient.post('/users', {
      username,
      password,
      email
    })
    .then(response => response.data)
    .catch(error => console.error('Registration error:', error));
  },

  login(username, password) {
    return apiClient.get('/login', {
      params: { username, password }
    })
    .then(response => response.data)
    .catch(error => console.error('Login error:', error));
  }
};
// AuthService.js
import apiClient from './api';

export default {
  register(username, password, email) {
    return apiClient.post('/users', {
      username,
      password,
      email
    })
    .then(response => response.data)
    .catch(error => console.error('Registration error:', error));
  },

  login(username, password) {
    return apiClient.get('/login', {
      params: { username, password }
    })
    .then(response => response.data)
    .catch(error => console.error('Login error:', error));
  }
};
﻿
This setup also allows you to handle session management, password resets, and additional authentication features.
﻿
Step 7 – Deploying Your Vue.js Application
Back4app simplifies the deployment process. You can deploy your Vue.js application using various methods, including Docker containerization.
7.1 Building Your Vue.js Application
Compile and Bundle:
Use the Vue CLI to compile your app:
Bash
npm run build
npm run build
﻿
Review the Build:
Confirm that the output folder (usually dist/) contains all necessary files.
﻿
7.2 Project Structure Overview
A common Vue.js project structure might look like:
Text
Basic-CRUD-App-Vue/
|-- public/
|-- src/
|   |-- components/
|   |   |-- ItemList.vue
|   |   |-- ItemForm.vue
|   |-- services/
|   |   |-- api.js
|   |   |-- ItemsService.js
|   |   |-- AuthService.js
|   |-- App.vue
|   |-- main.js
|-- package.json
|-- README.md
Basic-CRUD-App-Vue/
|-- public/
|-- src/
|   |-- components/
|   |   |-- ItemList.vue
|   |   |-- ItemForm.vue
|   |-- services/
|   |   |-- api.js
|   |   |-- ItemsService.js
|   |   |-- AuthService.js
|   |-- App.vue
|   |-- main.js
|-- package.json
|-- README.md
﻿
7.3 Dockerizing Your Vue.js App
If you prefer containerized deployment, include a Dockerfile at your project root:
Dockerfile
# Use a Node image for building the app
FROM node:16 AS build

# Set the working directory
WORKDIR /app

# Install dependencies and build the app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Use an Nginx image to serve the app
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use a Node image for building the app
FROM node:16 AS build

# Set the working directory
WORKDIR /app

# Install dependencies and build the app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Use an Nginx image to serve the app
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
7.4 Deploying with Back4app Web Deployment
Connect Your GitHub Repository:
Ensure your Vue.js project is hosted on GitHub.
Configure Deployment:
In the Back4app dashboard, select the Web Deployment option, link your repository (e.g., Basic-CRUD-App-Vue), and pick the desired branch.
Set Build Commands:
Specify your build command (e.g., npm run build) and indicate the output folder (e.g., dist).
Deploy:
Click Deploy and watch the logs until your app goes live.
﻿
Step 8 – Final Thoughts and Next Steps
Congratulations! You've built a Vue.js-based CRUD application integrated with Back4app. 
You configured a project named Basic-CRUD-App-Vue, set up collections for Items and Users, and used the Back4app Admin App for data management. 
Additionally, you connected your Vue.js frontend via REST API calls and established security measures.
Next Steps:
Expand Your Application:
Incorporate features such as advanced filtering, detailed item views, or live updates.
Enhance Backend Functionality:
Explore cloud functions, integrate external APIs, or implement role-based access controls.
Keep Learning:
Refer to the Back4app documentation and additional resources to further refine your app.
Happy coding and enjoy building your Vue.js CRUD application!
Field	Data Type	Description
_id	ObjectId	Automatically generated unique ID.
title	String	The item's name.
description	String	A brief summary of the item.
createdAt	Date	Timestamp of item creation.
updatedAt	Date	Timestamp of the last update.
Field	Data Type	Description
_id	ObjectId	Automatically generated unique ID.
username	String	Unique username for the user.
email	String	Unique email address.
passwordHash	String	Encrypted password for login.
createdAt	Date	Account creation timestamp.
updatedAt	Date	Last account update timestamp.
Updated 17 Feb 2025
Did this page help you?
How to Create a CRUD Application with Elm?
How to Build CRUD App with JavaScript?