laravel-vite-plugin

What is laravel-vite-plugin?

The laravel-vite-plugin npm package is designed to integrate Vite with Laravel applications. It provides a seamless way to manage and build frontend assets using Vite's fast and modern build tool, while leveraging Laravel's backend capabilities.

What are laravel-vite-plugin's main functionalities?

Vite Configuration

This feature allows you to configure Vite to work with Laravel. The code sample shows how to define the Vite configuration and use the laravel-vite-plugin to specify the input files and enable hot module replacement.

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

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
  ],
});
```

Hot Module Replacement (HMR)

This feature enables Hot Module Replacement (HMR) for a better development experience. The code sample shows how to configure the Vite server to use HMR with the laravel-vite-plugin.

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

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
  ],
  server: {
    hmr: {
      host: 'localhost',
    },
  },
});
```

Asset Versioning

This feature allows for asset versioning, which helps in cache busting. The code sample shows how to enable the generation of a manifest file during the build process, which can be used for versioning assets.

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

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
  ],
  build: {
    manifest: true,
  },
});
```

Other packages similar to laravel-vite-plugin

vite-plugin-laravel

vite-plugin-laravel is another package that integrates Vite with Laravel. It offers similar functionalities such as asset management and HMR. However, it may have different configuration options and community support compared to laravel-vite-plugin.

laravel-mix

laravel-mix is a popular package for managing assets in Laravel applications. While it is not specifically designed for Vite, it provides a comprehensive API for defining Webpack build steps for your Laravel application. It is more mature and has a larger community compared to laravel-vite-plugin.

README

Laravel Vite Plugin

Introduction

Vite is a modern frontend build tool that provides an extremely fast development environment and bundles your code for production.

This plugin configures Vite for use with a Laravel backend server.

Official Documentation

Documentation for the Laravel Vite plugin can be found on the Laravel website.

Contributing

Thank you for considering contributing to the Laravel Vite plugin! The contribution guide can be found in the Laravel documentation.

Code of Conduct

In order to ensure that the Laravel community is welcoming to all, please review and abide by the Code of Conduct.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

License

The Laravel Vite plugin is open-sourced software licensed under the MIT license.

Changelog

v1.0.5 - 2024-07-09

• TypeScript: define entrypoints using object by @tylerlwsmith in https://github.com/laravel/vite-plugin/pull/298