📦 Epic: Migrate Nanomine Pages and Components to Vue 3

[tholulomo]

📋 Overview

This epic covers the full migration of the Nanomine application’s pages, components, and associated SCSS style modules to Vue 3. The goal is to ensure modern compatibility, improve maintainability, and align with the ongoing platform-wide upgrade effort.

Each component and page listed will be migrated, tested, and updated to follow Vue 3 best practices, including the use of the Composition API, TypeScript, and modular SCSS structure where applicable.

---

🧩 Scope of Work

🔧 Components to Migrate:

• DatasetViewer
• ImageEditor
• HeroHeaders
• ImageUpload
• LineChart
• PageFooter
• PageHeader
• ReferenceContainer
• SmilesCanvas
• ToolCard

📄 Pages to Migrate:

• ConferencesPage
• ContactUsPage
• CSVPlotterPage
• HomePage
• HowToPage
• ResearchNewsPage
• TeamsPage
• ToolsPage
• ToolSetsPage
• XMLUploader
• BasePage
• NotFoundPage
• CountDownPage

🎨 Style Migration:

• Migrate and refactor all associated SCSS modules to ensure compatibility with Vue 3's single-file component architecture.
• Enforce use of SCSS partials and modular structure to maintain clean and reusable styles.

---

📌 Deliverables

• Fully migrated components and pages listed above.
• Updated SCSS modules following Vue 3 structure.
• Pages and components tested and verified to function as expected in the updated application.
• Documentation or notes on migration patterns for team reference.

---

🧪 Acceptance Criteria

• All components/pages are migrated to Vue 3 without breaking existing functionality.
• No console warnings/errors related to deprecated APIs or unsupported syntax.
• Styles are modular and scoped appropriately.
• Unit or integration tests are added/updated where applicable.

---

📁 Subtasks

Subtasks will be created under this epic for each component/page and associated styling updates.

---

📅 Target Completion

July 10th, 2025