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

Just started learning Vue - any advice?

ari_o profile image Arika O ・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

pic
Editor guide
Collapse
timothyokooboh profile image
timothyokooboh

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.

Collapse
ari_o profile image
Arika O Author

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 :).

Collapse
terabytetiger profile image
Tyler V. (he/him)

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!

Collapse
octaneinteractive profile image
Wayne Smallman

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

Collapse
ari_o profile image
Arika O Author

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.

Collapse
ari_o profile image
Arika O Author

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.

Collapse
michi profile image
Michael Z

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)

Collapse
ari_o profile image
Arika O Author

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.

Collapse
maurojimenezm profile image
Mauro Alejandro Jimenez Medina

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.

Collapse
mullojo profile image
Bob

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.

Collapse
stevebaros profile image
Steve Baros

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

Collapse
octaneinteractive profile image
Wayne Smallman

Vue supports TypeScript.

Collapse
ari_o profile image
Arika O Author

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

Collapse
mohitdeshwal profile image
Mohit Deshwal

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

Collapse
octaneinteractive profile image
Wayne Smallman

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

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

Collapse
mohitdeshwal profile image
Mohit Deshwal

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

Collapse
imthedeveloper profile image
ImTheDeveloper

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.

Collapse
kaspartr profile image
Kaspar Triebstok

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

Collapse
dboston528 profile image
DeAndre Boston

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

Collapse
ari_o profile image
Arika O Author

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.

Collapse
cguttweb profile image
Chloe

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.

Collapse
umargit profile image
Umar Ahmed

Amazing experience, no doubt best !

Collapse
dragosgn profile image
Dragos Nedelcu

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

Stick to the official docs, they are dope :)

Collapse
ari_o profile image
Arika O Author

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.

Collapse
newsframe_io profile image
Newsframe

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

Collapse
icncsx profile image
DH Kim

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

Collapse
ari_o profile image
Arika O Author

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.

Collapse
jmr_code_social profile image
Jorge Marquez

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

Collapse
webcoderkz profile image
Alexander Kim

Learn render functions, functional components!

Collapse
ari_o profile image
Arika O Author

Thank you for the input.

Collapse
saransh16 profile image
Saransh Kumar

One of the best ways to learn vue is
scrimba.com/course/glearnvue.

Collapse
ari_o profile image
Arika O Author

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

Collapse
ramnath2609 profile image
Collapse
sergix profile image
Peyton McGinnis

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!

Collapse
skamansam profile image
Samuel C. Tyler

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.

Collapse
naomi_codes profile image
Naomi

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. πŸ˜…

Collapse
ari_o profile image
Arika O Author

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