# 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:

```vue-html
<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:

```javascript
const { Component } = B2bPlatform;

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

{% hint style="info" %}
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.
{% endhint %}

## 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.b2b-sellers.com/b2b-platform/developer-guide/b2bsellers-core-plugin/vue.js-b2b-platform.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.