{"id":22798,"date":"2023-09-07T09:15:00","date_gmt":"2023-09-07T07:15:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=22798"},"modified":"2023-09-28T16:11:36","modified_gmt":"2023-09-28T14:11:36","slug":"building-scalable-vuejs-application","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/","title":{"rendered":"Best Practices for Building a Scalable Vue.js Application"},"content":{"rendered":"\n<p>Writing maintainable code is of paramount importance when building a scalable <a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/how-to-guide-adding-vuejs-to-your-existing-project\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Vue.js<\/a> application. The traditional Options API is good but often leads to messy code. Here is why Vue.js 3 introduced the Composition API as a powerful tool for achieving both scalability and maintainability.&nbsp;<\/p>\n\n\n\n<p>In this guide with insights and experience from the <strong><a href=\"https:\/\/digital-services.research.konicaminolta.com\/intelligent-information-management\/\" target=\"_blank\" aria-label=\"Intelligent Information Management Group of Konica Minolta's Solutions Development Centre (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Intelligent Information Management Group of Konica Minolta&#8217;s Solutions Development Centre<\/a><\/strong>, you will learn what the Composition API is and understand why it is ideal for building scalable applications, and dig into best practices to unleash its full potential.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-the-composition-api-in-vue\">What Is the Composition API in Vue?<\/h2>\n\n\n\n<p>Composition API is a new way of structuring Vue.js components introduced with Vue 3, in 2022.<\/p>\n\n\n\n<p>In detail, it is a set of APIs that allows you to build Vue components by defining and importing functions instead of declaring options.&nbsp;<\/p>\n\n\n\n<p>\u201cComposition API\u201d is an umbrella term that contains:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/vuejs.org\/api\/reactivity-core.html\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Reactivity API<\/a>: To create reactive state, computed state, and watchers. For instance, you can use the reactive() function to trigger a re-render of the component when some data changes.<\/li>\n\n\n\n<li><a href=\"https:\/\/vuejs.org\/api\/composition-api-lifecycle.html\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Lifecycle Hooks<\/a>: Individual functions that you can use inside the setup() function to programmatically hook into the component lifecycle. For example, you can use the onMounted() hook to perform specific actions when the component is mounted on the page.<\/li>\n\n\n\n<li><a href=\"https:\/\/vuejs.org\/api\/composition-api-dependency-injection.html\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Dependency Injection<\/a>: To share data between parent and child components without the need for complex prop drilling, via the provide() and inject() functions.<\/li>\n<\/ul>\n\n\n\n<p>Its goal is to address some challenges and limitations that developers face with complex component logic in the Options API, the traditional way of writing components in Vue 2.<\/p>\n\n\n\n<p>Consider the Vue component below, developed with the Options API:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/_7rbnfNPQ9Htgrn2SINHkZbvAkqEkoxGE088sdrBGYzIvZWlnYDIiJcPzVCMtQEKSoA_y6dKhciH5WalTAKtJUvBocY5-GSyrDFhpWxX0eyk50W5-6foBFxN2Fa5Um0lk9GiIuerLpvFCCPnnib-g5Y\" alt=\"Example of a Vue component written with the Options API\"\/><\/figure>\n\n\n\n<p>As shown by the colors, the code is not uniformly organized. The sort logic (in yellow) is split into three different sections. This makes the component less readable and more difficult to maintain.<\/p>\n\n\n\n<p>Now, let&#8217;s take a look at the equivalent component built with the Composition API:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/hAmBlDPIKvWEG2blrHkv3KZ3TFJLyWPRu5vflIQgx3gY_Nx6eyOz-FdLEmCeoTc1iVlAkWfl2NSY4ipG-lmlEecKyyGsAG1q0KsKzFOWq2YrrJ7SVfCg8HydmKoI7DPqaEvnVA9_NT5i8gqlUEztZRs\" alt=\"Example of a Vue component written with the Composition API\"\/><\/figure>\n\n\n\n<p>As you can see, related logic is now encapsulated together. Thus, this API promotes a function-based approach to enable reusability and achieve more maintainable code.&nbsp;<\/p>\n\n\n\n<p>If you are wondering what the setup keyword after script is, Vue 3 introduced the<a href=\"https:\/\/vuejs.org\/api\/sfc-script-setup.html\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"> &lt;script setup&gt;<\/a> syntax as a compile-time instruction for using Composition API inside Single-File Components (SFCs).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-why-use-the-vue-3-s-composition-api\">Why Use the Vue 3\u2019s Composition API?<\/h2>\n\n\n\n<p>There are five good reasons to embrace this new API.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-flexible-adoption-with-gradual-migration\">Flexible Adoption With Gradual Migration<\/h3>\n\n\n\n<p>The Composition API and the Options API can coexist. This means that you can build new components or rewrite some of them using the Composition API while keeping the rest of the project in the Options API. You do not need a full project rewrite to transition to the Composition API, but you can do it slowly and over time.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-better-code-organization\">Better Code Organization<\/h3>\n\n\n\n<p>With the Options API, complex logic is often split across different options blocks, making it challenging to achieve<a href=\"https:\/\/en.wikipedia.org\/wiki\/Separation_of_concerns\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"> separation of concerns<\/a>. Instead, the Composition API is all about organizing code more logically and cohesively as you can see in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/_i_i2XqIZ9AIpgnUaKZmaFs7-L5Pa2ds4AvyNiDgW7JeGDADqu01ITQj6z-aoescA2nb7KaPBrx4ELYt_eMURUKy9g9Vt6gFEeLg-1fFaBe3L_ZIVsQ69zlVHHsfkMF5XPz6EvGWmbDN2ZHOTdbAXhs\" alt=\"Options API vs. Composition API\"\/><\/figure>\n\n\n\n<p>Grouping related code together helps you achieve more maintainable and readable code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-increased-reusability\">Increased Reusability<\/h3>\n\n\n\n<p>In Vue.js 2,<a aria-label=\" (opens in a new tab)\" href=\"https:\/\/v2.vuejs.org\/v2\/guide\/mixins.html\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\"> mixins<\/a> were the recommended approach to distribute reusable functionalities across components. However, they suffer from namespace collisions and lead to hard-to-understand coupled code. That is why the Composition API has introduced composable functions as a mechanism to facilitate reusability while<a aria-label=\" (opens in a new tab)\" href=\"https:\/\/vuejs.org\/guide\/reusability\/composables.html#comparisons-with-other-techniques\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\"> overcoming all the drawbacks of mixins<\/a>. In Vue 3, a<a aria-label=\" (opens in a new tab)\" href=\"https:\/\/vuejs.org\/guide\/reusability\/composables.html\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\"> composable<\/a> is a function that encapsulates and can reuse <strong>stateful logic<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-improved-type-inference-in-typescript\">Improved Type Inference in TypeScript<\/h3>\n\n\n\n<p>The Composition API is designed to integrate seamlessly with <a href=\"https:\/\/www.codemotion.com\/magazine\/backend\/why-you-should-use-typescript-for-your-next-project\/\" target=\"_blank\" aria-label=\"TypeScript (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">TypeScript<\/a>, providing better type inference and reducing the need for manual type hints. Since it relies on simple variables and functions, TypeScript can infer types more effectively, making it easier for developers to write robust and type-safe code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-smaller-bundles\">Smaller Bundles<\/h3>\n\n\n\n<p>Components written with the Composition API and &lt;script setup&gt; generate smaller production bundles compared to their Options API equivalents. The reason is that the templates inside &lt;script setup&gt; are compiled as inline functions within the same scope, allowing direct access to variables without the need for an instance proxy, which results in better minification.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-use-the-composition-api-to-improve-your-vue-js-project\">How to Use the Composition API to Improve Your Vue.js Project<\/h2>\n\n\n\n<p>The inherent simplicity of the Options API discourages some developers from trying the Composition API. The main reason is that the latter does not provide a guided approach to coding. Its more flexible nature can disorient users, especially at the beginning.&nbsp;<\/p>\n\n\n\n<p>All you need to get the most out of it are some great Composition API best practices. Let\u2019s see them all!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-encapsulate-logic-in-composables-for-reusability\">1. Encapsulate Logic in Composables for Reusability<\/h3>\n\n\n\n<p>Composables are key to creating business logic or utility modules that help you reduce code duplication. Encapsulate related logic into composable functions to create reusable units that can be shared across multiple components.&nbsp;<\/p>\n\n\n\n<p>For example, you can create a useEventListener() composable to handle events:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ event-listener.js<\/span>\n<span class=\"hljs-keyword\">import<\/span> { onMounted, onUnmounted } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'vue'<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">useEventListener<\/span>(<span class=\"hljs-params\">target, event, callback<\/span>) <\/span>{\n  <span class=\"hljs-comment\">\/\/ register the event lister when the component gets mounted<\/span>\n  <span class=\"hljs-comment\">\/\/ and unregister it when the component no longer exists<\/span>\n  onMounted(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> target.addEventListener(event, callback))\n  onUnmounted(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> target.removeEventListener(event, callback))\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Keep in mind that the naming convention for composable functions involves a camel case name that starts with \u201cuse.\u201d<\/p>\n\n\n\n<p>Then, you can that function in any component:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>Mouse position is ({{ x }}, {{ y }})<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">setup<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">import<\/span> { useEventListener } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/event-listener.js'<\/span>\n\n  <span class=\"hljs-comment\">\/\/ define some reactive state to keep track of <\/span>\n  <span class=\"hljs-comment\">\/\/ the data returned by the composable<\/span>\n  <span class=\"hljs-keyword\">const<\/span> x = ref(<span class=\"hljs-number\">0<\/span>)\n  <span class=\"hljs-keyword\">const<\/span> y = ref(<span class=\"hljs-number\">0<\/span>)\n\n  <span class=\"hljs-comment\">\/\/ the event listener callback<\/span>\n  <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">update<\/span>(<span class=\"hljs-params\">event<\/span>) <\/span>{\n    x.value = event.pageX\n    y.value = event.pageY\n  }\n\n  <span class=\"hljs-comment\">\/\/ register the event listener <\/span>\n  useEventListener(<span class=\"hljs-built_in\">window<\/span>, <span class=\"hljs-string\">\"mousemove\"<\/span>, update)\n\n  <span class=\"hljs-keyword\">return<\/span> { x, y }\n\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>All you have to do is import the composable and then call it to perform the desired action.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Take Advantage of the Reactive State for Dynamic Updates<\/h2>\n\n\n\n<p>The recommended way to use the reactive state is through the<a href=\"https:\/\/vuejs.org\/api\/reactivity-core.html#ref\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"> ref()<\/a> function, which takes the argument and returns it wrapped within an object with a value property. Whenever a ref is modified, Vue triggers a re-render of only the components that rely on it. Take advantage of this feature to build a dynamic and performance-oriented user experience.&nbsp;<\/p>\n\n\n\n<p>When it comes to storing non-primitive values, you can also use the<a href=\"https:\/\/vuejs.org\/guide\/essentials\/reactivity-fundamentals.html#reactive\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"> reactive()<\/a> API. Unlike ref(), this works only with objects. See it in action in the example below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"increment\"<\/span>&gt;<\/span>Increment<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Count: {{ state.count }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">setup<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">import<\/span> { reactive } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'vue'<\/span>\n\n<span class=\"hljs-keyword\">const<\/span> state = reactive({\n  <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-number\">0<\/span>,\n})\n\n<span class=\"hljs-keyword\">const<\/span> increment = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n  state.count++\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This code defines a Vue.js component with a button. When clicked, the count variable gets incremented and the component is re-rendered to display the current count value.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Derive Data with Computed Properties for Efficient Calculations<\/h3>\n\n\n\n<p><a href=\"https:\/\/vuejs.org\/guide\/essentials\/computed.html\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Computed properties<\/a> enable you to perform automatic calculations based on other data. You can define them with<a href=\"https:\/\/vuejs.org\/api\/reactivity-core.html#computed\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"> computed()<\/a>, which takes a getter function and returns its value in a read-only reactive ref object. In other words, computed properties are functions that automatically update when their dependent reactive data changes. Harness this functionality for caching values automatically generated when their reactive dependencies change.<\/p>\n\n\n\n<p>Use computed properties as in the following examples:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"increment\"<\/span>&gt;<\/span>Increment width<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span>&gt;<\/span>Width:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">v-model<\/span>=<span class=\"hljs-string\">\"state.width\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"number\"<\/span> \/&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span>&gt;<\/span>Height:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">v-model<\/span>=<span class=\"hljs-string\">\"state.height\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"number\"<\/span> \/&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Area: {{ area }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">setup<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">import<\/span> { reactive, computed } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'vue'<\/span>\n\n<span class=\"hljs-keyword\">const<\/span> state = reactive({\n  <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">10<\/span>,\n  <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">5<\/span>,\n})\n\n<span class=\"hljs-keyword\">const<\/span> increment = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n  state.width++\n}\n\n<span class=\"hljs-comment\">\/\/ create a property that automatically updates<\/span>\n<span class=\"hljs-comment\">\/\/ when the reactive state changes<\/span>\n<span class=\"hljs-keyword\">const<\/span> area = computed(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> state.width * state.height)\n\n<span class=\"hljs-keyword\">return<\/span> { state, area }\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The first time the component renders, area will store 50 (10 * 5). After clicking \u201cIncrement,\u201d it will contain 55 (11 * 5), and so on. As you can notice, area is always up-to-date.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Master the Lifecycle Hooks to Gain Control Over Components<\/h3>\n\n\n\n<p>Lifecycle hooks like onMounted(), onUpdated(), and onBeforeUnmount() allow you to perform actions at specific stages of a component&#8217;s life on a page. Being aware of<a href=\"https:\/\/vuejs.org\/api\/composition-api-lifecycle.html\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"> all the hooks<\/a> available and using them effectively is crucial to write great components. To learn more about how they work, check out the official<a href=\"https:\/\/vuejs.org\/guide\/essentials\/lifecycle.html#lifecycle-diagram\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"> lifecycle hook diagram<\/a>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Embrace Dependency Injection for Loose Coupling<\/h3>\n\n\n\n<p>Dependency injection promotes modularity and maintainability in your components. Utilize the<a href=\"https:\/\/vuejs.org\/api\/composition-api-dependency-injection.html#provide\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"> provide()<\/a> and<a href=\"https:\/\/vuejs.org\/api\/composition-api-dependency-injection.html#inject\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"> inject()<\/a> functions to share data between components in the same tree without having to pass them down via props. This avoids boilerplate code and makes your components more flexible.&nbsp;<\/p>\n\n\n\n<p>Understand how this mechanism works in this example:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n  <span class=\"hljs-comment\">&lt;!-- ... --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">setup<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">import<\/span> { provide } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'vue'<\/span>\n\n<span class=\"hljs-comment\">\/\/ provide a message to all its ancestors<\/span>\nprovide(<span class=\"hljs-string\">'message'<\/span>, <span class=\"hljs-string\">'I am your father!'<\/span>)\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In a child component of the root component above, you can then read the message:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>{{ parentMessage }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n\n\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">setup<\/span>&gt;<\/span><span class=\"javascript\">\n\n<span class=\"hljs-keyword\">import<\/span> { inject } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'vue'<\/span>\n\n<span class=\"hljs-comment\">\/\/ access the message from the father<\/span>\n\n<span class=\"hljs-keyword\">const<\/span> parentMessage = inject(<span class=\"hljs-string\">'message'<\/span>)\n\n<span class=\"hljs-keyword\">return<\/span> { parentMessage }\n\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This will print \u201cI am your father!\u201d<\/p>\n\n\n\n<p>To update the state in injector components, pass to provide() an object with a ref value and a function that is responsible for mutating its value:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> { provide, ref } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'vue'<\/span>\n\n<span class=\"hljs-keyword\">const<\/span> city = ref(<span class=\"hljs-string\">'New York'<\/span>)\n\n<span class=\"hljs-comment\">\/\/ the \"setter\" function for the reactive state<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">updateLocation<\/span>(<span class=\"hljs-params\">city<\/span>) <\/span>{\n  location.value = city\n}\n\nprovide(<span class=\"hljs-string\">'city'<\/span>, {\n  city,\n  updateCity\n})\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>In this article, you learned why adopting the Composition API in Vue.js opens up a world of possibilities. By encapsulating logic in composable functions, leveraging reactive state, and mastering lifecycle hooks, you can gain better control over your components and improve code quality.&nbsp;<\/p>\n\n\n\n<p>Thanks to the best practices shown here, you now know how to adopt the Composition API to create flexible, efficient, and modern Vue.js applications. Building easy-to-maintain applications that can scale effortlessly has never been easier!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.linkedin.com\/company\/konica-minolta-research-digital-services\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"975\" height=\"250\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Banner-Konica-Minolta.png\" alt=\"\" class=\"wp-image-22799\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Banner-Konica-Minolta.png 975w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Banner-Konica-Minolta-300x77.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Banner-Konica-Minolta-768x197.png 768w\" sizes=\"auto, (max-width: 975px) 100vw, 975px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Writing maintainable code is of paramount importance when building a scalable Vue.js application. The traditional Options API is good but often leads to messy code. Here is why Vue.js 3 introduced the Composition API as a powerful tool for achieving both scalability and maintainability.&nbsp; In this guide with insights and experience from the Intelligent Information&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/\">Read more<\/a><\/p>\n","protected":false},"author":160,"featured_media":22803,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[6],"tags":[10863],"collections":[],"class_list":{"0":"post-22798","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend","8":"tag-vue-js","9":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Best Practices for Building a Scalable Vue.js Application - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Discover how to create a scalable and maintainable Vue.js application in this step by step guide. Code examples and best practices included!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Best Practices for Building a Scalable Vue.js Application\" \/>\n<meta property=\"og:description\" content=\"Discover how to create a scalable and maintainable Vue.js application in this step by step guide. Code examples and best practices included!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-07T07:15:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-28T14:11:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Antonello Zanini\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Antonello Zanini\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/\"},\"author\":{\"name\":\"Antonello Zanini\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a\"},\"headline\":\"Best Practices for Building a Scalable Vue.js Application\",\"datePublished\":\"2023-09-07T07:15:00+00:00\",\"dateModified\":\"2023-09-28T14:11:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/\"},\"wordCount\":1358,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app.jpg\",\"keywords\":[\"Vue.js\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/\",\"name\":\"Best Practices for Building a Scalable Vue.js Application - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app.jpg\",\"datePublished\":\"2023-09-07T07:15:00+00:00\",\"dateModified\":\"2023-09-28T14:11:36+00:00\",\"description\":\"Discover how to create a scalable and maintainable Vue.js application in this step by step guide. Code examples and best practices included!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app.jpg\",\"width\":1024,\"height\":1024,\"caption\":\"scalable vue.js application\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Best Practices for Building a Scalable Vue.js Application\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a\",\"name\":\"Antonello Zanini\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g\",\"caption\":\"Antonello Zanini\"},\"description\":\"I'm a software engineer, but I prefer to call myself a Technology Bishop. Spreading knowledge through writing is my mission.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/antonello-zanini?originalSubdomain=it\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Best Practices for Building a Scalable Vue.js Application - Codemotion Magazine","description":"Discover how to create a scalable and maintainable Vue.js application in this step by step guide. Code examples and best practices included!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/","og_locale":"en_US","og_type":"article","og_title":"Best Practices for Building a Scalable Vue.js Application","og_description":"Discover how to create a scalable and maintainable Vue.js application in this step by step guide. Code examples and best practices included!","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2023-09-07T07:15:00+00:00","article_modified_time":"2023-09-28T14:11:36+00:00","og_image":[{"width":1024,"height":1024,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app.jpg","type":"image\/jpeg"}],"author":"Antonello Zanini","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Antonello Zanini","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/"},"author":{"name":"Antonello Zanini","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a"},"headline":"Best Practices for Building a Scalable Vue.js Application","datePublished":"2023-09-07T07:15:00+00:00","dateModified":"2023-09-28T14:11:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/"},"wordCount":1358,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app.jpg","keywords":["Vue.js"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/","name":"Best Practices for Building a Scalable Vue.js Application - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app.jpg","datePublished":"2023-09-07T07:15:00+00:00","dateModified":"2023-09-28T14:11:36+00:00","description":"Discover how to create a scalable and maintainable Vue.js application in this step by step guide. Code examples and best practices included!","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app.jpg","width":1024,"height":1024,"caption":"scalable vue.js application"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-scalable-vuejs-application\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"Best Practices for Building a Scalable Vue.js Application"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a","name":"Antonello Zanini","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g","caption":"Antonello Zanini"},"description":"I'm a software engineer, but I prefer to call myself a Technology Bishop. Spreading knowledge through writing is my mission.","sameAs":["https:\/\/www.linkedin.com\/in\/antonello-zanini?originalSubdomain=it"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app-600x600.jpg","author_info":{"display_name":"Antonello Zanini","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app.jpg",1024,1024,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app-300x300.jpg",300,300,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app-768x768.jpg",768,768,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app.jpg",1024,1024,false],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app.jpg",1024,1024,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app.jpg",1024,1024,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app.jpg",100,100,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/scalable-Vue.js-app-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Antonello Zanini","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/"},"uagb_comment_info":0,"uagb_excerpt":"Writing maintainable code is of paramount importance when building a scalable Vue.js application. The traditional Options API is good but often leads to messy code. Here is why Vue.js 3 introduced the Composition API as a powerful tool for achieving both scalability and maintainability.&nbsp; In this guide with insights and experience from the Intelligent Information&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/22798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/160"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=22798"}],"version-history":[{"count":11,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/22798\/revisions"}],"predecessor-version":[{"id":23556,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/22798\/revisions\/23556"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/22803"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=22798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=22798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=22798"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=22798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}