Stay connected

Theme Utilities for Vue Storefront 2 (and not only)

Disclaimer: This project is still in beta phase.

How it works

This package creates a vsf-tu script allowing to extend multiple Vue Storefront 2 themes by letting them inherit from each other.

You can use it with any JavaScript application though. it does not require Vue or Nuxt to run.

Script reads files from multiple sources and copies them to destination directory. If files with the same path (relative to each source) exist in multiple sources, priority will be given to source defined later in the configuration.

Files with .vue, .ts, .js, .json, and .yml extensions are additionally parsed using ejs library, allowing them to contain build-time variables like <%= some.source.variable %>. If you want to parse all extensions, add parseAllExtensions: true to the configuration.

Install

yarn global add @vue-storefront/theme-utilities

Usage

Create a theme-utils.config.js file in the root of the project.

// theme-utils.config.js
module.exports = {
  copy: {
    parseAllExtensions: false,
    to: '',
    from: [
      {
        path: '',
        ignore: [],
        ignoreParse: [],
        variables: {},
        watch: true
      }
    ]
  }
};

Run the script:

vsf-tu

Alternatively you can use --config path/to/config/file flag to provide custom configuration path.

Configuration

Options

• parseAllExtensions Whether all extensions should be compiled or only .vue, .ts, .js, .json, and .yml.
• to Path to output directory. Can be relative or absolute.
• from Array of source directories:
  • path Path to source directory. Can be relative or absolute.
  • ignore Array of ignored files/paths. Paths are glob-compatible. Contents of .nuxt and node_modules are ignored by default.
  • ignoreParse Array of files that shouldn't be parsed by ejs. It overrides parseAllExtensions and file extensions parsed by default.
  • variables Template variables resolved at build-time.
  • watch Whether directory should be watched for changes.

Example

// theme-utils.config.js
module.exports = {
  copy: {
    to: '_theme',
    from: [
      {
        path: '@vue-storefront/nuxt-theme/theme',
        ignore: [],
        variables: {
          options: {
            generate: {
              replace: {
                apiClient: '@vue-storefront/commercetools-api',
                composables: '@vue-storefront/commercetools'
              }
            }
          }
        },
        watch: true
      },
      {
        path: '/home/Projects/VueStorefront/packages/commercetools/theme',
        ignore: [
          '*', // Ignore all files directly in the root of the directory, like package.json, tsconfig.json etc.
        ],
        variables: {},
        watch: true
      }
    ]
  }
};