",{"type":24,"value":280}," component",{"type":24,"value":282},", in large part when it comes to styling, animation, page routing, global state management, data fetching, etc, you're in for a dizzying array of choice, and the choice in each problem category has their own set of longer term consequences and factors to consider in addition to deciding on React itself. It's enough not just to write its own article about, but you could argue each individual category demands its own article and deep dive.",{"type":18,"tag":26,"props":284,"children":285},{},[286,288,295,297,301],{"type":24,"value":287},"On the opposite end of this spectrum is ",{"type":18,"tag":80,"props":289,"children":292},{"href":290,"rel":291},"https://angular.dev/",[84],[293],{"type":24,"value":294},"Angular",{"type":24,"value":296},", which in large part comes with its own solutions to these problems and more as part of the framework itself. I admit my experience with Angular is minimal so I can't speak with as much confidence, but what I have gathered is that it is quite uncommon to stray from what is provided out of the box if your project needs require. This makes it an excellent option when you need to eliminate as much choice as possible, but I feel this can limit your ability to scale ",{"type":18,"tag":54,"props":298,"children":299},{},[300],{"type":24,"value":146},{"type":24,"value":302}," by a not insignificant amount.",{"type":18,"tag":26,"props":304,"children":305},{},[306,308,322,324,331,333,339,341,348,350,357,359,366,368,375],{"type":24,"value":307},"This is something I see as another huge strength of Vue. I think it strikes the perfect balance of not having so many options available to overwhelm, while still giving you the flexibility of selecting alternative or completely eliminating solutions when required. Vue has included a ",{"type":18,"tag":80,"props":309,"children":312},{"href":310,"rel":311},"https://vuejs.org/guide/built-ins/transition",[84],[313,315,321],{"type":24,"value":314},"baked in ",{"type":18,"tag":32,"props":316,"children":318},{"className":317},[],[319],{"type":24,"value":320},"\u003CTransition />",{"type":24,"value":280},{"type":24,"value":323}," for powerful animations for years, has built-in options for styling components using ",{"type":18,"tag":80,"props":325,"children":328},{"href":326,"rel":327},"https://vuejs.org/guide/scaling-up/sfc",[84],[329],{"type":24,"value":330},"Single File Components",{"type":24,"value":332}," and a ",{"type":18,"tag":32,"props":334,"children":336},{"className":335},[],[337],{"type":24,"value":338},"\u003Cstyle>",{"type":24,"value":340}," tag, and has powerful official core team developed solutions to ",{"type":18,"tag":80,"props":342,"children":345},{"href":343,"rel":344},"https://router.vuejs.org/",[84],[346],{"type":24,"value":347},"routing",{"type":24,"value":349}," and ",{"type":18,"tag":80,"props":351,"children":354},{"href":352,"rel":353},"https://pinia.vuejs.org/",[84],[355],{"type":24,"value":356},"global state management",{"type":24,"value":358},". Even more recently, there is a promising ",{"type":18,"tag":80,"props":360,"children":363},{"href":361,"rel":362},"https://pinia-colada.esm.dev/",[84],[364],{"type":24,"value":365},"data fetching solution",{"type":24,"value":367}," that models after the wonderful ",{"type":18,"tag":80,"props":369,"children":372},{"href":370,"rel":371},"https://tanstack.com/query",[84],[373],{"type":24,"value":374},"TanStack Query",{"type":24,"value":376}," for data fetching needs.",{"type":18,"tag":26,"props":378,"children":379},{},[380,382,387],{"type":24,"value":381},"The best part in my mind is literally every single one of these solutions are optional. Even the ",{"type":18,"tag":32,"props":383,"children":385},{"className":384},[],[386],{"type":24,"value":320},{"type":24,"value":388}," component, while a baked in core feature, will be code split from your bundle when using a capable bundler if it is unused in your project. Should you desire, you can seek out and use other available options. But there is beauty in the fact that you don't have to. These solutions are battle tested and proven to handle even the largest application's needs.",{"type":18,"tag":105,"props":390,"children":392},{"id":391},"vue-is-for-the-web",[393],{"type":24,"value":394},"Vue Is For The Web",{"type":18,"tag":26,"props":396,"children":397},{},[398,400,407,409,416,418,425,427,434],{"type":24,"value":399},"Depending on your needs, this can be a pro, a con, or mostly inconsequential. But Vue is in large part rooted in the web and the needs of web development. This doesn't mean it's impossible to write ",{"type":18,"tag":80,"props":401,"children":404},{"href":402,"rel":403},"https://nativescript-vue.org/",[84],[405],{"type":24,"value":406},"native applications using Vue syntax",{"type":24,"value":408},", but it is a much less common use case than the popular, powerful, and mature ecosystem around ",{"type":18,"tag":80,"props":410,"children":413},{"href":411,"rel":412},"https://reactnative.dev/",[84],[414],{"type":24,"value":415},"React Native",{"type":24,"value":417},". I'll be blunt; if your project requires a true native application (and not even a ",{"type":18,"tag":80,"props":419,"children":422},{"href":420,"rel":421},"https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps",[84],[423],{"type":24,"value":424},"PWA",{"type":24,"value":426}," can meet requirements), I am not even close to recommending a Vue based solution. React Native with ",{"type":18,"tag":80,"props":428,"children":431},{"href":429,"rel":430},"https://expo.dev/",[84],[432],{"type":24,"value":433},"Expo",{"type":24,"value":435}," is a wonderful developer experience that I can personally attest to and is absolutely worth using.",{"type":18,"tag":26,"props":437,"children":438},{},[439,441,448],{"type":24,"value":440},"But for people in my case who, outside of fringe projects, live and breathe the web, Vue is the most natural and comfortable fit. This feeling is not accidental either; Vue's template syntax was designed to be fully compliant HTML. From the ",{"type":18,"tag":80,"props":442,"children":445},{"href":443,"rel":444},"https://vuejs.org/guide/essentials/template-syntax",[84],[446],{"type":24,"value":447},"Vue docs",{"type":24,"value":449},":",{"type":18,"tag":451,"props":452,"children":453},"blockquote",{},[454],{"type":18,"tag":26,"props":455,"children":456},{},[457],{"type":24,"value":458},"All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.",{"type":18,"tag":26,"props":460,"children":461},{},[462,464,471,473,479,481,488,490,496,498,504,506,512,514,520,522,529],{"type":24,"value":463},"This is a point that I feel often gets glossed over in ",{"type":18,"tag":80,"props":465,"children":468},{"href":466,"rel":467},"https://x.com/ThePrimeagen/status/1874975481034096685",[84],[469],{"type":24,"value":470},"discussions around Vue's template syntax",{"type":24,"value":472},". It's easy to knee jerk looking at a div with a ",{"type":18,"tag":32,"props":474,"children":476},{"className":475},[],[477],{"type":24,"value":478},"v-if",{"type":24,"value":480}," attribute inside it and feel a little disturbed at how far it strays from a more JavaScript-like syntax using JSX. But this decision was ",{"type":18,"tag":80,"props":482,"children":485},{"href":483,"rel":484},"https://x.com/youyuxi/status/1664643797853122562",[84],[486],{"type":24,"value":487},"not made on a whim or purely for stylistic reasons",{"type":24,"value":489},". It is this way because it still remains entirely valid HTML. In theory, if you copy Vue template code that does not rely on data binding directly from a component to an HTML file it will render without issues. No ",{"type":18,"tag":32,"props":491,"children":493},{"className":492},[],[494],{"type":24,"value":495},"className",{"type":24,"value":497}," or ",{"type":18,"tag":32,"props":499,"children":501},{"className":500},[],[502],{"type":24,"value":503},"htmlFor",{"type":24,"value":505}," attributes to rename, no stripping of ",{"type":18,"tag":32,"props":507,"children":509},{"className":508},[],[510],{"type":24,"value":511},"{#if value}",{"type":24,"value":513}," ",{"type":18,"tag":32,"props":515,"children":517},{"className":516},[],[518],{"type":24,"value":519},"{/if}",{"type":24,"value":521}," logic a-la ",{"type":18,"tag":80,"props":523,"children":526},{"href":524,"rel":525},"https://svelte.dev/docs/svelte/if",[84],[527],{"type":24,"value":528},"Svelte",{"type":24,"value":530},", it is (and always will be) HTML compliant.",{"type":18,"tag":26,"props":532,"children":533},{},[534],{"type":24,"value":535},"You can argue that trade-off doesn't matter, and honestly in most cases I think you're right! But going back to solutions that scale, if you're looking at a project that is intended to be maintained and running decades into the future; a future where the existence of individual frameworks like React/Vue/Svelte/Solid are uncertain, how far do you really want to stray from web standards? It may not matter to most, but it could be absolutely critical to some. Vue is full of solutions with this mindset. It feels like a framework built to be resilient to the test of time. It's not perfect, the migration from Vue 2 and Vue 3 a prime example of its own hurdles and challenges, but core fundamental choices have been made that shape the framework around the web and that is something I personally see value in and align with.",{"type":18,"tag":105,"props":537,"children":539},{"id":538},"conclusion",[540],{"type":24,"value":541},"Conclusion",{"type":18,"tag":26,"props":543,"children":544},{},[545,547,554],{"type":24,"value":546},"I could write much more about reasons I have made Vue my front-end framework of choice, but at the end of the day so much of it is personal preference and the needs of your team, your company, your project, your customer, etc. Vue is not always the best choice for me and the projects I work on day to day either. Sometimes it doesn't have a mature enough component library (or a community maintained component library at all) for the design system being used. Sometimes it's not even an option at all like when authoring a web extension for an existing application like the Jira Marketplace (shameless plug for an extension I help work on called ",{"type":18,"tag":80,"props":548,"children":551},{"href":549,"rel":550},"https://marketplace.atlassian.com/apps/1231953/clear-path-for-jira-visual-dependency-and-backlog-manager",[84],[552],{"type":24,"value":553},"Clear Path for Jira",{"type":24,"value":555}," 😅).",{"type":18,"tag":26,"props":557,"children":558},{},[559,561,568],{"type":24,"value":560},"Also, as much as I love Vue, I also love React despite its issues, and have given Svelte a passing glance and approving look from time to time even though I have yet to use it beyond a playground. ",{"type":18,"tag":80,"props":562,"children":565},{"href":563,"rel":564},"https://svelte.dev/blog/runes",[84],[566],{"type":24,"value":567},"Svelte Runes",{"type":24,"value":569}," are an excellent example of the framework evolving in a direction I can align with, making extracting reusable logic outside of Svelte components much more straightforward and closer to the mindset of React's hooks and Vue's composition API.",{"type":18,"tag":26,"props":571,"children":572},{},[573],{"type":24,"value":574},"This is not me trying to sell you on Vue. I have nothing to gain from that anyway outside of the possibility of being able to use it on more projects in the future. It's more to explain my own reasons for enjoying it and maybe give you some food for thought the next time you're starting a web project. I also have this feeling when consuming content in the wider web development ecosystem that Vue and Nuxt are mostly glossed over in framework discussions and seemingly only mentioned as afterthoughts if mentioned at all. I would personally like to see this shift, and more firmly place Vue up with the greats and give it the recognition that I believe it deserves. Thanks for reading!",{"title":8,"searchDepth":576,"depth":576,"links":577},2,[578,579,580,581],{"id":107,"depth":576,"text":110},{"id":212,"depth":576,"text":215},{"id":391,"depth":576,"text":394},{"id":538,"depth":576,"text":541},"markdown","content:articles:why-i-like-vue.md","content","articles/why-i-like-vue.md","articles/why-i-like-vue","md",["Reactive",589],{},["Set"],["ShallowReactive",592],{"article":-1},true]