DEV Community

Cover image for A Complete Beginner's Guide to Vue

A Complete Beginner's Guide to Vue

Ali Spittel on March 20, 2019

Vue.js is a frontend framework that is optimized for progressive integration. That means you can have a large app with only a couple Vue components...
Collapse
 
georgehanson profile image
George Hanson

Nice article! :)

You could also replace charactersRemaining with a computed property instead. That way you don't need a method to update the value or store it in the data object. For example, you could do this:

computed: {
  charactersRemaining() {
    return 280 - this.commentText.length
  }
}
Collapse
 
aspittel profile image
Ali Spittel

Totally, I did this for a workshop and I wanted two methods.

Collapse
 
andrzejchmura profile image
Andrzej Chmura • Edited

I haven't written a single line of Vue code personally, but at first glance it looks like Vue really gets out of one's way and allow to focus on business logic from the get-go. Lack of build step for prototyping is nice; however, that templating syntax brings some bad memories from Angular 1.x. I guess I should try it one day.

Also, that git diff in markdown looks cool.

Thanks for sharing!

Collapse
 
rafalolszewski94 profile image
Rafał Olszewski

Vue templating is nothing like Angular, it's butter smooth and it's best one I've played with. Better than React JSX, easier to understand, cleaner.

Collapse
 
moremooredesign profile image
Jeremy Moore

Yeah, I'm not the biggest fan of React JSX. It makes the markup tightly coupled to Javascript conventions, especially with all the maps that tend to get used.

Collapse
 
twigman08 profile image
Chad Smith

I at first wasn't sure of the templating syntax, but after using it I love it.

Though Vue does allow you to go into the render function if you wanted to go that level (and there are times for advanced components it's needed), and there is a plug-in to use JSX with Vue. So your render function is pretty much just JSX then.

Collapse
 
yaser profile image
Yaser Al-Najjar

Great intro... thx Ali !

I've always wondered: with the ease and straight-forward-ness of Vue, why people are even looking at React or Angular? just cuz it's from Facebook or Google?!

Collapse
 
revskill10 profile image
Truong Hoang Dung

Have you tried React Hooks, or React Suspense yet ? Just try it and comeback.

Collapse
 
flozero profile image
florent giraud

you have vue hook too so yes i come back :)

Thread Thread
 
revskill10 profile image
Truong Hoang Dung

OK, how about Suspense ? I couldn't live without it for my SSR application.

Thread Thread
 
twigman08 profile image
Chad Smith

