✨ The Composition API is amazing - but organizing code is still a challenge sometimes, especially for all the people that were (or are) used to the Options API. In this video I point out common mistakes when organizing code and an easy way to avoid spaghetti code in Vue components with a bit more functionality
Key points:
✔ Building a Demo Application showing issues when organizing code
🎉 A dead-simple pattern to organize CAPI code in Vue Components
🕶 Examples from Evan himself
---
Links:
🔗 Demo App Code https://play.vuejs.org/#eNq1VVtvmzAU/iunvIRIKZk07aWj1S6qtE3qNqXR9sILIwbcGhvZJsmU5b/v2NhAaJJWkyblYuzvfOfqj13wvq6jdUOCqyBWmaS1BkV0UwNLeXGdBFolwU3CaVULqWEHkuQzyERVN5qsZrBJdVbOQP+uCSzMkRb4B3vIpahggsSThCd8Poc7olRakEtJWIqmoHST5wnPBFcahKQF5SlzILg2fsLJJ8KYgJ9CstXFZOrBO3RSFIwsyJpIRWZQOas92jWKOJJwRIr2NpAl2epLVYoNB11SXijPS9W93W2d5ylTxsafLVK+EpUxPoaydQgdwwxCTjY/UtaQKVzfwC7h8JQhWhsA8lgOC8khvOgtrRmgG91IDB1g70F3qS4jaenCKcTwKnpzEn7SrZYNet3bsuQNzzQVfFg+yrHHV6arsdISC3UDf7BrZuWcneqdnYHWHtk9TrbtWvU4P0YhJoFlGhG1gUaqZlSHk8k0cgThNHoQlJutATvm6fhHnQHokjsYG/TpKtabdrW5GO919Wy9+Yl7koOnxCaNKTp/vkfjivSenK8OeLQyNiTbvQ7nHBxej3bPRezywE88b687Xm580KSqzb3EJ4DYtg7Wl5VYEYYiMPKfBDBvgb8arbGw7zJGs0cE9lcIK2iXqB5LG048b8HHDQ9CRhu3OjRa0TUGRfPekdUmk95u16uArV08R/QRs9Ft6AiWJVVQpgpSyMqUZwTe2uHxPPF8UKJghrqIk5DTInpQgqN42tIngRkHyoj8VpuJQ+288k1JghTFbPPF7pm75xqDNiXJHo/sP6it2UuC75IoItdYl+5Mp7Iguj2+vf+K6QwOsW0NQ/SZwwVRgjUmxhb2oeErDHuAs9F+trKPN36pbreacOWTasUDZ8nikwCF/uOZ1PtwX0ev/QxiFXu5ibTCKp56zZx9v0icYPySrbX9BylD4xeK2QD5X+RswH9K0CzkjKTZ8xeKmsXuh17PCJsnPiFt7vgZcXMo5/MZgWvDsym3607mnPVI6Nyul7o+O/sT7P8C+boUAg==
🔗 VueUse useToggle https://vueuse.org/shared/usetoggle/
🔗 Evan's gist https://gist.github.com/yyx990803/8854f8f6a97631576c14b63c8acd8f2e
📺️ Is your function actually a composable
https://www.youtube.com/watch?v=N0QrFKBZuqA
Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!
🌐 Connect further:
Website: https://www.lichter.io
Twitter/X: https://twitter.com/TheAlexLichter
Twitch: https://www.twitch.tv/TheAlexLichter
Chapters:
00:00 Intro + Options vs Composition API
01:47 Demo App and Tasks
02:30 Building the feature "with Options API in mind"
05:44 Common mistake: Grouping by options
07:55 Why this is a problem
08:15 Refactoring & Reorganizing
09:26 Are we done?
10:09 Creating a composable for message-related things
13:36 The "secret sauce" - in-line composables
15:55 Learning from the master himself
17:25 Summary