You can customize the provided components in several ways, however our recommendation is to extend the source components rather than modifying the originals. This way you can upgrade with more ease when we release new updates. We are adding regular updates with props and slots so you can inject your functionality and customizations easily in most components and pages.

1. Use props and slots where they are available.
2. Extend the components from resources/vendor/vue-luma from a new local component.
3. Edit the source components directly from resources/vendor/vue-luma

---

Extending components

The following example will showcase how to create a custom home page while extending the original home page provided by the vue-luma package. Edit routes/web.php:

Create the custom component in resources/js/Components/CustomHomeComponent.vue

Create a new custom page component in resources/js/Pages/Demos/CustomHomePage.vue with the contents of the provided demo page from resources/js/Pages/Demos/home.vue and make the following changes:

Run npm run watch or npm run dev or npm run prod to update the generated assets. You can test the new custom page by opening the /custom-homepage route in your browser.

---

Editing the source components

From the terminal, go to the resources/vendor/vue-luma folder and create a local npm link:

Install dependencies:

Create a local link:

Then, from the root of the application (the main laravel app), instruct npm to use the link:

Then, from the same resources/vendor/vue-luma folder you can run one of the two commands. To watch and/or recompile the production build:

Or to build:

You may need to restart the main laravel app watcher before it picks up any changes in the resources/vendor/vue-luma folder.

Now you should be able to edit any .vue file in resources/vendor/vue-luma and you have a way of watching/building the package, which should reflect on the main app.