Configurator
Options and calculations remain connected to the current selection.
← All technologies
Vue · BIG FISH
Web development with Vue.js
We build portals, configurators and internal interfaces. A reactive model keeps forms, calculations and resulting states consistent.
BIG FISH / VUE
01Configuration fields
02Reactive state
03Derived values
04Quote summary
Design × technology × your workflow
PRODUCT CAPABILITIES
Technology becomes
a working product.
Operational application
Forms and tables for employees managing substantial datasets.
Customer portal
Clear editing, submission and confirmation journeys.
INTERACTIVE EXAMPLE
Try the workflow.
See the outcome.
Equipment-supply configurator: quantity, finish and delivery determine the total. The total is derived from source values rather than edited independently.
Educational example with fictional data. Actions stay in your browser. This models the workflow; it is not a connected CMS, server or database.
Vue
VueWorkflow result
The example is ready to explore.
WORKFLOW ARCHITECTURE
Every step has
a responsibility.
01
Configuration fields
02
Reactive state
03
Derived values
04
Quote summary
| Layer | Outcome |
|---|---|
| Interface | Input, limits, loading and errors are clear. Keyboard operation is available. |
| Data | Values have an owner, format and freshness rules. |
| Release | Critical journeys, backups and recovery have been checked. |
BIG FISH · Vue.js
Complex forms. Focused work.
Vue.js development helps us turn multi-step processes into a coherent interface. Users can see completed stages, dependent fields and a preview of the result when preparing requests, configuring products or approving documents.
For Vue.js CRM systems and portals, we design draft saving, validation and returns to earlier steps. An error in one field should not discard work that has already been completed.
PRACTICAL GUIDE
Building a product
with Vue.
Architecture, constraints and testable workflows. The exact configuration follows the project requirements.
Vue / 01
State and calculations
Store quantity, equipment variation and delivery method as source state. Derive the total from one calculation. Use suitable computed values for derived information and keep side effects separate. This reduces the chance that a table, button and summary show different versions of the same request.
Acceptance check
The total always equals its component amounts.
Vue / 02
Components and events
A selection field reports changes through a clear event; its parent owns the consistent model. Avoid hidden mutation of incoming properties inside children. Document shared interface components with state examples. Tight coupling to one API makes a component difficult to reuse elsewhere.
Acceptance check
A child field does not silently mutate data.
Vue / 03
Forms and dependent fields
A category change may invalidate a previously selected configuration. Define dependency-reset rules and explain them to users. Validation considers bounds, units and required fields. Before accepting the request, the server recalculates valid terms: a reactive interface is not a trusted source of pricing.
Acceptance check
An invalid configuration is reset explicitly.
const quantity = ref(12);
const unitPrice = ref(25000);
const total = computed(() => quantity.value * unitPrice.value);Vue / 04
Requests and saving
Distinguish local edits from server-confirmed data. If saving fails, show feedback near the action and preserve the input. Control response order during rapid changes. Warn about unsaved work when leaving the page if losing it would materially affect the user.
Acceptance check
A save failure does not erase input.
Vue / 05
State across screens
A local accordion does not need a global store. Shared account, basket or workflow data may need a central model. Choose storage boundaries around data lifetime and consumers. Clear sensitive values on sign-out and test switching between organisations.
Acceptance check
Signing out clears personal data.
Vue / 06
Design and responsiveness
Consistent components keep complex forms predictable. On a narrow screen, the summary should remain accessible without obscuring inputs. Account for long names, currencies and errors. Keyboard navigation, focus and labels belong in design alongside colours and animation.
Acceptance check
The summary does not cover mobile inputs.
Vue / 07
Rendering and performance
Private portals and indexable websites may need different HTML delivery strategies. Vue does not remove the need to design backend services and routing. Measure large lists, charts and frequent updates. Limit unnecessary watchers, release subscriptions and test behaviour after repeated navigation.
Acceptance check
Repeated navigation does not accumulate subscriptions.
Vue / 08
Calculation tests
Test formulas separately from components: minimums, maximums, zero, rounding and incompatible options. Then test the journey from selection to saving. Document which calculations are illustrative and which are approved business rules. A tariff change should not require hunting through multiple screens for a hardcoded number.
Acceptance check
Rounding and quantity limits have been tested.
FAQ
Before we start
Is this a ready-made product?
No. The example illustrates a proposed workflow for Vue. We design the production system around your requirements, data and integrations.
Can we retain our current systems?
We first review their interfaces, data ownership and constraints. The result may be an integration, a phased migration or a focused replacement of one component.
What do we receive at handover?
The agreed deliverables include design assets, source code, environment requirements and operational instructions. Scope, ownership and support are recorded in the contract.
Let’s design your product
Tell us about your workflow, audience and existing systems. We will define the interface, technical boundaries and delivery stages.