Search code examples
vue.jsvuejs2vue-options-api

What is the Vue Options API?


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?


Solution

  • 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).