Vue.js

Map your domain

hatch add myapp.test 5173 --https

Configure the dev server

Vue projects created with create-vue or Vite use the same Vite dev server. Configure it to accept proxy connections and route HMR through your domain:

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    host: true,
    hmr: {
      host: 'myapp.test',
      protocol: 'wss',
    },
    allowedHosts: ['myapp.test'],
  },
});

Environment variables

# .env
VITE_APP_URL=https://myapp.test

Access in your app with import.meta.env.VITE_APP_URL.

Vue CLI projects

If you're using the older Vue CLI (webpack-based), configure the dev server in vue.config.js:

// vue.config.js
module.exports = {
  devServer: {
    host: '0.0.0.0',
    allowedHosts: 'all',
    client: {
      webSocketURL: 'wss://myapp.test/ws',
    },
  },
};

Project config

# .hatch.yaml
domains:
  - domain: myapp.test
    port: 5173
    https: true