TLDR
Improve your Vue component organization by using inline composables - a technique inspired by Martin Fowler’s Extract Function pattern. By grouping related logic into well-named functions within your components, you can make your code more readable and maintainable without the overhead of creating separate files.
Introduction
Vue 3 gives us powerful tools through the Composition API and <script setup>. But that power can lead to cluttered components full of mixed concerns: queries, state, side effects, and logic all tangled together.
For better clarity, we’ll apply an effective refactoring technique: Extract Function. Michael Thiessen was the first to give this Vue-specific implementation a name - “inline composables” - in his blog post at michaelnthiessen.com/inline-composables, bridging the gap between Martin Fowler’s classic pattern and modern Vue development.
This isn’t a new idea. It comes from Martin Fowler’s Refactoring catalog, where he describes it as a way to break large functions into smaller ones with descriptive names. You can see the technique explained on his site here:
refactoring.com/catalog/extractFunction.html
Here’s his example:
function function printOwing(invoice: any): voidprintOwing(invoice: anyinvoice) {
printBanner();
let let outstanding: anyoutstanding = calculateOutstanding();
// print details
var console: ConsoleThe `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
```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.log(`name: ${invoice: anyinvoice.customer}`);
var console: ConsoleThe `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
```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.log(`amount: ${let outstanding: anyoutstanding}`);
}This code works, but lacks clarity. We can improve it by extracting the details-printing part into its own function:
function function printOwing(invoice: any): voidprintOwing(invoice: anyinvoice) {
printBanner();
let let outstanding: anyoutstanding = calculateOutstanding();
function (local function) printDetails(outstanding: any): voidprintDetails(let outstanding: anyoutstanding);
function function (local function) printDetails(outstanding: any): voidprintDetails(outstanding: anyoutstanding) {
var console: ConsoleThe `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
```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.log(`name: ${invoice: anyinvoice.customer}`);
var console: ConsoleThe `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
```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.log(`amount: ${outstanding: anyoutstanding}`);
}
}Now the top-level function reads more like a story. This small change makes the code easier to understand and easier to maintain.
Bringing Extract Function to Vue
We can apply the same principle inside Vue components using what we call inline composables. These are small functions declared inside your <script setup> block that handle a specific piece of logic.
Let’s look at an example based on a gist from Evan You.
Before Refactoring
Here’s how a Vue component might look before introducing inline composables. All the logic is in one place:
// src/components/FolderManager.vue
<type script = /*unresolved*/ anyscript setup>
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.ref, function watch<T, Immediate extends Readonly<boolean> = false>(source: WatchSource<T>, cb: WatchCallback<T, MaybeUndefined<T, Immediate>>, options?: WatchOptions<Immediate>): WatchHandle (+3 overloads)watch } from 'vue'
async function function toggleFavorite(currentFolderData: any): Promise<void>toggleFavorite(currentFolderData: anycurrentFolderData) {
await mutate({
mutation: anymutation: FOLDER_SET_FAVORITE,
variables: {
path: any;
favorite: boolean;
}
path: anypath: currentFolderData: anycurrentFolderData.path,
favorite: booleanfavorite: !currentFolderData: anycurrentFolderData.favorite
}
})
}
const const showHiddenFolders: Ref<boolean, boolean>showHiddenFolders = ref<boolean>(value: boolean): Ref<boolean, boolean> (+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.ref(var localStorage: Storage[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
A browser-compatible implementation of [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). Data is stored
unencrypted in the file specified by the `--localstorage-file` CLI flag.
The maximum amount of data that can be stored is 10 MB.
Any modification of this data outside of the Web Storage API is not supported.
Enable this API with the `--experimental-webstorage` CLI flag.
`localStorage` data is not stored per user or per request when used in the context
of a server, it is shared across all users and requests.localStorage.Storage.getItem(key: string): string | nullReturns the current value associated with the given key, or null if the given key does not exist.
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Storage/getItem)getItem('vue-ui.show-hidden-folders') === 'true')
const const favoriteFolders: anyfavoriteFolders = useQuery(FOLDERS_FAVORITE, [])
watch<boolean, false>(source: WatchSource<boolean>, cb: WatchCallback<boolean, boolean>, options?: WatchOptions<false> | undefined): WatchHandle (+3 overloads)watch(const showHiddenFolders: Ref<boolean, boolean>showHiddenFolders, (value: booleanvalue) => {
if (value: booleanvalue) {
var localStorage: Storage[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
A browser-compatible implementation of [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). Data is stored
unencrypted in the file specified by the `--localstorage-file` CLI flag.
The maximum amount of data that can be stored is 10 MB.
Any modification of this data outside of the Web Storage API is not supported.
Enable this API with the `--experimental-webstorage` CLI flag.
`localStorage` data is not stored per user or per request when used in the context
of a server, it is shared across all users and requests.localStorage.Storage.setItem(key: string, value: string): voidSets the value of the pair identified by key to value, creating a new key/value pair if none existed for key previously.
Throws a "QuotaExceededError" DOMException exception if the new value couldn't be set. (Setting could fail if, e.g., the user has disabled storage for the site, or if the quota has been exceeded.)
Dispatches a storage event on Window objects holding an equivalent Storage object.
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Storage/setItem)setItem('vue-ui.show-hidden-folders', 'true')
} else {
var localStorage: Storage[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
A browser-compatible implementation of [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). Data is stored
unencrypted in the file specified by the `--localstorage-file` CLI flag.
The maximum amount of data that can be stored is 10 MB.
Any modification of this data outside of the Web Storage API is not supported.
Enable this API with the `--experimental-webstorage` CLI flag.
`localStorage` data is not stored per user or per request when used in the context
of a server, it is shared across all users and requests.localStorage.Storage.removeItem(key: string): voidRemoves the key/value pair with the given key, if a key/value pair with the given key exists.
Dispatches a storage event on Window objects holding an equivalent Storage object.
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Storage/removeItem)removeItem('vue-ui.show-hidden-folders')
}
})
</script>It works, but the logic is mixed together, and it’s hard to tell what this component does without reading all the details.
After Refactoring with Inline Composables
Now let’s apply Extract Function inside Vue. We’ll group logic into focused composables:
// src/components/FolderManager.vue
<type script = /*unresolved*/ anyscript setup>
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.ref, function watch<T, Immediate extends Readonly<boolean> = false>(source: WatchSource<T>, cb: WatchCallback<T, MaybeUndefined<T, Immediate>>, options?: WatchOptions<Immediate>): WatchHandle (+3 overloads)watch } from 'vue'
import { import useQueryuseQuery, import mutatemutate } from 'vue-apollo'
import import FOLDERS_FAVORITEFOLDERS_FAVORITE from '@/graphql/folder/favoriteFolders.gql'
import import FOLDER_SET_FAVORITEFOLDER_SET_FAVORITE from '@/graphql/folder/folderSetFavorite.gql'
const { const showHiddenFolders: Ref<boolean, boolean>showHiddenFolders } = function useHiddenFolders(): {
showHiddenFolders: Ref<boolean, boolean>;
}
const favoriteFolders: anyfavoriteFolders, const toggleFavorite: (currentFolderData: any) => Promise<void>toggleFavorite } = function useFavoriteFolders(): {
favoriteFolders: any;
toggleFavorite: (currentFolderData: any) => Promise<void>;
}
function useHiddenFolders(): {
showHiddenFolders: Ref<boolean, boolean>;
}
const showHiddenFolders: Ref<boolean, boolean>showHiddenFolders = ref<boolean>(value: boolean): Ref<boolean, boolean> (+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.ref(var localStorage: Storage[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
A browser-compatible implementation of [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). Data is stored
unencrypted in the file specified by the `--localstorage-file` CLI flag.
The maximum amount of data that can be stored is 10 MB.
Any modification of this data outside of the Web Storage API is not supported.
Enable this API with the `--experimental-webstorage` CLI flag.
`localStorage` data is not stored per user or per request when used in the context
of a server, it is shared across all users and requests.localStorage.Storage.getItem(key: string): string | nullReturns the current value associated with the given key, or null if the given key does not exist.
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Storage/getItem)getItem('vue-ui.show-hidden-folders') === 'true')
watch<boolean, false>(source: WatchSource<boolean>, cb: WatchCallback<boolean, boolean>, options?: WatchOptions<false> | undefined): WatchHandle (+3 overloads)watch(const showHiddenFolders: Ref<boolean, boolean>showHiddenFolders, (value: Ref<boolean, boolean>value) => {
if (value: Ref<boolean, boolean>value) {
var localStorage: Storage[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
A browser-compatible implementation of [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). Data is stored
unencrypted in the file specified by the `--localstorage-file` CLI flag.
The maximum amount of data that can be stored is 10 MB.
Any modification of this data outside of the Web Storage API is not supported.
Enable this API with the `--experimental-webstorage` CLI flag.
`localStorage` data is not stored per user or per request when used in the context
of a server, it is shared across all users and requests.localStorage.Storage.setItem(key: string, value: string): voidSets the value of the pair identified by key to value, creating a new key/value pair if none existed for key previously.
Throws a "QuotaExceededError" DOMException exception if the new value couldn't be set. (Setting could fail if, e.g., the user has disabled storage for the site, or if the quota has been exceeded.)
Dispatches a storage event on Window objects holding an equivalent Storage object.
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Storage/setItem)setItem('vue-ui.show-hidden-folders', 'true')
} else {
var localStorage: Storage[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
A browser-compatible implementation of [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). Data is stored
unencrypted in the file specified by the `--localstorage-file` CLI flag.
The maximum amount of data that can be stored is 10 MB.
Any modification of this data outside of the Web Storage API is not supported.
Enable this API with the `--experimental-webstorage` CLI flag.
`localStorage` data is not stored per user or per request when used in the context
of a server, it is shared across all users and requests.localStorage.Storage.removeItem(key: string): voidRemoves the key/value pair with the given key, if a key/value pair with the given key exists.
Dispatches a storage event on Window objects holding an equivalent Storage object.
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Storage/removeItem)removeItem('vue-ui.show-hidden-folders')
}
}, { lazy: booleanlazy: true })
return { showHiddenFolders: Ref<boolean, boolean>showHiddenFolders }
}
function function useFavoriteFolders(): {
favoriteFolders: any;
toggleFavorite: (currentFolderData: any) => Promise<void>;
}
const favoriteFolders: anyfavoriteFolders = import useQueryuseQuery(import FOLDERS_FAVORITEFOLDERS_FAVORITE, [])
async function function (local function) toggleFavorite(currentFolderData: any): Promise<void>toggleFavorite(currentFolderData: anycurrentFolderData) {
await import mutatemutate({
mutation: anymutation: import FOLDER_SET_FAVORITEFOLDER_SET_FAVORITE,
variables: {
path: any;
favorite: boolean;
}
path: anypath: currentFolderData: anycurrentFolderData.path,
favorite: booleanfavorite: !currentFolderData: anycurrentFolderData.favorite
}
})
}
return {
favoriteFolders: anyfavoriteFolders,
toggleFavorite: (currentFolderData: any) => Promise<void>toggleFavorite
}
}
</script>Now the logic is clean and separated. When someone reads this component, they can understand the responsibilities at a glance:
const { const showHiddenFolders: anyshowHiddenFolders } = useHiddenFolders()
const { const favoriteFolders: anyfavoriteFolders, const toggleFavorite: anytoggleFavorite } = useFavoriteFolders()Each piece of logic has a descriptive name, with implementation details encapsulated in their own functions, following the Extract Function pattern.
Best Practices
- Use inline composables when your
<script setup>is getting hard to read - Group related state, watchers, and async logic by responsibility
- Give composables clear, descriptive names that explain their purpose
- Keep composables focused on a single concern
- Consider moving composables to separate files if they become reusable across components
When to Use Inline Composables
- Your component contains related pieces of state and logic
- The logic is specific to this component and not ready for sharing
- You want to improve readability without creating new files
- You need to organize complex component logic without over-engineering
Conclusion
The inline composable technique in Vue is a natural extension of Martin Fowler’s Extract Function. Here’s what you get:
- Cleaner, more organized component code
- Better separation of concerns
- Improved readability and maintainability
- A stepping stone towards reusable composables
Try using inline composables in your next Vue component. It’s one of those small refactors that will make your code better without making your life harder.
You can see the full example in Evan You’s gist here:
https://gist.github.com/yyx990803/8854f8f6a97631576c14b63c8acd8f2e