Laravel Vite with package development-CodePudding

How to use laravel vite with custom package development. I tried to add my path to vite.config.js but am getting an error.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({

            input: ['resources/css/app.css', 'resources/js/app.js'],
          //  input: ['../Packages/Plugin/Customers/public/css/styles'],
            refresh: true,
        }),
    ],
});

I tried to duplicate this in my package folder but same error. Can you please assist.

CodePudding user response：

To use Laravel Vite with custom package development, you'll need to make sure that Vite is set up to recognize your package's location. One way to do this is to add your package's path to the "alias" section of the Vite configuration file (vite.config.js). This will allow Vite to correctly resolve imports and references to your package's files.

Here is an example of what your vite.config.js file might look like with an added alias for a custom package located in a directory called "my-package":

module.exports = {
  alias: {
    'my-package': '/path/to/my-package'
  }
}

You will also need to import the package in your main app.js file.

import 'my-package'

Please make sure your package is following the laravel package structure and also the laravel package development documentation.

You may also need to run npm install in your package directory to install any dependencies.

CodePudding user response：

I followed Kamlesh login, I was able to create vite.config.js file inside my custom package as shown below.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'resources/asset/css/settings.css',
            'resources/asset/js/custom.js',
            'resources/asset/js/ecstore_profile.js',
            'resources/asset/js/general_settings.js',
        ]),
    ],
    resolve: {
        alias: {
            'settings': '/resources/asset/css/settings.css',
            'custom': '/resources/asset/js/custom.s',
            'profile': '/resources/asset/js/ecstore_profile.js',
            'general': '/resources/asset/js/general_settings.js',
        },
    },
});

Then I added each file to the vite.config.js file. Then run build inside the custom package and publish this to laravel public folder. all working fine.