“what are the best online resources for learning vue 3?”
Summary of results
My opinion: Vue, specifically the Vue 3 Composition API. Most of your UI state should come from computed() values. Bookmark https://vueuse.org and come back to it often. Go through VueUse's source (the docs for each function link to their source): you'll be surprised at how simple most of it is, and it works as documentation of best practices for using the composition API in general.
if you want out of the box Vue 3 component framework, try https://quasar.dev/
Easily Vue 3, the dev tooling/xp + docs are much better over Vue 2.
> Vue 3 with the composition API looks fantastic on paper. (I haven’t used it in any meaningful way)
Recently worked on migrating a large codebase over from a legacy solution to Vue 3 with composition API, it was a pretty enjoyable experience, especially with Pinia!
Though I'd say that the problem was that most component libraries/frameworks out there actually don't support Vue 3 well enough. Last I checked, only the following were viable with Vue 3:
- Ant Design
- Element Plus
- PrimeVue (went with this, also has icons and a layout solution; also alternatives available for React and Angular)
Most of the other ones considered weren't quite there yet:
- Vuetify
- Quasar
- BootstrapVue
- Vue Material
- Buefy
- View UI
- Vuikit
- Chakra UI
I mean, is it really so hard to get a bunch of pre-built components for Vue 3 with Bootstrap, or Bulma? It feels a bit like the Python 2 to Python 3 migration in some respects.
Interesting, how long have you been using Vue3? I'm only 3 weeks in and still waiting for that video or diagram or tutorial that really inform me on why all of this extreme overhead is needed to perform simple tasks.
Does anyone have any good resources that made them enjoy the Composition api, Pinia etc?
Explore the inner workings of Vue.js 3 reactivity system, from leveraging JavaScript Proxies to mastering the powerful reactivity APIs like reactive, ref, computed, and watch. Gain expert knowledge on building reusable composables, avoiding common pitfalls, and optimizing performance to create scalable and maintainable Vue applications with confidence.
Just use Vue. It's perfect for this use case, has a ton of help online if you need and plenty of paths to take if you want to upgrade your project in any direction. Seriously way reinvent the wheel here?
Would you say Vue 2 or Vue 3 would be better for someone venturing into Vue? Also, have you used Svelte much?
I think the documentation for Vue is pretty good.
…Vue in this case?
A backend dev with minor FE exp here.
1. I would go with Vue. Because Vue is focused towards DX and pragmatism. It provides good defaults to start with and flexibility to go through less travelled paths should you need it.
Part of the reason is that when I first tried react (in 2016), I couldn't get it to build. And setting up build tools was not easy.
Vue can be used with a single script tag, so I was able to get it up and running without any issue.
I started with Vue 1, and recently worked on a project using Vue 3. Despite my gap and version changes, I was able to get up and running without issues.
2. Vue docs are great resources. Personally I prefer video courses to get started and then docs and guides. I can personally vouch for Laracasts Vue tutorials.
You might find the following useful :
Visual Understanding Environment - https://vue.tufts.edu/
Came across this in another thread recently - https://quarto.org/
I reach for Vue + Vuetify (a Material Design UI component library) to get things going quickly. Vue is extremely easy to learn and can be incorporated with a script tag if you prefer. Vuetify faithfully implements almost the entire Material Web Components spec, so you have everything you need to build polished, functional web apps. It’s also got very nice documentation.
I used vue 2 for work during the switch to vue 3. It was horrific to watch as the vue community had to relearn the worst parts of the class components and the massive shortcomings of both the template library type checking and the other parts that basically can't ever support typescript like class mixins. If you want to use vue with a .tsx file you might as well use react.
Today, 33% of vue downloads in the last 7 days are for vue 2.
There was a lot of things that were nice in the vue world like vite and vuex, but I'd never recommend vue to anyone, especially anyone that wants a good typescript experience.
here's an example library button using .tsx in vue https://github.com/vuetifyjs/vuetify/blob/master/packages/vu...
Vue in general has been a godsend to me at least. When I was in college, we used AngularJS for web development courses at the time. My first job had me working with Qt and Tkinter. When I finally had the chance to do web development again, my team chose Vue and it was so easy to pick up from my AngularJS background.
My current team is using Vue 3 with the Composition API and it is way more forgiving with mistakes than the Options API. I've helped transition 3 developers so far to Vue 3 and they all love what Vue has to offer when compared to React.
I am in a similar situation as you (with the addition that I am an amateur dev).
I use either Quasar, a Vue3 framework (vue it's very easy to learn and quasar does all the heavy lifting, plus has plenty of components), or recently Vite with Tailwind CSS (this allows you to better control the style).
I would recommend to study with an empty Quasar project and build from there.
Can you describe the vue 3 part more? As an outsider it just looks for me they just added another api with a different style, so people can choose what they like.
1) Vue 2: two years of support. Man.
2) we REALLY need a sort of "reference implementation" website that does the typical things a website needs to provide comparisons of approaches (hm, and performance benchmarks) to things like templating / html generation / data binding / etc.
I started using VueJS when I got thrown off the deprecation treadmill by Angular.
Regardless of whether something is a hobby project that you want to only touch a couple times a year or a big project with dozens of developers, having your platform deprecated under your feet and being forced to do migration work sucks.
Vue is now on version 3 within 10 years. That means anyone who relied on v1 has had their work churned away under their feet, twice.
If you started with Vue two years ago, you had to learn Vue 3 shortly after that. With a new Vuex. Which has been dropped since in favor of Pinia. Oh, Vite has been developed since, so you may want to add this to your stack, because it makes compiling during development so much faster. Also, be aware of all the breaking changes that Webpack 5 has introduced.
I hope front end development will be more stable in future, but the last two years where full of pretty major changes.
I’m learning Vue. For both professional and hobby usage.
So far, the switch from jQuery, thrills me.
You're looking for Vue. It calls itself The Progressive Framework and the title fits.
The thing about Vue is that it spans the whole spectrum of a simple <script> tag à la jQuery all the way up to a fullstack app with server side rendering, jsx & typescript support, IDE plugin, browser debugger, and build system.
But the *great* thing about Vue is that you can start off with the simple <script> tag and add it to an existing project (built with other frameworks) and slowly build up to more Vue features if/as you need them.
It's learning curve is also incredibly smooth so you can ramp up the features to your specific needs.
Some examples:
- There's multiple well respected guides and video series out there to port old legacy enterprise Angular.js applications to Vue.js bit-by-bit until only Vue.js remains
- Laravel (the well known backend php system) has decided to use Vue for it's front-end integrations.
- Wikimedia (the foundation that runs Wikipedia) has decided to adopt Vue.
I'd go for VueJS.
As someone who worked with both, vue 3 is miles ahead imho. Scoped css, well working two-ways data binding (now being mimicked again with signals after mobx demise) and reactivity, easier to get performance out of the box without the hook madness.
I would use Vue3 (with Pinia, vue-router and typescript). There is also the Quasar framework based on those tools which provide many components out of the box.
Does anyone keep a list of "goto" Vue codebases?
It sounds like you would appreciate Vue3 and its <script setup> mode, the compiler does a lot of ref() and data flow analysis to make the code for components very readable.
Vue 1.x was great, v2 lost its way, and Vue 3 with the composition API looks fantastic on paper. (I haven’t used it in any meaningful way)
I’m even more impressed with the extended Vue ecosystem like Vite, Vitest.
Worth noting that major frameworks have yet to update for Vue 3. Make sure you check all your dependencies before embarking on that course. I like Vue 3 so am finding this seemingly slow adoption to be a real pain.
I'm quite fond of Vuejs. It's easy to get started... my first experience with it was too drop in the CDN link and start with the basic example. It can easily do anything react can do.
Maybe you need vue3 .value
Vue took a hit because of issues with v2 to v3 migration. But situation is improving. With v2.7 beta just released and major ecosystem libraries and frameworks (vuetify and nuxt) catching up.
Then, there is a community effect. We all know vite and vitest are originally from vue ecosystem. As people start using them, they are more exposed to vue.
Vue is good
I would strongly recommend Vue3 in the composition style with <script setup>.
It's really close to svelte's style, of simplicity and principle of least astonishment. It also uses very explicit wrappers for reactive objects so that there's isn't as much magic happening. For me, vue's reactivity is order of magnitude simpler than things like svelte.
Vue also has a pretty well established community and a pretty solid foundation.
If you’re looking for a Vue-flavored dev experience as opposed to a react one, I recommend this:
https://github.com/antfu-collective/vitesse-webext
Building a web extension is pretty straightforward in Vite-land. There are some rough edges around hot reloading, but I doubt it could get that much better.
Try out https://vuejs.org/
It’s simpler to learn.
Guides are phenomenal.
Creator is a designer and author of Vite.
React is great in that it’s being developed by a great team of diverse engineers. However diversity comes with differing opinions of end user experiences.
In the world of product development and innovation, the role of a designer is often more impactful than that of an engineer, especially when it comes to shaping the overall user experience.
Designers possess the unique ability to understand the end user's needs, desires, and challenges, translating those insights into functional and aesthetically pleasing solutions. Their holistic perspective allows them to balance form and function in a way that elevates the value of the end product.
While engineers excel at the technical aspects of a project, ensuring that the underlying systems function properly and meet performance specifications, designers take a more human-centered approach. They focus on usability, ergonomics, and aesthetics, often serving as a bridge between the technical and the emotional aspects of a product. This ability to understand and empathize with the user is invaluable, as it ensures that the product not only performs well but also resonates with its intended audience on a deeper level.
Collaboration between designers and engineers is crucial, as their combined skills and expertise can lead to groundbreaking innovations. However, it is the designer's intuitive understanding of the user experience that often plays a key role in creating a product that stands out from the competition and truly resonates with consumers. By prioritizing the needs and desires of the end user, designers help to create products that are both functional and emotionally engaging, ultimately enhancing the overall success of a project.
Thus why the more granular and slower approach such as Vue is what I think is software framework done right.
OverVue is an open-source prototyping tool designed to help Vue developers seamlessly create and visualize Vue applications, utilizing an intuitive and responsive tree interface to display route & component hierarchy.
Vue survives just fine.
Sure, its market share is lower, but the quality of Vue 3 is on par with React. Most impressively, it comes with its own core libraries for routing [0] and state [1]. And by extension, has spawned library agnostic tooling in the form of Vite [2] and now Vitest. [3]
Vue.js is the JavaScript framework of choice for countless front-end developers because it’s easy to learn and use. Components are at the core of the Vue framework — they help you go from idea to a functioning UI much faster.
Daisy/Tailwind + Vue3 is my favorite front end toolset to date.
As someone who has zero idea about web development can someone explain to me what vite is compared to Vue or React? Btw, I am a programmer and the only thing that always overwhelmed me is web development. The ecosystem is so massively complex. How do I start learning it?
You have a few :
- https://stimulus.hotwired.dev/
- https://github.com/vuejs/petite-vue
- https://v2.vuejs.org/v2/guide/ (using Inline-template)
- jQuery (of course) / Vanilla JS
I inherited a vue2 codebase with a vuex store, and upgrading to vue3 and pinia one component at a time over a course of 3-4 months was quite easy. The upgrade path is really clear and they did a good job making everything compatible so that it could be made gradually over a relatively long time.
I use vuejs with create-vue for scaffolding. And then, google my way through.
Vue is easier to learn and uses html, css and js. So I feel right at home. Forms are particularly easier and vue dev tools help a lot in debugging.
Also, last year, I used it for an app after a break of 3+ years. I was still able to re-use a lot of prior knowledge (even if it was half forgotten). There was new syntax(comp api) and typescript introduced, but older syntax (options api) worked fine.
Maybe the Vue 3 transition and its composition API.
If you are non-programmer, then you need to stay away from whatever bleeding edge tech HN and Reddit raves about.
Instead pick a stable tech. In js framework land, no tech is stable. But relatively speaking, react, Vue and Angular are more stable and popular. Among these Vue is more newbie friendly than others.
So, I would start with Vue. Checkout laracasts course on vue 3 to get started.
Same here, this is how I found out about Vue 3
related: The mess we're in (a talk by Joe Armstrong)
https://www.youtube.com/watch?v=lKXe3HUG2l4
(yes, I know, I should have vendored the dependency in the first place)
I find Vue easier to learn than React and its documentation is great.
my projects are small indeed, one reason to use vue3+vite, I tried react and webpack, both have much deeper learning curve for me at least.
Vite + Vue.js 2 + Scss
I’ve enjoyed immensely learning Vue in Laracast. It might be the way I learn or that the instructor assumed nothing about my knowledge but it was the first time in my early career when I understood the why for a front end framework.
Mind you, this was after years as a web designer and after “learning” js and ember.js and a little bit of angular. I guess I hadn’t came across anybody that had actually bothered to explain why one might want to use js/X framework and where to busy explaining arrays and “everything is an object”
Documentation site was based on https://vuepress.vuejs.org/ but it evolved so much I dropped Vue all together and wen't with plain HTML instead. I must have left that meta tag from the early days.
Regarding Vue I use it daily at my job, great library :)