Michael Thiessen

Using Composition and Options API Together

Invalid Date

It's possible to use a hybrid of the Options API and Composition API — but there are a couple caveats.

First, be aware that you cannot access properties declared in the Options API within your setup function:

<script>

  export default {

    data() {

      return {

        count: 1,

      };

    },

    setup() {

      // You cannot access properties from the Options API

      // It's impossible to access the component instance `this`

      const double = useDouble(this.count);

    }

  };

</script>

Second, you can access properties returned from setup within your Options API code:

<script>

  export default {

    setup() {

      const message = 'Hello, Vue friends!';

      return { message };

    },

    computed: {

      messageUpperCase() {

        // Properties returned from `setup` can be

        // used in the Options API

        return this.message.toUpperCase();

      }

    }

  };

</script>

This is a good reason to either:

  • Go all-in on the Composition API (the officially recommended approach)
  • Only use the Composition API to consume composables for code reusability

Splitting business logic between both approaches within a single component will only cause you headaches.

Related Articles