0Pricing
Vue Academy · Lesson

Importing and Using Composables in script setup

Importing composables, using third-party VueUse composables, organizing imports.

Composables and script setup

Composables are functions that package reactive logic for reuse. With <script setup> using them is as simple as importing and calling at the top level.

Import at the Top Level

Always call a composable at the top level of <script setup> — not inside a condition, loop, or nested function. This ensures Vue registers its reactivity and lifecycle hooks correctly.

<script setup>
import { useCounter } from './useCounter'
const { count, increment } = useCounter()
</script>

All lessons in this course

  1. Introduction to script setup
  2. defineProps and defineEmits
  3. defineExpose and useAttrs
  4. Importing and Using Composables in script setup
← Back to Vue Academy