Nugsoft Developer Guides

Configuration in Vue 3

Proper configuration ensures your Vue 3 app runs smoothly in different environments (development, staging, production).

Environment Variables

  • Use .env files for environment-specific settings (e.g., API endpoints, feature flags).
  • Prefix variables with VITE_ for Vite projects (e.g., VITE_API_URL).
  • Access variables via import.meta.env in your code.

Build Tools

  • Use Vite for fast development and optimized builds.
  • Configure Vite in vite.config.js for plugins, aliases, and build options.
  • For legacy projects, use Vue CLI or Webpack.

Example: vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src'
    }
  },
  server: {
    port: 3000
  }
})

Secrets Management

  • Never commit secrets (API keys, passwords) to source control.
  • Use environment variables or secret management tools (e.g., Vault, AWS Secrets Manager).

Configuration Patterns

  • Centralize config in a config/ directory if needed.
  • Use TypeScript interfaces for config objects.
  • Document all configuration options in README or docs.

References

Back to Top