What is vue-webapp-creation?

Perfect for Frontend Agents needing streamlined Vue web application development and deployment within custom ERP systems like Frappe. Create new Vue web applications within the custom_erp Frappe app. Use when the user wants to create a new Vue app, add a new frontend app, create a new PWA, or asks about adding apps like qrpay, pay-d

How do I install vue-webapp-creation?

Run the command: npx killer-skills add ghimirerohan/erpnextCCDis/vue-webapp-creation. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for vue-webapp-creation?

Key use cases include: Creating new Vue web applications within custom_erp Frappe app, Configuring PWA setup for enhanced user experience, Deploying Vue web applications to production environments.

Which IDEs are compatible with vue-webapp-creation?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for vue-webapp-creation?

Requires custom_erp Frappe app setup. Specific to Vue web application development. Needs understanding of Vue app initialization and PWA setup.

vue-webapp-creation

Install vue-webapp-creation, an AI agent skill for AI agent workflows and automation. Review the use cases, limitations, and setup path before rollout.

SKILL.md

Readonly

Upstream Repository Material

The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.

Supporting Evidence

Vue WebApp Creation in Custom_ERP

Name: vue-webapp-creation
Availability: InStock
Author: ghimirerohan

This skill guides you through creating a new Vue web application within the custom_erp Frappe app, from initial setup to production deployment.

Quick Reference

For a new app called my-app at route /my-app, you need:

File/Directory	Purpose
`my-app/`	Source directory with `index.html` and `src/`
`my-app/src/main.js`	Vue app initialization
`my-app/src/App.vue`	Root component with PWA setup
`my-app/src/router.js`	Vue Router with auth guards
`my-app/src/MyApp.vue`	Main page component
`custom_erp/www/my-app.html`	Frappe production entry (hyphenated)
`custom_erp/www/my_app.py`	Frappe context (underscored)
`public/manifest-my-app.json`	PWA manifest
`public/icons/my-app/icon-512x512.png`	App icon
`vite.config.js`	Add to apps array
`build-apps.js`	Add to apps array + theme config

Naming Convention

CRITICAL: Follow this naming pattern exactly:

