loading...
Cover image for Just started learning Vue - any advice?

Just started learning Vue - any advice?

cilvako profile image Silvia Bogdan ・1 min read

One advice I already gave myself (after half an hour into the tutorial) is "stop comparing it to React". Maybe you also have one - or maybe you can share a must use resource that will make learning easier?

Image source: Anna Shvets/ ro-ro/@shvetsa

Discussion

markdown guide
 

Welcome to Vue!

  1. After getting familiar with the basic concepts such as template rendering, two-way data binding, computed properties, methods, watchers and life cycle hooks, then start applying your knowledge to build projects.

  2. After getting deeper into Vue by learning about Vue router and vuex, again apply your extra knowledge to build projects.

  3. After completing your tutorial, check out Vuetify and learn it. It's a material design UI library for Vue js. To get started, you can check out a tutorial by the Net Ninja on YouTube.

  4. Finally, Vuejs has a nicely written documentation. Let it be your friend. You can also check out Vue school and Vue mastery.

 

Thank you so much for the resources. Templates, scripts and styles were quite a shock to me (not so much the way they look but the way they are used). I guess bye-bye to markup, scripts ans styles not being in the same file :).

 

Welcome to the Vueveloper squad! πŸ˜„

The Vue core docs are exceptional - they are my favorite docs to need to use.

I also cannot recommend Ali's introduction to Vue enough:

Awesome Vue is also always a fun list of resources to flip through for ideas and inspiration!

Feel free to reach out if you have questions!

 

While there are those hating on Vue, the performance speaks for itself.

 

To be honest, I am learning it for myself (at work we use React and we'll stick to that) so I can't speak too much for performance at this point. Thx for sharing the article, it looks super interesting.

 

Thank you for the resources. I started an online tutorial but it doesn't seem to go too much in depth so I will definitely check yours.

 

I see some suggestions like learning Vuex, Vuetify, or Vue in conjunction with TypeScript, etc., but in my opinion, this can all be learned at a later point. Vue is already powerful in and of itself.

  • TypeScript: I know some react devs who wanted to learn Vue and got stuck unnecessarily on TS integration. The vscode extension vetur is already really powerful.
  • Vuetify: Like Material UI for react, it is kind of verbose... Vue's scoped CSS with Tailwind CSS is already super nice

For learning resources, I've created this interactive tutorial: learning-by-vueing.netlify.app (it comes with an introduction specifically for react developers)

 

I had to learn React with Typescript (at the same time) and I found it to be a nightmare (for me, personally) so for now I would only stick to Vue. Vuetify is something that might interest me since I already used MUI (with React). Thank you for all the resources, I will definitely check your interactive tutorial.

 

My advice will be related to learning the basics the right way, if you watch or study a tutorial from an external resource, compare the information with the Vue documentation, there are a lot of resources where the code doesn't follow a proper structure according to Vue paradigm.

Research about the tutor so you can see if the content and the experience has enough value to watch, we are connected to bunch of information, but that does not guarantee a cohesive and coherent content.

Once you feel comfortable learn Nuxt.js, Server side rendering is a must for applications with high complexity.

All of my comments are based on my experience and learning process. Last but not least, enjoy learning Vue, it is really amazing for big and small projects.

 

Vue is amazing! One of my favorite resources for discovering the eloquence of Vue was content written by Sarah Drasner, check some out here: css-tricks.com/guides/vue/

Vue has very simple & powerful patterns, so just having a "cheat sheet" helped me a bunch in the early days to, so I could get the patterns down in my member, this was helpful:
devhints.io/vue

It's inspiring to see Vue in some of its simplest forms, it's how I realized it would be more productive than React. React is still cool, but Vue just has the more polished API, many people have written on this.

Today I use Vue everyday in my own app development and I've paired Vue w/ Meteor to complete my full-stack. It's also simply amazing! I hope everyone gets to try the Vue + Meteor combo some day.

 

If you are coming from an oop background or a strongly typed language, be ready for some chaos , Javascript breaks(some say violates) those conventions apart

 
 

I am using Typescript at work (in conjunction with React) so I will probably have some surprises. Everything looks very peculiar already :).

 

Sooner or later you will encounter Vuex, don’t underestimate how useful it could be.

 

Be sure to use the Persisted State package when working with Vuex.

No doubt Vuex takes some wrangling, but it is worth it.

 

its a breeze, unless you cross 5MB localstorage limit. Just happened with me today at work..

 

I believe generally Vue is made more complex by the pre-build/rendering and package creation projects.

The fundamental and most beautiful part to the Vue documentation is showing how dropping in the CDN Vue.min link and being able to get on with building just like many are so used to doing with jQuery.

Don't underestimate the fundamentals you learn from that, well before vuex, Vue template files and all the other packages.

Interacting as raw as possible with the framework on a single html page provides lots of insight before splitting and scaling.

It's about being data driven and as soon as you are convinced on building data first the rest becomes a breeze. I actually enjoy ripping out swathes of jQuery and replacing it with vue. It may be slightly heavier on the browser but readability and being able to reduce down spaghetti code is amazing.

 

Start using vuex sooner rather than later and in an intended way. Meaning using multiple modules for more complex state and following the actions (e.g api calls and business logic), mutations (setters), state architecture. Good place to start: npmjs.com/package/vuex

 

I pretty much just started learning it as well. I started this course on Udemy. udemy.com/course/vuejs-2-the-compl...

 

I didn't know Max has a course on Vue. What do you think about it, is it comparable with its other courses? Thank you for the recommendation.

 

I'm doing his Vue course and really like it. I have been learning Vue on and off for a year or so and I really like it. So much so I've dabbled with Gridsome/Vuepress and Nuxt so anything Vue related. vuex is what I've struggled with mostly probably I don't really understand state management something I need to get to grips with at some point.

 

Amazing experience, no doubt best !

 

"stop comparing it to React", same advice popped my head hehe

Stick to the official docs, they are dope :)

 

Even the instructor can't stop making comparisons between these two, every 10 minutes during the tutorial, so I guess it will be a bit difficult to forget everything about React. Thx for sharing.

 

Learn the power of the :key bind. Refreshing a component by updating the :key is super handy.

 

If you've used Angular before and you like directives, then you should fit right in.

 

I'm coming from a React background but people keep saying that Vue has the easiest learning curve. Let's see if they're right.

 

My advice is, practice, try reactivity a lot and think that everything in Vue is modular. Ohh and enjooooy hehe

 

Learn render functions, functional components!

 

Thank you for the input.

 
 

Thank you for the recommendation. I guess it's a good time to start using Scrimba.

 
 

Try out some Vue static site/app frameworks like Gridsome and Nuxt. They greatly reduce the amount of setup and make building a website or web app with Vue a breeze!

 

Don't over use your Flux store! Try to use the heirarchical nature of html and by extension, Vue components - pass data down instead of centralizing every piece of data.

 

I suggest reading up on when to use props-events to pass data, and when its the best time to use state management like Vuex. I shot myself in the foot in the past for not knowing when to use which. πŸ˜…

 

I will keep that in mind if I make it that far :). Thank you for sharing.