I looked at it really quickly, and Vue has something very similar to it from what I understand it does (I didn't watch a talk on it or anything)

Collapse
 
fantasticsoul profile image
幻魂

yeah, hook is cool, you can also try concent composition api or hook for react!
here is an online example: stackblitz.com/edit/concent-regist...

more details see github.com/concentjs/concent
hope you like it, concent is a predictable、zero-cost-use、progressive、high performance's enhanced state management solution for react _^

Collapse
 
guykatz profile image
guykatz

Because people are religious when it comes to coding.
IMHO, Vue will take over sooner than you think...

Collapse
 
dimensi0n profile image
Erwan ROUSSEL

What a wonderful guide 🤩
Could you do the same about react ?

Collapse
 
aspittel profile image
Ali Spittel

Thank you!! I actually have one for React! dev.to/aspittel/a-complete-beginne...

Collapse
 
dimensi0n profile image
Erwan ROUSSEL

Thanks 🙏

Collapse
 
matias_e_romero profile image
Matias Romero

I think that you missed one bracked on first codepen.

Vue.component("tweet", {
Collapse
 
aspittel profile image
Ali Spittel

OOps! I totally wrote over the starter code in my workshop tonight, great catch! Reverted.

Collapse
 
matias_e_romero profile image
Matias Romero

Great! Thank you for the guide! ;)

Collapse
 
misterhamm profile image
Chris

So I'm a little ashamed to say I've spent quite a bit of time working in Vue without really understanding it. This breakdown was SUPER helpful to get my head in the right spot and back to the basics of what everything is actually DOING. Definitely one of the best Twitter follows I've made :)

Collapse
 
sobolevn profile image
Nikita Sobolev

Awesome guide!

We have an amazing project template for people who want to jump in into production-ready enterprise-scale systems: github.com/wemake-services/wemake-...

It is focused on code-quality and developer happiness, so we have a lot of tools to make your code better. And a lot of docs to make a developer better: wemake-services.gitbook.io/wemake-...

There are a lot of things to try and learn. Configured out of the box:

  • Typescript
  • Nuxt and SSR
  • Jest unit tests
  • TestCafe E2E tests
  • Gitlab CI
  • Docker for development and production
  • Linters and static analysis
  • and much more!

Check it out.

Collapse
 
matcharr profile image
kyo

Don't panic if you figure that it does not limit you at 280 character.
It's totally normal we did not add any method to make some changes if we hit 280 characters, so it will keep counting in negative number.
Anyway a very good beginner guide ;D

Collapse
 
epsi profile image
E.R. Nurwijayadi

Cool.

I also made an article about both Vue2 and Vue3 Router.

epsi-rns.gitlab.io/frontend/2020/1...

Vue Router: Hello World

Collapse
 
maxwell_dev profile image
Max Antonucci

I've used Vue for several CodePen projects in the past, but this helped clear up how to make use of components in that same context. Already looking forward to the next time I can try them out!

Collapse
 
johnhorner profile image
John Horner

"Our characters remaining will decrease when we type in the"

This sentence seems to be cut off before the end?

Collapse
 
sudoanushil profile image
Anushil Kumar

Hi ,

I need some help with migration from AnguarJs to Vue or React slowly.
I am very new to this and have very less idea.

Problem 1:
I have a doubt that how can I use vue with my current application side by side and slowly migrate the whole application to Vue. It's a very big application.

Problem 2 :
How can I tell AngularJs controller to run vue. If I am using it with AngularJs.
How will my ngRoute will serve the new vue file and run it.

Current Stack for Frontend
AngularJs, Gulp

Shift to: Vue/React with Webpack

Please help me out. I will be very thankful to you.
Please share some courses or blog if you think that are best for me to learn and grow.

Thanks & Regards,
Anushil Kumar

Collapse
 
glpzzz profile image
Gabriel Alejandro López López • Edited

Thanks for the intro! I'm totally new to Vue.js. The only thing I don't like is the way template is defined as a string on the JS. Is there any other way to do this?

Collapse
 
wsmithny profile image
{...Wayne}

Wow! Thank you. I've been wanting to learn Vue and this guide makes it easy.

Collapse
 
aimzilla profile image
Amy Pennybacker

Great, easy to follow tutorial! Thank you for this! One non-Vue related question...how/where are you getting the heart icons for the if/else like condition?? Thanks!

Collapse
 
aspittel profile image
Ali Spittel

Thanks, for sure! They're heart emojis!

Collapse
 
felipperegazio profile image
Felippe Regazio

Nice Post, Ali. Vue is awesome : )

Collapse
 
gersteinj profile image
Jackie

Thanks for the guide! I'm working on updating a tool I wrote for a friend a few years ago, and this is making it much easier.

Collapse
 
piyushlinux profile image
Shubham

Thank you for such good Content :)

Collapse
 
diek007 profile image
diek • Edited

Great write-up, one question, is there an implicit connection between tweet and tweets, or is there something I am missing?

Collapse
 
picli3 profile image
Jonathan Maykol Moreno Rey

excellent work, it is just what I am looking for, I am currently migrating my website to vue with laravel, each tutor has a different style, thanks nina

Collapse
 
supermario_ai profile image
SuperMario

Super dope! Ty for making this! ❤💯

Collapse
 
catonmat profile image
Richard Jarram

Very nice tutorial! Looking forward to new content.

Collapse
 
tnorbs profile image
Thais Norberlandi

Thank you for posting this, it helped me a lot!

Collapse
 
johnhorner profile image
John Horner

Nice tutorial. It makes sense, builds up the app logically, and more to the point, makes me actually like Vue and want to use it.

Collapse
 
kemi profile image
Kemi

good article🔥👍