-
Why bother with Vue composables – 6 reasons to do
Why bother with Vue composables ? So it will make our lifes easier, more straightforward coding and simplified testing to say the least. Composables in Vue.js are functions that encapsulate business logic and allow it to be reused across different components. Your regular dependency inversion, composition or what ever You want to call it. Designed to make it all simple and pleasurable. Why Use Composables? Reusability Composables encapsulate logic that can be reused in multiple components. One ring to rule them all. One place to change them and in a component bind them. Something like pinia store. For example, if geospatial filtering logic is needed in more than one place,…
-
Typescript perfect sync – 3 tricks to keep it tight
Typescript perfect sync can be kept using couple of strategies. Most of us start with simple union types, like this: const ScenarioStatus = 'success' | 'fail' | 'error' | 'other'; So far so good. That works great… until you need to iterate over those values for rendering, validation, or other logic. And now You are stuck with two separate definitions: one array for logic, and one string union for the type. Sooner or later, they’ll fall out of sync and provide headaches to people. You could go for en enum…. Below behold the three TypeScript tricks to make your code tight, hard to break, cleaner, safer, DRYer and resistant to…
-
When to use Value Objects in database
Question when to use value objects in database is usually discussed during storing a new set of data. Usage of value objects should be considered while modeling abstractions that are constant / immutable and do not require unique identity. Examples can be: geospatial data, estate addresses or any categories that belong to an entity. VO also encapsulates validation logic and business rules. Helps to avoid raw strings or magic numbers. When to use it and its benefits How to map a value object in db Scenario Mapping Benefit Embed Columns in parent table (Street, City in Address) Fast reads, no joins Complex nesting JSONB/PostgreSQL or owned entities Flexible schema, validation…
-
Computed vs ref properties in Vue
Computed vs ref properties in Vue are used to manage reactive data. There are very similar but they serve different purposes and have distinct characteristics. Here’s a detailed comparison of computed and ref. Ref To obtain a reference using Composition API, You need to provide a ref attribute with a name that matches the template ref attribute’s value: <template> <input ref=”input” /> </template>. You will be able to use the methods of the component directly in the script part of the code. Computed In-template expressions / references are very convenient, but they are meant for simple operations. Front should usually READ data, backend should do computing. Too much logic in…
-
Vitest not rendering vue component
Vitest not rendering vue component might be many, hugely depends on the config but what i discovered is that…. You have to UNMOUNT the component at the end of the test. Otherwise mounting it again in the next test will just not render it, like it uses some old obsolete version of the object. Best part is that the pinia store is changing as it should. The component is not rendering the html. Code example First test will always pass, second one will pass when running it alone, solo. When running both the second one will fail due to bad managment of components. I would imagine that mounting will always…
-
Typescript default parameters in constructor for GA
Typescript default parameters are the same as in scala. While working on multple google analytics projects it is good to now we can hardcode part of the object and then just use the simple, single object in a constructor, without having to pass the default values. However !! Typescript default parameters should be the last on the parameter list in constructor That said the not optional, required and demanded parameters need to be first. Otherwise intellij or what ever other ide You use might complain and will NOT TELL YOU THAT. I love that small little things You assume would be obvious but then You spend a lot of time…
-
Script setup Vue 3 – ❮Script lang=”ts” setup❯
Script setup <Script lang=”ts” setup> is something i really appreciate after migrating from vue 2. It is a part of the new Script Setup feature introduced in Vue 3. It replaces the traditional <script> block and provides a more concise and focused way to write components. The purpose of <script setup> is to simplify component code by removing unnecessary boilerplate and reducing redundancy. What Does It Do? The code inside <script setup> is compiled as the content of the component’s setup() function. You can remember it from vue 2 for both, composition and options api.Unlike the normal <script> block, which executed only once when the component is first imported, code…
-
Vite findByText to get all the elements
Vite findByText method could help us a lot, especially while testing any kind of i18n and similar. Of course we should always get the proepr component / element but such methods are very usefull when developing and debugging, later we can scrape it all. Later, when we know it works as we expect it. FindByText method can be especially usefull when we have a big flat table that may or may not be dynamically populated. Works great as a function to watch the vaues beeing present in the dom so we can catch the proper moment. Altough we could use the debugger, i find that printing a lot of stuff…
-
!! operator in vue components
!! operator (double negation) transforms values into boolean values. This ‘!!’ operator converts any value to TRUE if it’s “truthy“, meaning it’s not a falsy value (such as false, 0, empty value, null, undefined, NaN), otherwise it converts to FALSE. !! operator examples : For example, if you have a variable myVar, and you want to check if it’s “truthy” or “falsy”, you can do it using the !! operator like this: Another example is when the !! operator helps to validate any optional variables. Somethimes we really have no idea what we will get, this can vent some issues if we need to check for a truthy or falsy…
