Starting up a new Vue 3 project with Vite and Docker

I'm enjoying new Vue 3 script setup syntax and blazing fast hot-reload using Vite.
And as I'm using Docker containers for my development environment here are the few steps needed to start a new Vue 3 project with Vite under the Docker.

Docker

docker-compose.yml

version: "3.4"
services:
  my_frontend:
    container_name: my_frontend
    image: node:lts
    working_dir: /var/www/html/app/
    entrypoint: /bin/bash
    expose:
      - 8000
    volumes:
      - ./frontend/:/var/www/html/app
    tty: true

This is simple. Just using the node:lts image and setting some stuff around.

I'm spinning the container up with:
$ docker compose up -d
and hooking into the container with:
$ docker exec -it my_frontend /bin/bash

New Vue Project

When in the docker container, create a new Vite with Vue project:
$ npm init @vitejs/app
Then select the Vue, name the project and so on.
After the project is generated, install the packages.

Setting up the Project for running under the Docker

For running the project under the Docker there are some adjustments that need to be done in the Vue/Vite project.

At first the port must be set to match the one in the docker-compose.yml file (in my case it is 8000).

Open the vite.config.js file and add the server object with the port field to the configuration:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  server: {    // <-- this object is added
    port: 8000
  },
  plugins: [vue()]
})

We must also add parameter --host to the vite command in the package.json, so replace dev command in scripts:

// package.json
...
"scripts": {
    "dev": "vite",
...

with:

// package.json
...
"scripts": {
    "dev": "vite --host",
...

And that's it!