Vue & Vite Config Generator – vue.config.js & vite.config.ts

Generate optimized configurations for Vue 3 (Vite) and Vue 2 (Vue CLI). Scaffold path aliases, dev server proxies, HMR, environment variables, and build settings.

Output:A ready-to-use configuration file for Vue & Vite Config – vue.config.js & vite.config.ts with best practices applied.

Vue CLI vs Vite: Which should you use?

Understanding the architectural shift in the Vue ecosystem.

Vite (Vue 3 Standard)

✓Instant Server Start: Uses native ES Modules, meaning the server starts in milliseconds regardless of app size.
✓Lightning Fast HMR: Hot Module Replacement updates in the browser instantly without full page reloads.
✓Rollup Production Build: Generates highly optimized, tree-shaken static assets.
✓Config File: Uses vite.config.ts or vite.config.js.

Vue CLI (Vue 2 Legacy)

!Webpack Bundling: Bundles the entire application before starting the dev server, causing slow startup times on large codebases.
!Maintenance Mode: Vue officially recommends migrating away from Vue CLI for new projects.
!Config File: Uses vue.config.js to wrap underlying Webpack configuration.

Quick Summary

A Vue Config Generator helps you scaffold optimized configuration files for Vue applications. Whether you are using modern Vite (vite.config.ts) for Vue 3 or legacy Vue CLI (vue.config.js) for Vue 2, this tool ensures correct syntax for proxies, aliases, and build optimizations.

What is this tool?

Vue applications require a bundler configuration to compile Single File Components (.vue), handle TypeScript, process CSS preprocessors, and optimize production assets. The ecosystem currently supports two primary paths:

Vite Configuration (Vue 3 Default): A lightning-fast, unbundled dev server using native ES Modules and Rollup for production. Uses vite.config.ts or .js.
Vue CLI Configuration (Vue 2 Legacy): A Webpack-based configuration that bundles the entire app before serving. Uses vue.config.js.

Our hybrid generator allows you to scaffold the precise configuration needed for your project version, ensuring you don't mix Webpack syntax with Vite plugins.

How to Use This Tool

Choose Your Build Tool — Select whether you are configuring a modern Vite project (Vue 3) or a legacy Webpack project (Vue CLI / Vue 2).
Configure Aliases — Set up path mapping (like @ to ./src) to make imports cleaner across your codebase.
Set up Dev Server Proxies — Define proxy rules to bypass CORS during local development when communicating with your backend API.
Configure Environment Variables — Ensure your config uses the correct prefixes (VITE_ for Vite, VUE_APP_ for Vue CLI) to expose public variables securely.
Export the Config — Download the generated vite.config.ts or vue.config.js and place it in the root of your project.

What This Tool Generates

vite.config.ts — Modern Vite configuration with Vue plugins, Rollup build options, and Vite dev server settings.
vue.config.js — Legacy Vue CLI configuration with webpack chaining and devServer proxy rules.

Example Output Explanation

Modern Vue 3 + Vite Example (vite.config.ts)

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  build: {
    sourcemap: false,
    chunkSizeWarningLimit: 1000,
  }
})

Legacy Vue 2 CLI Example (vue.config.js)

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
})

Best Practices

Path Aliasing (@): Using relative paths like `../../../../components/Button.vue` is a nightmare for refactoring. Configure a path alias in your config and strictly mirror it in your `tsconfig.json` to prevent TypeScript errors.
Proxy API Requests: Instead of hardcoding `http://localhost:8080` in your axios calls and dealing with CORS, use the dev server proxy to forward `/api` requests automatically.
Environment Variables: In Vue CLI, variables must start with `VUE_APP_`. In Vite, they must start with `VITE_`. Never commit `.env` files with real API keys to version control.

Common Mistakes

Mixing up Vite and Webpack syntax. You cannot use Webpack loaders in a Vite config, and you cannot use Rollup plugins in a Vue CLI config.
Forgetting to import `path` when configuring aliases in Vite, leading to a 'path is not defined' error on startup.
Leaving sourcemaps enabled in production builds (`build.sourcemap: true`). This exposes your original Vue source code to the public internet.

Security Notes

Production Source Maps: Ensure sourcemaps are disabled in production unless you are strictly restricting access to `.map` files via your web server (e.g., NGINX) for error reporting services like Sentry.
Never prefix private database passwords or admin API keys with `VITE_` or `VUE_APP_`. This statically injects them into the client-side JavaScript bundle, making them visible to anyone inspecting the browser dev tools.

