Why learn Vue ❓ #
🛠️ Prerequisites #
🧑🏻💻 Programming Knowledge #
- 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
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
- Computed properties
- Class and style bindings
- Conditional rendering
- List rendering
- Event handling
- Form input binding
- Lifecycle hooks
- Custom Directives
🚀 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 :
- 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
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 #
- Scrimba - Learn Vue
- freeCodeCamp - Vue.js course for beginners
- TraversyMedia - Vue.js Crash Course
- Vue.js Fundamentals
- Net Ninja - Vue.js Tutorial
- Introduction to Vue3
Additionally, if you have a valid GitHub Student Pack, you can use it to open an account at FrontendMasters.com, which will let you browse and learn all courses free for 6 months.
📚 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!