Vue 3 Script Setup Cheat Sheet
2 min readDec 18, 2022
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
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,
},
});