# Vue Flow Custom Nodes Migration Guide
## 🎯 Problem Solved
Custom nodes defined inline (using template strings or object definitions) **do not load in production** with Vue Flow. The solution is to use **separate .vue component files** that are properly imported.
## ✅ Production-Safe Approach: File-Based Custom Nodes
### 1. Create Separate .vue Files for Each Node Type
Instead of defining nodes inline in `composables/processFlowNodes.js`, create individual `.vue` files:
```
components/process-flow/custom/
├── StartNode.vue
├── FormNode.vue
├── EndNode.vue
├── ConditionalNode.vue
├── ScriptNode.vue
├── ApiNode.vue
├── NotificationNode.vue
└── ... (other node types)
```
### 2. Standard Vue Component Structure
Each node component should follow this pattern:
```vue