Customizing 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.

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

Extending components

./components/pages/login.vue

<template>
  // copy and customize the template from vue-luma/pages/login.vue
</template>

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

  export default {
    extends: LumaLoginPage
  }
</script>

./pages/login.vue

<template>
  <luma-login-page :title="title" />
</template>

<script>
  // replace this
  // import {LumaLoginPage} from 'vue-luma'

  // with this
  import LumaLoginPage from '~/components/pages/login.vue'

  export default {
    components: {
      LumaLoginPage
    },
    // ...
  }
</script>

We are adding regular updates with props and slots so you can inject your functionality and customizations easily in most components and pages.

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