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>