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 srcDir to /.hubble.
On every application build hubble PWA:
- creates a .hubble directory in the projects root directory if not already exists
- takes all hubble core files from node_modules/@hubblecommerce/hubble/core and places them into .hubble
- 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.
To customize a specific component provided by hubble PWA you just have to:
- find the component or file you want to edit in node_modules/@hubblecommerce/hubble/core
- copy the file to your projects root directory, make sure the path stays the same
cp node_modules/@hubblecommerce/hubble/core/components/layout/TheLogo.vue components/layout/TheLogo.vue
- customize the file just created
- rebuild the application
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.
hubble PWA automatically sets the default aliases to the new nuxt root directory, so you can use them just as in a regular nuxt project.