The Vue.js 3 API Tutorial
In this Vue tutorial we learn about APIs and how to communicate with the various parts that make up Vue.
We cover the differences between Vue's APIs and what they're used for, common plugins and external frameworks and services.
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.
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’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.
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.