How do I create composables in Vue?

How do I create composables in Vue?

Creating composables in Vue involves defining reusable functions that encapsulate logic. You can create a composable by defining a function that uses Vue's reactive features.

Can you give me an example of a simple composable?

Sure! Here's a simple composable that manages a counter:

import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  const decrement = () => count.value--;
  return { count, increment, decrement };
}

How do I use this composable in a component?

You can use the composable in your component like this:

import { useCounter } from './path/to/useCounter';

export default {
  setup() {
    const { count, increment, decrement } = useCounter();
    return { count, increment, decrement };
  }
};

What are the benefits of using composables?

Composables promote code reusability, improve organization, and make it easier to manage state and logic across components.