Location	Format	Example
Directory & URL	hyphenated	`my-app`, `/my-app`
www/*.html	hyphenated	`my-app.html`
www/*.py	underscored	`my_app.py`
vite.config.js	hyphenated	`'my-app'`
build-apps.js	hyphenated	`'my-app'`
manifest	hyphenated	`manifest-my-app.json`
Router base	hyphenated	`/my-app`

Step-by-Step Creation Process

Step 1: Create Directory Structure

bash
1cd frappe-bench/apps/custom_erp
2mkdir -p my-app/src

Step 2: Create Source Files

Create all files in this order. See templates.md for complete file contents.

my-app/index.html - Dev entry point
my-app/src/main.js - Vue initialization
my-app/src/App.vue - Root component
my-app/src/router.js - Router with auth
my-app/src/MyApp.vue - Main component

Step 3: Update Build Configurations

vite.config.js - Add to apps array:

javascript
1const apps = [
2  'qrpay',
3  'my-app',  // ADD HERE
4  // ... other apps
5]

build-apps.js - Add to apps array AND appThemes:

javascript
1const apps = [
2  'qrpay',
3  'my-app',  // ADD HERE
4  // ...
5]
6
7const appThemes = {
8  // ...
9  'my-app': { 
10    theme: '#3b82f6',      // Primary color (hex)
11    bg: '#ffffff',          // Background color
12    name: 'My App',         // Display name
13    desc: 'App description' // PWA description
14  },
15}

Step 4: Create Frappe WWW Files

custom_erp/www/my-app.html (placeholder - build will update):

html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <link rel="icon" href="/assets/custom_erp/frontend/my-app/favicon.png" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
7    <title>My App - Description</title>
8    <meta name="theme-color" content="#3b82f6" />
9    <meta name="mobile-web-app-capable" content="yes" />
10    <link rel="manifest" href="/api/method/custom_erp.api.pwa.get_manifest?app_name=my-app" />
11  </head>
12  <body>
13    <div id="app"></div>
14    <script>
15        {% for key in boot %}
16        window["{{ key }}"] = {{ boot[key] | tojson }};
17        {% endfor %}
18    </script>
19  </body>
20</html>

custom_erp/www/my_app.py (NOTE: underscored filename):

python
1import frappe
2
3def get_context(context):
4    """Context for my-app"""
5    context.no_cache = 1
6    return context

Step 5: Create PWA Manifest

public/manifest-my-app.json:

json
1{
2  "id": "/my-app/",
3  "name": "My App",
4  "short_name": "MyApp",
5  "description": "App description",
6  "start_url": "/my-app/",
7  "scope": "/my-app/",
8  "display": "standalone",
9  "orientation": "portrait-primary",
10  "background_color": "#ffffff",
11  "theme_color": "#3b82f6",
12  "icons": [
13    {
14      "src": "/assets/custom_erp/icons/my-app/icon-512x512.png",
15      "sizes": "512x512",
16      "type": "image/png",
17      "purpose": "any maskable"
18    }
19  ],
20  "categories": ["business", "finance"],
21  "prefer_related_applications": false
22}

Step 6: Add App Icon

bash
1mkdir -p public/icons/my-app
2cp public/icons/qrpay/icon-512x512.png public/icons/my-app/

Or create a custom 512x512 PNG icon.

Testing & Deployment

Local Development

bash
1cd frappe-bench/apps/custom_erp
2yarn dev
3# Access at http://localhost:8080/my-app

Build for Production

bash
1cd frappe-bench/apps/custom_erp
2node build-apps.js

Commit & Push

bash
1git add -A
2git commit -m "feat: add my-app Vue web application"
3git push origin main

Deploy to Server

bash
1# On production server:
2cd ~/frappe-bench/apps/custom_erp
3git pull origin main
4node build-apps.js
5cd ~/frappe-bench
6bench build --app custom_erp
7bench restart

Checklist

Copy this checklist when creating a new app:

New Vue App: [APP_NAME]

Directory & Source Files:
- [ ] Created [app-name]/ directory
- [ ] Created [app-name]/index.html
- [ ] Created [app-name]/src/main.js
- [ ] Created [app-name]/src/App.vue
- [ ] Created [app-name]/src/router.js (base path: /[app-name])
- [ ] Created [app-name]/src/[AppName].vue

Build Configuration:
- [ ] Added to vite.config.js apps array
- [ ] Added to build-apps.js apps array
- [ ] Added theme config to build-apps.js appThemes

Frappe Files:
- [ ] Created custom_erp/www/[app-name].html
- [ ] Created custom_erp/www/[app_name].py (underscored!)

PWA Assets:
- [ ] Created public/manifest-[app-name].json
- [ ] Added icon to public/icons/[app-name]/icon-512x512.png

Testing:
- [ ] Tested locally with yarn dev
- [ ] Built with node build-apps.js
- [ ] Verified at /[app-name] route

Deployment:
- [ ] Committed and pushed
- [ ] Pulled on server
- [ ] Ran node build-apps.js on server
- [ ] Ran bench build --app custom_erp
- [ ] Ran bench restart

Common Issues & Solutions

404 Errors for Assets

Cause: Build output doesn't exist or wrong paths Fix: Run node build-apps.js - it generates correct asset hashes

PWA Manifest 404

Cause: App not in build-apps.js or manifest not generated Fix: Add to build-apps.js apps array and rebuild

Cause: Wrong router base path Fix: Ensure createWebHistory("/my-app") matches your URL

Python File Not Found

Cause: Wrong filename format Fix: WWW Python files use underscores: my_app.py (not my-app.py)

Additional Resources

See templates.md for complete file templates
See examples.md for real app examples
Reference existing apps: qrpay/, pay-dashboard/, qrpay-horlicks/

vue-webapp-creation — community vue-webapp-creation, erpnextCCDis, community, ide skills

About this Skill

Killer-Skills Review

Core Value

Ideal Agent Persona

↓ Capabilities Granted for vue-webapp-creation

! Prerequisites & Limits

Why this page is reference-only

Source Boundary

Decide The Next Action Before You Keep Reading Repository Material

Start With Installation And Validation

Cross-Check Against Trusted Picks

Move To Workflow Collections For Team Rollout

Browser Sandbox Environment

⚡️ Ready to unleash?

FAQ & Installation Steps

? Frequently Asked Questions