Vue.js Components

The B2Bsellers Suite utilizes an extensible Vue.js architecture inspired by the Shopware Administration. This allows you to use, extend, or completely override existing components to fit your specific project requirements.

Extensibility & Reusability

To accelerate your development and ensure a consistent UI/UX across the B2B platform, we provide a library of pre-built components. These range from simple UI helpers to complex, data-driven modules.

Localizations & Components

All components are fully compatible with Shopware's translation system. You can pass snippets directly into components to maintain multi-language support.

Usage Example

You can implement these components within your custom views. Below is a standard implementation example using our translation keys:

<b2b-modal 
    :title="$t('b2b-platform.custom-extension.modalTitle')"
    @close="onClose">
    <b2b-product-search @select="onProductSelect" />
</b2b-modal>

Architecture

Components are registered using the B2B Platform's global component system:

const { Component } = B2bPlatform;

Component.register('component-name', {
    template,
    props: { /* ... */ },
    data() { /* ... */ },
    methods: { /* ... */ }
});

Since these components follow the Shopware Administration pattern, you can use the Component.extend or Component.override methods to modify core behavior without losing update compatibility.

Development Guidelines

1. Template Separation: Always use external templates .html.twig

2. Style Scoping: Import component-specific styles via .scss files

3. Prop Validation: Define prop types and defaults

4. Event Documentation: Emit events with clear naming

5. Service Injection: Use inject for API and utility services

6. Reactive Updates: Use this.$set() for dynamic property updates

7. Debouncing: Use lodash debounce for search/input handlers

8. Loading States: Always provide visual feedback during async operations

9. Error Handling: Show user-friendly error messages via $notify

10. Accessibility: Support keyboard navigation where applicable

Best Practices

Component Naming: Use kebab-case for component names (e.g., , not ProductSearch) product-search

Props vs Data: Use props for parent communication, data for internal state

Computed vs Methods: Use computed properties for derived values, methods for actions

Event Naming: Use kebab-case with descriptive verbs (e.g., change-query, update-active)

API Calls: Always inject apiService and handle errors gracefully

Translations: Use this.$trans() for all user-facing text

State Management: Use Vuex for shared state, component data for local state