DEV Community

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

Read full post

George Hanson • Mar 21 '19

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
  }
}

Ali Spittel • Mar 21 '19

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

Andrzej Chmura • Mar 20 '19 • 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!

Rafał Olszewski • Mar 21 '19

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.

Jeremy Moore • May 2 '19

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.

Chad Smith • Mar 21 '19

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.

Yaser Al-Najjar • Mar 20 '19

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?!

Truong Hoang Dung • Mar 21 '19

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

florent giraud • Mar 21 '19

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

Truong Hoang Dung • Mar 21 '19

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

Chad Smith • Mar 21 '19

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)

幻魂 • Oct 18 '19

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 _^

guykatz • Mar 22 '19

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

Erwan ROUSSEL • Mar 21 '19

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

Ali Spittel • Mar 21 '19

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

Erwan ROUSSEL • Mar 21 '19

Thanks 🙏

Matias Romero • Mar 21 '19

I think that you missed one bracked on first codepen.

Vue.component("tweet", {

Ali Spittel • Mar 21 '19

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

Matias Romero • Mar 21 '19

Great! Thank you for the guide! ;)

Chris • May 31 '19

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

Nikita Sobolev • Mar 27 '19

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.

kyo • Mar 24 '21

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

E.R. Nurwijayadi • Dec 6 '20

Cool.

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

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

Max Antonucci • Mar 21 '19

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!

John Horner • Mar 23 '19

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

This sentence seems to be cut off before the end?

Anushil Kumar • May 7 '20

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

Gabriel Alejandro López López • Sep 16 '20 • 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?

{...Wayne} • Mar 21 '19

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

Amy Pennybacker • Mar 22 '19

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!

Ali Spittel • Mar 22 '19

Thanks, for sure! They're heart emojis!

Felippe Regazio • Mar 21 '19

Nice Post, Ali. Vue is awesome : )

Jackie • Aug 19 '20

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.

Shubham • Apr 16 '21

Thank you for such good Content :)

diek • Mar 21 '19 • Edited

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

Jonathan Maykol Moreno Rey • Apr 10 '20

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