Custom Components

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.

Use props and slots where they are available.
Extend the components from resources/vendor/vue-luma from a new local component.
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:

<?php

Route::get('/custom-homepage', function () {
    return InertiaInertia::render('Demos/CustomHomePage', [
      'routeLayout' => 'boxed'
    ]);
})->name('custom-homepage');

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

<template>
  <!-- 
    copy and customize the template 
    from resources/vendor/vue-luma/pages/home.vue
  -->
  ...
</template>

<script>
  import {
    LumaHomePage
  } from 'vue-luma'

  export default {
    extends: LumaHomePage
  }
</script>

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:

<template>
  <!-- 
    copy the template 
    from resources/js/Pages/Demos/home.vue
  -->
  ...
</template>

<script>
  /** 
   * swap the component from vue-luma 
   * with the custom one we created earlier
   */

  import {
    // LumaHomePage, // comment this out
    HomeHero
  } from 'vue-luma'

  /** 
   * Add the new component path
   */

  import LumaHomePage from '@/Components/CustomHomeComponent.vue'

  /** 
   * copy and customize 
   * the rest of the script
   * from resources/js/Pages/Demos/home.vue
   */
  ...
</script>

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:

cd resources/vendor/vue-luma

Install dependencies:

npm install

Create a local link:

npm link

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

npm link vue-luma

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:

npm run watch

Or to build:

npm run build

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

npm run watch

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.

Table of Contents

Frontend Matter

Beautifully crafted Bootstrap themes and templates for modern web apps.

Themes

Templates

Company

Illustrations by Freepik Storyset