Vue.js is a progressive JavaScript framework used for building user interfaces. It emphasizes simplicity and reactivity, making it a popular choice for web development. Vue adoption rate has been growing steadily over the past few years, with millions of weekly npm downloads at this point of writing 😱
According to Jetbrains' State of Developer Ecosystem survey from 2017-2022, Vue.js has grown to become the 2nd most popular framework used by Javascript developers. Vue.js is therefore a great choice to learn for a frontend Javascript framework.
If this is your first JavaScript framework, you may be feeling nervous or uncertain. So to make this journey a little bit easier, I have curated 20+ relevant articles grouped by topics to help Vue.js beginners learn the core concepts and features of Vue.js. Here are the topics to follow along:
- Introduction to Vue 3
- Options API and Composition API
- Vue Router
- Pinia Fundamentals
- Typescript
- Unit Testing
Note: This article assumes that you have prior knowledge of JavaScript.
Vue-PDF-Viewer: Flexible and Powerful Vue.js PDF Component
Just a quick background about what I'm working on. Vue-PDF-Viewer renders the PDF viewer on your Vue or Nuxt websites so that your users can interact with your PDF document without leaving your sites. The component has over 20 features including theme customization, built-in localization, web responsive and more.
I would be grateful if you could check Vue-PDF-Viewer out. It will encourage me to make even more contents ❤️🔥
Introduction to Vue 3:
Before you start coding in Vue, it is essential to gain a solid grasp of its fundamental principles and key concepts. This knowledge will grant you a deeper understanding and lay a robust groundwork for your journey into Vue development.
VueJS Part 1 to Part 5
This 5-part series of short articles is a good read for any beginner looking to learn Vue 3. It covers topics from the very basics, from Hello World to directives to conditional rendering and events handling.
- VueJS Part 1: Intro to VueJS
- VueJS Part 2: Hello Vue and displaying values in HTML
- VueJS part 3: Vue directives and conditional rendering
- VueJS part 4: Rendering in loop
- VueJS part 5: Handling events
Be sure to check out all 5 parts to gain a good understanding on Vue 🎉
A Beginner’s Guide to Vue 3
This article dated back in 2021 showcases examples that uses Vue CLI of an older version. However, the article still provides a great step-by-step guide in creating a simple Vue 3 app and getting to know the basic functionalities of Vue.js.
Vue Made Easy: Getting Started with Vue
This article is part of a larger 4 parts series, and it offers a comprehensive beginner-friendly guide to getting started with Vue.js. It's easy to follow along, thanks to detailed explanations and code examples.
Vue.js for Beginners #1
If you are looking for a clear guide with all you need to know to start developing in Vue 3, be sure to check out this 2 parts series written by Eric Hu.
In Part 1, you will learn the very basics from installation to methods, interpolations and directives. You will also get hands on in building an app. Continue on to Part 2 to find out about event handling, forms and more!
Best Practices for Writing Vue.js
These best practices are like a helpful guide for beginners that are starting out on Vue. They ensure your code is clean and easy to understand so that you'll not only write better code but also gain confidence as a Vue.js developer.
Bonus: Vue Developer Roadmap
This cool looking roadmap provides a great guideline to becoming a Vue Developer. Clicking on each node will display links to useful resources for the related topic. After you are done with Vue, you can even proceed on to the Frontend developer or other roadmaps to see what you have missed on your learning journey!✨
Options API and Composition API:
The Options API is a traditional way of building Vue components that has been around since 2013. However, since Composition API's release in Vue 3, it has been the preferred method that offers a more flexible and intuitive way to organize and reuse code. It allows developers to encapsulate logic into reusable functions called "composition functions."
Options API vs. Composition API
If you have some prior knowledge of Vue 2, chances are you may be wondering if you should use Options API. This article starts by explaining the key concepts of the Options API, such as data, methods, and lifecycle hooks. Then, it introduces the Composition API, highlighting its simplicity and reduced code size.
How to use Composition API the right way
This article further dives into the usefulness of using Composition API and the issues with Options API. It explains how to use the Composition API properly and the benefits.
Why I Love Vue 3's Composition API
In this article, Michael Hoffman makes a clear comparison between Options API and Composition API by building the same application with each method.
Jump in if you want to further understand why you should be using Composition API 😎
Refactoring a Component from Vue 2 Options API to Vue 3 Composition API
To truly understand the Composition API, we have to first look back and understand how things work in Vue 2. In this article, it explains Options API from Vue 2 and how it evolves in Vue 3 and why Composition API should be the preferred method.
Great read to understand Composition API from a different perspective.
Vue Router
Vue Router is a routing library for Vue.js that enables the creation of single-page applications. It allows developers to define routes, handle navigation, and load different components based on the current route.
How to Use Vue Router: A Complete Tutorial
Look no further if you are looking to learn routing in Vue 3. This article covers the basics from Vue Router Fundamentals to Dynamic routing and Lazy Loading.
Good article to read and save for future reference!
How To Navigate Between Views with Vue Router
Time to get hands on again! This article explains the need for Vue router and features a step-by-step guide from to build a Vue 3 application and route it with Vue router.
This is part of a 9 parts series with basic and advanced topics. Be sure to check them out as well
Pinia Fundamentals
Pinia is a state management library specifically designed for Vue.js 3. It provides a minimalistic approach to managing application state by leveraging the new features of Vue 3, including the Composition API.
Easy State Management in Vue 3 Using Pinia
This short article showcases the key aspects of Pinia, the superhero of state management in Vue 3. Understand the fundamentals of Pinia and say goodbye to the confusion of passing data around 🚀
Advantages of Pinia vs Vuex
If you are working on state management, chances are you may be wondering to use Pinia or Vuex. And although Pinia is the recommended library for Vue.js state management, it helps to understand Vuex which is still used in Vue 3.
You'll find detailed Q&A styled explanations to your questions here!
How To Handle State Management in Vue Using Pinia
This post provides a high-level overview of handling state management in a Vue application with Pinia. It elaborates on state management and dive deeper with code examples.
TypeScript:
Vue.js 3 introduces enhanced support for TypeScript, a statically typed superset of JavaScript. TypeScript with Vue 3 improves code maintainability, type checking, and error prevention.
Learn TypeScript Basics in this Beginner's Guide
If you are new to TypeScript, this article is a good place to start. Although it does not relate to Vue.js, it contains information to get you started with TypeScript. It guides you through what is TypeScript, the key concepts and also all the cool features of using TypeScript 😎
Be sure also to check out the TypeScript documentation.
Why Use TypeScript with Vue.js?
Need more convincing to start using TypeScript with Vue 3? Check this article out for more insights on using TypeScript in your Vue.js project.
Getting started with Vue.js3 and Typescript: A Beginners Guide
Now that you know TypeScript, it's time to dive in. Learn how to set up your project, create components, and effortlessly bind data for dynamic user interfaces 🌟
Unit Testing:
Unit testing plays a crucial role in ensuring the quality and reliability of Vue.js applications. Unit testing can be implemented via popular testing frameworks and libraries such as Jest, Vite and Vue Test Utils.
Testing Vue.js Components with Vue Test Utils
Vue 3 provides an official set of testing utilities known as Vue Test Utils. This article walks you through using Vue Test Utils and Jest to write unit tests. It provides examples to test your Vue.js codes and components such as forms and emitted events.
Getting Started with Vitest
If you are already running your Vue.js projects with Vite, a build tool developed by Evan You, consider using the blazing fast Vitest for your tests instead 🔥 Get started by following the installation instructions and demos in this article.
Knowing What To Test - Vue Component Unit Testing
Learning the tools to unit testing is important, however it is just as crucial to know what to test. As a beginner, you may feel lost at first which components to test. Understanding this will save you time and effort in testing only the key components and business logics.
Although the codes in this article is written in Vue 2, it is still a good read that provides valuable insights to unit testing.
Conclusion
In the world of Vue.js 3, we've rounded up 21 articles that are pretty handy for beginners. These articles cover a bunch of stuff, from the basics of Vue.js to Composition API, Vue Router, Pinia, TypeScript, and unit testing. Whether you're just starting out or want to level up your Vue.js skills, these articles have got you covered. Vue.js is becoming more and more popular, so these resources will help you build web apps with ease. Dive into these articles and become a Vue.js whiz at your own pace! 🚀
Vue-PDF-Viewer: Flexible and Powerful Vue.js PDF Component
If you feel like this article helped you, please check out Vue-PDF-Viewer. You can customize the PDF viewer component to your theme, add locales, configure panel and more. Each function has TS and JS codes, unit tests and interactive demos. With our starter kits, you can start rendering the Vue-PDF-Viewer in minutes.
It would encourage me to continue creating even more contents. Thank you in advance! 🙏
Top comments (0)