Nest: Nuxt integration routes

[ol-funky]

I'm submitting a...

[x] Regression
[x] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request

Current behavior

After upgrade from 4.1.0 to 4.5.9 NUXT integration stop working. Depending on the order of nuxt render and nest listen work only routes from NUXT or Nest.

Only Nest routes work:

async function bootstrap() {
    const nuxt = await new Nuxt(config);

    config.dev = !(process.env.NODE_ENV === 'production');
    if (config.dev) {
        new Builder(nuxt).build()
    }

    const app = await NestFactory.create(ApplicationModule);
    await app.listen(8000);

    app.use(nuxt.render);
}
bootstrap();

Only NUXT routes work:

async function bootstrap() {
    const nuxt = await new Nuxt(config);

    config.dev = !(process.env.NODE_ENV === 'production');
    if (config.dev) {
        new Builder(nuxt).build()
    }

    const app = await NestFactory.create(ApplicationModule);

    app.use(nuxt.render);

    await app.listen(8000);

}
bootstrap();

Expected behavior

Both routes working.

Minimal reproduction of the problem with instructions

Upgrade from:

"dependencies": {
    "@nestjs/common": "4.1.0",
    "@nestjs/core": "4.1.0",
    "nuxt": "^1.0.0-rc11"
}

to:

  "dependencies": {
    "@nestjs/common": "4.5.9",
    "@nestjs/core": "4.5.10",
    "nuxt": "^1.3.0"
}

[hawkend]

For temporary solution pass nuxt midleware as first. When you've done that, change base path of your nuxt app by adding following entity below. After you did that, you might want to redirect automically to nuxt app, you can achieve this by creating controller. This method allowing you to omit nestjs routing by forcing vue-router to map all routes firstly which start from /app path. I know this solution isn't right one however you can at least back to your development.

nuxt.config.js

router: {
    base: '/app'
}

main.ts

async function bootstrap() {
    const nuxt = await new Nuxt(config);

    config.dev = !(process.env.NODE_ENV === 'production');
    if (config.dev) {
        new Builder(nuxt).build()
    }

    const app = await NestFactory.create(ApplicationModule);

    app.use(nuxt.render);

    await app.listen(8000);

}
bootstrap();

[hawkend]

I was thinking how to resolve it in more elegent way and finally found it. I think it's more accurate workaround to resolve your problem. I've created a instance of express then used regex to exclude api and test path from being affected by vue-router.

main.ts

async function bootstrap() {
    const nuxt = await new Nuxt(config);
    const instance = new Express();
    instance.get(/^(?!\/?(api|test)).+$/, (request, response) => nuxt.render(request, response));
    config.dev = !(process.env.NODE_ENV === 'production');
    if (config.dev) {
        await new Builder(nuxt).build();
    }
    const app = await NestFactory.create(ApplicationModule, instance);
    await app.listen(3000);
}
bootstrap();

[ol-funky]

Thanks, It's ugly but lot better.

[chanlito]

@marcinstasiak here's my setup https://github.com/chanlito/nuxt-ts-starter/blob/master/server/main.ts

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.