The Vue.js 3 API Tutorial

Lesson Video

If you prefer to learn visually, you can watch this lesson in video format.

Vue's Application Programming Interface (API)

Before we talk about Vue’s API, let’s explain what an API is. At its most basic, an API is simply a way to interact or communicate with an application.

For example, if you’re integrating Google Maps into your application, you’re using its API to interact with it. Similarly, Vue has a specific way for us to interact with it, like template blocks or lifecycle hooks.

But Vue’s features and functionality is split up into multiple API’s. It decouples non-essential features from the core functionality so that we can add them only if we need to.

For example, we can use the Provide and Inject APIs that come with the core API for simple state management. If we need something more complex, we can add the Vuex API.

Unfortunately, this means beginners are sometimes confused about where to start, or which API to use for their web application. In this lesson, we’ll do a quick overview of Vue’s API’s.

Global API vs Application API

Vue is one of the only modern Javescript frameworks that can be used to create full single-page applications, or standalone components that can be “dropped into” an existing web page/site.

What we want to do determines which one we pick.

• The Global API is used to add standalone components to an existing web page/site. It’s just a file with the core Vue library, bundled and minified. We can download and host it ourselves, or grab the hosted link from a CDN like unpkg or jsDeliver .
• The Application API is used to create single-page applications (SPAs). To use it, we create a project with the Vue CLI (or Vite ) and compile it to a working application once development is finished.

note This course will start with the Application API, then cover the Global API once you’re more familiar with Vue.

Options API vs Composition API

Both the Global and Application APIs use two other APIs. We can think of them as the main APIs, the way we use Vue.

• The Options API separates component data and functionality into different sections, known as options. It’s easy to learn and is suitable for small to medium scale applications.
• The Composition API combines all component data and functionality into a single section. It’s slightly more difficult to learn and is recommended for large scale applications.

tip We don’t have to choose one over another, we can use both in our application.

note This course will start with the Options API, then cover the Composition API once you’re more familiar with Vue.

Vue Plugins

Vue’s functionality can be extended with additional APIs, typically referred to as plugins. These are only added to an application if they are needed and work with both the Options and Composition APIs.

Let’s see a few plugin examples.

• [Official] Vuex is a state management system.
• [Official] Vue Router helps us navigate between pages and load components.
• [Official] Vue Test Utilities helps us test our components and application.
• [Unofficial] I18n helps us add internationalization to our components and application.
• etc.

note This course covers the most commonly used plugins that you will need in an app, like Vuex , Vue Router etc.

External frameworks & services

There are APIs that aren’t specific to any framework, but may still be needed in our project.

Following are a few examples.

• Jest or Mocha & Chai are used to perform unit tests.
• Firebase tools help us view and manage integration with its services, like its Firestore database.
• Vuetify is a Vue UI Library with premade components.
• Tailwind is a CSS framework that helps us develop lightweight, beautiful user interfaces.

note This course covers the most commonly used external APIs, frameworks and services that you would need in an app, like Jest , Firebase , Tailwind etc.

Compatible languages

Vue allows us to develop our apps with either Javascript or TypeScript.

TypeScript is a strongly typed language from Microsoft that transpiles its code into native Javascript.

note This course will primarily use Javascript, but we do cover TypeScript later on .