Responsive Product List with Cart: Vue, TailwindCSS, Pinia, RWD

Community feedback

• 

  P

  Tsukimi•780

  @hikawiPosted 20 days ago

  Ooo, I saw what you mean by the model's list being scrollable, that's a very clever way of dealing with that part. Your solution is also very well done, code is being split and super easy to follow, which is also why I like Vue a lot.

  I don't know about your issues passing data into props, it should be reactive fine, unless you try to reassign the data into another variable, and not directly accessing with props.data or using computed.

  I noticed that from screens 768px+, the buttons are too big and overlap each other really badly. Also, this is just my preferences, and might not be good practice, but decorative icons like the shopping cart and the carbon-neutral icon don't need alt text, since there is actual text content there explaining what that element is already. If there's just a button with a shopping cart icon, and nothing else, then alt text would be needed, that's what I assume.

  And about your question about frameworks, my favorite is probably Astro + Vue, which is like a SSR implementation, you can choose which part to make interactive and which to be static and rendered on server, and can integrate with UI frameworks like React, Vue, Svelte,... Because of Astro being compatible with all UI frameworks, I like Nanostores as my state management as it doesn't care about what framework. What about you? What's your favorite?

  Marked as helpful

  0

  ---

  

  Dylan Heslop•1,570

  @dylan-dot-cPosted 18 days ago

  @hikawi For me, I've only used Vue or React thus far to build projects but im planning on exploring Svelte or even ANgular one of these days.

  Anyways, for me I have used React more extensively and spent more time with it, but Vue has a few subtle differences that I appreciate alot(especially the directives). They make it easier and even cleaner to work with. I have to look at nanostores since it doesn't matter the framework your using which would be really important so I dont have to worry about pinia, zustand, redux or anything else.

  1

  

  P

  Tsukimi•780

  @hikawiPosted 17 days ago

  @dylan-dot-c Well that's really great, learning new things is always funny and depressing at the same time, recently Svelte is proposing Svelte 5, which uses similar to ref in Vue. Angular 18/19? is also doing a similar thing like ref called signals.

  Framework-agnostic stuff like Nanostores and Astro lets you write really cursed stuff, like some part you would prefer React's way of doing, and some other part you wish you could use Vue instead. Having experience with pinia, zustand and alike is also very great, I need to brush up on that too.

  0