Installation
- Install the package via Composer
composer require mountz/hypervel-vite- Install required NPM packages
npm install @tailwindcss/vite laravel-vite-plugin tailwindcss viteConfiguration
- Create vite.config.js Create a vite.config.js file in your project root:
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [
laravel({
input: ["resources/css/app.css", "resources/js/app.js"],
refresh: true,
}),
tailwindcss(),
],
server: {
hmr: {
host: "localhost",
},
cors: true,
},
});- Update package.json Add the following to your package.json file:
json{
"private": true,
"type": "module",
"scripts": {
"build": "vite build",
"dev": "vite"
},
}
- Update 'resources/css/app.css'
@import "tailwindcss";
@source "../views";- update 'resources/js/app.js'
import "../css/app.css";- Create JS file Add Vite Directive to Blade Templates Add the Vite directive to your Blade layout/template file: blade
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Your App</title>
@vite([])
</head>
<body>
<!-- Your content here -->
</body>
</html>Directive Usage Notes
The @vite([]) directive with empty array will automatically include all assets in resources/js and resources/css. You can selectively include specific assets by passing them as arguments:
@vite(["resources/js/coba.js", "resources/js/cobacoba.js"])This is useful when you want to load specific scripts on certain pages only, rather than loading all scripts on every page.
Development
Run the Vite development server:
npm run dev
Production
Build for production:
npm run build
License
The MIT License (MIT). Please see License File for more information