Learning Vue.js is worth starting with the fact that it is a popular JavaScript framework for creating user interfaces. The Vue core includes a core library and a router, and the framework itself is suitable for gradual implementation, unlike its monolith counterparts.

A roadmap for learning Vue.js in 2023:

First of all, visit the Russian-language version of the official Vue website.js: there you will find answers to most of the questions that will arise during the study. Then proceed to the tools and technologies that you will need to work effectively with the framework.

1. Assembling
2. Stylization
3. State management
4. Type checking
5. API
6. Routing
7. Utility Libraries
8. Testing
9. i18n
10. Desktop
11. Server rendering
12. Conclusion

Assembling

npm and Yarn package managers will make your life easier by independently calculating a set of operations for each package and running the package installer with the necessary parameters. Also master the work with the Vite build tool and task runners like npm-scripts.

As for Vite, it is an alternative to the Vue CLI. Instead of Webpack, it uses single-file components without a bundle assembly step. You will learn more about this tool from the video:

Stylization

This is the basis necessary for any frontender. Deepen your knowledge by studying the Sass/SCSS and PostCSS preprocessors, the Tailwind framework and single-file components.

State management

It is necessary to understand the state of the components in Vue, as well as the way to define the components of the Composition API. You will learn more about what the Composition API is and how to use it from our article.

Type checking

Suppose the application is growing, and the risk of getting bugs related to type checking is the same. In some cases, TypeScript should be used for correct type checking throughout the application, and in some cases, PropTypes. How does it work? You can list input parameters using an object in which the property and value contain information about the type of a particular parameter and its name. For example:

props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // или любой другой конструктор
}

As for working with the API, everything is standard here:

GraphQL
Apollo
Relay
REST
Fetch
Axios
SuperAgent

Routing

Vue Router is the official routing library of the framework. Its advantages include the modular configuration of the router, convenient navigation control, customizable page scrolling, animation of transitions of views and much more. The bottom line is that Vue Router adds the current route to each component — just specify this.$route inside the required component.

Utility Libraries

The OpenGL Utility Library (GLU) is a graphics library that is an add—on to OpenGL. In fact, there are a lot more options to explore here than are presented in the roadmap for studying Vue.js . Among them:

Lodash
Day.js
Ramda
Numeral
RxJS

Testing

The developers of Vue are also the creators of Vue Test Utils — the official library for unit testing: we advise you to familiarize yourself.

And although end-to-end testing is not directly related to Vue.js, it is also necessary to ensure the smooth operation of the application. Popular tools for E2E testing include Cypress, Selenium, Puppeteer and Cucumber.js .

i18n

Internationalization in programming is the process of planning and implementing products and services so that they can be adapted for users from any region. This is exactly what Vue I18n is designed for — a plugin that easily integrates localization functions into the application. Vue.js .

Desktop

Electron is a framework developed by GitHub, with Node.js under the hood. It cannot be said that it is directly related to the study of Vue.js, but if you plan to create native graphical desktop applications on Vue, be sure to pay attention to Electron.

Server rendering

Developing high-performance applications on Vue will require code separation, component-based routing, server rendering, and much more. These and additional features like Progressive Web Applications (PWA) are provided right out of the box with a minimalistic framework Nuxt.js .

Conclusion

So how to start learning Vue.js in 2023? The roadmap includes not only technologies that relate directly to Vue. You should be able to work with build tools like package managers and Vite, master CSS at the architecture and preprocessor level, manage state, perform type checking, work with API tools, routing, testing and utility libraries. Do not forget about the localization of the application, server rendering, as well as frameworks for desktop development.

You may also be interested in other guides: