I know that one of the main features of Vue 3 is the Composition API, which is an alternative to the old Vue Options API. But I can't seem to find a simple text definition of the Options API - what is it?
Asked
Active
Viewed 4,003 times
3
-
Maybe this article can help: https://markus.oberlehner.net/blog/vue-3-composition-api-vs-options-api/ – Peter Krebs Aug 30 '21 at 15:42
-
https://v3.vuejs.org/api/options-api.html read this – s4k1b Aug 30 '21 at 15:43
1 Answers
6
In short from the blog article about composition vs. options API, which I posted in the comments:
// Options API
export default {
data() {
return {
name: 'John',
};
},
methods: {
doIt() {
console.log(`Hello ${this.name}`);
},
},
mounted() {
this.doIt();
},
};
// Composition API
export default {
setup() {
const name = ref('John');
const doIt = () => console.log(`Hello ${name.value}`);
onMounted(() => {
doIt();
});
return { name };
},
};
Options API is the name for the "old" way from Vue2. AFAIK you can still use both as if it was the olden times of Vue2.
I had to click on the 6th link when searching for "vue options api" - so pretty far down in the search results but at least not unfindable (a.k.a. Google search results, page 2).

Peter Krebs
- 3,831
- 2
- 15
- 29
-
1Thanks, that's helpful. I was looking for a text summary of what it is rather than the syntax. – nCardot Aug 30 '21 at 16:05
-
-
don't mix the two in the same component though, impossible to fix bugs will happen – Will Aug 09 '22 at 16:20