Nuxtjs custom module

Question

I'm quite new to Nuxtjs so I made a test project which purpose is merely the (of course) testing of Nuxtjs functionalities.

Currently I'm trying to create a simple custom module: afaik a module is basically a wrapper around a vou/js library/plugin, something like a high-level integration used to expose configurations on how the underlying library/plugin is imported and used in the Nuxt application.

So I'm trying with a simple module that declare some plain js classes that I'll use in my application, e.g. Order and Product, and that's what I came out with:

Directory structure

pages
  the-page.vue
modules
  classes
    index.js
    order.js

/modules/classes/index.js

const path = require('path')

export default function (moduleOptions) {
    const { nuxt } = this

    // add the debug plugin
    this.addPlugin({
        src: path.resolve(__dirname, 'order.js'),
    })
}

/modules/classes/order.js

class Order {
    constructor(id) {
        this.id = id;

        console.log('created order #' + this.id);
    }
}

export {Order};

/nuxt.config.js

export default {
  // ...
  buildModules: [
    // ...
    '~/modules/classes'
  ],
  // ...
}

/pages/the-page.vue

<script>
export default {
  name: 'ThePage',
  data () {
    return {
    }
  },
  methods: {
    createOrder () {
      const order = new Order(123)
    }
  }
}
</script>

The error

My defined class are still not imported in my pages:

/app/pages/the-page.vue
  18:13  error  'order' is assigned a value but never used  no-unused-vars
  18:25  error  'Order' is not defined                      no-undef

Considerations

Probably I'm missing something about modules usage and/or implementation, but every tutorial I found starts with too complex scenarios, and since I'm at the beginning with Nuxtjs I need something easier to implement.

Answer 1

Ok, I found out that I was mistaken how NuxtJs modules are intended to work and was traying to do somenthing they are not intended for.

Nuxt modules cannot import js classes in every component of the application as I wanted to do, they just "add a property" to the main application instance that is made accessible through this.$<something>, like e.g. you can already do in simple Vue with the Vue Router or the Vuex store plugins that give access to the this.$router and this.$store properties.

NuxtJs modules just wrap simple plugins and expose configuration options to made.