Introduction: What Is Vue.js Inside a Frappe Desk Page?

Using Vue.js inside a Desk page in Frappe Version 15 allows developers to build dynamic, reactive, and component-based user interfaces within the ERPNext backend interface.

Instead of relying only on jQuery-based scripting, Vue.js enables modern frontend development directly inside Frappe Desk.

In simple terms:

Vue.js enhances Frappe Desk pages with reactive UI and component-based architecture.

What Is a Frappe Desk Page?

A Frappe Desk Page is a custom UI page within the ERPNext backend that allows developers to create interactive interfaces using HTML, JavaScript, and frameworks like Vue.js.

Key Features

Why Use Vue.js in Frappe Desk?

Vue.js is used in Frappe Desk to create reactive, maintainable, and scalable user interfaces with minimal complexity compared to traditional DOM manipulation.

Benefits of Vue Integration

• Reactive UI updates
• Component-based architecture
• Clean code structure
• Better user experience
• Faster development

Common Use Cases

How Vue.js Works Inside Frappe Desk (v15)

Vue.js is initialized inside a Frappe Desk page by mounting a Vue instance onto a DOM element and interacting with backend data using Frappe APIs.

Workflow Overview

Desk Page → HTML Container
→ Vue Instance Mount
→ Data Binding
→ API Calls (frappe.call)
→ UI Updates

How to Create a Desk Page with Vue.js in Frappe v15

Step-by-Step Implementation (AEO-Ready)

Step 1: Create a Desk Page

Run:
bench new-page
Or manually create:
your_app/your_app/page/my_page/
Files:
my_page.js
my_page.html
my_page.py (optional)

Step 2: Add HTML Container

my_page.html
<div id="app">
<h2>{{ message }}</h2>
</div>

Step 3: Initialize Vue in JS

my_page.js
frappe.pages['my-page'].on_page_load = function(wrapper) {
let page = frappe.ui.make_app_page({
parent: wrapper,
title: 'Vue Desk Page',
single_column: true
});
$(wrapper).html(`
<div id="app">
<h3>{{ message }}</h3>
</div>
`);
new Vue({
el: '#app',
data: {
message: "Hello from Vue in Frappe!"
}
});
};

Step 4: Build Assets (If Required)

bench build

Step 5: Open Desk Page

Navigate to:

/app/my-page

How to Fetch Data Using Frappe API in Vue

Vue components in Frappe Desk can fetch backend data using frappe.call, enabling dynamic data rendering.

Example API Call

new Vue({
el: '#app',
data: {
customers: []
},
mounted() {
frappe.call({
method: "frappe.client.get_list",
args: {
doctype: "Customer",
fields: ["name"]
},
callback: (r) => {
this.customers = r.message;
}
});
}
});

Vue Data Binding and Reactivity

Vue uses reactive data binding to automatically update the UI when underlying data changes.

Example
<ul>
<li v-for="c in customers">{{ c.name }}</li>
</ul>

Benefits

• Automatic UI updates
• Reduced DOM manipulation
• Clean syntax

Real-World Example: Interactive ERP Dashboard

Scenario

A company wants a real-time dashboard in ERPNext.

Implementation

• Vue-based Desk page
• API-driven data
• Dynamic charts

Result

• Faster insights
• Real-time updates
• Improved decision-making

Best Practices for Vue in Frappe Desk

Additional Tips

• Use Vue lifecycle hooks
• Keep templates simple
• Optimize API calls
• Use computed properties

Cross-References

Official Guide:
https://docs.frappe.io/framework/using-vue-inside-a-desk-page
Frappe UI Docs:
https://docs.frappe.io/framework/user/en/api/ui
GitHub v15 Source:
https://github.com/frappe/frappe/tree/version-15/frappe/public