Options API vs Composition API: Choosing the Right Approach for Your Team

A presentation at Vue London 2021 by Ben Hong

Option API vs Composition API: Choosing the Right Approach for Your Team Ben Hong @bencodezen

Sta DX Engineer at Netlify Vue.js Core Team Member A little about me Nuxt Ambassador Vue Mastery Instructor Google Developer Expert ff Options API vs Composition API @bencodezen Vue.js London 2021

Before Vue 3, things were “simpler”… Options API vs Composition API @bencodezen Vue.js London 2021

Because there was only one way to write your components: Options API Options API vs Composition API @bencodezen Vue.js London 2021

options api.vue <script> export default { data: () => ({ count: 0 }), computed: { doubleCount() { return this.count * 2 } }, methods: { incrementCount() { this.count++ } } } </script>
<template> <h1>Standard Counter</h1> <p>Current Count: {{ count }}</p> <p>Double Count: {{ doubleCount }}</p> <button @click=”incrementCount”>+</button> Options API vs Composition API @bencodezen Vue.js London 2021 </template>

But with Vue 3 introducing the Composition API, it got a little more complicated… Options API vs Composition API @bencodezen Vue.js London 2021

composition api.vue <script> export default { data: () => ({ count: 0 }), computed: { doubleCount() { return this.count * 2 } }, methods: { incrementCount() { this.count++ } } } </script>
<template> <h1>Standard Counter</h1> <p>Current Count: {{ count }}</p> <p>Double Count: {{ doubleCount }}</p> <button @click=”incrementCount”>+</button> Options API vs Composition API @bencodezen Vue.js London 2021 </template>

composition api.vue <script> export default { setup() { }, data: () => ({ count: 0 }), computed: { doubleCount() { return this.count * 2 } }, methods: { incrementCount() { this.count++ } } } </script>
<template> <h1>Standard Counter</h1> Options API vs Composition API @bencodezen Vue.js London 2021 <p>Current Count: {{ count }}</p>

composition api.vue <script> export default { setup() { const count = 0 }, computed: { doubleCount() { return this.count * 2 } }, methods: { incrementCount() { this.count++ } } } </script>
<template> <h1>Standard Counter</h1> <p>Current Count: {{ count }}</p> <p>Double Count: {{ doubleCount }}</p> <button @click=”incrementCount”>+</button> Options API vs Composition API @bencodezen Vue.js London 2021 </template>

composition api.vue <script> import { ref } from ‘vue’ export default { setup() { const count = ref(0) }, computed: { doubleCount() { return this.count * 2 } }, methods: { incrementCount() { this.count++ } } } </script>
<template> <h1>Standard Counter</h1> <p>Current Count: {{ @bencodezen count }}</p> Vue.js London 2021 Options API vs Composition API <p>Double Count: {{ doubleCount }}</p>

composition api.vue <script> import { ref } from ‘vue’ export default { setup() { const count = ref(0) const doubleCount = computed(() => count.value * 2) }, methods: { incrementCount() { this.count++ } } } </script> <template> <h1>Standard Counter</h1> <p>Current Count: {{ count }}</p> <p>Double Count: {{ doubleCount }}</p> <button @click=”incrementCount”>+</button> </template>
Options API vs Composition API @bencodezen Vue.js London 2021

composition api.vue <script> import { computed, ref } from ‘vue’ export default { setup() { const count = ref(0) const doubleCount = computed(() => count.value * 2) }, methods: { incrementCount() { this.count++ } } } </script> <template> <h1>Standard Counter</h1> <p>Current Count: {{ count }}</p> <p>Double Count: {{ doubleCount }}</p> <button @click=”incrementCount”>+</button> </template>
Options API vs Composition API @bencodezen Vue.js London 2021

composition api.vue <script> import { computed, ref } from ‘vue’ export default { setup() { const count = ref(0) const doubleCount = computed(() => count.value * 2) const incrementCount = () => { count.value++ } } } </script> <template> <h1>Standard Counter</h1> <p>Current Count: {{ count }}</p> <p>Double Count: {{ doubleCount }}</p> <button @click=”incrementCount”>+</button> </template>
Options API vs Composition API @bencodezen Vue.js London 2021

composition api.vue <script> import { computed, ref } from ‘vue’ export default { setup() { const count = ref(0) const doubleCount = computed(() => count.value * 2) const incrementCount = () => { count.value++ } return { count, doubleCount, incrementCount } } } </script>
<template> <h1>Standard Counter</h1> <p>Current Count: {{ count }}</p> <p>Double Count: {{ doubleCount }}</p> <button @click=”incrementCount”>+</button> Options API vs Composition API @bencodezen Vue.js London 2021 </template>

And with Vue 3.2’s release of the new script setup syntax, it adds yet another style of writing components… Options API vs Composition API @bencodezen Vue.js London 2021

script setup.vue <script> import { computed, ref } from ‘vue’ export default { setup() { const count = ref(0) const doubleCount = computed(() => count.value * 2) const incrementCount = () => { count.value++ } return { count, doubleCount, incrementCount } } } </script>
<template> <h1>Standard Counter</h1> <p>Current Count: {{ count }}</p> <p>Double Count: {{ doubleCount }}</p> <button @click=”incrementCount”>+</button> Options API vs Composition API @bencodezen Vue.js London 2021 </template>

script setup.vue <script> import { computed, ref } from ‘vue’ setup() const const const { count = ref(0) doubleCount = computed(() => count.value * 2) incrementCount = () => { count.value++ } return { count, doubleCount, incrementCount } } </script> <template> <h1>Standard Counter</h1> <p>Current Count: {{ count }}</p> <p>Double Count: {{ doubleCount }}</p> <button @click=”incrementCount”>+</button> </template>
Options API vs Composition API @bencodezen Vue.js London 2021

