Vue 3 Script Setup Cheat Sheet

Vue 3 Script Setup Cheat Sheet

Download print-friendly PDF

Everything that you declared inside script setup will be available in the template

Methods

<script setup>
function getParam(param) {
  return param;
}
</script>

<template>
  {{ getParam(1) }}
</template>

Reactive data declaration

Use ref for primitives and reactive for complex types

import { ref, reactive } from "vue";
const enabled = ref(true);
const object = reactive({ variable: false });

Component Declaration

import { defineAsyncComponent } from "vue";
import TheComponent from "./components/TheComponent.vue";
const AsyncComponent = defineAsyncComponent(
  () => import("./components/AsyncComponent.vue"),
);

Computed value

import { computed } from "vue";
const count = 0;
const isEmpty = computed(() => {
  return count === 0;
});

Watcher

import { watch, ref } from "vue";
const counter = ref(0);
watch(counter, () => {
  console.log("Counter value changed");
});

Lifecycle Hooks

import { onMounted } from "vue";
console.log("Equivalent to created hook");
onMounted(() => {
  console.log("Mounted hook called");
});

Define emits

const emit = defineEmits(["event-name"]);
function emitEvent() {
  emit("event-name");
}

Define props

defineProps({ elements: Array, counter: { type: Number, default: 0, }, });

Additional resources

• Vue 3 official docs
• Vue 3 official script setup docs
• The 101 guide to Script Setup in Vue 3
• Vue.js Script Setup in Less than 5 Minutes
• Refactoring a Component from Vue 2 Options API to Vue 3 Composition API
• Debounced Search Component in Vue.js, from Options API to Composition API