Introduction

Nuxt.js, a powerful framework for Vue.js, allows you to extend its functionality using plugins. Nuxt plugins are an excellent way to add custom functionality, third-party libraries, or configurations to your Nuxt application. In this guide, we'll explore how to create and use plugins in Nuxt.js and provide sample code to demonstrate the process.

Sample Code

Let's create a Nuxt.js application and use a custom plugin:

<div id="app">
  <p>Welcome to my Nuxt.js application!</p>
  <p>Random Number: {{ randomNumber }}</p>
const myPlugin = context => {
  const { app } = context;
  app.randomNumber = Math.floor(Math.random() * 100);
};
const app = new Vue({
  el: '#app',
  mounted() {
    myPlugin(this);
  },
  computed: {
    randomNumber() {
      return this.$root.randomNumber;
    }
  }
});
            

In this code:

• We create a Vue component with a simple welcome message and a display for a random number generated by the plugin.
• We define a custom Nuxt plugin called `myPlugin` that takes the Nuxt context as a parameter and adds a `randomNumber` property to the Nuxt app instance.
• In the Vue instance, we use the `mounted` lifecycle hook to call our custom plugin and pass the Nuxt context to it.
• We use a computed property to access and display the `randomNumber` added by the plugin.