A Webpack plugin for Vue Storefront 2 theme inheritance

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.