Vue JS

Why learn Vue ❓ #

  • Vue JS is a JavaScript framework for building user interfaces
  • It builds on top of standard HTML, CSS, and JavaScript and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be they simple or complex
  • Similar to other frameworks like React and Svelte, Vue is reactive it automatically tracks JavaScript state changes and efficiently updates the DOM (via a virtual view-model) when changes happen.

🛠️ Prerequisites #

🧑🏻‍💻 Programming Knowledge #

  • Basic familiarity with HTML,CSS and JavaScript
  • ES6 Syntax

📲 Installation and Setup #

  • Install Node.js
    • NOTE: Install the stable version

💡 Learning Session #

In most build-tool-enabled Vue projects, we author Vue components using an HTML-like file format called Single-File Component (also known as *.vue files, abbreviated as SFC; similar to *.jsx). A Vue SFC, as the name suggests, encapsulates the component’s logic (JavaScript), template (HTML), and styles (CSS) in a single file.

Initially, you’ll have to choose between two different ways of writing Vue SFCs - Composition API and Options API. While the fundamental syntax and concepts remain the same, they are two different formats that lays emphasis on certain features of Vue such as reactivity, which will prove to be useful based on your use case.

  • For learning purposes, go with the style that looks easier to understand to you.
  • Again, most of the core concepts are shared between the two styles. You can always pick up the other style later.

Some Vue essentials that you’ll discover and use are:

  • Template syntax
  • Reactivity
  • Computed properties
  • Class and style bindings
  • Conditional rendering
  • List rendering
  • Event handling
  • Form input binding
  • Lifecycle hooks
  • Watchers
  • Components
    • Props
    • Events
    • Slots
  • Composables
  • Custom Directives
  • Plugins
  • Transitions

🚀 State Management and Routing #

  • Eventually, you’ll want to have state management using Pinia, which is Vue’s store library that allows you to share a state across components and pages (similar to React’s Redux).
  • For navigating between different components as a page (without a server, these type of applications are called Single-Page Applications, or SPAs), you’ll have to use vue-router (similar to React’s react-router).

🎯 Server Side Rendering #

  • Vue also provides Server-Side Rendering, which renders the HTML content of your application from the server, rather than within the client itself
  • While Vue natively supports server-side rendering, it is often recommended to use a framework like NuxtJS in production-ready scenarios.
  • Nuxt (not to be mistaken with React’s Next.js) is a higher-level framework built on top of the Vue ecosystem which provides a streamlined development experience for writing universal Vue applications, with features like :
    • routing
    • state management provided out of the box. Better yet, you can also use it as a static site generator.

Vue features numerous plugins that can be installed into your application from npm, which can be accessed by searching npm for packages prefixed with vue-

For TypeScript lovers 💙 #

If you’re a TypeScript enthusiast, Vue provides first-class TypeScript support. All official Vue packages come with bundled type declarations that should work out-of-the-box. More on that can be found here.

🔖 Resource Pool #

📄 Documentation #

📽️ Videos #

📚 Books #

🎓 Repositories #

It’s essentially a massive extension to this document; it provides links to everything Vue. I don’t think any more explanation is required.

Vue is a framework that is easy to learn and honestly quite fun to use. I’m sure you’ll soon find yourself building literally everything you can using Vue!

Created with the 💚 by Khaleel Gibran & TinkerHub