Implementing Multiple Layouts with Different CSS Frameworks in Laravel Using Vite

Muhammad Ishaq Muhammad Ishaq

Muhammad Ishaq

Software Engineer?? | Laravel Developer ??

发布日期: 2024年2月3日
+ 关注

Introduction:

In this article, we will delve into the process of incorporating distinct layouts, each utilizing different CSS frameworks within a Laravel application, all powered by Vite. Specifically, we will employ Tailwind CSS for one layout (layout1) and Bootstrap 5 for another (layout2).

Getting Started:

To begin, let’s create a new Laravel project by executing the following command: 

composer create-project laravel/laravel ProjectName

For the sake of simplicity, we’ll utilize Laravel Breeze as a starting point for authentication, which conveniently installs Tailwind CSS and Vite. Follow these steps: 

cd ProjectName
composer require laravel/breeze --dev
php artisan breeze:install //for now here we will select 0-blade
php artisan migrate
npm install
npm run dev

Adding Bootstrap 5:

Next, integrate Bootstrap 5 into our project by running the following npm command: 

npm i bootstrap sass @popperjs/core --save-dev

Now, let’s make some file adjustments:

  • Rename resources/css/app.css to resources/layout1.css.
  • Rename resources/js/app.js to resources/layout1.js.
  • Create layout2.css inside resources/css/ and paste below code

领英推荐

@import '~bootstrap/dist/css/bootstrap.min.css';

  • Create layout2.js inside resources/js/ and paste below line to import bootstrap.

import './bootstrap';

  • open resources/js/bootstrap.js and below lines to import bootstrap and popper.

//import bootstrap bootstrap
import * as Popper from '@popperjs/core'
window.Popper = Popper
import 'bootstrap'

Configure Vite:

Open app/vite.config.js and update the plugins to include both layouts: 

plugins: [
        laravel({
            input: [
                "resources/css/layout1.css", "resources/js/layout1.js",
                "resources/css/layout2.css", "resources/js/layout2.js"
            ],
            refresh: true,
        }),
    ],

Incorporate Layouts:

Finally, add the relevant CSS and JS in the respective layouts: 

<!doctype html>
<html lang="en">
<head>
<! - Required meta tags →
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Layout 1!</title>
@vite(['resources/css/layout1.css', 'resources/js/layout1.js'])
</head>
<body>
        //other code
</body>
</html>        
<!doctype html>
<html lang="en">
<head>
<! - Required meta tags →
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Layout 2!</title>
@vite(['resources/css/layout2.css', 'resources/js/layout2.js'])
</head>
<body>
        //other code
</body>
</html>

Conclusion:

With these steps completed, you have successfully implemented multiple layouts with different CSS frameworks in Laravel using Vite. This approach offers flexibility and ease of integration, allowing you to tailor each layout to your specific needs.

要查看或添加评论，请登录

Muhammad Ishaq的更多文章

社区洞察

其他会员也浏览了