Completing Form Implementation

After making the necessary adjustments, run the project to verify everything functions correctly. The form should now submit data properly and handle responses as expected.

Creating a 404 Not Found Page

Every application needs a fallback for invalid routes. When users navigate to non-existent paths, they should see a friendly eror page instead of a blank screen or application crash.

Start by preparing a background image for the 404 page. Then create the NotFound.vue component:

<template>
  <div class="not-found-container">
    <div class="content">
      <h1>Oops! Page Not Found</h1>
      <p>The page you're looking for doesn't exist.</p>
      <a href="/" class="home-link">Back to Home</a>
    </div>
  </div>
</template>

<style scoped>
.not-found-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.content {
  text-align: center;
}

.home-link {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}
</style>

Configuring Routes for Unmatched Paths

The key to making all invalid routes redirect to the 404 page lies in router configuration. Vue Router processes requests by attempting exact route matches first. When no match is found, the wildcard path (*) catches everything else.

Update the router file:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/LoginPage')
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/views/MainDashboard')
  },
  {
    path: '*',
    name: 'NotFound',
    component: () => import('@/views/NotFoundPage')
  }
]

const router = new VueRouter({
  routes,
  mode: 'history'
})

export default router

The wildcard route positioned at the end of the routes array ensures that any path not matching previous definitions falls through to the 404 component. This includes typos in URLs, deleted pages, or any other invalid navigation attempts.

Testing the implementation reveals that accessing a non-existent route immediately displays the NotFoundPage component as intended.

Why Centralize API Logic in a Dedicated Module

Separating API calls into a dedicated module offers several practical advantages for maintainable frontend architecture.

Improved Code Organization

Centralizing all HTTP communication logic in one location makes the codebase easier to navigate. Developers can quickly locate and modify API-related code without searching through multiple components.

Consistent Endpoint Management

When all API endpoints live in a single module, updating base URLs or endpoint structures becomes straihgtforward. This approach reduces the risk of missing references during refactoring.

Reusable Request Handling

Common request patterns such as authentication headers, token refresh logic, and response transformations can be abstracted once and applied consistently across all API calls. This eliminates duplication and standardizes error handling.

Simplified Testing

Isolating API logic in one module enables focused unit testing. Mocking becomes easier when all network calls flow through predictable interfaces.

Environment Flexibility

Different environments (development, staging, production) often require different API endpoints. A centralized module can switch between these configurations without modifying individual component files.

Team Collaboration

When API interactions are abstracted behind a clean interface, frontend developers can build UI features without needing detailed knowledge of backend implementation details.

Unified Error Responses

Handling errors consistently becomes much simpler when one module manages all API responses. User-facing messages can be standardized across the application.

The pattern of extracting API logic into a dedicated module has become standard practice in modern frontend development because it provides flexibility, maintainability, and better separation of concerns.