Read the entire article, but I really don't see what this brings to the table that Vue doesn't already do. The way you did this Alpine example is exactly how I do things in Vue and Xperience right now. And now I'm not having to learn yet another frontend framework.
Lead Product Evangelist @Kentico, Founding partner @craftbrewingbiz. love to learn / teach web dev & software engineering, collecting vinyl records, mowing my lawn, craft 🍺
If these aren't goals that your projects need to focus on, then Vue is probably good enough.
In regards to learning 'yet another framework', Alpine's API surface is extremely small, and it actually uses Vue's reactivity system internally! It's HTML directives also share a lot of the same conventions as Vue's, and the store that Alpine exposes for sharing state across components can be used just like Vuex (and with less ceremony).
Our team takes the following approach:
Are we building a complex component tree? ✅ Vue
Does this content need to be in the DOM without executing JavaScript for SEO/accessibility/performance? ✅ Alpine
The reason I chose a simple example that could be done with Vue isn't to make the point that Vue can do everything Alpine can, it's instead to show that adopting Alpine isn't that complex, especially if a dev is already familiar with Vue (or the other popular frameworks).
Also, I wrote this when Alpine 2.x was the latest version. Alpine 3.x is out now and didn't make any breaking changes (that we've experienced) with the previous version, but it did improve a lot of the boilerplate for creating components and shared state. In my opinion, it's even better now.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Read the entire article, but I really don't see what this brings to the table that Vue doesn't already do. The way you did this Alpine example is exactly how I do things in Vue and Xperience right now. And now I'm not having to learn yet another frontend framework.
Hey Steve!
The main benefit of Alpine is being able to rely on server-side rendering for the page's content. This reduces Cumulative Layout Shift, improves crawlability for search engines (and potentially First Contentful Paint depending on your architecture), and improves the Time to Interactive because the DOM is already there.
If these aren't goals that your projects need to focus on, then Vue is probably good enough.
In regards to learning 'yet another framework', Alpine's API surface is extremely small, and it actually uses Vue's reactivity system internally! It's HTML directives also share a lot of the same conventions as Vue's, and the store that Alpine exposes for sharing state across components can be used just like Vuex (and with less ceremony).
Our team takes the following approach:
The reason I chose a simple example that could be done with Vue isn't to make the point that Vue can do everything Alpine can, it's instead to show that adopting Alpine isn't that complex, especially if a dev is already familiar with Vue (or the other popular frameworks).
Also, I wrote this when Alpine 2.x was the latest version. Alpine 3.x is out now and didn't make any breaking changes (that we've experienced) with the previous version, but it did improve a lot of the boilerplate for creating components and shared state. In my opinion, it's even better now.