Always use ES Modules (`import` and `export`) for managing dependencies and organizing code in Vue applications. Avoid non-standard module systems or global namespace pollution.
ES Modules are the standard JavaScript module system, crucial for code organization, reusability, tree-shaking (dead code elimination), and managing dependencies in modern front-end development, including Vue SFCs and JavaScript modules.
Side-by-side examples engineers can pattern-match during review.
// BAD: Relying on globals or older module patterns
var MyUtil = require('./utils'); // CommonJS (less ideal in modern Vue)
window.myGlobalComponent = { /*... */ };// GOOD: Using ES Modules
// utils.js
export function formatData(data) { /*... */ }
export const UtilityConstant = 42;
// MyComponent.vue
import { formatData, UtilityConstant } from './utils.js';
import AnotherComponent from './AnotherComponent.vue';
export default {
components: { AnotherComponent },
setup() {
const formatted = formatData(/*... */);
console.log(UtilityConstant);
//...
}
}// utils.js
module.exports = { format() {} };
// component.js
var utils = require('./utils');// utils.js
export function format() {}
// component.js
import { format } from './utils';// api.js
const api = { fetch() {} };
export default api;
// component.js
import myApi from './api';From the same buckets as this rule.
For changes that affect architecture, data models, external APIs, security posture, deployment topology, or cost (>10%), create an ADR in docs/adr/ using the standard template (Context, Decision, Consequences) and link the PR and issue IDs.