Inside Vue Notification Center: A Deep Dive into the Source Code Structure

When I set out to build the Vue Notification Center library, I wanted to create something that was not only functional but also well-organized, maintainable, and extensible. In this post, I’ll take you on a tour of the src folder structure to show you how the library is organized and how the different components work together.

Getting Started

The Vue Notification Center is available as an open-source project on GitHub and as a published package on NPM. You can find it at:

• GitHub: https://github.com/HariantoAtWork/vue-notification-center
• NPM: @harianto/vue-notification-center

To install it in your project, simply run:

npm install @harianto/vue-notification-center
# or
yarn add @harianto/vue-notification-center
# or
pnpm add @harianto/vue-notification-center

The Big Picture

The Vue Notification Center is built with a modular architecture that separates concerns into distinct directories. This makes the codebase easier to navigate, maintain, and extend. Here’s an overview of the main directories:

src/
├── components/     # Vue components
├── directives/     # Vue directives
├── helpers/        # Utility functions
├── lib/            # Core functionality
├── scss/           # Styling
├── example/        # Example code
├── index.js        # Entry point
└── notificationCenter.js  # Core notification logic

Let’s dive into each of these directories to understand their purpose and contents.

Components: The Building Blocks

The components directory contains the Vue components that make up the user interface of the notification system:

• Notification.vue: The individual notification component that displays a single notification
• NotificationCenter.vue: The container component that manages and displays multiple notifications
• AlertCenter.vue: A specialized component for displaying important alerts
• NotificationTypes.vue: A component for displaying different notification types
• Spinner.vue: A loading spinner component
• Notification.spec.js: Tests for the Notification component

These components work together to create a cohesive notification system. The NotificationCenter component is the main entry point for users, while the Notification component handles the display of individual notifications.

Directives: Enhancing Vue’s Capabilities

Vue directives are special attributes that apply reactive behavior to the DOM. The directives directory contains custom directives that enhance the functionality of the notification system:

• v-inject-elements.js: Injects custom elements into notifications
• v-scroll-outbound-to-load-messages.js: Handles infinite scrolling for notifications
• v-color-text.js: Applies color to text based on notification type
• v-detect-mobile-view.js: Detects mobile viewport for responsive design
• v-clickoutside.js: Detects clicks outside an element
• v-scroll-to-bottom.js: Scrolls to the bottom of a container
• v-sanitize-html.js: Sanitizes HTML content for security

These directives provide additional functionality that isn’t available in Vue’s core directives, making the notification system more powerful and flexible.

Helpers: Utility Functions

The helpers directory contains utility functions that are used throughout the library:

• time.js: Functions for handling time-related operations
• color.js: Functions for color manipulation
• dayjs-extend.js: Extensions to the dayjs library
• deepmerge.js: Deep merging of objects
• validateKeys.js: Validation of object keys
• utility.js: General utility functions
• notificationHelper.js: Helper functions for notifications
• mountComponentAsRoot.js: Functions for mounting components
• log.js: Logging utilities
• conversion.js: Data conversion utilities

These helper functions encapsulate common operations, making the code more maintainable and reducing duplication.

Lib: Core Functionality

The lib directory contains core functionality that isn’t specific to Vue:

• createProxy.js: Creates a proxy for Vue components
• createTimer.js: Creates a timer for notification duration
• createEventBus.js: Creates an event bus for communication

These modules provide the foundation for the notification system’s functionality, handling things like timing, events, and component creation.

SCSS: Styling

The scss directory contains the styling for the notification system:

• _variables.notification-center.scss: Variables for notification center styling
• _variables.spacing.scss: Spacing variables
• index.scss: Main SCSS entry point
• _variables.colors.scss: Color variables
• _variables.header.scss: Header styling variables
• _variables.modal.scss: Modal styling variables
• _mixins.scss: SCSS mixins
• _notification-center.scss: Notification center styling
• _variables.borders.scss: Border styling variables

The styling is organized using SCSS, with variables, mixins, and nested rules to create a consistent and maintainable design system.

Example: Usage Examples

The example directory contains example code that demonstrates how to use the library:

• exampleNotification.js: Examples of different notification types and configurations

These examples serve as documentation and provide a starting point for users who want to implement the notification system in their own projects.

Core Files: The Heart of the Library

The root of the src directory contains two important files:

• index.js: The entry point for the library, which exports the plugin and components
• notificationCenter.js: The core logic for the notification system

The index.js file sets up the Vue plugin, registers components, and provides the notification methods to the Vue application. The notificationCenter.js file contains the core logic for creating and managing notifications.

The Notification Object

At the heart of the library is the notification object, which represents a single notification. Here’s what it looks like:

{
  uuid: string,          // Automatically generated
  title: string,         // Notification title
  message: string,       // Notification message
  elements: array,       // Custom elements
  type: string,          // Notification type
  position: string,      // Position
  show: boolean,         // Visibility state
  disableClose: boolean, // Prevent closing
  showCloseButton: boolean,
  timeStart: Date,       // Start time
  timeDuration: number,  // Duration in milliseconds
  elementClass: string,  // Custom CSS class
  data: object           // Additional data
}

This object is used throughout the library to represent notifications, and it’s what users interact with when they create notifications.

Conclusion

The Vue Notification Center library is built with a modular architecture that separates concerns into distinct directories. This makes the codebase easier to navigate, maintain, and extend. The components, directives, helpers, and core functionality work together to create a powerful and flexible notification system.

By understanding the structure of the src folder, you can better understand how the library works and how to extend it for your own needs. Whether you’re using the library as is or contributing to its development, this knowledge will help you make the most of the Vue Notification Center.