vite.config.ts

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import ViteYaml from '@modyfi/vite-plugin-yaml'

// Load environment variables from the app directory where UserFrosting stores its .env file
const envDir = 'app'
const env = loadEnv('development', envDir, ['VITE_', 'UF_'])

// Get vite port from env, default to 5173
const vitePort = parseInt(env.VITE_PORT || process.env.VITE_PORT || '5173', 10)

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        ViteYaml(),
        vueDevTools({
            appendTo: 'app/assets/main.ts'
        })
    ],
    // Load .env from app directory (where UserFrosting stores its .env file)
    envDir: 'app',
    server: {
        host: true, // Allows external access (needed for Docker)
        strictPort: true,
        port: vitePort,
        origin: `http://localhost:${vitePort}`,
    },
    root: 'app/assets/',
    base: '/assets/',
    build: {
        outDir: '../../public/assets',
        assetsDir: '',
        emptyOutDir: true,
        manifest: true,
        rollupOptions: {
            input: {
                main: 'app/assets/main.ts'
            }
        }
    },
    // Fix uikit path issue
    // @see : https://github.com/uikit/uikit/issues/5024
    css: {
        preprocessorOptions: {
            less: {
                relativeUrls: 'all'
            }
        }
    },
    // Force optimization of UiKit (not module packages) in dev mode 
    // to avoid the error:
    // "importing binding name 'default' cannot be resolved by star export entries"
    optimizeDeps: {
        include: ['uikit', 'uikit/dist/js/uikit-icons']
    }
})