@ccci/ui-layer v0.0.14

CCCI Layer

CCCI Layer is a powerful and extendable Nuxt 3 layer designed to streamline development by providing reusable components, blocks, pages, and layouts for your Nuxt 3 applications. It aims to promote modularity, maintainability, and rapid development.

Features

1. Reusable Components: Modular components that can be used across multiple parts of your application.

2. Blocks: Combinations of components to form functional units.

3. Pages: Predefined compositions of multiple blocks to create complete views.

4. Layouts: Ready-to-use page templates for consistent design and structure.

Installation

To install CCCI Layer, add it as a dependency in your Nuxt 3 project:

npm install @ccci/ccci-layer

Enable the layer in your nuxt.config.ts:

export default defineNuxtConfig({
  extends: '@ccci/ccci-layer',
})

Usage

Components

Access reusable components by importing them directly or using them in your templates:

<template>
  <CButton label="Click Me" />
</template>

List of Components

1. CHeader

The CHeader component is used to create a consistent header for your application.

<template>
  <CHeader :title="'My Application'" />
</template>

Props:

• title (String): The title displayed in the header.

2. CFooter

The CFooter component provides a standard footer.

<template>
  <CFooter :text="'© 2025 My Application'" />
</template>

Props:

• text (String): The text displayed in the footer.

3. CSideMenu

The CSideMenu component creates a collapsible side navigation menu.

<template>
  <CSideMenu :items="menuItems" />
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { label: 'Home', link: '/' },
        { label: 'About', link: '/about' },
      ],
    };
  },
};
</script>

Props:

• items (Array): An array of menu items with label and link.

4. CForm

The CForm component simplifies form creation.

<template>
  <CForm :fields="formFields" @submit="handleSubmit" />
</template>

<script>
export default {
  data() {
    return {
      formFields: [
        { type: 'text', name: 'username', label: 'Username' },
        { type: 'password', name: 'password', label: 'Password' },
      ],
    };
  },
  methods: {
    handleSubmit(data) {
      console.log('Form submitted:', data);
    },
  },
};
</script>

Props:

• fields (Array): Array of field definitions with type, name, and label.

5. CList

The CList component renders a list of items.

<template>
  <CList :items="['Item 1', 'Item 2', 'Item 3']" />
</template>

Props:

• items (Array): An array of items to display.

6. CTable

The CTable component displays tabular data.

<template>
  <CTable :columns="tableColumns" :data="tableData" />
</template>

<script>
export default {
  data() {
    return {
      tableColumns: [
        { key: 'name', label: 'Name' },
        { key: 'age', label: 'Age' },
      ],
      tableData: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 },
      ],
    };
  },
};
</script>

Props:

• columns (Array): Array of column definitions with key and label.
• data (Array): Array of data objects to display.

Blocks

Use predefined blocks to speed up feature development:

<template>
  <CcciHeroBlock :title="'Welcome'" :subtitle="'Start your journey here!'" />
</template>

Pages

CCCI Layer includes pages built from multiple blocks. Simply add routes to use them:

export default defineNuxtConfig({
  pages: true,
})

Add your pages in the pages/ directory or customize existing ones.

Layouts

CCCI Layer provides layouts for consistent page templating:

<template>
  <LayoutDefault>
    <h1>My Page Content</h1>
  </LayoutDefault>
</template>

Directory Structure

• components/: Reusable components
• blocks/: Functional groupings of components
• pages/: Predefined page structures
• layouts/: Page templating solutions

Customization

Override or extend components, blocks, or layouts by adding files with the same name in your project. For example, to customize a component:

1. Create a file in components/ with the same name as the component.
2. Add your modifications.

Contributing

Contributions are welcome! If you find a bug or have a feature request, feel free to open an issue or submit a pull request.

License

CCCI Layer is licensed under the MIT License. See the LICENSE file for more details.

Author

CCCI Inc.
Empowering developers with modular and reusable solutions.