PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
No Result
View All Result
Home Web Dev

Laravel Themer package: add multi-theme support for Laravel application

February 26, 2021
in Web Dev
289 3
Laravel Themer package: add multi-theme support for Laravel application


This Laravel Themer package adds multi-theme support to your Laravel application. It also provides a simple authentication scaffolding and presets for Bootstrap, Tailwind, Vue, and React as a starting point for building a Laravel application.

In my opinion, this Laravel Themer package is a better alternative to the official laravel/ui & laravel/breeze packages because of the following features:

  • Any number of themes
  • Fallback theme support (WordPress style); It allows creating a child theme to extend any theme
  • Provides authentication scaffolding similar to laravel/ui & laravel/breeze
  • Exports all auth controllers, tests, and other files similar to laravel/breeze
  • Provides frontend presets for Bootstrap, Tailwind, Vue 2, Vue 3, and React

If you don’t want to use this package’s auth scaffolding, instead, you want to use Laravel Fortify, no problem with that. You can use Laravel Themer with Fortify as well. Laravel Fortify is a frontend agnostic authentication backend for Laravel, and it does not provide views or frontend presets. So, use Fortify for backend authentication and Laravel Themer for your views, presets, and for multi-theme support.

Video Tutorial

Installation

Install via composer

composer require qirolab/laravel-themer

Publish a configuration file:

php artisan vendor:publish --provider="QirolabThemeThemeServiceProvider" --tag="config"

Creating a theme

Use the following command to create a theme:

php artisan make:theme

Create theme

Middleware to set a theme

Register ThemeMiddleware in appHttpKernel.php:

protected $routeMiddleware = [
    // ...
    'theme' => QirolabThemeMiddlewareThemeMiddleware::class,
];

Examples for middleware usage:

Route::get('/dashboard', '[email protected]')
    ->middleware('theme:dashboard-theme');

Theme methods:

// Set active theme
Theme::set('theme-name');

// Get current active theme
Theme::active();

// Get current parent theme
Theme::parent();

// Clear theme. So, no theme will be active
Theme::clear();

// Get theme path
Theme::path($path = 'views');
// output:
// /app-root-path/themes/active-theme/views

Theme::path($path = 'views', $themeName = 'admin');
// output:
// /app-root-path/themes/admin/views

Theme::getViewPaths();
// Output:
// [
//     '/app-root-path/themes/admin/views',
//     '/app-root-path/resources/views'
// ]

webpack.mix.js Configuration

After creating a new theme, it creates a separate webpack.mix.js file for that theme. So, to compile the theme’s webpack.mix.js file it should be included in the app’s webpack.mix.js that is located in the root path.

// add this in the root `webpack.mix.js`
require(`${__dirname}/themes/theme-name/webpack.mix.js`);

In the case of multiple themes, If you add multiple webpack.mix.js of different themes. Then webpack may not compile these correctly. So, you should modify the root webpack.mix.js with the following code:

let theme = process.env.npm_config_theme;

if(theme) {
   require(`${__dirname}/themes/${theme}/webpack.mix.js`);
} else {
    // default theme to compile if theme is not specified
  require(`${__dirname}/themes/theme-name/webpack.mix.js`);
}

Now, you can use the following command to compile assets for a particular theme:

npm run dev --theme=theme-name



Source link

Share219Tweet137Share55Pin49

Related Posts

Say Hello To CSS Container Queries
Web Dev

Say Hello To CSS Container Queries

I haven’t been more excited for a CSS feature like I’m now in the past six years I spent...

April 20, 2021
Keep Logs Tidy With the Log Cleaner Package for Laravel
Web Dev

Keep Logs Tidy With the Log Cleaner Package for Laravel

Laravel Log Cleaner is a package by Joost van Veen for keeping your log files small and tidy. While...

April 20, 2021
Making GraphQL Work In WordPress — Smashing Magazine
Web Dev

Making GraphQL Work In WordPress — Smashing Magazine

About The AuthorLeonardo Losoviz is a freelance developer and writer, with an ongoing quest to integrate innovative paradigms (Serverless...

April 20, 2021
How to Improve CSS Performance
Web Dev

How to Improve CSS Performance

Combined with the complexity of modern websites and the way browsers process CSS, even a moderate amount of CSS...

April 19, 2021
Next Post
Building User Trust In UX Design — Smashing Magazine

Building User Trust In UX Design — Smashing Magazine

Reader Question: Why did you choose Statamic for Laravel News?

Reader Question: Why did you choose Statamic for Laravel News?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Managing AWS ParallelCluster SSH users with OpenLDAP : idk.dev

Managing AWS ParallelCluster SSH users with OpenLDAP : idk.dev

August 21, 2020
What Happened to IPv5? Why there is IPv4, IPv6 but no IPv5?

What Happened to IPv5? Why there is IPv4, IPv6 but no IPv5?

May 24, 2020
Announcing the General Availability of Bottlerocket, an open source Linux distribution built to run containers : idk.dev

Announcing the General Availability of Bottlerocket, an open source Linux distribution built to run containers : idk.dev

August 31, 2020
Create an FAQ Slack app with Netlify functions and FaunaDB

Create an FAQ Slack app with Netlify functions and FaunaDB

October 22, 2020

Categories

  • AWS
  • Big Data
  • Database
  • DevOps
  • IoT
  • Linux
  • Web Dev
No Result
View All Result
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In