Halleyx UI Framework

Common errors

• Failed to resolve component: <hx-button>

  cause The Halleyx UI Framework plugin (HalleyxUI) was not registered with the Vue application, or the component was not explicitly imported.
  fix Ensure `app.use(HalleyxUI)` is called in your `main.js` or `main.ts` file after `createApp(App)`. If opting for explicit imports for tree-shaking, import individual components like `import { HxButton } from 'halleyx-ui-framework'`.

• Module not found: Error: Can't resolve 'halleyx-ui-framework/dist/es/index.css'

  cause The path to the global CSS file is incorrect, or the file does not exist at the specified location due to a build issue or version difference.
  fix Verify the exact import path for the CSS as specified in the official quickstart documentation. Ensure your build tooling is configured to handle CSS imports correctly. The common path is `halleyx-ui-framework/dist/es/index.css`.

Warnings

• gotcha Halleyx UI Framework is built specifically for Vue 3. Ensure your project is running Vue 3.2.21 or higher, as indicated by its peer dependency. Using it with Vue 2 will result in compatibility errors.
  Fix: Upgrade Vue to version `^3.2.21` or higher in your project's `package.json` and reinstall dependencies.
• gotcha While the npm package `halleyx-ui-framework` shows very recent activity (version 11.7.68 published 19 hours ago), the primary GitHub repository `halleyx-com/Halleyx-UI-Framework` indicates its last commit was in June 2023. This discrepancy might suggest that core development or detailed commit history is not always reflected publicly or that releases are infrequent despite continuous maintenance.
  Fix: Monitor both npm and GitHub for the latest updates and contribution patterns. Refer to the official documentation for the most up-to-date information on active development.
• gotcha Like many UI frameworks, Halleyx UI Framework includes global styles. These styles might conflict with existing global CSS or other UI libraries in your project. Be mindful of CSS specificity and potential style overrides.
  Fix: Review the framework's documentation on custom theming to adjust styles. Use CSS scoping or utility classes provided by the framework to minimize global impact. Consider importing components and their styles individually if full global import causes issues.

Install

• npm install halleyx-ui-framework npm
• yarn add halleyx-ui-framework yarn
• pnpm add halleyx-ui-framework pnpm

Imports

• HalleyxUI
  wrong:

  import { HalleyxUI } from 'halleyx-ui-framework'

  correct:

  import HalleyxUI from 'halleyx-ui-framework'

  This is typically the default export used for global registration as a Vue plugin. It's not a named export.
• HxButton
  wrong:

  import HxButton from 'halleyx-ui-framework/components/HxButton'

  correct:

  import { HxButton } from 'halleyx-ui-framework'

  Individual components like HxButton are typically named exports directly from the main package, not deep imports. The 'Hx' prefix is a common convention for Halleyx components.
• styles
  wrong:

  import 'halleyx-ui-framework/dist/index.css'

  correct:

  import 'halleyx-ui-framework/dist/es/index.css'

  The correct path for the essential CSS styles is often within an 'es' (ES Module) directory for modern bundlers.

Quickstart

This quickstart demonstrates how to initialize a Vue 3 application, register the Halleyx UI Framework globally, import its necessary CSS, and then use example components like HxButton and HxAlert within a Vue component.

import { createApp } from 'vue';
import App from './App.vue';
import HalleyxUI from 'halleyx-ui-framework';
import 'halleyx-ui-framework/dist/es/index.css'; // Import global styles

const app = createApp(App);
app.use(HalleyxUI); // Register the Halleyx UI Framework as a Vue plugin
app.mount('#app');

// In App.vue (or any other Vue component):
// <template>
//   <div id="app">
//     <hx-button variant="primary" @click="showAlert">Click Me</hx-button>
//     <hx-alert v-if="show" variant="info">Hello from Halleyx UI!</hx-alert>
//   </div>
// </template>

// <script setup>
// import { ref } from 'vue';
// // HxButton and HxAlert are globally available after app.use(HalleyxUI)
// // If you prefer explicit imports for tree-shaking:
// // import { HxButton, HxAlert } from 'halleyx-ui-framework';

// const show = ref(false);
// const showAlert = () => {
//   show.value = !show.value;
// };
// </script>

// <style>
// /* Your component-specific styles */
// </style>