CyberOcean Documentation

# Pages

In the CyberOcean AdminUI, pages are integral components that represent distinct sections or functionalities within the application. Creating a new page involves defining a Vue.js component with a specific structure and design. This document outlines the process of adding new Vue.js pages to the AdminUI.

# Page Creation Guidelines

# Page Structure

Each Vue.js page in the AdminUI should be structured as a Vue component and include the following elements:

  1. Template Block: Contains the HTML structure of the page.
  2. Script Block: Houses the JavaScript logic, including data, computed properties, methods, and lifecycle hooks.
  3. Style Block: Includes the CSS styles specific to the page.

# Naming and Location

  • Name (Required):
    • Format: KebabCase
    • Description: The page name should be descriptive and follow the KebabCase convention (e.g., user-profile, project-dashboard).
    • Location: Pages should be saved in the @/adminUI/pages/ directory with a file name matching the page name (e.g., user-profile.vue).

# Content

  • Content (Required):
    • Description: Provide a detailed description of the page's content and functionality.

# Professional Appearance

  • Utilize Vuetify's component library for UI elements to ensure the page has a professional appearance and consistent design with the rest of the AdminUI.

# Example Page Structure

Below is a basic structure for a Vue.js page in the CyberOcean AdminUI:

<template>
  <div class="custom-page-class-name">
    <!-- Your HTML code here -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // Your data here
    };
  },
  // Additional component options like methods, computed properties, etc.
}
</script>

<style scoped>
  .custom-page-class-name {
    /* Page-specific styles here */
    /* Use scoped CSS and class prefixes to ensure styles only apply to this page */
  }
</style>

# Styling Best Practices

  • Use scoped styles to prevent CSS from affecting other components or pages.
  • Prefix all CSS classes with a unique identifier for the page to ensure styles are isolated.
  • Leverage Vuetify’s theming and styling capabilities for a consistent look and feel.

← CRUD Pages →