Mastering Vue 3 Composables: A Comprehensive Style Guide

Published: at 

Introduction

The release of Vue 3 brought a transformational change, moving from the Options API to the Composition API. At the heart of this transition lies the concept of “composables” — modular functions that leverage Vue’s reactive features. This change enhanced the framework’s flexibility and code reusability. The inconsistent implementation of composables across projects often leads to convoluted and hard-to-maintain codebases.

This style guide harmonizes coding practices around composables, focusing on producing clean, maintainable, and testable code. While composables represent a new pattern, they remain functions at their core. The guide bases its recommendations on time-tested principles of good software design.

This guide serves as a comprehensive resource for both newcomers to Vue 3 and experienced developers aiming to standardize their team’s coding style.

Table of Contents

Open Table of Contents

File Naming

Rule 1.1: Prefix with use and Follow PascalCase


// Good
useCounter.ts;
useApiRequest.ts;

// Bad
counter.ts;
APIrequest.ts;

Composable Naming

Rule 2.1: Use Descriptive Names


// Good
export function function useUserData(): voiduseUserData() {}

// Bad
export function function useData(): voiduseData() {}

Folder Structure

Rule 3.1: Place in composables Directory

src/
└── composables/
    ├── useCounter.ts
    └── useUserData.ts

Argument Passing

Rule 4.1: Use Object Arguments for Four or More Parameters


// Good: For Multiple Parameters
useUserData({ id: numberid: 1, fetchOnMount: booleanfetchOnMount: true, token: stringtoken: "abc", locale: stringlocale: "en" });

// Also Good: For Fewer Parameters
useCounter(1, true, "session");

// Bad
useUserData(1, true, "abc", "en");

Error Handling

Rule 5.1: Expose Error State


// Good
const const error: anyerror = ref(null);
try {
  // Do something
} catch (var err: unknownerr) {
  const error: anyerror.value = var err: unknownerr;
}
return { error: anyerror };

