DEV Community

10 Tips to Write Cleaner Vue.js Code

Jakub Andrzejewski on December 09, 2024

When transitioning from one project to another (for example when changing jobs) there is always this period of time when I need to adjust to the ne...

Read full post

Stefan Schneider • Dec 17 '24 • Edited

I got a bonus. If you use vite, you might experience different parsing behavior especially when using pug as template language.
In that regard, try to avoid typescript generics in templates.

v-if="list.filter((item: Maybe<ListItem>) => item.active).length > 0"

this will works in vue, but not in the vite devserver since the vite-vue-plugin will complain about no end tag for template because it thinks the generic is also a tag.

Maxim Klochkov • Dec 24 '24

What do you mean by:

handle errors using a central utility function

Would share an example, please?

Jakub Andrzejewski • Dec 24 '24

Hey there, I have answered it here dev.to/jacobandrewsky/comment/2kcgd :)

Maxim Klochkov • Jan 9 • Edited

Hi Jakub!

Thank you for your explanation! I got the idea and I tried handling errors with try/catch in the composable:

the composable handles the error returning to you the result that you can display to a user in a friendly way. And you don't need to write try/catch in every place to achieve that as it is handled by the composable

But when I use such fetch composable in a Vue component and if there is a network or API error I get unhandled promise error message in the console anyway if it is not wrapped in try/catch:

<script setup lang="ts">
import { onMounted } from "vue"
import { useFetch } from "../composables/useFetch.js"

const { data, loading, error, fetchData } = useFetch()

onMounted(async () => {
  await fetchData("https://dummyjson.com/users")
  // unhandled promise error message if something wrong...
})
</script>

How should this console error be handled?

Jakub Andrzejewski • Jan 10

Could you share your code of useFetch.js composable? Maybe some configuration is missing from there :)

Greg, The JavaScript Whisperer • Feb 16

await fetchData("dummyjson.com/users").catch(e => console.log(e))

Fabio Cardoso • Dec 18 '24

Another tip is always you need use a Lot of if and else in your code maybe you should create custom directives in vue. Like some example

From <Button v-if="user.isAdmin" /> to <Button is-admin />

Ciphernutz • Dec 11 '24

Awesome tips! These will definitely help in writing cleaner and more efficient Vue.js code.

Emerson Cabrera • Jan 3

I loved this post, thank you. Very useful tips.

Comment deleted

Jakub Andrzejewski • Dec 19 '24

When using VueUse axios for example, you get a centralized approach to handle errors (the error property returned by the composable. This means that the composable handles the error returning to you the result that you can display to a user in a friendly way. And you don't need to write try/catch in every place to achieve that as it is handled by the composable.

If not using utility like the one above, you could create your own useApiClient composable that could be a wrapper around the fetch method that will also by default handle errors and populate a property to show you what the error code and message was.

Greg, The JavaScript Whisperer • Feb 16

Avoid Overusing Vuex or Pinia Do you have some examples of this suggestion?

Jakub Andrzejewski • Feb 17

Maybe something like creating a store for a domain that is mapped as a single boolean value? I have seen this approach few times in other projects where store was used as a default for handling state in the application and it resulted in basically writing 50 lines of code (for a store with state, mutations, getters) instead of a plain vue ref.