What is script setup in Vue? | Vue.js Interview Questions

What You'll Learn

script setup benefits
What's different
Compiler macros

Basic script setup

code.txtVUE

<script setup>
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <MyComponent />
  <button @click="increment">{{ count }}</button>
</template>

Without script setup

code.txtVUE

<script>
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'

export default {
  components: { MyComponent },
  setup() {
    const count = ref(0)
    function increment() {
      count.value++
    }
    return { count, increment }
  }
}
</script>

Compiler Macros

code.txtVUE

<script setup>
// Props
const props = defineProps(['title'])

// Emits
const emit = defineEmits(['update'])

// Expose to parent
defineExpose({ someMethod })

// v-model
const model = defineModel()

// Options like inheritAttrs
defineOptions({ inheritAttrs: false })
</script>