hubble PWA Docs

File-based inheritance

Concept

To keep hubble PWA updatable but also customizable it provides an inheritance mechanism only based on file paths. As a basis, hubble sets the nuxt srcDiropen in new window to /.hubble.

On every application build hubble PWA:

  1. creates a .hubble directory in the projects root directory if not already exists
hubble PWA File-based inheritance Concept Step 1

  1. takes all hubble theme files from node_modules/@hubblecommerce/hubble/dist/theme and places them into .hubble

  2. takes all platform specific composables (based on .env PLATFORM) from node_modules/@hubblecommerce/hubble/dist/platforms/[PLATFORM]/composables and places them into .hubble

  3. takes all nuxt related directories (except for: node_modules, .hubble, .nuxt, .idea) from the project root path and copy them into .hubble. Files that already exists will be overwritten.

hubble PWA File-based inheritance Concept Step 3

Overwriting files

To customize a specific component provided by hubble PWA you just have to:

  1. find the component or file you want to edit in:
    • Components: node_modules/@hubblecommerce/hubble/dist/theme
    • Composables: node_modules/@hubblecommerce/hubble/dist/platforms/[PLATFORM]/composables
    • Mappings: node_modules/@hubblecommerce/hubble/dist/platforms/[PLATFORM]/utils/mapping
    • Types: node_modules/@hubblecommerce/hubble/dist/commons/utils/types
  2. copy the file to your projects root directory, make sure the path stays the same
cp node_modules/@hubblecommerce/hubble/dist/theme/components/layout/LayoutHeader.vue components/layout/LayoutHeader.vue
  1. customize the file just created
  2. rebuild the application

.hubble Directory

Never customize files directly inside .hubble or the changes will be overwritten on next application build. There is no need for this directory to be versioned, so don't forget to add it to your .gitignore.

Path aliases

hubble PWA automatically sets the default aliasesopen in new window to the new nuxt root directory, so you can use them just as in a regular nuxt project.