How do you use Nuxt together with the Composition API? In this tutorial, we take a quick look on how to integrate the API with the help of the 'nuxt-composition-api' module.
Table of Contents
Note: This quick tutorial is for developers familiar with the basics of Nuxt.js. I recommend skimming through the Composition API specification first. Please note that using the API in production is not recommended
1. QuickStart Vue 3 Composition API with the
As usual, we start with a fresh Nuxt project.
npx create-nuxt-app myproject
Nuxt modules give you the ability to extend your app with additional plugins and configuration options across different projects. Luckily @danielroe 👋 has created a module to get started quickly with the Vue Composition API.
yarn add nuxt-composition-api
🎉 That's it, we've already finished the API integration.
So, what's happening here exactly?
- The module installs
@vue/composition-apiinto the Nuxt plugin context. This means you can use the API everywhere in your app without manual integration of any additional plugins.
Further, you can make use of some useful functions:
useFetchfor asynchronous data-fetching and
withContextto access the Nuxt.js context easily.
You can find additional information on the
nuxt-composition-api GitHub page.
@vue/composition-api as a plugin
Naturally, we can integrate the Composition API as a plugin too. Please note that you have to handle fetch and context management yourself.
yarn add @vue/composition-api
import Vue from 'vue'
import CompositionApi from '@vue/composition-api'
Please let me know if you're interested in reading more on the new Vue Composition API.