// Bad
try {
  // Do something
} catch (var err: unknownerr) {
  var console: Console
The `console` module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.

The module exports two specific components:

* A `Console` class with methods such as `console.log()`, `console.error()` and `console.warn()` that can be used to write to any Node.js stream.
* A global `console` instance configured to write to [`process.stdout`](https://nodejs.org/docs/latest-v22.x/api/process.html#processstdout) and
[`process.stderr`](https://nodejs.org/docs/latest-v22.x/api/process.html#processstderr). The global `console` can be used without importing the `node:console` module.

_**Warning**_: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the [`note on process I/O`](https://nodejs.org/docs/latest-v22.x/api/process.html#a-note-on-process-io) for
more information.

Example using the global `console`:

```js
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
```

Example using the `Console` class:

```js
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
```
@see[source](https://github.com/nodejs/node/blob/v22.x/lib/console.js)
console.Console.error(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to `stderr` with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to [`printf(3)`](http://man7.org/linux/man-pages/man3/printf.3.html)
(the arguments are all passed to [`util.format()`](https://nodejs.org/docs/latest-v22.x/api/util.html#utilformatformat-args)).

```js
const code = 5;
console.error('error #%d', code);
// Prints: error #5, to stderr
console.error('error', code);
// Prints: error 5, to stderr
```

If formatting elements (e.g. `%d`) are not found in the first string then
[`util.inspect()`](https://nodejs.org/docs/latest-v22.x/api/util.html#utilinspectobject-options) is called on each argument and the
resulting string values are concatenated. See [`util.format()`](https://nodejs.org/docs/latest-v22.x/api/util.html#utilformatformat-args)
for more information.
@sincev0.1.100
error("An error occurred:", var err: unknownerr);
}
return {};

Avoid Mixing UI and Business Logic

Rule 6.2: Decouple UI from Business Logic in Composables

Composables should focus on managing state and business logic, avoiding UI-specific behavior like toasts or alerts. Keeping UI logic separate from business logic will ensure that your composable is reusable and testable.


// Good
export function 
function useUserData(userId: any): {
    user: any;
    error: any;
    fetchUser: () => Promise<void>;
} (+1 overload)
useUserData(userId: anyuserId) {
  const const user: anyuser = ref(null);
  const const error: anyerror = ref(null);

  const const fetchUser: () => Promise<void>fetchUser = async () => {
    try {
      const const response: anyresponse = await axios.get(`/api/users/${userId: anyuserId}`);
      const user: anyuser.value = const response: anyresponse.data;
    } catch (function (local var) e: unknowne) {
      const error: anyerror.value = function (local var) e: unknowne;
    }
  };

  return { user: anyuser, error: anyerror, fetchUser: () => Promise<void>fetchUser };
}

// In component
setup() {
  const { const user: anyuser, const error: anyerror, const fetchUser: () => Promise<void>fetchUser } = 
function useUserData(userId: any): {
    user: any;
    error: any;
    fetchUser: () => Promise<void>;
} (+1 overload)
useUserData(userId);

  watch(const error: anyerror, (newValue: anynewValue) => {
    if (newValue: anynewValue) {
      showToast("An error occurred.");  // UI logic in component
    }
  });

  return { user: anyuser, fetchUser: () => Promise<void>fetchUser };
}

// Bad
export function 
function useUserData(userId: any): {
    user: any;
    error: any;
    fetchUser: () => Promise<void>;
} (+1 overload)
useUserData(userId: anyuserId) {
  const const user: anyuser = ref(null);

  const const fetchUser: () => Promise<void>fetchUser = async () => {
    try {
      const const response: anyresponse = await axios.get(`/api/users/${userId: anyuserId}`);
      const user: anyuser.value = const response: anyresponse.data;
    } catch (function (local var) e: unknowne) {
      showToast("An error occurred."); // UI logic inside composable
    }
  };

  return { user: anyuser, fetchUser: () => Promise<void>fetchUser };
}

Anatomy of a Composable

Rule 7.2: Structure Your Composables Well

A well-structured composable improves understanding, usage, and maintenance. It consists of these components:

Following this structure makes your composables more intuitive and improves code quality across your project.


// Good Example: Anatomy of a Composable
// Well-structured according to Anatomy of a Composable
export function 
function useUserData(userId: any): {
    user: any;
    status: any;
    error: any;
    fetchUser: () => Promise<void>;
}
useUserData(userId: anyuserId) {
  // Primary State
  const const user: anyuser = ref(null);

  // Supportive State
  const const status: anystatus = ref("idle");
  const const error: anyerror = ref(null);

  // Methods
  const const fetchUser: () => Promise<void>fetchUser = async () => {
    const status: anystatus.value = "loading";
    try {
      const const response: anyresponse = await axios.get(`/api/users/${userId: anyuserId}`);
      const user: anyuser.value = const response: anyresponse.data;
      const status: anystatus.value = "success";
    } catch (function (local var) e: unknowne) {
      const status: anystatus.value = "error";
      const error: anyerror.value = function (local var) e: unknowne;
    }
  };

  return { user: anyuser, status: anystatus, error: anyerror, fetchUser: () => Promise<void>fetchUser };
}

// Bad Example: Anatomy of a Composable
// Lacks well-defined structure and mixes concerns
export function 
function useUserDataAndMore(userId: any): {
    user: any;
    count: any;
    message: any;
    fetchUserAndIncrement: () => Promise<void>;
    setMessage: (newMessage: any) => void;
}
useUserDataAndMore(userId: anyuserId) {
  // Muddled State: Not clear what's Primary or Supportive
  const const user: anyuser = ref(null);
  const const count: anycount = ref(0);
  const const message: anymessage = ref("Initializing...");

  // Methods: Multiple responsibilities and side-effects
  const const fetchUserAndIncrement: () => Promise<void>fetchUserAndIncrement = async () => {
    const message: anymessage.value = "Fetching user and incrementing count...";
    try {
      const const response: anyresponse = await axios.get(`/api/users/${userId: anyuserId}`);
      const user: anyuser.value = const response: anyresponse.data;
    } catch (function (local var) e: unknowne) {
      const message: anymessage.value = "Failed to fetch user.";
    }
    const count: anycount.value++; // Incrementing count, unrelated to user fetching
  };

  // More Methods: Different kind of task entirely
  const const setMessage: (newMessage: any) => voidsetMessage = newMessage: anynewMessage => {
    const message: anymessage.value = newMessage: anynewMessage;
  };

  return { user: anyuser, count: anycount, message: anymessage, fetchUserAndIncrement: () => Promise<void>fetchUserAndIncrement, setMessage: (newMessage: any) => voidsetMessage };
}

Functional Core, Imperative Shell

Rule 8.2: (optional) use functional core imperative shell pattern

Structure your composable such that the core logic is functional and devoid of side effects, while the imperative shell handles the Vue-specific or side-effecting operations. Following this principle makes your composable easier to test, debug, and maintain.

Example: Functional Core, Imperative Shell


// good
// Functional Core
const const calculate: (a: any, b: any) => anycalculate = (a: anya, b: anyb) => a: anya + b: anyb;

// Imperative Shell
export function 
function useCalculatorGood(): {
    result: any;
    add: (a: any, b: any) => void;
}
useCalculatorGood() {
  const const result: anyresult = ref(0);

  const const add: (a: any, b: any) => voidadd = (a: anya, b: anyb) => {
    const result: anyresult.value = const calculate: (a: any, b: any) => anycalculate(a: anya, b: anyb); // Using the functional core
  };

  // Other side-effecting code can go here, e.g., logging, API calls

  return { result: anyresult, add: (a: any, b: any) => voidadd };
}

// wrong
// Mixing core logic and side effects
export function 
function useCalculatorBad(): {
    result: any;
    add: (a: any, b: any) => void;
}
useCalculatorBad() {
  const const result: anyresult = ref(0);

  const const add: (a: any, b: any) => voidadd = (a: anya, b: anyb) => {
    // Side-effect within core logic
    var console: Console
The `console` module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.

The module exports two specific components:

* A `Console` class with methods such as `console.log()`, `console.error()` and `console.warn()` that can be used to write to any Node.js stream.
* A global `console` instance configured to write to [`process.stdout`](https://nodejs.org/docs/latest-v22.x/api/process.html#processstdout) and
[`process.stderr`](https://nodejs.org/docs/latest-v22.x/api/process.html#processstderr). The global `console` can be used without importing the `node:console` module.

_**Warning**_: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the [`note on process I/O`](https://nodejs.org/docs/latest-v22.x/api/process.html#a-note-on-process-io) for
more information.

Example using the global `console`:

```js
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
```

Example using the `Console` class:

```js
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
```
@see[source](https://github.com/nodejs/node/blob/v22.x/lib/console.js)
console.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to `stdout` with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to [`printf(3)`](http://man7.org/linux/man-pages/man3/printf.3.html)
(the arguments are all passed to [`util.format()`](https://nodejs.org/docs/latest-v22.x/api/util.html#utilformatformat-args)).

```js
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
```

See [`util.format()`](https://nodejs.org/docs/latest-v22.x/api/util.html#utilformatformat-args) for more information.
@sincev0.1.100
log("Adding:", a: anya, b: anyb);
    const result: anyresult.value = a: anya + b: anyb;
  };

  return { result: anyresult, add: (a: any, b: any) => voidadd };
}

Single Responsibility Principle

Rule 9.1: Use SRP for composables

A composable should follow the Single Responsibility Principle: one reason to change. This means each composable handles one specific task. Following this principle creates composables that are clear, maintainable, and testable.


// Good
export function 
function useCounter(): {
    count: any;
    increment: () => void;
    decrement: () => void;
}
useCounter() {
  const const count: anycount = ref(0);

  const const increment: () => voidincrement = () => {
    const count: anycount.value++;
  };

  const const decrement: () => voiddecrement = () => {
    const count: anycount.value--;
  };

  return { count: anycount, increment: () => voidincrement, decrement: () => voiddecrement };
}

// Bad

export function 
function useUserAndCounter(userId: any): {
    user: any;
    fetchUser: () => Promise<void>;
    count: any;
    increment: () => void;
    decrement: () => void;
}
useUserAndCounter(userId: anyuserId) {
  const const user: anyuser = ref(null);
  const const count: anycount = ref(0);

  const const fetchUser: () => Promise<void>fetchUser = async () => {
    try {
      const const response: anyresponse = await axios.get(`/api/users/${userId: anyuserId}`);
      const user: anyuser.value = const response: anyresponse.data;
    } catch (function (local var) error: unknownerror) {
      var console: Console
The `console` module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.

The module exports two specific components:

* A `Console` class with methods such as `console.log()`, `console.error()` and `console.warn()` that can be used to write to any Node.js stream.
* A global `console` instance configured to write to [`process.stdout`](https://nodejs.org/docs/latest-v22.x/api/process.html#processstdout) and
[`process.stderr`](https://nodejs.org/docs/latest-v22.x/api/process.html#processstderr). The global `console` can be used without importing the `node:console` module.

_**Warning**_: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the [`note on process I/O`](https://nodejs.org/docs/latest-v22.x/api/process.html#a-note-on-process-io) for
more information.

Example using the global `console`:

```js
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
```

Example using the `Console` class:

```js
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
```
@see[source](https://github.com/nodejs/node/blob/v22.x/lib/console.js)
console.Console.error(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to `stderr` with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to [`printf(3)`](http://man7.org/linux/man-pages/man3/printf.3.html)
(the arguments are all passed to [`util.format()`](https://nodejs.org/docs/latest-v22.x/api/util.html#utilformatformat-args)).

```js
const code = 5;
console.error('error #%d', code);
// Prints: error #5, to stderr
console.error('error', code);
// Prints: error 5, to stderr
```

If formatting elements (e.g. `%d`) are not found in the first string then
[`util.inspect()`](https://nodejs.org/docs/latest-v22.x/api/util.html#utilinspectobject-options) is called on each argument and the
resulting string values are concatenated. See [`util.format()`](https://nodejs.org/docs/latest-v22.x/api/util.html#utilformatformat-args)
for more information.
@sincev0.1.100
error("An error occurred while fetching user data:", function (local var) error: unknownerror);
    }
  };

  const const increment: () => voidincrement = () => {
    const count: anycount.value++;
  };

  const const decrement: () => voiddecrement = () => {
    const count: anycount.value--;
  };

  return { user: anyuser, fetchUser: () => Promise<void>fetchUser, count: anycount, increment: () => voidincrement, decrement: () => voiddecrement };
}

File Structure of a Composable

Rule 10.1: Rule: Consistent Ordering of Composition API Features

Your team should establish and follow a consistent order for Composition API features throughout the codebase.

Here’s a recommended order:

  1. Initializing: Setup logic
  2. Refs: Reactive references
  3. Computed: Computed properties
  4. Methods: Functions for state manipulation
  5. Lifecycle Hooks: onMounted, onUnmounted, etc.
  6. Watch

Pick an order that works for your team and apply it consistently across all composables.


// Example in useCounter.ts
import { function ref<T>(value: T): [T] extends [Ref] ? IfAny<T, Ref<T>, T> : Ref<UnwrapRef<T>, UnwrapRef<T> | T> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}
ref, 
const computed: {
    <T>(getter: ComputedGetter<T>, debugOptions?: DebuggerOptions): ComputedRef<T>;
    <T, S = T>(options: WritableComputedOptions<T, S>, debugOptions?: DebuggerOptions): WritableComputedRef<T, S>;
}
computed, const onMounted: CreateHook<any>onMounted } from "vue";

export default function 
function useCounter(): {
    count: Ref<number, number>;
    isEven: ComputedRef<boolean>;
    increment: () => void;
    decrement: () => void;
}
useCounter() {
  // Initializing
  // Initialize variables, make API calls, or any setup logic
  // For example, using a router
  // ...

  // Refs
  const const count: Ref<number, number>count = ref<number>(value: number): Ref<number, number> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}
ref(0);

  // Computed
  const const isEven: ComputedRef<boolean>isEven = computed<boolean>(getter: ComputedGetter<boolean>, debugOptions?: DebuggerOptions): ComputedRef<boolean> (+1 overload)
Takes a getter function and returns a readonly reactive ref object for the
returned value from the getter. It can also take an object with get and set
functions to create a writable ref object.
@example```js
// Creating a readonly computed ref:
const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2
plusOne.value++ // error
```

```js
// Creating a writable computed ref:
const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  }
})

plusOne.value = 1
console.log(count.value) // 0
```@paramgetter - Function that produces the next value.@paramdebugOptions - For debugging. See {@link https://vuejs.org/guide/extras/reactivity-in-depth.html#computed-debugging}.@see{@link https://vuejs.org/api/reactivity-core.html#computed}
computed(() => const count: Ref<number, number>count.Ref<number, number>.value: numbervalue % 2 === 0);

  // Methods
  const const increment: () => voidincrement = () => {
    const count: Ref<number, number>count.Ref<number, number>.value: numbervalue++;
  };

  const const decrement: () => voiddecrement = () => {
    const count: Ref<number, number>count.Ref<number, number>.value: numbervalue--;
  };

  // Lifecycle
  function onMounted(hook: any, target?: ComponentInternalInstance | null): voidonMounted(() => {
    var console: Console
The `console` module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.

The module exports two specific components:

* A `Console` class with methods such as `console.log()`, `console.error()` and `console.warn()` that can be used to write to any Node.js stream.
* A global `console` instance configured to write to [`process.stdout`](https://nodejs.org/docs/latest-v22.x/api/process.html#processstdout) and
[`process.stderr`](https://nodejs.org/docs/latest-v22.x/api/process.html#processstderr). The global `console` can be used without importing the `node:console` module.

_**Warning**_: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the [`note on process I/O`](https://nodejs.org/docs/latest-v22.x/api/process.html#a-note-on-process-io) for
more information.

Example using the global `console`:

```js
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
```

Example using the `Console` class:

```js
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
```
@see[source](https://github.com/nodejs/node/blob/v22.x/lib/console.js)
console.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to `stdout` with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to [`printf(3)`](http://man7.org/linux/man-pages/man3/printf.3.html)
(the arguments are all passed to [`util.format()`](https://nodejs.org/docs/latest-v22.x/api/util.html#utilformatformat-args)).

```js
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
```

See [`util.format()`](https://nodejs.org/docs/latest-v22.x/api/util.html#utilformatformat-args) for more information.
@sincev0.1.100
log("Counter is mounted");
  });

  return {
    count: Ref<number, number>count,
    isEven: ComputedRef<boolean>isEven,
    increment: () => voidincrement,
    decrement: () => voiddecrement,
  };
}

Conclusion

These guidelines provide best practices for writing clean, testable, and efficient Vue 3 composables. They combine established software design principles with practical experience, though they aren’t exhaustive.

Programming blends art and science. As you develop with Vue, you’ll discover patterns that match your needs. Focus on maintaining a consistent, scalable, and maintainable codebase. Adapt these guidelines to fit your project’s requirements.

Share your ideas, improvements, and real-world examples in the comments. Your input helps evolve these guidelines into a better resource for the Vue community.

Questions or thoughts?

Follow me on X for more TypeScript, Vue, and web dev insights! Feel free to DM me with:

  • Questions about this article
  • Topic suggestions
  • Feedback or improvements
Connect on X

Related Posts

The Browser That Speaks 200 Languages: Building an AI Translator Without APIs

Learn how to build a browser-based translator that works offline and handles 200 languages using Vue and Transformers.js

Published: at 
vue

Vue 3.5's onWatcherCleanup: Mastering Side Effect Management in Vue Applications

Discover how Vue 3.5's new onWatcherCleanup function revolutionizes side effect management in Vue applications

Updated: at 
vue

Building Local-First Apps with Vue and Dexie.js

Learn how to create offline-capable, local-first applications using Vue 3 and Dexie.js. Discover patterns for data persistence, synchronization, and optimal user experience.

Published: at 
vue