Plugin Injection in NuxtJS

hello-plugin-store.example.js

// store/index.js

export const actions = {
  print ({ commit, dispatch }, message) {
    this.$hello(message)  
  },
}

// ...

// pages/hello-example.vue

export default {
  name: 'HelloExamplePage',
  
  mounted () {
    // prints 'Hello from mounted()!' to the console  via the 'print' action in the store
    this.$store.dispatch('print', 'from mounted()')
  },
  
  // ...
}

hello-plugin.example.js

// pages/hello-example.vue

export default {
  name: 'HelloExamplePage',
  
  async asyncData ({ app: { $hello } }) {
    // prints 'Hello User!' to the console on the server or browser
    $hello('User')
  },
  
  mounted () {
    // prints 'Hello Browser!' to the browser's console
    this.$hello('Browser')
  },
  
  methods: {
    printHello () {
      // prints 'Hello There!' to the console when printHello() is called
      this.$hello('There')
    },
  },
  
  // ...
}

hello-plugin.nuxt.config.js

// nuxt.config.js

export default {
  // ... 
  plugins: ['~/plugins/hello.plugin.js']
  // ... 
}

hello.plugin.js

// plugins/hello.plugin.js

export default ({ app }, inject) => {
  // Inject $hello(msg) in Vue, context and store.
  inject('hello', msg => console.log(`Hello ${msg}!`))
}

logging.example.html

// pages/example.vue

<template>
  <button @click="log('Button clicked!')">Click Me</button>
</template>

<script>  
export default {
  name: 'ExamplePage',
  
  created () {
    this.$logging.log('Component created!')
  },
  
  mounted () {
    this.$logging.debug('Component mounted!')
  },
 
  methods: {
    log (message) {
      this.$logging.log(message)
    },
  },
  
  // ...
}
</script>

logging.service.js

// logging.service.js

export class LoggingService {
  constructor (prefix) {
    this.prefix = prefix
  }
  
  log (message) {
    console.log(`[${this.prefix}] ${message}`)
  }
  
  debug (message) {
    console.debug(`[${this.prefix}] ${message}`)
  }
  
  warn (message) {
    console.warn(`[${this.prefix}] ${message}`)
  }
}

recommendations-alt.service.js

// recommendations.service.js

import axios from 'axios'

export class RecommendationsService {
  async getRecommendations () {
    return axios.get('/api/recommendations')
  }
}

recommendations.example.html

// pages/recommendations.vue

<template>
  <section>
    <p>Your Recommendations: {{ recommendations }}</p>
    <button @click="reloadRecommendations()">Reload</button>
  </section>
</template>

<script>  
export default {
  name: 'RecommendationsPage',
  
  async asyncData ({ app: { $recommendations } }) {
    // use the recommndations service to get a list of recommendations
    const { data: { data: recommendations } } = await $recommendations.getRecommendations()
    
    return { recommendations }
  }, 
  
  methods: {
    async reloadRecommendations () {
      // access and call the recommendations service via the Vue component instance
      const { data: { data: recommendations } } = await this.$recommendations.getRecommendations()
      
      this.recommendations = recommendations
    },
  },
  
  // ...
}
</script>

recommendations.js

// pages/recommendations.vue

export default {
  name: 'RecommendationsPage',
  
  async asyncData ({ app: { $axios } }) {
    const { data: { data: recommendations } } = await $axios.get(
      '/api/my-account/recommendations'
    )
  },
  
  // ...
}

recommendations.service.js

// recommendations.service.js

export class RecommendationsService {
  constructor ($axios) {
    this.$axios = axios
  }
 
  async getRecommendations () {
    return this.$axios.get('/api/recommendations')
  }
}

services-recommendations.plugin.js

// plugins/services.plugin.js

import { RecommendationsService } from '../recommendations.service'

// access $axios from the app context
// https://nuxtjs.org/docs/2.x/internals-glossary/context/
export default ({ app: { $axios } }, inject) => {
  // pass $axios as a dependency to the RecommendationsService constructor
  const recommendations = new RecommendationsService($axios)
  
  // inject the service, making it available in the context, component, store, etc.
  inject('recommendations', recommendations)
}

services.plugin.js

// plugins/services.plugin.js

import { LoggingService } from '../logging.service'

export default ({ app }, inject) => {
  // create an instance of the LoggingService with the prefix 'My App'
  const logging = new LoggingService('My App')
  
  // inject the service, making it available in the context, component, store, etc.
  inject('logging', logging)
}

This is great however I see your title says it's for Nest JS but your article says Nuxt JS. Can you clarify this please?

This is great however I see your title says it's for Nest JS but your article says Nuxt JS. Can you clarify this please?

Huh, I must have mixed it up with a couple of my other pieces. I've corrected the title. Thanks!

Why the recommendations-alt.service.js? Didn't you forget the "import axios from 'axios'" in the recommendations.service.js?