Static GitHub Issues

[2522] Importing pages from another module

prev: Can I get the window object before default
next: Understanding Nuxt request lifecyle

I'm building an app with Nuxt and would like to separate out some of the pages into another folder. Effectively, I'd like to combine 2 or more sets of Nuxt files and combine them into a single app.

Here's the folder structure I'm trying:

app
└─ packages
   ├─ main
   │  ├─ assets
   │  ├─ components
   │  ├─ pages
   │  ├─ store
   │  ├─ (other nuxt folders...)
   │  └─ nuxt.config.js
   └─ plugin-a
      ├─ assets
      ├─ components
      ├─ (other nuxt folders...)
      ├─ index.js
      └─ nuxt.config.js

I'm using the express-template for the main package and the starter-template for the plugin-a package. The index.js in plugin-a creates and builds a Nuxt instance, then exports it. server/index.js in main will then import this Nuxt instance and set up an express route to render it.

Here's the code:

plugin-a/index.js

const { Nuxt, Builder } = require('nuxt')

const nuxtConfig = require('./nuxt.config')
nuxtConfig.dev = !(process.env.NODE_ENV === 'production')

// Init Nuxt.js
const nuxt = new Nuxt(nuxtConfig)

// Build only in dev mode
if (nuxtConfig.dev) {
  new Builder(nuxt).build()
}

module.exports = nuxt

main/server/index.js

import express from 'express'
import { Nuxt, Builder } from 'nuxt'
import pluginA from 'plugin-a'  // import the plugin nuxt instance

import api from './api'

const app = express()
const host = process.env.HOST || '127.0.0.1'
const port = process.env.PORT || 3000

app.set('port', port)

// Import API Routes
app.use('/api', api)

// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

// Init Nuxt.js
const nuxt = new Nuxt(config)

// Build only in dev mode
if (config.dev) {
  new Builder(nuxt).build()
}

// Give nuxt middleware to express
app.use('/main', nuxt.render)
app.use('/plugina', pluginA.render)  // render the plugin

// Listen the server
app.listen(port, host)
console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console

The problem is Nuxt.render only seems to use the files in the current directory, so both /main and /plugina show the pages from the main package. Alternatively, if I try calling new Builder(pluginA).build() in main/server/index.js I get unexpected token errors in .nuxt/client.js (I assume Nuxt doesn't like Builder.build being called more than once).

I'm pretty stuck at this point and I don't see any way to approach this, aside from rolling my own Vue SSR implementation to handle this.

If anyone has any ideas about how to split up a Nuxt app like this that they could share, I'd very much appreciate it.

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2191">#c2191</a>)</em></sub></div>