# Vue Admin Modul weiße Seite

**URL:** <https://forum.shopware.com/t/vue-admin-modul-weisse-seite/65103>\
**Category:** Programmierung\
**Created:** [2. März 2020 um 00:26 UTC](https://forum.shopware.com/t/vue-admin-modul-weisse-seite/65103 "2020-03-02T00:26:55Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![derwunner](https://avatars.discourse-cdn.com/v4/letter/d/e5b9ba/32.png) [@derwunner](https://forum.shopware.com/u/derwunner)\
**Post date:** [2. März 2020 um 00:26 UTC](https://forum.shopware.com/t/vue-admin-modul-weisse-seite/65103/1 "2020-03-02T00:26:55Z")

</div>

Hallo,

ich habe Schwierigkeiten damit ein Admin Modul anzulegen in Vue. Ich brauche prinzipiell nur ein Entity Listing, indem man das Entity ändern kann. Also zwei Views: Listing und Einzelansicht für Änderungen.

Es geht um die Zuordnung von Storefront Kunden zu eigens definierten Gruppen. Man soll den Kunden öffnen können in der Einzelansicht und die Gruppenzuordnung ändern können.

Nachfolgenden Code habe ich bisher schon. Das Modul wird bereits im Baum im Admin angezeigt. Doch sobald man auf das Modul klickt, erscheint eine weiße Seite:

Die main.js:

```
import './module/ws-calendar';

```

Die index.js:

```
import deDE from './snippet/de-DE';
import enGB from './snippet/en-GB';

Shopware.Module.register('ws-calendar', {
    color: '#ff3d58',
    icon: 'default-shopping-paper-bag-product',
    title: 'Kalendar',
    description: 'Verwalte die Kalender Berechtigungen hier',

    snippets: {
        'de-DE': deDE,
        'en-GB': enGB
    },

    routes: {
        list: {
            component: 'ws-calender-user-list',
            path: 'list'
        },
        detail: {
            component: 'ws-calendar-detail',
            path: '/detail/:id',
            meta: {
                parentPath: 'ws.calendar.list'
            }
        }
    },

    navigation: [{
        label: 'ws-calendar.general.mainMenuItemGeneral',
        color: '#ff3d58',
        path: 'ws.calender.list',
        icon: 'default-shopping-paper-bag-product',
        position: 100
    }]
});

```

Das Listing (ws-calendar-index; index.js):

```
const { Component, Mixin } = Shopware;
const { Criteria } = Shopware.Data;
const utils = Shopware.Utils;
import template from './ws-calendar-index.twig';
import './ws-calendar-index.scss';

Component.register('ws-calendar-index', {
    template,
    inject: ['repositoryFactory'],
    mixins: [
        Mixin.getByName('listing'),
    ],

    metaInfo() {
        return {
            title: this.$createTitle()
        };
    },

    data() {
        return {
            page: 1,
            limit: 25,
            total: 0,
            repository: null,
            items: null,
            isLoading: true,
            filter: {
                customerId: null
            }
        }
    },

    computed: {
        columns() {
            return [
                {
                    property: 'firstName',
                    dataIndex: 'firstName',
                    label: 'ws-calendar.list.columns.firstName',
                    allowResize: true,
                },
                {
                    property: 'lastName',
                    dataIndex: 'lastName',
                    label: 'ws-calendar.list.columns.lastName',
                    allowResize: true,
                    primary: true
                },
                {
                    property: 'email',
                    dataIndex: 'email',
                    label: 'ws-calendar.list.columns.email',
                    allowResize: true,
                    routerLink: 'ws.calendar.detail'
                },
                {
                    property: 'groupName',
                    dataIndex: 'groupName',
                    label: 'ws-calendar.list.columns.groupName',
                    allowResize: true
                }
            ]
        },
        wsCalendarRepository() {
            return this.repositoryFactory.create('ws_calendar_user_group');
        }
    },

    methods: {
        getList() {
            this.isLoading = true;

            let criteria = new Criteria();
            criteria.addAssociation('customer');
            criteria.addAssociation('ws_calendar_groups');

            if (this.filter.customerId) {
                criteria.addFilter(Criteria.equals('customerId', this.filter.customerId));
            }

            return this.wsCalendarRepository.search(criteria, Shopware.Context.api)
                .then((searchResult) => {
                    this.items = searchResult;
                    this.total = searchResult.total;
                    this.isLoading = false;
                });
        },

        resetFilter() {
            this.filter = {
                customerId: null
            };

            this.getList();
        }
    },

    watch: {
        filter: {
            deep: true,
            handler: utils.debounce(function () {
                this.getList();
            }, 400)
        }
    }
});

```

Das index template:

```
        {{ $tc('ws-calendar.title') }}
    
    
        
            
                
                    {{ element }}
                
            

            
                
                    {{ $tc('ws-calendar.list.columns.action') }}

```

Die detail index.js:

```
const { Component, Mixin } = Shopware;
const { Criteria } = Shopware.Data;
import template from './ws-calendar-detail.twig';
import './ws-calendar-detail.scss';

Component.register('ws-calendar-detail', {
    template,
    inject: ['repositoryFactory'],

    data() {
        return {
            customer: null,
            isLoading: false,
            isSuccessful: false,
            calendarGroups: null,
        }
    },

    created() {
        this.syncService = Shopware.Service('syncService');
        this.httpClient = this.syncService.httpClient;
        this.repository = this.repositoryFactory.create('ws_calendar');
        this.repository.get(this.$route.params.id, Shopware.Context.api).then(customer => {
            this.customer = customer;
        });
        this.calendarGroupsRepo = this.repositoryFactory.create('ws_calendar_groups');
        this.calendarGroupsRepo.get(null, Shopware.Context.api).then(calendarGroups => {
            this.calendarGroups = calendarGroups;
        });
    },

    methods: {
        openCustomer() {
            this.$router.push({
                name: 'sw.customer.detail',
                params: { id: this.customer.customerId }
            });
        },
        getCustomer() {
            this.repository
                .get(this.$route.params.id, Shopware.Context.api)
                .then(entity => {
                    this.customer = entity;
                });
        },
        onSaveClicked() {
            this.isLoading = true;
            this.repository
                .save(this.customer, Shopware.Context.api)
                .then(() => {
                    this.getCustomer();
                    this.isLoading = false;
                    this.processSuccess = true
                }).catch((exception) => {
                this.isLoading = false;
                this.createNotificationError({
                    title: this.$tc('ws-calendar.detail.error.errorTitle'),
                    message: exception
                });
            });
        },
        saveFinish() {
            this.processSuccess = false;
        }
    }
});

```

Das&nbsp;Detail template:

```
        {{ customer.firstName }} {{ customer.lastName }}
    

    
        
            {{ $tc('ws-calendar.detail.toolbar.customer') }}
        
        
            {{ $tc('ws-calendar.detail.toolbar.saveButtonText') }}

```

Die SCSS Dateien sind vorhanden, sind aber aktuell leer.

Über Hilfe, was daran nicht geht, wäre ich verbunden 🙂

&nbsp;

MFG

derwunner

---

<div class="post-metadata">

**Author:** ![Liverson](https://avatars.discourse-cdn.com/v4/letter/l/b19c9b/32.png) [@Liverson](https://forum.shopware.com/u/Liverson)\
**Post date:** [5. März 2020 um 12:32 UTC](https://forum.shopware.com/t/vue-admin-modul-weisse-seite/65103/2 "2020-03-05T12:32:17Z")

</div>

Hi,

hast du schon was rausgefunden, habe im Prinzip das gleich Problem. Modul wird geladen, Daten sind als JSON vorhanden, aber es erfolgt im Admin keine Ausgabe. Die Twig-Strukur wird komplett ignoriert. Wenn ich im Template oben z.B. ein h2-Tag einfüge wird der Text darin beim Aufruf des Moduls ausgeben, aber das ganze Twig ignoriert.

---

<div class="post-metadata">

**Author:** ![wao\_io](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/wao_io/32/18905_2.png) [@wao\_io](https://forum.shopware.com/u/wao_io)\
**Post date:** [5. März 2020 um 19:50 UTC](https://forum.shopware.com/t/vue-admin-modul-weisse-seite/65103/3 "2020-03-05T19:50:28Z")

</div>

Das gleiche Problem tritt bei mir auch auf, was mich als Shopware-Neuling besonders irritiert hat. Alles am Anfang der Template-Datei und außerhalb der `` wird angezeigt, auch komplexe DOM-Fragmente, die durchaus auch SW-Elemente enthalten können, z.B.

```
    {{ $tc('wao-io-cache-control.general.title') }}
    
        {{ $tc('wao-io-cache-control.general.clearCache') }}
    
    Überschrift und Button werden angezeigt.

    wird nicht angezeigt

wird auch nicht angezeigt

```

&nbsp;

Wenn das ganze aber funktionieren würde, wo fände ich dann die Dokumentation der vorgesehen Slots (z.B.`slot="content"`), die ich für Admin-Seiten nutzen könnte?  
Die habe ich bei der bisherigen Lektüre der Dokumentation leider noch nicht entdeckt.

&nbsp;

---

<div class="post-metadata">

**Author:** ![shyim](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/shyim/32/7681_2.png) [@shyim](https://forum.shopware.com/u/shyim)\
**Post date:** [5. März 2020 um 20:05 UTC](https://forum.shopware.com/t/vue-admin-modul-weisse-seite/65103/4 "2020-03-05T20:05:04Z")

</div>

Du findest hier fast alle Componenten und ihre Optionen

[https://component-library.shopware.com/components/sw-page](https://component-library.shopware.com/components/sw-page)

---

<div class="post-metadata">

**Author:** ![derwunner](https://avatars.discourse-cdn.com/v4/letter/d/e5b9ba/32.png) [@derwunner](https://forum.shopware.com/u/derwunner)\
**Post date:** [8. März 2020 um 10:24 UTC](https://forum.shopware.com/t/vue-admin-modul-weisse-seite/65103/5 "2020-03-08T10:24:17Z")

</div>

Das Plugin liegt zum Klonen hier bereit:&nbsp;[GitHub - alpham8/calendar-example: Shopware Plugin Example](https://github.com/alpham8/calendar-example)

---

<div class="post-metadata">

**Author:** ![wao\_io](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/wao_io/32/18905_2.png) [@wao\_io](https://forum.shopware.com/u/wao_io)\
**Post date:** [18. März 2020 um 08:42 UTC](https://forum.shopware.com/t/vue-admin-modul-weisse-seite/65103/6 "2020-03-18T08:42:27Z")

</div>

Der Workaround, alles \_ohne\_ Template Slots zu machen, funktioniert zwar, allerdings müsste ich dann auch sinnloserweise eigenes CSS schreiben, und das ganze ist ja auch nicht Sinn der Sache. Gibt es schon Erkenntnisse oder Lösungen dazu? Eventuell ein Update von Shopware, das das löst? Ich habe SW 6.1.3 stable, aus dem Development-Repo mit Stand vor ca. 2 Wochen.

---

<div class="post-metadata">

**Author:** ![wao\_io](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/wao_io/32/18905_2.png) [@wao\_io](https://forum.shopware.com/u/wao_io)\
**Post date:** [18. März 2020 um 15:16 UTC](https://forum.shopware.com/t/vue-admin-modul-weisse-seite/65103/7 "2020-03-18T15:16:45Z")

</div>

Das Problem scheint mit Upgrade auf Shopware 6.1.4 behoben zu sein.

---

<div class="post-metadata">

**Author:** ![AlexGalax](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/alexgalax/32/9925_2.png) [@AlexGalax](https://forum.shopware.com/u/AlexGalax)\
**Post date:** [20. März 2020 um 10:14 UTC](https://forum.shopware.com/t/vue-admin-modul-weisse-seite/65103/8 "2020-03-20T10:14:27Z")

</div>

> [@derwunner schrieb:](https://forum.shopware.com/profile/25468/derwunner "derwunner")
> 
> Die index.js:
> 
> import deDE from ‚./snippet/de-DE‘;  
> import enGB from ‚./snippet/en-GB‘;

Du hast vergessen die Seiten zu importieren:

```
import './ws-calendar-index';
import './ws-calendar-detail';
import deDE from './snippet/de-DE';
import enGB from './snippet/en-GB';

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![derwunner](https://avatars.discourse-cdn.com/v4/letter/d/e5b9ba/32.png) [@derwunner](https://forum.shopware.com/u/derwunner)\
**Post date:** [7. April 2020 um 07:01 UTC](https://forum.shopware.com/t/vue-admin-modul-weisse-seite/65103/9 "2020-04-07T07:01:25Z")

</div>

@AlexGalax‍ Ok, vielen Dank, das habe ich nun eingefügt im GitHub Projekt. Allerdings scheint das noch nicht die Lösung gewesen zu sein. Ich habe auch mal die anderen JS Dateien mit den meinen verglichen, sieht alles richtig aus. Woran kann es noch liegen?

Und kann man auch irgendwoher sehen, was man für Fehler gemacht hat? Gibt es dafür irgendwelche Logs oder Browser Addons?