Two Ways to Build: Options API vs Composition API 🔄

Congratulations! You've been learning Vue using the Composition API (with ref(), setup(), etc.). But Vue actually offers TWO different ways to write components. Think of it like learning to drive - you can drive a manual or automatic car, both get you where you need to go!

What You'll Discover Today

Two complete API styles - same functionality, different syntax
When to use each approach - making the right choice for your projects
Side-by-side comparison - see the same app built both ways
Migration strategies - how to switch between styles
Real-world decision making - choosing the right tool for the job

The Tale of Two APIs

🎯 What You've Been Using: Composition API

javascript

// The modern approach you've learned
const { createApp, ref, computed } = Vue

createApp({
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    
    return { count, increment }
  }
}).mount('#app')

🏛️ The Traditional Way: Options API

javascript

// The classic Vue approach
const { createApp } = Vue

createApp({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}).mount('#app')

Same result, different organization!

Complete Side-by-Side Comparison

Let's build the same feature-rich counter app using BOTH approaches:

html

<!DOCTYPE html>
<html>
<head>
    <title>Options API vs Composition API - The Ultimate Comparison</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background: #f5f5f5;
        }
        
        .comparison-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .api-section {
            background: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            border: 3px solid transparent;
        }
        
        .options-api {
            border-color: #ff6b6b;
        }
        
        .composition-api {
            border-color: #4ecdc4;
        }
        
        .api-header {
            text-align: center;
            margin-bottom: 20px;
            padding: 15px;
            border-radius: 8px;
            color: white;
            font-weight: bold;
        }
        
        .options-header {
            background: linear-gradient(135deg, #ff6b6b, #ee5a52);
        }
        
        .composition-header {
            background: linear-gradient(135deg, #4ecdc4, #44a08d);
        }
        
        .counter-display {
            text-align: center;
            margin: 20px 0;
        }
        
        .counter-number {
            font-size: 3em;
            font-weight: bold;
            color: #333;
            margin: 10px 0;
        }
        
        .button-group {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin: 15px 0;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.2s;
            font-size: 14px;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        
        .btn-primary { background: #007bff; color: white; }
        .btn-success { background: #28a745; color: white; }
        .btn-warning { background: #ffc107; color: black; }
        .btn-danger { background: #dc3545; color: white; }
        .btn-info { background: #17a2b8; color: white; }
        
        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin: 20px 0;
        }
        
        .stat-card {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            border: 1px solid #dee2e6;
        }
        
        .stat-number {
            font-size: 1.5em;
            font-weight: bold;
            color: #495057;
        }
        
        .status-message {
            padding: 10px 15px;
            margin: 10px 0;
            border-radius: 6px;
            text-align: center;
            font-weight: bold;
        }
        
        .positive { background: #d4edda; color: #155724; }
        .negative { background: #f8d7da; color: #721c24; }
        .neutral { background: #e2e3e5; color: #383d41; }
        
        .history-section {
            margin-top: 20px;
            max-height: 150px;
            overflow-y: auto;
        }
        
        .history-item {
            background: #f8f9fa;
            padding: 8px 12px;
            margin: 5px 0;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
            border-left: 3px solid #6c757d;
        }
        
        .explanation-section {
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            margin: 30px 0;
        }
        
        .code-comparison {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 20px 0;
        }
        
        .code-block {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid #007bff;
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
            overflow-x: auto;
        }
        
        .pros-cons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin: 30px 0;
        }
        
        .pros-cons-card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .pro-item, .con-item {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }
        
        .pro-item:before { content: "✅ "; }
        .con-item:before { content: "❌ "; }
        
        @media (max-width: 768px) {
            .comparison-container {
                grid-template-columns: 1fr;
            }
            
            .code-comparison {
                grid-template-columns: 1fr;
            }
            
            .pros-cons {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- Include Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <h1 style="text-align: center; color: #333; margin-bottom: 10px;">🔄 Vue API Styles Comparison</h1>
    <p style="text-align: center; color: #666; margin-bottom: 30px;">The same functionality, two different approaches</p>

    <!-- Live Comparison -->
    <div class="comparison-container">
        <!-- Options API Version -->
        <div id="options-app" class="api-section options-api">
            <div class="api-header options-header">
                🏛️ Options API (Traditional)
            </div>
            
            <div class="counter-display">
                <div class="counter-number">{{ count }}</div>
                <div class="status-message" :class="statusClass">
                    {{ statusMessage }}
                </div>
            </div>
            
            <div class="button-group">
                <button @click="increment" class="btn btn-success">+1</button>
                <button @click="decrement" class="btn btn-warning">-1</button>
                <button @click="incrementBy(5)" class="btn btn-info">+5</button>
                <button @click="reset" class="btn btn-danger">Reset</button>
            </div>
            
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-number">{{ doubleCount }}</div>
                    <div>Double Value</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">{{ clickCount }}</div>
                    <div>Total Clicks</div>
                </div>
            </div>
            
            <div class="history-section">
                <h4>Recent Actions:</h4>
                <div v-for="action in recentActions" :key="action.id" class="history-item">
                    {{ action.text }} ({{ action.time }})
                </div>
            </div>
        </div>

        <!-- Composition API Version -->
        <div id="composition-app" class="api-section composition-api">
            <div class="api-header composition-header">
                ⚛️ Composition API (Modern)
            </div>
            
            <div class="counter-display">
                <div class="counter-number">{{ count }}</div>
                <div class="status-message" :class="statusClass">
                    {{ statusMessage }}
                </div>
            </div>
            
            <div class="button-group">
                <button @click="increment" class="btn btn-success">+1</button>
                <button @click="decrement" class="btn btn-warning">-1</button>
                <button @click="incrementBy(5)" class="btn btn-info">+5</button>
                <button @click="reset" class="btn btn-danger">Reset</button>
            </div>
            
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-number">{{ doubleCount }}</div>
                    <div>Double Value</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">{{ clickCount }}</div>
                    <div>Total Clicks</div>
                </div>
            </div>
            
            <div class="history-section">
                <h4>Recent Actions:</h4>
                <div v-for="action in recentActions" :key="action.id" class="history-item">
                    {{ action.text }} ({{ action.time }})
                </div>
            </div>
        </div>
    </div>

    <!-- Code Comparison Section -->
    <div class="explanation-section">
        <h2 style="text-align: center; margin-bottom: 30px;">📝 Code Comparison: Same Logic, Different Style</h2>
        
        <div class="code-comparison">
            <div>
                <h3 style="color: #ff6b6b;">🏛️ Options API Style</h3>
                <div class="code-block">
<pre>export default {
  data() {
    return {
      count: 0,
      clickCount: 0,
      recentActions: []
    }
  },
  
  computed: {
    doubleCount() {
      return this.count * 2
    },
    statusMessage() {
      if (this.count > 10) return "High!"
      if (this.count < 0) return "Negative!"
      return "Normal"
    },
    statusClass() {
      if (this.count > 10) return "positive"
      if (this.count < 0) return "negative"
      return "neutral"
    }
  },
  
  methods: {
    increment() {
      this.count++
      this.clickCount++
      this.addAction('Incremented')
    },
    
    decrement() {
      this.count--
      this.clickCount++
      this.addAction('Decremented')
    },
    
    incrementBy(amount) {
      this.count += amount
      this.clickCount++
      this.addAction(`Added ${amount}`)
    },
    
    reset() {
      this.count = 0
      this.clickCount++
      this.addAction('Reset counter')
    },
    
    addAction(text) {
      this.recentActions.unshift({
        id: Date.now(),
        text: text,
        time: new Date().toLocaleTimeString()
      })
      
      if (this.recentActions.length > 5) {
        this.recentActions.pop()
      }
    }
  }
}</pre>
                </div>
            </div>
            
            <div>
                <h3 style="color: #4ecdc4;">⚛️ Composition API Style</h3>
                <div class="code-block">
<pre>import { ref, computed } from 'vue'

export default {
  setup() {
    // Reactive state
    const count = ref(0)
    const clickCount = ref(0)
    const recentActions = ref([])
    
    // Computed properties
    const doubleCount = computed(() => {
      return count.value * 2
    })
    
    const statusMessage = computed(() => {
      if (count.value > 10) return "High!"
      if (count.value < 0) return "Negative!"
      return "Normal"
    })
    
    const statusClass = computed(() => {
      if (count.value > 10) return "positive"
      if (count.value < 0) return "negative"
      return "neutral"
    })
    
    // Methods
    const increment = () => {
      count.value++
      clickCount.value++
      addAction('Incremented')
    }
    
    const decrement = () => {
      count.value--
      clickCount.value++
      addAction('Decremented')
    }
    
    const incrementBy = (amount) => {
      count.value += amount
      clickCount.value++
      addAction(`Added ${amount}`)
    }
    
    const reset = () => {
      count.value = 0
      clickCount.value++
      addAction('Reset counter')
    }
    
    const addAction = (text) => {
      recentActions.value.unshift({
        id: Date.now(),
        text: text,
        time: new Date().toLocaleTimeString()
      })
      
      if (recentActions.value.length > 5) {
        recentActions.value.pop()
      }
    }
    
    // Return everything for template
    return {
      count,
      clickCount,
      recentActions,
      doubleCount,
      statusMessage,
      statusClass,
      increment,
      decrement,
      incrementBy,
      reset
    }
  }
}</pre>
                </div>
            </div>
        </div>
    </div>

    <!-- Pros and Cons -->
    <div class="explanation-section">
        <h2 style="text-align: center; margin-bottom: 30px;">⚖️ Pros and Cons: Making the Right Choice</h2>
        
        <div class="pros-cons">
            <div class="pros-cons-card">
                <h3 style="color: #ff6b6b; margin-bottom: 20px;">🏛️ Options API</h3>
                
                <h4>Pros:</h4>
                <div class="pro-item">Easier for beginners to understand</div>
                <div class="pro-item">Clear separation of concerns (data, methods, computed)</div>
                <div class="pro-item">Familiar to developers from OOP backgrounds</div>
                <div class="pro-item">Less boilerplate for simple components</div>
                <div class="pro-item">Built-in code organization</div>
                
                <h4 style="margin-top: 20px;">Cons:</h4>
                <div class="con-item">Logic for one feature scattered across sections</div>
                <div class="con-item">Harder to reuse logic between components</div>
                <div class="con-item">Can become unwieldy in large components</div>
                <div class="con-item">Limited TypeScript support</div>
                <div class="con-item">`this` context can be confusing</div>
            </div>
            
            <div class="pros-cons-card">
                <h3 style="color: #4ecdc4; margin-bottom: 20px;">⚛️ Composition API</h3>
                
                <h4>Pros:</h4>
                <div class="pro-item">Better logic organization and reusability</div>
                <div class="pro-item">Excellent TypeScript support</div>
                <div class="pro-item">More flexible and powerful</div>
                <div class="pro-item">Easier to extract and share logic</div>
                <div class="pro-item">Better performance in some cases</div>
                
                <h4 style="margin-top: 20px;">Cons:</h4>
                <div class="con-item">Steeper learning curve initially</div>
                <div class="con-item">More verbose for simple components</div>
                <div class="con-item">Requires understanding of reactivity</div>
                <div class="con-item">Need to manually return everything</div>
                <div class="con-item">Easy to forget `.value` in JavaScript</div>
            </div>
        </div>
    </div>

    <!-- Decision Guide -->
    <div class="explanation-section">
        <h2 style="text-align: center; margin-bottom: 30px;">🎯 Which Should You Choose?</h2>
        
        <div style="background: #e7f3ff; padding: 20px; border-radius: 10px; margin: 20px 0;">
            <h3>🌟 Vue's Official Recommendation:</h3>
            <p><strong>For learning:</strong> Go with the style that looks easier to understand to you. Most core concepts are shared between both styles.</p>
            <p><strong>For production:</strong></p>
            <ul>
                <li><strong>Options API</strong> if you're not using build tools or plan to use Vue primarily in low-complexity scenarios (progressive enhancement)</li>
                <li><strong>Composition API + Single-File Components</strong> if you plan to build full applications with Vue</li>
            </ul>
        </div>
        
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px;">
            <div style="background: #fff3cd; padding: 20px; border-radius: 10px;">
                <h4>🏛️ Choose Options API When:</h4>
                <ul>
                    <li>You're new to Vue or JavaScript frameworks</li>
                    <li>Building simple to medium complexity components</li>
                    <li>Team prefers structured, organized code</li>
                    <li>Working with existing Options API codebase</li>
                    <li>Not using TypeScript</li>
                </ul>
            </div>
            
            <div style="background: #d1ecf1; padding: 20px; border-radius: 10px;">
                <h4>⚛️ Choose Composition API When:</h4>
                <ul>
                    <li>Building complex, feature-rich applications</li>
                    <li>Need to reuse logic across components</li>
                    <li>Using TypeScript for better type safety</li>
                    <li>Want maximum flexibility and control</li>
                    <li>Working with a team experienced in modern JS</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, computed } = Vue

        // OPTIONS API VERSION
        createApp({
            data() {
                return {
                    count: 0,
                    clickCount: 0,
                    recentActions: []
                }
            },
            
            computed: {
                doubleCount() {
                    return this.count * 2
                },
                statusMessage() {
                    if (this.count > 10) return "High!"
                    if (this.count < 0) return "Negative!"
                    return "Normal"
                },
                statusClass() {
                    if (this.count > 10) return "positive"
                    if (this.count < 0) return "negative"
                    return "neutral"
                }
            },
            
            methods: {
                increment() {
                    this.count++
                    this.clickCount++
                    this.addAction('Incremented')
                },
                
                decrement() {
                    this.count--
                    this.clickCount++
                    this.addAction('Decremented')
                },
                
                incrementBy(amount) {
                    this.count += amount
                    this.clickCount++
                    this.addAction(`Added ${amount}`)
                },
                
                reset() {
                    this.count = 0
                    this.clickCount++
                    this.addAction('Reset counter')
                },
                
                addAction(text) {
                    this.recentActions.unshift({
                        id: Date.now(),
                        text: text,
                        time: new Date().toLocaleTimeString()
                    })
                    
                    if (this.recentActions.length > 5) {
                        this.recentActions.pop()
                    }
                }
            }
        }).mount('#options-app')

        // COMPOSITION API VERSION
        createApp({
            setup() {
                // Reactive state
                const count = ref(0)
                const clickCount = ref(0)
                const recentActions = ref([])
                
                // Computed properties
                const doubleCount = computed(() => count.value * 2)
                
                const statusMessage = computed(() => {
                    if (count.value > 10) return "High!"
                    if (count.value < 0) return "Negative!"
                    return "Normal"
                })
                
                const statusClass = computed(() => {
                    if (count.value > 10) return "positive"
                    if (count.value < 0) return "negative"
                    return "neutral"
                })
                
                // Methods
                const increment = () => {
                    count.value++
                    clickCount.value++
                    addAction('Incremented')
                }
                
                const decrement = () => {
                    count.value--
                    clickCount.value++
                    addAction('Decremented')
                }
                
                const incrementBy = (amount) => {
                    count.value += amount
                    clickCount.value++
                    addAction(`Added ${amount}`)
                }
                
                const reset = () => {
                    count.value = 0
                    clickCount.value++
                    addAction('Reset counter')
                }
                
                const addAction = (text) => {
                    recentActions.value.unshift({
                        id: Date.now(),
                        text: text,
                        time: new Date().toLocaleTimeString()
                    })
                    
                    if (recentActions.value.length > 5) {
                        recentActions.value.pop()
                    }
                }
                
                return {
                    count,
                    clickCount,
                    recentActions,
                    doubleCount,
                    statusMessage,
                    statusClass,
                    increment,
                    decrement,
                    incrementBy,
                    reset
                }
            }
        }).mount('#composition-app')
    </script>
</body>
</html>

Key Differences Explained

1. Data Declaration

Options API:

javascript

data() {
  return {
    count: 0,
    message: 'Hello'
  }
}
// Access with: this.count, this.message

Composition API:

javascript

const count = ref(0)
const message = ref('Hello')
// Access with: count.value, message.value (in JS)
// Template access: {{ count }}, {{ message }}

2. Computed Properties

Options API:

javascript

computed: {
  doubleCount() {
    return this.count * 2
  }
}

Composition API:

javascript

const doubleCount = computed(() => {
  return count.value * 2
})

3. Methods

Options API:

javascript

methods: {
  increment() {
    this.count++
  }
}

Composition API:

javascript

const increment = () => {
  count.value++
}

4. Lifecycle Hooks

Options API:

javascript

mounted() {
  console.log('Component mounted!')
},
updated() {
  console.log('Component updated!')
}

Composition API:

javascript

import { onMounted, onUpdated } from 'vue'

onMounted(() => {
  console.log('Component mounted!')
})

onUpdated(() => {
  console.log('Component updated!')
})

Understanding the Mental Models

🏛️ Options API Mental Model

Think of it like a structured form with predefined sections:

Data section → Your variables
Methods section → Your functions
Computed section → Your calculations
Lifecycle section → Your event handlers

It's like organizing your desk with labeled drawers - everything has its place!

⚛️ Composition API Mental Model

Think of it like a flexible workspace where you arrange things as needed:

Import what you need → Get the right tools
Declare related logic together → Keep related things close
Return what you want to expose → Choose what's public

It's like working on a project table - you bring together everything needed for each feature!

Migration Between APIs

From Options API to Composition API

javascript

// OPTIONS API
export default {
  data() {
    return { count: 0 }
  },
  computed: {
    doubled() { return this.count * 2 }
  },
  methods: {
    increment() { this.count++ }
  }
}

// BECOMES COMPOSITION API
export default {
  setup() {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)
    const increment = () => count.value++
    
    return { count, doubled, increment }
  }
}

From Composition API to Options API

javascript

// COMPOSITION API
setup() {
  const user = ref({ name: 'John', age: 30 })
  const greeting = computed(() => `Hello, ${user.value.name}!`)
  const updateAge = (age) => user.value.age = age
  
  return { user, greeting, updateAge }
}

// BECOMES OPTIONS API
data() {
  return {
    user: { name: 'John', age: 30 }
  }
},
computed: {
  greeting() {
    return `Hello, ${this.user.name}!`
  }
},
methods: {
  updateAge(age) {
    this.user.age = age
  }
}

Real-World Decision Making

📊 Team Considerations

Choose Options API if your team:

Is new to Vue or modern JavaScript
Prefers clear, structured code organization
Comes from traditional OOP backgrounds
Works on smaller to medium projects

Choose Composition API if your team:

Has experience with modern JavaScript
Builds complex, feature-rich applications
Values code reusability and flexibility
Uses TypeScript for development

🏗️ Project Considerations

Options API works great for:

Content websites with some interactivity
Admin dashboards with standard CRUD operations
Projects using Vue for progressive enhancement
Rapid prototyping and learning

Composition API shines for:

Complex single-page applications
Applications with lots of shared logic
Projects requiring extensive customization
Long-term, maintainable codebases

What You've Learned! 🎓

✅ Two complete API styles - same power, different organization
✅ When to choose each approach - matching tools to team and project needs
✅ Migration strategies - how to move between styles
✅ Real-world decision making - practical considerations for projects
✅ Mental models - different ways of thinking about Vue components

What's Next?

You now understand both API styles! From here, the course will continue with Composition API since it's Vue's modern approach and what you'll see in most new projects. But you have the knowledge to work with either style!

In the next project, you'll learn about Vue CLI - moving from CDN development to professional build tools and Single File Components!

The Bottom Line

Both APIs are equally powerful - Vue's official documentation says they're "different interfaces powered by the exact same underlying system." The choice comes down to:

Personal preference and learning style
Team experience and background
Project complexity and requirements
Long-term maintenance considerations

There's no "wrong" choice - only the choice that works best for your situation! 🌟

Two Ways to Build: Options API vs Composition API 🔄 ​

What You'll Discover Today ​

The Tale of Two APIs ​

🎯 What You've Been Using: Composition API ​

🏛️ The Traditional Way: Options API ​

Complete Side-by-Side Comparison ​

Key Differences Explained ​

1. Data Declaration ​

2. Computed Properties ​

3. Methods ​

4. Lifecycle Hooks ​

Understanding the Mental Models ​

🏛️ Options API Mental Model ​

⚛️ Composition API Mental Model ​

Migration Between APIs ​

From Options API to Composition API ​

From Composition API to Options API ​

Real-World Decision Making ​

📊 Team Considerations ​

🏗️ Project Considerations ​

What You've Learned! 🎓 ​

What's Next? ​

The Bottom Line ​

Two Ways to Build: Options API vs Composition API 🔄

What You'll Discover Today

The Tale of Two APIs

🎯 What You've Been Using: Composition API

🏛️ The Traditional Way: Options API

Complete Side-by-Side Comparison

Key Differences Explained

1. Data Declaration

2. Computed Properties

3. Methods

4. Lifecycle Hooks

Understanding the Mental Models

🏛️ Options API Mental Model

⚛️ Composition API Mental Model

Migration Between APIs

From Options API to Composition API

From Composition API to Options API

Real-World Decision Making

📊 Team Considerations

🏗️ Project Considerations

What You've Learned! 🎓

What's Next?

The Bottom Line