background

April 8, 2022

A Webpack plugin for Vue Storefront 2 theme inheritance

Yireo Blog Post

Few weeks back I gave a talk on the Vue Storefront 2 integration with Magento 2 (during the VSF2 India meetup organized by Aureate Labs). And last week I gave a custom in-house training on Shopware PWA. And with both events, I bumped into limitations of the overriding mechanism of VSF2. And then I found out I already had a solution for that: A Webpack plugin you could easily integrate into Nuxt.

The problem with Vue Storefront 2 for Magento 2

The work on the Vue Storefront 2 integration with Magento 2 is still in progress. But instead of focusing upon parent/child theming (like what many Magento developers are expecting from a PWA), the developers seemed to focus mostly on a proof of concept, while thinking along the lines of composition instead of inheritance: Why on earth would you want to extend upon somebody elses graphical design, while Vue offers you the quick creation of Vue components with additional composable functions, so you can build it yourself?

I agree. But I'm not here to agree or disagree: I simply felt that some developers would like to create a theme by extending upon the old theme. And that feature was still missing.

The problem with Shopware PWA

Now, Shopware PWA has some similarities to Vue Storefront 2 for Magento 2: The base is still Vue and Nuxt, while various VSF2 core elements are reused. But the PWA code itself is setup differently. And regarding parent/child theming, Shopware PWA already has a lot to offer: You can quickly override a component by copying it from the Nuxt Default Theme into your own src/ folder. There is even a CLI for that.

However, there are limitations as well: Storefront UI components are not part of this overriding mechanism, they can't be copied to src/. And if a remote PWA plugin (offered through the Shopware Administration API) adds some Vue components, you can't change them either.

The solution: Webpack

Every time that a source file is parsed and merged into the eventual JS code that ends up in the browser (or on the server-side of Nuxt), Webpack (and Babel) sits in the middle. Webpack could be extended in such a way, that you can influence which source file is picked up upon (via resolving) and how its source is being interpreted (via loaders). The resolving bit is configured by using aliases, but more effectively by adding your resolve plugin.

I built this in the past I already for Vue Storefront 1 and now the same functionality is ported towards Vue Storefront 2.

Example: Overriding Storefront UI components with Shopware PWA

For example, in Shopware PWA, there are various Vue components that you can override in src/. Some of these components again rely upon Storefront UI components. While Storefront UI components can be flexibly configured via props and slots, that approach requires you to override the parent component. And sometimes you would need to override numerous parents, just to make the same modifications to the Storefront UI component.

Overriding the Storefront UI component might be easier in those cases. The Webpack plugin allows you to easily do this, by adding it (with a configuration) to your nuxt.config.js file:

import extendNuxtConfig from "@shopware-pwa/nuxt-module/config"
const Vsf2ThemeInheritancePlugin = require('@yireo/vsf2-webpack-inheritance-plugin');
const path = require('path');

export default extendNuxtConfig({
  build: {
    extend(config) {
      config.resolve.plugins = [
        new Vsf2ThemeInheritancePlugin({
          originalPath: path.resolve(__dirname, 'node_modules', '@storefront-ui', 'vue', 'src', 'components'),
          newPath: path.resolve(__dirname, 'src', 'storefrontui')
        })
      ]
    }
  }
})

Check the source on GitHub

The Webpack plugin can be found on GitHub: github.com/yireo/vsf2-webpack-inheritance-plugin. There are more examples for configuring the plugin, so do make sure to head over there.

Posted on April 8, 2022

Want to dive into Shopware PWA (aka Vue Storefront 2 for Shopware 6)? Our On-Demand course is here to help you out. Note that at the time of writing, the recording is still in progress but the course is expected to be completed in May 2022.

Read more

About the author

Author Jisse Reitsma

Jisse Reitsma is the founder of Yireo, extension developer, developer trainer and 3x Magento Master. His passion is for technology and open source. And he loves talking as well.

Sponsor Yireo

Upcoming events

Oct
28
Oct
31
LIEF Amsterdam

Looking for a training in-house?

Let's get to it!

We schrijven niet te commerciële dingen, we richten ons op de technologie (waar we dol op zijn) en we komen regelmatig met innovatieve oplossingen. Via onze nieuwsbrief kun je op de hoogte blijven van al deze coolness. Inschrijven kost maar een paar seconden.

Do not miss out on what we say

This will be the most interesting spam you have ever read

We schrijven niet te commerciële dingen, we richten ons op de technologie (waar we dol op zijn) en we komen regelmatig met innovatieve oplossingen. Via onze nieuwsbrief kun je op de hoogte blijven van al deze coolness. Inschrijven kost maar een paar seconden.