Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →
menu_book Course Curriculum (Vue 3) expand_more
SFC & Templates
Single-file components Template interpolation v-bind v-on v-if v-show v-for and keys Dynamic components
Reactivity
ref reactive computed watch watchEffect toRef toRefs shallowRef
Components
Props Prop validation Emits Slots Named slots Scoped slots provide and inject Template refs
Forms & DOM
v-model v-model modifiers Multiple v-model bindings Class binding Style binding Event modifiers Key modifiers Custom directives
Async & Routing Patterns
Async components Suspense Teleport KeepAlive Transition TransitionGroup Composables Lifecycle hooks
Production Patterns
Pinia-style store pattern Readonly state Effect scope Error captured hook Performance computed caching Lazy route concept SSR hydration concept Testing component contract
Vue 3 / Async & Routing Patterns

Composables

Learn Composables in Vue 3 with a dedicated explanation, a concept-specific example, a production caution, and a mastery check.

12 min read • Advanced
vue-3-039.vue
vue 
<script setup>
import { ref,onMounted,onUnmounted } from "vue"; function useOnline(){const online=ref(navigator.onLine);const sync=()=>online.value=navigator.onLine;onMounted(()=>addEventListener("online",sync));onUnmounted(()=>removeEventListener("online",sync));return online};const online=useOnline()
</script>
What to watch
Content source & attribution
Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Composables Mastery Check →
← PREVIOUS
TransitionGroup
NEXT →
Lifecycle hooks