CODEWITHSUNDEEP
vue.jsvuejs2vue-options-api
nCardot
nCardot

Reputation: 6586

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?

Upvotes: 3

Views: 4523

Answers (1)

Peter Pointer
Peter Pointer

Reputation: 4162

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

Upvotes: 6

Related Questions