This was ini­tially writ­ten for TinkerHub.

Vue (pronounced /vjuː/, like view) is a JavaScript frame­work for build­ing user in­ter­faces. It builds on top of stan­dard HTML, CSS, and JavaScript and pro­vides a de­clar­a­tive and com­po­nent-based pro­gram­ming model that helps you ef­fi­ciently de­velop user in­ter­faces, be they sim­ple or com­plex. Similar to other frame­works like React and Svelte, Vue is re­ac­tive - it au­to­mat­i­cally tracks JavaScript state changes and ef­fi­ciently up­dates the DOM (via a vir­tual view-model) when changes hap­pen.

Prerequisites

Basic fa­mil­iar­ity with HTML, CSS and JavaScript is re­quired. If you have no prior ex­pe­ri­ence with fron­tend web de­vel­op­ment, or you’re just start­ing out, I’d rec­om­mend check­ing out TinkerHub’s learn­ing path for that, which ul­ti­mately cov­ers every­thing re­quired, such as ES6 syn­tax and pack­age man­agers.

Topics

In most build-tool-en­abled Vue pro­jects, we au­thor Vue com­po­nents us­ing an HTML-like file for­mat called Single-File Component (also known as *.vue files, ab­bre­vi­ated as SFC; sim­i­lar to *.jsx). A Vue SFC, as the name sug­gests, en­cap­su­lates the com­po­nen­t’s logic (JavaScript), tem­plate (HTML), and styles (CSS) in a sin­gle file.

Initially, you’ll have to choose be­tween two dif­fer­ent ways of writ­ing Vue SFCs - Composition API and Options API. While the fun­da­men­tal syn­tax and con­cepts re­main the same, they are two dif­fer­ent for­mats that lays em­pha­sis on cer­tain fea­tures of Vue such as re­ac­tiv­ity, which will prove to be use­ful based on your use case. For learn­ing pur­poses, go with the style that looks eas­ier to un­der­stand to you. Again, most of the core con­cepts are shared be­tween the two styles. You can al­ways pick up the other style later.

Some Vue es­sen­tials that you’ll dis­cover and use are:

Eventually, you’ll want to have state man­age­ment us­ing Pinia, which is Vue’s store li­brary that al­lows you to share a state across com­po­nents and pages (similar to React’s Redux). For nav­i­gat­ing be­tween dif­fer­ent com­po­nents as a page (without a server, these type of ap­pli­ca­tions are called Single-Page Applications, or SPAs), you’ll have to use vue-router (similar to React’s re­act-router).

Vue also pro­vides Server-Side Rendering, which ren­ders the HTML con­tent of your ap­pli­ca­tion from the server, rather than within the client it­self. While Vue na­tively sup­ports server-side ren­der­ing, it is of­ten rec­om­mended to use a frame­work like NuxtJS in pro­duc­tion-ready sce­nar­ios. Nuxt (not to be mis­taken with React’s Next.js) is a higher-level frame­work built on top of the Vue ecosys­tem which pro­vides a stream­lined de­vel­op­ment ex­pe­ri­ence for writ­ing uni­ver­sal Vue ap­pli­ca­tions, with fea­tures like rout­ing and state man­age­ment pro­vided out of the box. Better yet, you can also use it as a sta­tic site gen­er­a­tor.

Lastly, Vue fea­tures nu­mer­ous plu­g­ins that can be in­stalled into your ap­pli­ca­tion from npm, which can be ac­cessed by search­ing npm for pack­ages pre­fixed with vue-.

Bonus: if you’re a TypeScript ad­dict, Vue pro­vides first-class TypeScript sup­port. All of­fi­cial Vue pack­ages come with bun­dled type de­c­la­ra­tions that should work out-of-the-box. More on that can be found here.

Documentation

The Vue docs are a great place to start. Vue pro­vides de­tailed and help­ful doc­u­men­ta­tion and guides that should suf­fice every­one from an ab­solute be­gin­ner to Vue vet­er­ans in un­der­stand­ing and nav­i­gat­ing Vue.

Courses & Tutorials

Books

Repositories

https://​github.com/​vuejs/​awe­some-vue is es­sen­tially a mas­sive ex­ten­sion to this doc­u­ment; it pro­vides links to every­thing Vue. I don’t think any more ex­pla­na­tion is re­quired.

Vue is a frame­work that is easy to learn and hon­estly quite fun to use. I’m sure you’ll soon find your­self build­ing lit­er­ally every­thing you can us­ing Vue!