Vue
Vue 3 Script Setup Cheat Sheet
Quick reference guide for Vue 3 composition API script setup
Vue 3 Script Setup Cheat Sheet
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](https://vuejs.org/api/reactivity-core.html#reactive)for complex types
import { ref, reactive } from "vue";
const enabled = ref(true);
const object = reactive({ variable: false });[Component Declaration](https://vuejs.org/api/sfc-script-setup.html#using-components)
import { defineAsyncComponent } from "vue";
import TheComponent from "./components/TheComponent.vue";
const AsyncComponent = defineAsyncComponent(
() => import("./components/AsyncComponent.vue"),
);[Computed value](https://vuejs.org/api/reactivity-core.html#computed)
import { computed } from "vue";
const count = 0;
const isEmpty = computed(() => {
return count === 0;
});[Watcher](https://vuejs.org/api/reactivity-core.html#watch)
import { watch, ref } from "vue";
const counter = ref(0);
watch(counter, () => {
console.log("Counter value changed");
});[Lifecycle Hooks](https://vuejs.org/api/composition-api-lifecycle.html)
import { onMounted } from "vue";
console.log("Equivalent to created hook");
onMounted(() => {
console.log("Mounted hook called");
});[Define emits](https://vuejs.org/api/options-state.html#emits)
const emit = defineEmits(["event-name"]);
function emitEvent() {
emit("event-name");
}[Define props](https://vuejs.org/api/composition-api-setup.html#accessing-props)
defineProps({ elements: Array, counter: { type: Number, default: 0, }, });Additional resources
