Pages in Modules

[rwatts3]

Greetings,

Is there documentation on how to include pages folders via a modules ? Essentially I would like to supply the module consumer with a /admin route already configured and ready to go.

Also I would like to provide a set of components for the end user as well.

_{This question is available on Nuxt.js community (#c80)}

[pencilpix]

hey, I don't know if this solution is best practice, but I used a plugin to provide components for public use in the whole app. and I extended the routes and add new routes that is already related to the module and ready to go like this:

// module.js
const { resolve } = require('path')
const newRoute = {
  name: 'admin',
  path: '/admin',
  chunkName: 'admin',
  component: resolve(__dirname, './path/to/components/admin.vue'),
}


module.exports = function module(moduleOptions) {
  // do some stuf with options and default options.

  // inject the new route
  this.extendRoutes(routes => {
    routes.unshift(newRoute)
  })


  // add plugin to provide dump components to make it available publicly through
  // the whole app.
  this.addPlugin({
    src: resolve(__dirname, './path/to/module.components.plugin.js'),
    fileName: 'module.components.js',
    options, // if you need to inject some options.
  })
}

and in the plugin

// module.components.plugin.js
import Vue from 'vue'
import myComponents from '~/modules/myModule/mycomponents.js'
// also you can provide a different path dynamically through the options of the module like:
// import SomeComponents from '<%= options.modulePath %>/someComponents.js

Vue.use(myComponents) // if you don't need to pass options
// or
// Vue.use(myComponents, <%= options %>) to pass the options of the module to
// the components.
export default function moduleComponentsPlugin(ctx) {

}

and as any Vue plugin can provide components and directives like:

// mycomponents.js

import SomeComponent from './path/to/moduleComponent.vue'
import SomeDirective from './path/to/moduleDirective.js'

export default {
  install(Vue, options) {
    Vue.component('SomeComponent', SomeComponent)
    Vue.directive('some-directive', SomeDirective)
    // ... add some logic or extend the vue prototype to add more public methods
  }
}

i hope it helps

[anteriovieira]

@rwatts3 was your question answered? Can we close this question?

[MartinMuzatko]

being able to use the same pages structure within a module would be nice

[mikehoh]

I'm trying to create pages inside a module as npm package. Looks like @pencilpix example is good, but I still have issues with ssr/client. Routes are working. Components are visible for the main project. But it works well on ssr and not well on client side. Looks like components are not initialized correct. Maybe someone has working example? Thanks.