Anyone moved from React to Vue. I've been reading the Vue docs and I like some things about it but the compositional model seems a bit more confusing compared to React.
Also, I think I do prefer working with JSX versus using html templates. I prefer that close coupling of JS logic and JSX presentation.
The most appealing thing about Vue is that it seems to be more of a framework, maybe somewhere in the middle between base React/ReactDOM and Next.js.
I just started cobbling together a demo jquery app mess into a vue3 app yesterday, and lemme tell ya, the docs are great, and I even got from 0 to VueX in few hours today.
I'm impressed. Great work Vue team. I'm normally hesitant to adopt a new version of a library when learning and expected to get bitten by a few more things but so far seems mature, stable, and well done.
Edit: That said, I'm still personally not in love with the .vue file structure of mixing languages, but I get it.
The <script> and <style> tag default to Javascript and CSS languages in HTML but Vue's compiler allows you to use other languages like Typescript or Sass automatically (assuming you have the dependencies installed). You can also similarly have the code inline between the tags or point to a separate external file with the src="..." attribute.
I had much the same experience as you some 4 years ago. The exception was that I was heavily into Angular1 so Vue felt completely natural.
The one page vue file made a lot of sense to me off the bat, sort of implying that the component is a singular "encapsulated" entity, at least thats my own mental model. Turns out it was completely wrong but it worked.
I think my favourite thing about Vue 3 and the composition API is that VueX is essentially obsolete - you can manage your global state by calling real life functions.
This means instead of doing `dispatch("action")` you just call `action()`.
When using Typescript this is a godsend, as the action functions keep all of their type information.
I really wonder if all developers that really like jsx + inline grapql aren't old school php4 developers that were writing php logic and sql queries in the view itself.
those were the days! I was really productive in that mode, although the quality of output was 1/10 at best. Buggy, insecure, etc. Don't even talk about maintainability! But, but! You got it done real fast and most of the time for some random website that doesnt handle money, who cares?
JSX means you're actually programmatically generating your UI, rather than just injecting some stuff into a template and/or worse, bolting on logic by abusing the templating language. My mental model when using JSX is pretty much the opposite of that of the PHP 4 days of yore.
<script setup> is going to bring Vue closer to Svelte and solve the problems of long list of refs returned and .value's everywhere. When I checked an early draft last year I recall some limitations due to lack or inadequate support for non-setup component options, but from skimming https://v3.vuejs.org/api/sfc-script-setup.html I got the impression that most of the limitations have been ironed out. Really excited to try this out.
Edit: Actually it seems that a solution to .value's everywhere has been postponed and is currently discussed in https://github.com/vuejs/rfcs/discussions/369. The current iteration still requires unwrapping inside the script tag. The docs doesn't seem to make this clear since the examples are too simple...
I was really excited for Vue3 and constantly being told at the Austin VueConf that it will be backwards compatible. But reality was very very different.
There are a bunch of breaking changes to Vue 3 that will require code changes, and whilst the vue compat package is meant to alleviate some of that it was only released as of v3.1 and still does not handle all the breaking changes.
Some of these breaking changes also seem like they could have been been a good addition and not a full breaking change. Consider the v-model changes, why change the underlying events? You could have it work both the old and new way and log a deprecation warning for the old way. Give engineers more time to fix the code as they see these issues with out breaking.
Probably the biggest pain point I have hit with moving to v3 is the state of vue-test-utils, it is still in RC. Honestly I would have loved to seen this released in lock step with Vue, I mean it really should if it is how you are meant to unit test your components.
That being said obviously a lot of my pain is coming from v2 to v3 I imagine being green field the experience would be fantastic. I still really love using Vue just the upgrade has left a bit of a sour taste in my mouth.
Vue 3 has definitely been a terrible launch for such a large framework. Many of the official supporting libraries are out of sync, the devtools don't work and require a manual beta install, and other projects like nuxt.js seem to be in a perpetual delay. It's unfortunate as Vue was known for having a strong lead and consistent releases but it's too much of a mess right now.
I'm really tired with React recently so I was looking at the competition and really liked Svelte. For those that know Vue, how does Svelte stack up with it?
Obviously the Vue ecosystem is much larger but other than that, personally, I much prefer Svelte.
I used Vue 2 as my main framework for some years, and still maintain a couple of projects with it.
I'm now focused on Svelte. The performance is better, the bundle sizes are much smaller, and most importantly you write a fraction of the code to achieve the same thing.
Svelte also has a reactive primitive (they call them stores) which allows you to model pretty much anything with reactivity similar to what you'd do with MobX but with a fraction of the cost. I believe Vue 3 also has this now but uses Proxy which is not supported in older browsers.
We've been pretty happy with Vue 2.6 and haven't had the motivation to take the leap.
I did try it and even though it's advertised as somewhat backward compatible it did break lots of things, which was totally expected and it's a major release.
Also we couldn't figure out a lot of things, like how can I access the $children like before, why does everything show Object proxy in console, etc. Posting on SO and forums also didn't yeild much help since everyone is still discovering it too I guess.
So in the end we decided why fix something which ain't broken for now. Vue 2 still kicks ass performance wise and is really easy to use.
There's a migration build available which will allow you to migrate more gracefully, should you choose to change your mind. (It runs the Vue 3 runtime with Vue 2.6 + 3 APIs.)
There is gonna be a Vue 2.7 that backports a lot of 3 functionality (particularly the Composition API, which is available in 2.x as a plugin currently but with caveats), so I don't think there's any pressure to upgrade even from the Vue team themselves.
I believe `npm install vue` even still gives you Vue 2.
I quit my tech job in 2020 to learn new technologies and build my own startup - I made a HUGE bet on Vue and kinda regret it.
In the first half of 2021, I dove deep into Vue, Vuex, Nuxt.js (basically Next.js), Gridsome (basically Gatsby.js), and even coded a startup idea using Vue + Electron + FFmpeg[0] before moving to React. Three main reasons for this switch:
- Community Support: React has better support for lots of JS libraries. For example, I made a markdown editor which required the use of CodeMirror and the React NPM library for that was updated 1 year ago while the Vue library was updated 3 years ago. There's a lot of international support for Vue and some of the NPM libraries (like the CodeMirror one) are partially (or fully) documented in Chinese so this is a drawback as well.
- Typescript: Vue 3 is built from the bottom up with TypeScript but it was only released in September 2020. Most of the community thinks Vue 3 is better than Vue 2 in TS support, but still not as good as React. Additionally, since TS support has only recently been offered, libraries (like Nuxt.js) have not been updated with TS support.
- Job Market: React is the clear winner whether you are building a startup (and looking to hire developers), or want to join a company (at least in the US).
I think Vue has lots of potential to improve in all three areas but it's just not there right now. You can see my full thoughts on YouTube[1].
The combination of Vue composition API and setup scripts is really awesome. It reduces a lot of boilerplate for many common scenarios.
If you are also using GraphQL, I recommend taking a look at the new composition API support in Vue Apollo [1] as well. This post [2] summarizes how this integration looks like in practice for a typescript project.
The js-framework-benchmark used here is really hard to run. I'm not a javascript programmer, I'm always baffled that any of the command listed in the README page always end up in error. I even re-install a new version nodejs but can't make the benchmark run.
Feel free to post any issues to the github repo and I'll try to help. Building is indeed not trivial, since there are so many languages and tools and thus builiding is currently only fully supported on linux (rather a docker linux build). With a few exceptions building on windows and OSX works.
A simple workaround is to delete the folders of those implementations that cause errors.
Can anyone comment on how best to use Vue 3 with TypeScript to avoid as many runtime errors as possible? I know you can use JSX/TSX with Vue but it doesn't seem a focus.
I've worked on projects that use Vue 2 HTML templates + TypeScript before and a big chunk of the bugs are clustered around where TypeScript is interacting with the HTML templates.
Larger community and higher adoption rate among companies. If you run into a weird issue you’re more likely to find someone who’s had the same issue and solved it. There are plenty of established best practices and patterns to follow. Good learning materials and documentation. More supporting packages and libraries - usually people build for both React and Vue, it’s rarer to see Svelte.
You can use vue without npm, it has a build you can just drop in a script tag like you would with jquery.
Vue can also use the html as the component template like angulajs 1 used to allow. This makes it great for progressive enhancement and plays nice with server side based template frameworks.
Bottom line, vue scales up, but also scales down. You don't need to go full spa, you can hack a quick demo or make a one file tutorial and it's a bliss.
Also, maybe I missed it, but I don't think svelte has the concept of cached properties.
Apart from much larger community, Vue can be used without any compilation step. Import from CDN, define components through DOM and mount the app onto a specific div.
I know about real world projects that use Vue as a progressive enhancement on an existing PHP site. A weather card is, for example, being managed by Vue with it's reactivity engine.
[+] [-] mouzogu|4 years ago|reply
Also, I think I do prefer working with JSX versus using html templates. I prefer that close coupling of JS logic and JSX presentation.
The most appealing thing about Vue is that it seems to be more of a framework, maybe somewhere in the middle between base React/ReactDOM and Next.js.
[+] [-] lbotos|4 years ago|reply
I'm impressed. Great work Vue team. I'm normally hesitant to adopt a new version of a library when learning and expected to get bitten by a few more things but so far seems mature, stable, and well done.
Edit: That said, I'm still personally not in love with the .vue file structure of mixing languages, but I get it.
[+] [-] manigandham|4 years ago|reply
The <script> and <style> tag default to Javascript and CSS languages in HTML but Vue's compiler allows you to use other languages like Typescript or Sass automatically (assuming you have the dependencies installed). You can also similarly have the code inline between the tags or point to a separate external file with the src="..." attribute.
[+] [-] vagrantJin|4 years ago|reply
The one page vue file made a lot of sense to me off the bat, sort of implying that the component is a singular "encapsulated" entity, at least thats my own mental model. Turns out it was completely wrong but it worked.
[+] [-] verdverm|4 years ago|reply
https://v3.vuejs.org/api/sfc-spec.html#src-imports
[+] [-] alichapman|4 years ago|reply
This means instead of doing `dispatch("action")` you just call `action()`.
When using Typescript this is a godsend, as the action functions keep all of their type information.
[+] [-] johnthreevolts|4 years ago|reply
- full typing
- real life functions
- vue dev plugin support in store section
- mutations don't exist as separate idea
- also has api, so i wrote little plugin for state synchronization with local storage.
*Typography fix
1. https://pinia.esm.dev/
[+] [-] runarberg|4 years ago|reply
https://github.com/kiaking/rfcs/blob/vuex-5/active-rfcs/0000...
[+] [-] conradfr|4 years ago|reply
I read the doc and it makes sense but once in my project, I fail to see why I would use it, and yes I use vuex.
I probably need to make a Vue3 project from scratch without vuex to get it.
[+] [-] coolgoose|4 years ago|reply
[+] [-] chillydawg|4 years ago|reply
[+] [-] Vinnl|4 years ago|reply
[+] [-] dsego|4 years ago|reply
[+] [-] oefrha|4 years ago|reply
Edit: Actually it seems that a solution to .value's everywhere has been postponed and is currently discussed in https://github.com/vuejs/rfcs/discussions/369. The current iteration still requires unwrapping inside the script tag. The docs doesn't seem to make this clear since the examples are too simple...
[+] [-] rikstar|4 years ago|reply
There are a bunch of breaking changes to Vue 3 that will require code changes, and whilst the vue compat package is meant to alleviate some of that it was only released as of v3.1 and still does not handle all the breaking changes. Some of these breaking changes also seem like they could have been been a good addition and not a full breaking change. Consider the v-model changes, why change the underlying events? You could have it work both the old and new way and log a deprecation warning for the old way. Give engineers more time to fix the code as they see these issues with out breaking.
Probably the biggest pain point I have hit with moving to v3 is the state of vue-test-utils, it is still in RC. Honestly I would have loved to seen this released in lock step with Vue, I mean it really should if it is how you are meant to unit test your components.
That being said obviously a lot of my pain is coming from v2 to v3 I imagine being green field the experience would be fantastic. I still really love using Vue just the upgrade has left a bit of a sour taste in my mouth.
(edit formatting)
[+] [-] manigandham|4 years ago|reply
[+] [-] nicholasjarr|4 years ago|reply
[+] [-] pier25|4 years ago|reply
I used Vue 2 as my main framework for some years, and still maintain a couple of projects with it.
I'm now focused on Svelte. The performance is better, the bundle sizes are much smaller, and most importantly you write a fraction of the code to achieve the same thing.
Svelte also has a reactive primitive (they call them stores) which allows you to model pretty much anything with reactivity similar to what you'd do with MobX but with a fraction of the cost. I believe Vue 3 also has this now but uses Proxy which is not supported in older browsers.
[+] [-] Crazyontap|4 years ago|reply
I did try it and even though it's advertised as somewhat backward compatible it did break lots of things, which was totally expected and it's a major release.
Also we couldn't figure out a lot of things, like how can I access the $children like before, why does everything show Object proxy in console, etc. Posting on SO and forums also didn't yeild much help since everyone is still discovering it too I guess.
So in the end we decided why fix something which ain't broken for now. Vue 2 still kicks ass performance wise and is really easy to use.
[+] [-] lwansbrough|4 years ago|reply
[+] [-] MentallyRetired|4 years ago|reply
[+] [-] deergomoo|4 years ago|reply
I believe `npm install vue` even still gives you Vue 2.
[+] [-] pjmlp|4 years ago|reply
The browser underlying stack is always going to be there regardless of what is fashionable to wrap around it.
[+] [-] that_guy_iain|4 years ago|reply
[+] [-] conradfr|4 years ago|reply
It helped me a lot.
[+] [-] SuboptimalEng|4 years ago|reply
In the first half of 2021, I dove deep into Vue, Vuex, Nuxt.js (basically Next.js), Gridsome (basically Gatsby.js), and even coded a startup idea using Vue + Electron + FFmpeg[0] before moving to React. Three main reasons for this switch:
- Community Support: React has better support for lots of JS libraries. For example, I made a markdown editor which required the use of CodeMirror and the React NPM library for that was updated 1 year ago while the Vue library was updated 3 years ago. There's a lot of international support for Vue and some of the NPM libraries (like the CodeMirror one) are partially (or fully) documented in Chinese so this is a drawback as well.
- Typescript: Vue 3 is built from the bottom up with TypeScript but it was only released in September 2020. Most of the community thinks Vue 3 is better than Vue 2 in TS support, but still not as good as React. Additionally, since TS support has only recently been offered, libraries (like Nuxt.js) have not been updated with TS support.
- Job Market: React is the clear winner whether you are building a startup (and looking to hire developers), or want to join a company (at least in the US).
I think Vue has lots of potential to improve in all three areas but it's just not there right now. You can see my full thoughts on YouTube[1].
[0] https://www.reddit.com/r/webdev/comments/ohbl6i/i_made_a_des...
[1] https://www.youtube.com/watch?v=009-6j5ewDM
[+] [-] gitgud|4 years ago|reply
React has much better typescript support, as it type checks all props, even complex objects.
[+] [-] darrinmn|4 years ago|reply
[+] [-] zzt123|4 years ago|reply
[+] [-] lf-non|4 years ago|reply
If you are also using GraphQL, I recommend taking a look at the new composition API support in Vue Apollo [1] as well. This post [2] summarizes how this integration looks like in practice for a typescript project.
[1] https://v4.apollo.vuejs.org/guide-composable/
[2] https://lorefnon.me/2021/08/08/Vue-composition-api-and-type-...
[+] [-] geenat|4 years ago|reply
[+] [-] midrus|4 years ago|reply
A lot better, imho.
[+] [-] ivanceras|4 years ago|reply
[+] [-] krausest|4 years ago|reply
[+] [-] minitech|4 years ago|reply
[+] [-] seanwilson|4 years ago|reply
I've worked on projects that use Vue 2 HTML templates + TypeScript before and a big chunk of the bugs are clustered around where TypeScript is interacting with the HTML templates.
[+] [-] darrinmn|4 years ago|reply
[+] [-] zigomir|4 years ago|reply
[+] [-] reidjs|4 years ago|reply
[+] [-] vrocmod|4 years ago|reply
[+] [-] stevage|4 years ago|reply
<span :style="{ color }"> Color is: {{ color }}</span>
Simpler than this new syntax, for this particular example.
[+] [-] teornv|4 years ago|reply
[+] [-] reidjs|4 years ago|reply
[+] [-] BiteCode_dev|4 years ago|reply
Vue can also use the html as the component template like angulajs 1 used to allow. This makes it great for progressive enhancement and plays nice with server side based template frameworks.
Bottom line, vue scales up, but also scales down. You don't need to go full spa, you can hack a quick demo or make a one file tutorial and it's a bliss.
Also, maybe I missed it, but I don't think svelte has the concept of cached properties.
[+] [-] web2033|4 years ago|reply
[+] [-] Tajnymag|4 years ago|reply
I know about real world projects that use Vue as a progressive enhancement on an existing PHP site. A weather card is, for example, being managed by Vue with it's reactivity engine.
[+] [-] jgalt212|4 years ago|reply
Developers, in general, despise XML. However, React which is the market leader and generally well-liked is littered with JSX/XML.
[+] [-] ok123456|4 years ago|reply
React developers aren't trying to make their documents into databases.
React developers aren't trying to turn their little blocks of markup into an ontology.
[+] [-] devinrhode2|4 years ago|reply
[+] [-] gear54rus|4 years ago|reply