Nuxt Js Cheat Sheet



Nuxt.js Cheatsheet We’ve included the shortcuts for the most commonly used aspects of Storyblok with Nuxt.js. Our cheat sheet is available in pdf A4 format. Configuring Nuxt. Before building the image, you have to change a little bit in.env nuxt file. Find HOST declaration. Just replace 127.0.0.1 (or localhost) for name of your service declared in docker-compose.yml. In that way an internal Docker address wil be passed to your Nuxt.js. You are ready to build and test your docker image.

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

Introduction

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 nuxt-composition-api module

As usual, we start with a fresh Nuxt project.

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.

nuxt.config.js

Nuxt Js Cheat Sheet Excel

🎉 That's it, we've already finished the API integration.

So, what's happening here exactly?

  • The module installs @vue/composition-api into 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:

  • useFetch for asynchronous data-fetching and
  • withContext to access the Nuxt.js context easily.

You can find additional information on the nuxt-composition-api GitHub page.

Nuxt

2. Install @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.

  • plugins/composition-api.js

Please let me know if you're interested in reading more on the new Vue Composition API.

Cheat Sheet Recipes

Further reading

Nuxt Js Store

Vue 3 Cheat Sheet
Vue composition API
Composition API on github





Comments are closed.