> For the complete documentation index, see [llms.txt](https://docs.b2b-sellers.com/b2b-platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.b2b-sellers.com/b2b-platform/developer-guide/b2bsellers-core-plugin/vue.js-b2b-platform.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.