Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

ShadyarBzharOthman's avatar

How to Implement and Store Templates in a Laravel and Vue.js SaaS Application?

Hi everyone,

I'm developing a SaaS application using Laravel and Vue.js. In my use case, users can choose from different templates where the data displayed is the same, but the design varies. How should I store and implement these templates so that users can easily select from them? Should the templates be managed in the vue side, or handled differently?

Thanks for your help!

0 likes
6 replies
Tray2's avatar

I would say that it depends a little like everything else.

If you use TailwindCSS in your components then you probably have to create a component for each theme so to say.

/themes/some-theme/revenue.vue
/themes/some-other-therem/revenue.vue

You could probably make it work with class props for each part of the component, but that sounds complicated.

If you are using regular CSS you could probably pull in the styles depending on the theme selected.

Using something like

<style>
    @import  `${this.theme}.css`;
</style>
1 like
ShadyarBzharOthman's avatar

@Tray2 Thanks, I'll use tailwind including vue js 3, but what about the layout and the other thing? is it good top have different folder for each layout for each template then render this depend of the choice of the user?

martinbean's avatar

@shadyarbzharothman I assume you have some sort of “layout” component. Let the user pick the theme and then use a dynamic component for the layout:

<!-- resources/js/components/Layout.vue -->
<script>
import { inject } from 'vue';

const layout = inject('layout', 'DefaultLayout');
</script>

<template>
  <component v-bind:is="layout">
    <slot></slot>
  </component>
</template>
1 like

Please or to participate in this conversation.