script setup.vue <script setup> import { computed, ref } from ‘vue’ const count = ref(0) const doubleCount = computed(() => count.value * 2) const incrementCount = () => { count.value++ } return { count, doubleCount, incrementCount } </script> <template> <h1>Standard Counter</h1> <p>Current Count: {{ count }}</p> <p>Double Count: {{ doubleCount }}</p> <button @click=”incrementCount”>+</button> </template>
Options API vs Composition API @bencodezen Vue.js London 2021

script setup.vue <script setup> import { computed, ref } from ‘vue’ const count = ref(0) const doubleCount = computed(() => count.value * 2) const incrementCount = () => { count.value++ } </script> <template> <h1>Standard Counter</h1> <p>Current Count: {{ count }}</p> <p>Double Count: {{ doubleCount }}</p> <button @click=”incrementCount”>+</button> </template>
Options API vs Composition API @bencodezen Vue.js London 2021

So which one is the “right” one? Options API vs Composition API @bencodezen Vue.js London 2021

Approach #1: Options API Options API vs Composition API @bencodezen Vue.js London 2021

options api.vue <script> export default { data: () => ({ count: 0 }), computed: { doubleCount() { return this.count * 2 } }, methods: { incrementCount() { this.count++ } } } </script>
<template> <h1>Standard Counter</h1> <p>Current Count: {{ count }}</p> <p>Double Count: {{ doubleCount }}</p> <button @click=”incrementCount”>+</button> Options API vs Composition API @bencodezen Vue.js London 2021 </template>

Approach #1: Options API Pros: • Easy to learn • Consistency • Simplicity Options API vs Composition API @bencodezen Vue.js London 2021

Approach #1: Options API Pros: • Easy to learn • Consistency • Simplicity Options API vs Composition API @bencodezen Cons: • Opinionated • Less flexibility • Not as TS friendly Vue.js London 2021

Approach #2: Composition API Options API vs Composition API @bencodezen Vue.js London 2021

composition api script setup.vue <script setup> import { computed, ref } from ‘vue’ const count = ref(0) const doubleCount = computed(() => count.value * 2) const incrementCount = () => { count.value++ } </script> <template> <h1>Standard Counter</h1> <p>Current Count: {{ count }}</p> <p>Double Count: {{ doubleCount }}</p> <button @click=”incrementCount”>+</button> </template>
Options API vs Composition API @bencodezen Vue.js London 2021

Approach #2: Composition API Pros: • Flexibility • “Just JavaScript” • TS friendly Options API vs Composition API @bencodezen Vue.js London 2021

Approach #2: Composition API Pros: • Flexibility • “Just JavaScript” • TS friendly Options API vs Composition API @bencodezen Cons: • More flexibility • Higher barrier of entry • Lack of structure Vue.js London 2021

Approach #3: Options API + Composition API Options API vs Composition API @bencodezen Vue.js London 2021

options and composition api.vue <script> import { computed, ref } from ‘vue’ export default { setup() { const count = ref(0) const doubleCount = computed(() => count.value * 2) const incrementCount = () => { count.value++ } return { count, doubleCount, incrementCount } } } </script>
<template> <h1>Standard Counter</h1> <p>Current Count: {{ count }}</p> <p>Double Count: {{ doubleCount }}</p> <button @click=”incrementCount”>+</button> Options API vs Composition API @bencodezen Vue.js London 2021 </template>

options and composition api.vue <script> import { computed, ref } from ‘vue’ export default { setup() { const count = ref(0) const doubleCount = computed(() => count.value * 2) const incrementCount = () => { count.value++ } return { count, doubleCount, incrementCount } }, computed: { tripleCount() { return this.count * 3 } } } </script> Options API vs Composition API @bencodezen -
<template> Vue.js London 2021

Approach #3: Options API + Composition API Pros: • Structure w/ flexibility • Progressive enhancement • More TS friendly Options API vs Composition API @bencodezen Vue.js London 2021

Approach #3: Options API + Composition API Pros: • Structure w/ flexibility • Progressive enhancement • More TS friendly Options API vs Composition API @bencodezen Vue.js London 2021 Cons: • Two approaches • More verbose • Not as TS friendly

So which one is the “right” one? Options API vs Composition API @bencodezen Vue.js London 2021

What matters is choosing the right approach for your team. Options API vs Composition API @bencodezen Vue.js London 2021

Aspects to Consider Options API vs Composition API @bencodezen Vue.js London 2021

Aspects to Consider • Migrating or new? • Who is contributing? • Plan on using TypeScript heavily? • What does the team prefer? Options API vs Composition API @bencodezen Vue.js London 2021

⚖ Final Verdict? Options API vs Composition API @bencodezen Vue.js London 2021

Every approach is a valid one. Options API vs Composition API @bencodezen Vue.js London 2021

Every approach is a valid one regardless of what everyone else says. Options API vs Composition API @bencodezen Vue.js London 2021

Because at the end of the day, what matters are the features being shipped and whether the team enjoys working with the code base. Options API vs Composition API @bencodezen Vue.js London 2021

Thank you! bencodezen.io twitter.com/bencodezen youtube.com/bencodezen twitch.tv/bencodezen Options API vs Composition API @bencodezen Vue.js London 2021

Ben Hong
@bencodezen

1 / 42

With the introduction of Composition API into the Vue ecosystem, many are curious as to what they should pick. Options API? Composition API? Which is best? What are the tradeoffs? In this talk, we’ll examine the two approaches so that you can make the right decision for your app.