About me
Share on linkedin
...

Running Vue.js in VS Code Server with Docker

Before following this guide, make sure you have read and completed the steps in my previous article on running VS Code Server on a development server using Docker. That article sets up the basic containerized VS Code environment, which is a prerequisite for running Vue.js. You can find it here: Running VS Code Server with Docker.

Today, we’ll extend that setup to support Vue.js, allowing you to seamlessly develop front-end projects alongside your backend.

1. Update Your Dockerfile to Install Node.js

Vue.js requires Node.js to run, so the first step is to install it in your Docker container. In this guide, we recommend installing Node.js version 25 (LTS) to ensure compatibility with the latest Vue.js features and tools.

Open your Dockerfile and add the following lines:

# Install Node.js (version 25 LTS)
RUN curl -fsSL https://deb.nodesource.com/setup_25.x | bash - && \
    apt-get install -y nodejs

This will add Node.js 25 and npm to your container, allowing you to run Vue.js commands and manage packages.

2. Adjust Your package.json for Vue.js

When running Vue.js in a containerized environment, we need to ensure the development server is accessible from outside the container. To do this, modify the scripts section of your package.json.

Change:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

To:

"scripts": {
  "dev": "vite --host",
  "build": "vite build",
  "preview": "vite preview"
}

The key change is vite --host for the dev script. This tells Vite (Vue.js’s development server) to listen on all network interfaces, making it accessible through your Docker container’s exposed ports.

3. Running Vue.js in VS Code Server

Now everything is set up:

  1. Start your VS Code Server container.

  2. Open your project folder in the remote VS Code instance.

  3. Run your Vue.js dev server:

    npm install
npm run dev

You should see output indicating the Vite server is running and accessible via http://localhost:5173. You can now develop your Vue.js application directly inside the VS Code Server environment.

Conclusion

With just a few modifications—installing Node.js version 25 (LTS) and updating the dev script in package.json—you can run Vue.js in the same Dockerized VS Code Server environment you use for Django. This makes your development workflow unified and efficient, whether you’re working on front-end or back-end projects.

Go back