DEV Community

Zak Miller
Zak Miller

Posted on • Originally published at zakmiller.com

6 1

How to Serve Vue with Nest

Want to serve a VueJS app from a NestJS backend? Here's how you do it.

Create a new Nest app

Install the Nest CLI

npm install -g @nestjs/cli
Enter fullscreen mode Exit fullscreen mode

Create the NestJS app

nest new nest-with-vue
Enter fullscreen mode Exit fullscreen mode

Install the dependencies

cd nest-with-vue
npm install
Enter fullscreen mode Exit fullscreen mode

Verify it's all working properly

First, run it (this will watch the folder so we won't have to restart the server as we make changes):

npm run start:dev
Enter fullscreen mode Exit fullscreen mode

Then, hit it (in a separate terminal window):

curl localhost:3000
Enter fullscreen mode Exit fullscreen mode

You should get Hello World!.

Set it up to serve static content

Install the package:

npm install --save @nestjs/serve-static
Enter fullscreen mode Exit fullscreen mode

Use the package

src/app.module.ts:

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ServeStaticModule} from '@nestjs/serve-static'; // New
import { join } from 'path'; // New

@Module({
  imports: [
    ServeStaticModule.forRoot({ // New
      rootPath: join(__dirname, '..', 'client/dist'), // New
    }), // New
  ],
 controllers: [AppController],
 providers: [AppService],
})
export class AppModule {}
Enter fullscreen mode Exit fullscreen mode

src/main.ts:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.setGlobalPrefix('api'); // New
  await app.listen(3000);
}
bootstrap();

Enter fullscreen mode Exit fullscreen mode

We're moving all the existing endpoints to under /api, and then serving the static content in the ./client/dist folder (which doesn't exist yet) when someone hits the root (in this case localhost:3000).

Also note that the name client here could be anything. It's just the folder where we're going to put the Vue app.

Verify that the controller endpoint moved

Now, if we hit the previous endpoint:

curl localhost:3000
Enter fullscreen mode Exit fullscreen mode

You should get {"statusCode":500,"message":"Internal server error"}.

But if you hit the new /api endpoint:

curl localhost:3000/api
Enter fullscreen mode Exit fullscreen mode

You get Hello World! again.

Now we just have to create the Vue app in that ./client/dist folder.

Create the VueJS app

Install the Vue CLI:


npm install -g @vue/cli
# OR
yarn global add @vue/cli
Enter fullscreen mode Exit fullscreen mode

Create the app:

vue create client
Enter fullscreen mode Exit fullscreen mode

Build the app:

cd client
npm run build
Enter fullscreen mode Exit fullscreen mode

This will put all the static files in ./client/dist, right where the Nest app will be looking for them.

Verify that Nest is serving the compiled Vue app

curl localhost:3000
Enter fullscreen mode Exit fullscreen mode

You should get something that looks like:

<!DOCTYPE html><html lang=en> ... <strong>We're sorry but client doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> ... </html>
Enter fullscreen mode Exit fullscreen mode

Which is the HTML being served by the Vue app.

Open it up in your browser and you'll see it's working!

Vue screenshot

Closing words

That's it. You can find the complete code here.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay