Skip to content
DEV Community

DEV Community

Collapse Expand
hinogi profile image
Stefan Schneider
  • Joined
• Edited on • 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"
Enter fullscreen mode Exit fullscreen mode

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.

Collapse Expand
fabio_cardoso_52397447e3e profile image
Fabio Cardoso
  • Joined

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 />

Collapse Expand
emercab profile image
Emerson Cabrera
I am a technology and informatics professor, as well as a full-stack web developer in constant training, specializing in both frontend and backend development
  • Location
    Valledupar, Colombia
  • Joined

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

Collapse Expand
ciphernutz profile image
Ciphernutz
Ciphernutz is an AI-focused engineering and consulting company that helps businesses automate operations. We deploy intelligent workflows and build AI-powered systems that drive impact outcomes.
  • Location
    India
  • Joined

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

Collapse Expand
Sloan, the sloth mascot
Comment deleted
Collapse Expand
jacobandrewsky profile image
Jakub Andrzejewski
Senior Fullstack Developer & Advocate • @GoogleDevExpert in Web Performance • @nuxt_js Team • Ambassador @Storyblok, @algolia, @cloudinary, @supabase • Teaching Vue | Nuxt | Perf
  • Location
    Wrocław, Poland
  • Work
    Senior Developer
  • Joined

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.

Collapse Expand
jswhisperer profile image
Greg, The JavaScript Whisperer
Specialist in performance oriented javascript architecture for web, mobile, client and server side. Passionate about realtime web.
  1. Avoid Overusing Vuex or Pinia Do you have some examples of this suggestion?
Collapse Expand
jacobandrewsky profile image
Jakub Andrzejewski
Senior Fullstack Developer & Advocate • @GoogleDevExpert in Web Performance • @nuxt_js Team • Ambassador @Storyblok, @algolia, @cloudinary, @supabase • Teaching Vue | Nuxt | Perf
  • Location
    Wrocław, Poland
  • Work
    Senior Developer
  • Joined

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.

View full discussion (13 comments)

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.

For further actions, you may consider blocking this person and/or reporting abuse

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

AltStyle によって変換されたページ (->オリジナル) /