Vite is a new tool for web development that makes projects faster and helps with workflow efficiency.

Modern apps use many small modules instead of a single large bundle.

Older bundlers can have performance issues that slow development and delay updates.

In this blog or guide, we will show you how to set up Vite in a separate Bagisto package.

It helps speed up development and makes the workflow smoother in a modular setup.

You can also refer to the Why Vite section in the official documentation for more details.

Getting Started with Vite Configuration

Here are the steps to set up and configure Vite in a Bagisto package for a smooth and efficient development workflow.

Step 1: Create a Bagisto Package

Create a new package in Bagisto for Vite configuration.

If you are not sure how to create a Bagisto package, refer to the official package development documentation.

Step 2: Navigate to Package Folder

After creating the package, navigate to the package folder in the terminal.

Step 3: Initialize NPM

Initialize the NPM package by running npm init inside the package folder.

Step 4: Install Vite

Then, install Vite as a development dependency in your package using npm or yarn.

npm install vite --save-dev

2	npm install vite --save-dev

Step 5: Create Vite Configuration File

Create a Vite configuration file, vite.config.js, in the root of your package directory.

This file will contain the Vite settings and plugins you want to use.

import laravel from "laravel-vite-plugin";
import path from "path";

export default defineConfig({
    plugins: [
        laravel({
            hotFile: "../../../public/admin-default-vite.hot",
            publicDirectory: "../../../public",
            buildDirectory: "themes/admin/default/build",
            input: [
                "src/Resources/assets/css/app.css",
                "src/Resources/assets/js/app.js",
            ],
            refresh: true,
        }),
    ],
});

import laravel from "laravel-vite-plugin";

import path from "path";

export default defineConfig({

plugins: [

laravel({

hotFile: "../../../public/admin-default-vite.hot",

publicDirectory: "../../../public",

buildDirectory: "themes/admin/default/build",

input: [

"src/Resources/assets/css/app.css",

"src/Resources/assets/js/app.js",

refresh: true,

}),

});

Step 6: Create Assets

Inside your package folder, create assets such as JavaScript, CSS, images, and others.

These files will be processed and bundled using Vite.

These can include Vue.js components, JavaScript modules, or CSS files.

Step 7: Update package.json

Your package.json file should include scripts to build and serve Vite assets, along with the required development dependencies.

{
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "axios": "^1.4.0",
    "laravel-vite-plugin": "^0.7.2",
    "postcss": "^8.4.23",
    "vite": "^4.0.0",
  },
}

{

"private": true,

"scripts": {

"dev": "vite",

"build": "vite build"

"devDependencies": {

"axios": "^1.4.0",

"laravel-vite-plugin": "^0.7.2",

"postcss": "^8.4.23",

"vite": "^4.0.0",

}

After completing all the steps, we now need to include Vite in the main layout file of the package.

 @vite(['src/Resources/assets/css/app.css', 'src/Resources/assets/js/app.js'])

1	@vite(['src/Resources/assets/css/app.css', 'src/Resources/assets/js/app.js'])

This command starts the Vite development server.

It allows you to verify that Vite is working properly and your assets are being compiled correctly in real time.

npm run dev

1	npm run dev

When you are ready for production, run the build script as per the npm documentation.

This generates an optimized production build.

npm run build

1	npm run build

With these steps, you have successfully set up Vite in a separate package within your Bagisto project.

This approach keeps your Vite related code and assets separate from the core Bagisto codebase.

It makes it easier to manage and maintain your customizations.

Final Thoughts

Setting up Vite in a separate Bagisto package is a clean and scalable approach for modern development.

It helps keep all Vite related assets and configurations isolated from the core Bagisto codebase.

This structure makes it easier to manage JavaScript, CSS, and other assets without affecting core files.

Overall, this setup improves workflow efficiency, debugging, and customization.

It is a reliable approach for building modular and high performance Bagisto applications.

Thanks for reading this blog. Please leave a comment below if you have any questions.

You can also hire Laravel developers for your custom Laravel projects. Feel free to explore our extensions as well.

bagisto bagisto ecommerce bagisto ecommerce platform bagisto laravel bagisto new features

Amit Kumar

12 May, 2026
Updated by - Shrishti pandey
1 Aug, 2023
Created by - Amit Kumar

How To Configure Vite In Bagisto Separate Package ?

Getting Started with Vite Configuration

Step 1: Create a Bagisto Package

Step 2: Navigate to Package Folder

Step 3: Initialize NPM

Step 4: Install Vite

Step 5: Create Vite Configuration File

Step 6: Create Assets

Step 7: Update package.json

Final Thoughts

Leave a Comment Cancel Reply

How To Configure Vite In Bagisto Separate Package ?

Getting Started with Vite Configuration

Step 2: Navigate to Package Folder

Step 5: Create Vite Configuration File

Step 6: Create Assets

Step 7: Update package.json

Final Thoughts

Leave a Comment Cancel Reply

Message Sent!