Hello! Perhaps the answer doesn't come from where you expected, but I've recently been dealing with the integration of Semantic UI and its evil and improved sibling, Fomantic UI, in Laravel projects using recent versions (8, 9, and 10) where Vite is used to compile the app's resources instead of Laravel Mix.
To keep it concise, there are two ways to install these frameworks correctly, the simple method, and the complex one (NOTE: The steps should be the same for both cases, Semantic and Fomantic UI, but for practical and personal purposes, Fomantic UI will be used as the base in the examples):
Initial Setup
For both cases, the first thing you need to do is run npm init from the root folder of your Laravel project to generate the vite.config.js file.
Simple Method (cannot be customized)
- Once you've generated the Vite file, you need to install Fomantic UI in its precompiled CSS version. To do this, run:
npm install fomantic-ui-css.
- After installing Fomantic, import the resources into your
app.css and app.js located in resources/css and resources/js, respectively. In app.css, add: @import "fomantic-ui-css/semantic.min.css"; and in app.js, add: import 'fomantic-ui-css/semantic.min.js';
- Then, from the main view or layout of the application, you need to call a version of JQuery greater than 3.4 and the resources you just installed through Vite. Place the following code below the
<title> tag:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
@vite(['resources/css/app.css', 'resources/js/app.js'])
- And you're DONE! After doing this, the application should recognize the styles and functionality of Fomantic without any issues.
Complex Method (customizable)
-
For this method, you need to follow some steps listed in the official documentation after generating the Vite file. Execute them in the following order:
-
npm install fomantic-ui
-
cd node_modules/fomantic-ui
-
npx gulp install
-
When you run the last command, an installation wizard will start. Only select the options that best fit your preferences and continue with the following steps (NOTE: It is recommended to select the output folder as resources/fomantic or resources/semantic).
-
After that, you need to modify the package.json file as follows:
{
...
"type": "commonjs",
...
}
-
Following that, you need to navigate to the project's root folder in the console and access the output folder of the files created by the installation wizard. Inside this folder, run the command: npx gulp build.
-
Next, you need to import the CSS and JS files into your app.css and app.js, respectively. To do this, go to resources/css and resources/js as needed and add the following:
- In the CSS file:
@import "../semantic/dist/semantic.min.css";
- In the JS file:
import '../semantic/dist/semantic.min';
-
Now, you need to do the same thing as in step number 3 of the simple method, and you're DONE! After doing this, the application should recognize the styles and functionality of Fomantic without any issues.
How to customize with LESS?
To do this, you need to go to the output folder of the installation wizard files and inside /src. There you will find everything you need to customize the Fomantic or Semantic installation you performed.
NOTE: After every LESS change, it's necessary to re-run: npx gulp build.
