# Caravelo — Travel-Tech Subscription Platform ## About the Client Caravelo - Leaders in travel subscription solutions. ‍ Caravelo works to create a well-traveled world, where subscriptions break down barriers by encouraging people to travel more often. ## The Challenge The project focused on seat selection for different transport service vendors. The solution should allow for various vehicle types (plane, train) and support high flexibility and ease of customization, as it’s essential to keep the look similar to the original vendor styling. The solution is meant to be used as a part of the existing codebase and ha to follow the standards. ## Our Solution We implemented the functionality in a clean project using vue 3 and storybook according to technical requirements. Our experienced Vue.js developers ensured seamless integration into Caravelo’s platform, building a solution that not only met the technical needs but also allowed brands to easily maintain their own unique look and feel. The customization allows a high level of flexibility. For different brands, you can set up style overrides, CSS variables, schema, seat data, slots, and custom components, covering all edge cases we encountered and not introducing unnecessary complexity. ‍ # ECFX Notice — Enterprise Legal Notice Management ## About the Client ECFX Notice is an advanced electronic court filing (ECF) notice management system that automates the downloading, profiling, and distribution of court documents from both Federal and State courts for law firms and corporate legal departments. Speeding up the development of ECFX Notice, the enterprise legal notice management system. ## The Challenge The client was in the process of developing the notice management system and wanted to speed it up by adding extra Vue.js development resources to its core team. At this stage Epicmax stepped into the project. First as an extra help to the existing team and later we took charge of the product’s frontend development. Since the client had a complex legal web application, it was crucial for the solution to be a ‘one-stop shop’ tool to administer ECFX’s internal business and engineering workflows (from data management to statistics collection). ## Our Solution Our team has implemented the administration panel with a set of templates, intuitive and adaptive UI elements and a dashboard necessary for web-based systems for business management. The solution is fully customized to fit individual needs, workflows and legal requirements of the client. ## Results & Outcomes ::checklist --- items: - New Admin panel has been released - Code refactoring - 30+ customizable components (infinite scroll, PDF preview, etc.) and forms have been added - Complex data aggregation and processing logic - Custom table components for data editing - Real-Time dashboard - Complex layouts - Adaptive themes - Drag-and-drop widgets --- :: # Educational Application Page Builder ## About the Client Our client is a creative IT agency for tech giants and start-ups that helps businesses launch products, raise investment and increase revenue. As a trusted Vue.js development company with deep expertise in Nuxt.js development, Epicmax was chosen to bring technical expertise and deliver a scalable solution. Enabling corporate employees to create internal educational courses without developers’ help. ## The Challenge The client challenged us to build a page builder Nuxt plugin that would allow him to create new pages for an educational application. The application was meant to be used by an international corporation - allowing its employees to develop and book educational courses. The client had 3 separate projects in the education field which he planned to merge via page builder. The plugin should support authorisation, portal management, access control and page navigation. Key elements of functionality were supposed to be: responsiveness and possibility to quickly add/edit new pages without the help of frontend developers. ## Our Solution Within a month and a half, Epicmax’s dedicated Vue.js development team created a MVP. The app enabled its end users to create webpages and update their content. After the MVP was presented to the client, it was decided to evolve it into a Nuxt plugin that would help employees who were not familiar with programming to create pages with minimal time, effort and technical knowledge. Throughout the development cycle a lot of ideas and solutions were introduced by our dedicated Vue.js team. As new features were being constantly added to the project’s roadmap, the core architecture was elaborated to be effortlessly scaled. Also, a flexible library configuration method was introduced that allowed library tools to be heavily customisable. As the client didn’t provide design mockups, our developers were in charge of the design of the whole project. At first, our developers joined the client’s team as an extra help to the existing team to speed up the development process of other products. Later we took charge of the page builder’s frontend development. ## Results & Outcomes ::checklist --- items: - Powerfully configurable dashboard (enable/disable components) - Ability to create/configure custom collections, and generate a UI for it - Access/Permission manager (grant / remove permissions to dashboard and different sections) - The ability to expand the basic set of components with custom components - Nuxt and Firebase plugins with custom configurable components - Live editing, Page preview - Time travel (revert changes, revert on revert) - Page versions history and backup ability - Ability to scale content - Page/Section templates (ability to create template, it speeds up content creation) --- :: # eKool — Estonia's Leading Educational Platform ## About the Client Our client is developing a platform to make communication and collaboration between schools, students, and parents easier. With Epicmax’s proven expertise in Vue.js development, the product evolved into a scalable solution that supports both modern technologies and seamless user experiences. The platform is designed for organizing the educational process in general education schools in Estonia. ## The Challenge The app consisted of multiple microservices, and the client requested alignment of structure and styles between them. The goal was to create a UI library that would serve as a wrapper around Vuetify, modifying its components and adding new ones. Additionally, we needed to create documentation and usage examples for other developers. ## Our Solution Over several months, the team developed the UI library, updating components to match the design specifications and documenting usage examples in Storybook. This library enabled the reuse of components, styles, and configurations across all projects. To simplify future development, the team created a boilerplate project for quickly building new microservices using the library. ## Results & Outcomes ::checklist --- items: - The UI library was successfully created and integrated into multiple microservices. - Documentation and usage examples were provided - Outdated technologies were removed --- :: # Quility Insurance — Award-Winning Insurtech Platform ## About the Client Quility is an award-winning insurtech company with a mission to make life insurance accessible, affordable, and customized for everyone. Quility's digital platform offers customers the option to apply for life insurance online through a 10-minute application or with the support of a licensed insurance agent. ## The Challenge The client was in the process of developing the **Quility HQ** application — a central hub for agents and company employees to access sales tools, view statistics, and conduct training for new agents. However, the client's core team needed additional Vue.js development resources and expertise to expedite the project and create a mobile version of the application. ## Our Solution The Epicmax team leveraged its expertise in Vue.js app development to implement a mobile version of the client's intranet application and complete it with all required features. Our contribution served as a solid foundation for further frontend development, paving the way for enhanced user experience and increased productivity. ## Results & Outcomes By delivering the mobile version of the intranet app, we provided the client with a competitive edge in the market and helped them achieve their business objectives. ::checklist --- items: - Mobile version of the intranet app was released - Refactoring and legacy code improvements - Theming support - Functionality & features delivered --- :: # Social Network — Vue.js + Nuxt at Scale ## About the Client Our client is an online multinational entertainment and technology company that is redefining the future of human interaction and reshaping digital relationships through innovative technology. The client wanted to have an application that would enable its users to seamlessly share and enjoy multimedia content, backed by live messaging and secure payment functionalities. Revolutionizing a content distribution platform with video streaming capabilities to a TikTok-Inspired social network. ## The Challenge The client has challenged the Epicmax team to transform his existing platform into a dynamic, TikTok-inspired application. This entailed envisioning and executing a design that delivered an immersive video consumption experience while maintaining high responsiveness. Another key request was to ensure long-term scalability through Vue.js and Nuxt migration best practices, so the platform could evolve alongside future technologies. Also, the client wanted to have a reliable and long-lasting partner to lead the front-end development process from the ground up providing an exceptional Vue.js expertise to implement features that could handle heavy user loads and maintain low response times. ## Our Solution The project commenced with a series of iterative prototype apps, each refining the vision until the final version mirrored the engaging nature of TikTok. The process spanned approximately three years, with two and a half years dedicated to crafting the application. Created by the Epicmax team from ground up, the content distribution platform with advanced video streaming capabilities enables its users to exchange and enjoy visual content in both video and image formats and offers live messaging and payment functionalities. It also boasts an expansive range of user interface components, videos, and graphics, earning it a prominent global ranking within the top 350 websites. ## Results & Outcomes ::checklist --- items: - Mobile-First Approach - SSR and SEO Optimization - High Load Optimization - Custom Component Library - Video Streaming Excellence - Effective Services - SSR and SEO optimisation - Mobile first - High load optimisation (caching, bundle size) - Video streaming and Live chat - Payments/Paywall - Tight integration with the web analytics platform (Matomo) - AB testing - Translation to 8 languages - Admin panel --- :: # Sustainabill — Cloud Supply Chain Management ## About the Client The Sustainabill cloud platform is a cloud b2b solution that allows companies to clearly map out intricate supply chains and obtain visualizations of labyrinthine data. The platform helps companies create transparency in supply chains and thus manage risks, achieve social compliance, and mitigate climate impacts. Increasing transparency of supply chains with sustainabill, the cloud supply chain management platform. ## The Challenge As a sustainable supply chain went mainstream and the requirements for sustainability in procurement were rapidly increasing, our client needed a trustworthy Vue.js partner to smoothly and swiftly join his team thus accelerating the development of the frontend part of the cloud supply chain management platform. Choosing an experienced Vue software development company was critical to ensure scalability, flexibility, and timely delivery of the solution. The client needed a sleek and responsive customer-facing web interface that would provide comprehensive data analytics and management tools for the key supply chain players. ## Our Solution Our team has revamped the customer administration panel by adding numerous analytical and visualization features to it. From customer onboarding, tracing suppliers and collecting their data via custom surveys to assessing risks and creating corresponding scores and heatmaps — all these and many other features have been implemented by the Epicmax team. ## Results & Outcomes ::checklist --- items: - Client onboarding and profile - Supplier tracking - Custom surveys/questionnaires - Dynamic heatmap - Risk statistics widgets - Mobile responsive - Drag-and-drop attachments - Complex layouts - API code refactoring --- :: # Epicmax & AG Grid - seamless Vue 3 Datagrid integration with Vuestic UI Vuestic UI, the Vue 3 UI framework from Epicmax, have collaborated with AG Grid, the leading datagrid provider, to empower users with feature-rich table functionality. [AG Grid](https://www.ag-grid.com/){rel=""nofollow""} is available as an extension via Vuestic UI, meaning users can add AG Grid tables to their projects with no extra cost or difficulty. The company also provides a ready-made style theme for AG Grid's library of tables, which integrates with Vuestic global config, keeping AG Grid in sync with other components on the page. Niall Crosby, CEO, CTO and Founder of AG Grid said: *“This collaboration with Vuestic ensures users of the platform have access to the most feature-rich and clean datagrid tables in the industry. This will empower their Vue projects, and encourages them to develop creative, disruptive and flexible user interfaces.* *It has also been a pleasure working alongside the team at Epicmax, and we will continue to update the AG Grid framework and extension for even more seamless collaboration in the future.”* Yauheni Prakopchyk, CTO of Epicmax added: *“While selecting a UI framework, users are looking for different flavors of tables – from simplest one to robust and complicated. AG Grid covers the most sophisticated needs, and Vuestic UI holds your hand for simpler cases. Sounds like a perfect match to me.* *To support this awesome collaboration we plan to cover upcoming updates of AG Grid as well as improve integration with Vuestic UI theming system.”* [Read more](https://bmmagazine.co.uk/business/vuestic-ui-teams-up-with-ag-grid-to-empower-users-with-datagrid-capabilities/){rel=""nofollow""} on the UK's largest business magazine for entrepreneur, start-up & enterprise. To start using AG Grid with Vuestic UI see the guide: {rel=""nofollow""} If you have any ideas for a partnership with us - say hi to [hello@epicmax.co](mailto\:hello@epicmax.co?subject=Message%20from%20epicmax.co) ![Vuestic UI and AG Grid partnership banner](https://epicmax.co/images/blog/ag-grid/vuestic_ui_-_ag_grid.png) :blog-button{label="Talk to an engineer" to="https://calendar.app.google/XwRzASZitZRSVLxq6"} # Should You Refactor to Vue 3 Composition API? Practical Guide for Modern Vue Development In Vue 3, the Composition API emerged as a more flexible and scalable alternative to the traditional Options API. It offers better maintainability and modularity, especially for larger or fast-growing applications. But here’s the key point: the **Options API isn’t deprecated**. It remains fully supported and works perfectly well for many real-world use cases. If you are currently **migrating to Vue 3**, this information is especially relevant. Understanding when to keep the Options API and when to adopt the Composition API can save you weeks of unnecessary refactoring and help you design a cleaner long-term architecture. So the big question is: should you refactor your existing Vue 3 codebase from the Options API to the Composition API? This guide is here to help tech leads, senior engineers, and curious developers evaluate the trade-offs with clarity and practical context. Let’s explore what you stand to gain, and what risks or complexities may appear, when switching to the Composition API. This guide is written by Epicmax, a **[Vue.js development agency](https://epicmax.co/){rel=""nofollow""}**. :br If you need help with frontend migration, book a **[consultation with our Vue.js expert.](https://epicmax.co/contacts){rel=""nofollow""}** ## TL;DR - ✅ Composition API gives better scalability, reusability, and DX - 🛡️ Options API still makes sense for small or stable projects - 🤪 Composables make code more testable and modular - 🔧 Composition API is TypeScript-native and future-proof - ⚖️ You can **migrate Vue.js app gradually** without rewriting your whole app ## 🧠 Key Differences: Options vs Composition | Feature | Options API | Composition API | | ------------------ | -------------------------------------- | ----------------------------------------- | | Code Organization | Structured by option type (data, etc.) | Grouped by feature logic | | Logic Reuse | Mixins (risk of conflicts) | Composables (modular, testable) | | TypeScript Support | More boilerplate, less inference | Strong inference, clean typing | | Learning Curve | Beginner-friendly | Needs JS/reactivity understanding | | Ecosystem Support | Works, but fading | Native to Nuxt 3, Vue Router, Pinia, etc. | **Official guidance:** For small/medium apps, Options API is fine. For full-scale applications, Composition API is preferred. ## 🔍 Maintainability: Group Logic by Feature Options API forces you to split related logic: ```js // Options API export default { data() { return { name: '', email: '' } }, computed: { isValid() { return this.name && this.email.includes('@') } }, methods: { submit() { if (this.isValid) alert(`Submitting: ${this.name}`) } } } ``` Composition API lets you keep everything in one place: ```vue ``` Related code stays close — making it easier to read, debug, and extract. ## 🛠️ Real-World Wins: Modularity & Reuse Mixins in Options API are often messy: - Hidden dependencies - Naming conflicts - Hard to trace - With Composition API, **composables** are just functions: ```js // useFormValidation.ts export function useFormValidation() { const name = ref('') const isValid = computed(() => name.value.length > 2) return { name, isValid } } ``` Now you can reuse logic across components, test in isolation, and eliminate conflicts. ## 🤪 Testing: More Predictable with Composables - Options API: test everything via the component - Composition API: test logic directly via function ```js // useCounter.ts export function useCounter() { const count = ref(0) const increment = () => count.value++ return { count, increment } } // useCounter.spec.ts const { count, increment } = useCounter() expect(count.value).toBe(0) increment() expect(count.value).toBe(1) ``` - Smaller, faster, and cleaner tests. ## 📈 Scalability: Cleaner Refactors, Better Architecture When your app grows, Composition API makes it easy to: - Extract feature logic to composables - Avoid bloated components - Reorganize without rewriting everything *“After migrating our enterprise app, feature velocity increased and onboarding time dropped.”* — Monterail Team ## 🔐 Ecosystem Fit: Composition Is the Default Most new Vue tools assume Composition API: - ✅ Nuxt 3: - ✅ Pinia: Composable stores - ✅ Vue Router 4: useRoute() and useRouter() - ✅ VueUse: 200+ utility composables While Options API still works, many libraries assume you're using Composition API, leading to extra boilerplate when integrating. ## 🔧 TypeScript: Fewer Hacks, More Safety Composition API: - Native TS support - Less boilerplate - Better autocomplete ```js const count = ref(0) ``` Options API supports TypeScript, but it requires more boilerplate and doesn't provide the same inference and generics support as Composition API: ```js import { defineComponent, PropType } from 'vue' defineComponent({ props: { count: Number as PropType } }) ``` You’ll write less code and get better DX. ## ⚖️ Caveats of Flexibility Composition API gives you power — but with great freedom comes potential chaos: - Devs may organize code differently without conventions - Too much logic in setup() can get messy - Onboarding becomes harder without structure ✅ Use ESLint rules, layered structure, and naming conventions to stay sane. ## 🤯 Reactivity Gotchas - ref() vs reactive() can confuse beginners - Destructuring removes reactivity - Don’t forget .value when using ref **Tip:** Use ref for primitives and reactive for objects. Avoid destructuring unless using toRefs() or storeToRefs(). **Bonus:** ```js const state = reactive({ count: 0 }) const { count } = state // breaks reactivity // Instead, use: const { count } = toRefs(state) ``` Learn more in the official Vue reactivity documentation. ## 🧠 Team Skillset & Onboarding Composition API assumes: - Deeper JS knowledge (closures, reactivity, function scope) - Familiarity with typing patterns (TS) For junior-heavy teams or short-term projects, Options API may still be faster. ## 🔄 Migration Strategy: No Need for a Big Bang Vue 3 lets you mix both APIs. Start small: - Write new features with Composition API - Refactor old components only when touched - Add setup() to Options components to ease in Bonus: you can train the team gradually — no rewrite required. ## 🛡️ Using Composables in Options API Components (Hybrid Pain) In Vue 3, composables replaced mixins — and they only work inside setup(). If your codebase still uses the Options API, using VueUse, Vue Router, Pinia, or even Nuxt utilities becomes awkward. You’ll end up duplicating state, breaking reactivity, or writing glue code just to access core features. ```vue ``` Note: You can access composables in the template and setup() return, but not inside created() or methods() via this. That's because setup() and Options parts run in parallel and are not merged. ## 🔥 Why This Feels Painful - Composables can’t be used in data(), created(), or methods() unless you restructure your code to use setup() too. - You lose access to this, so you end up in a weird hybrid state. - You’re forced to migrate incrementally anyway, or wrap composables in extra glue code. - You might end up duplicating state (some in data(), some from ref()), which creates bugs. ## ✅ How Teams Typically Respond - Copy/paste the composable logic into a method or mixin (bad DX) - Wrap composables inside plugins or workarounds (gross) - Start using setup() in Options components, which leads to full Composition migration ## 🛠️ When to Stick with Options API Keep Options API if: - Your project is simple and stable - Your team is mostly juniors - You don’t use advanced Vue 3 features **Composition API is not a must. It’s a tool — use it when it solves problems.** ## ✅ Final Thoughts Refactoring from Options to Composition API can bring: - 💡 Better modularity & testability - ⚙️ Clean, scalable architecture - 🗖️ Native ecosystem support - ✨ Modern tooling & TS integration But you don’t need to do it all at once. **Recommended approach:** - New code? ✅ Use Composition API - Existing code? ♻️ Migrate when relevant - Simple legacy parts? 🛡️ Leave as-is **Vue gives you the flexibility to evolve at your own pace.** ## 🚀 Try It Yourself Refactor one component. Create one composable. You’ll see why more teams are choosing Composition API in 2025 and beyond. ```bash npm create vue@latest # Choose: "Composition API + ``` It returns two component constructors: `DefineTemplate` to wrap the template part you want to reuse, and `ReuseTemplate` to render the part in place. You can then use them in `