Hexagonal Architecture in Vue: Where to Put Your Code and Why

You add a rule to a Vue application. It could go in the component’s <script setup>, a composable, or a Pinia action. All three can work. The harder decision is which dependencies that rule should have. A discount calculation should produce the same result whether a user clicks a button or an import script creates an order. A Snake collision should follow the same rules whether the player uses a keyboard or on-screen controls. Hexagonal architecture gives application rules their own boundary. Vue handles the interface. The application exposes operations that Vue can call, and it describes the external capabilities it needs through contracts called ports. For me, the most immediate benefit is testing business logic without setting up the UI. You can pass data into a pure rule or call an application operation in Vitest, check the result, and cover edge cases without clicking through the application. Browser tests can then focus on whether the interface connects those rules to the user…