Options API vs Composition API — Vue.js 3 (with Pinia, Vue Router & Nuxt basics)

7. Options API vs Composition API

Intermediate★ Must knowLesson 7 of 17

vue

<!-- Options API -->
<script>
export default {
  props: { initial: { type: Number, default: 0 } },
  data() { return { count: this.initial }; },
  computed: { double() { return this.count * 2; } },
  watch: { count(n) { console.log(n); } },
  methods: { increment() { this.count++; } },
  mounted() { console.log("mounted"); },
};
</script>

<!-- Composition API with <script setup> -->
<script setup>
import { ref, computed, watch, onMounted } from "vue";
const props = defineProps({ initial: { type: Number, default: 0 } });
const count = ref(props.initial);
const double = computed(() => count.value * 2);
watch(count, n => console.log(n));
const increment = () => count.value++;
onMounted(() => console.log("mounted"));
</script>

	Options API	Composition API
Organisation	By option type (data/methods/computed)	By feature/logic
Reuse	Mixins (name clashes, unclear origin)	Composables (plain functions)
TypeScript	Weaker inference	Excellent
Learning curve	Easier for beginners	More flexible, better for large apps
`this`	Used everywhere	No `this`

Both are fully supported in Vue 3; new projects usually use <script setup> + Composition API.