3

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?

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
nCardot
  • 5,992
  • 6
  • 47
  • 83

1 Answers1

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