How to trigger theme recompilation when saving changes in a Shopware 6

Question

I'm currently developing a Shopware 6 Plugin with a module using Vue.js and I want to ensure that the theme is recompiled when the user saves changes.

Is there a way to explicitly trigger the Shopware 6 theme compiling from within my Vue.js module, so I don't have to restart the entire admin every time to see the changes? Is there an API or method that I can use for this?

Answer 1

You can inject the themeService to trigger the compilation by re-assigning the corresponding theme of a sales channel.

Component.register('my-component', {
    inject: [
        'repositoryFactory',
        'themeService',
    ],

    computed: {
        salesChannelRepository() {
            return this.repositoryFactory.create('sales_channel');
        },
    },

    methods: {
        async compileTheme() {
            const criteria = new Criteria();
            criteria.addAssociation('themes');

            const salesChannels = await this.salesChannelRepository.search(criteria, Shopware.Context.api);

            for (let salesChannel of salesChannels) {
                const theme = salesChannel.extensions.themes.first();

                if (theme) {
                    await this.themeService.assignTheme(theme.id, salesChannel.id);
                }
            }
        },
    },
});