Introduction

Laravel Jetstream is a beautifully designed application scaffolding for Laravel. Jetstream provides the perfect starting point for your next Laravel application and includes login, registration, email verification, two-factor authentication, session management, API support via Laravel Sanctum, and optional team management.

Jetstream is designed using Tailwind CSS and offers your choice of Livewire or Inertia scaffolding.

Why this fork

Sometimes, yuo might require to use different themes in your application while still retaining the default components that come with Jetstream. With this fork, you are able to specify the location/template for the jetstream component locations.

See by example

Here, the backend template/theme is set to Acelords folder. That way, all backend items can stay in that folder. the Skeleton folder holds the public components. Once you specify the template path in jestream config file, you can move the Jetstream default components to the Acelords template folder.

    /*
    |--------------------------------------------------------------------------
    | Jetstream Inertia Views Prefix
    |--------------------------------------------------------------------------
    |
    | This configuration value informs Jetstream which "directory prefix" you will be
    | using for your application. This is especially helpful in projects with more
    | than one dashboard theme for different use-cases.
    |
    | e.g.
    | 'Templates/Admin/'
    | 'Themes/Admin/'
    | 'Themes/Client/'
    |
    */

    'inertia_views_prefix' => 'Templates/Acelords',

Here's a sample view of the new app.js code

require("./bootstrap");

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";

// layouts
import AcelordsLayout from '@/Layouts/AcelordsLayout'
import SkeletonLayout from '@/Layouts/SkeletonLayout'

const appName = document.head.querySelector('meta[name="site-name"]').content

createInertiaApp({
    title: (title) => `${title} | ${appName}`,
    resolve: (name) => {
        const page = require(`./Pages/${name}`).default;
        if (page.layout === undefined) {
            if(name.startsWith("Templates/Acelords/")) {
                page.layout = AcelordsLayout; // backend
            } else {
                page.layout = SkeletonLayout; // frontend
            }
        }
        return page;
    },
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

InertiaProgress.init({ color: "#4B5563" });

NB: Should you view double headers displayed on the Jetstream views, it's because of the double inclusion of the header. A quick workaround is setting the layout attribute to an empty string in the individual components

<script>
    import { defineComponent } from 'vue'
    import AppLayout from '@/Layouts/AcelordsLayout.vue'
    import Welcome from '@/Jetstream/Welcome.vue'

    export default defineComponent({
        layout: '', // set to an empty string
        components: {
            AppLayout,
            Welcome,
        },
    })
</script>

Official Documentation

Documentation for Jetstream can be found on the Jetstream website.

Contributing

Thank you for considering contributing to Jetstream! You can read the contribution guide here.

Code of Conduct

In order to ensure that the Laravel community is welcoming to all, please review and abide by the Code of Conduct.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

License

Laravel Jetstream is open-sourced software licensed under the MIT license.