Testing Instructions

Save the generated file into the root of your Vue project.
For Vite, run `npm run dev` and ensure the server starts on the specified port. For Vue CLI, run `npm run serve`.
If you configured aliases, create a test component and import it using the alias (e.g., `import Test from '@/components/Test.vue'`) to verify it compiles correctly.

Frequently Asked Questions

What is the difference between Vue CLI and Vite?

Vue CLI (based on Webpack) was the standard for Vue 2. It compiles the entire application before the dev server starts, which can be slow. Vite is the modern standard for Vue 3. It serves source code over native ES modules, making server startup instantly fast regardless of app size, and uses Rollup for production builds.

Should I use vue.config.js or vite.config.ts?

If you are starting a new project or using Vue 3, always use Vite and generate a `vite.config.ts` (or `.js`). If you are maintaining a legacy Vue 2 project that hasn't migrated to Vite, you will need a `vue.config.js`.

How do I migrate from Vue CLI to Vite?

Migrating involves replacing your `vue-cli-service` scripts with `vite`, swapping `vue.config.js` for `vite.config.ts`, changing environment variable prefixes from `VUE_APP_` to `VITE_`, and moving your `index.html` to the project root.

How do I configure a proxy in Vue to avoid CORS issues?

In Vite, configure `server.proxy` in `vite.config.ts` to map a route like `/api` to your backend URL. In Vue CLI, configure `devServer.proxy` in `vue.config.js`. This makes the dev server securely forward requests, bypassing browser CORS policies.

How do I set up path aliases like @ in Vue?

In Vite, configure `resolve.alias` in `vite.config.ts` (e.g., `'@': path.resolve(__dirname, './src')`). In Vue CLI, it is usually preconfigured, but can be modified via `configureWebpack.resolve.alias`. Always ensure your `tsconfig.json` matches these aliases.

Do I need the @vitejs/plugin-vue plugin?

Yes, Vite does not understand Vue Single File Components (.vue) out of the box. The `@vitejs/plugin-vue` plugin compiles the template, script, and style blocks into standard JavaScript and CSS during the build process.

How We Keep Your Configs Safe & Valid

Built-in Error Checking

Every file is checked against official rules. We catch missing fields and bad syntax. YAML indentation errors are flagged right away. Kubernetes, Terraform, and Docker specs are all covered. API versions and labels are verified too. You get valid output every time you generate.

100% Private & Local

All tools run in your browser only. Your API keys never leave your machine. We do not use any tracking scripts. No data is sent to any server. Passwords and secrets stay on your device. Crypto operations use the Web Crypto API. Your privacy is fully protected at all times.

Secure Settings by Default

Configs use safe defaults out of the box. Containers run as non-root users. Root filesystems are set to read-only. Dangerous Linux capabilities are dropped. Network policies limit pod-to-pod traffic. TLS 1.3 is enabled for web servers. Security headers are added where needed.

Ready for CI/CD & Git

Output files are ready for your Git repo. Use them with ArgoCD, Flux, or GitHub Actions. Files use clear formatting and comments. Code review is easy for your team. Indentation and key order are consistent. Test in staging before going to production. Every file is clean and well-structured.

Infrastructure as Code

Store configs in Git alongside your code. Terraform modules include typed variables. Backend configs support remote state locking. Outputs work across multiple modules. Ansible playbooks use clear task steps. Chef and Puppet configs are also supported. Every file works with version control tools.

Monitoring & Tracing

Set up Prometheus with auto-discovery rules. Create Grafana dashboards with template variables. Add alerting rules with severity labels. Use OpenTelemetry for trace collection. Forward logs to Loki or Elasticsearch. Connect to Jaeger or Tempo for tracing. Monitor metrics, logs, and traces together.

Container & Docker Safety

Dockerfiles use multi-stage builds for small images. Base images are pinned to exact versions. Dev files are excluded from final images. Health checks are added for orchestrator use. Containers switch to non-root users. Docker Compose uses named volumes and networks. Resource limits are set in deploy configs.

Multiple Output Formats

Export as YAML, JSON, HCL, or TOML. Kubernetes uses YAML with proper separators. Terraform uses HCL with correct escaping. JSON output has consistent indentation. Copy to clipboard with one click. Preview output with syntax highlighting. Line numbers help you review quickly.