PHPackages                             ngsoft/php-vite-adapter - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. ngsoft/php-vite-adapter

ActiveLibrary[Utility & Helpers](/categories/utility)

ngsoft/php-vite-adapter
=======================

Adapter to be able to integrate vite powered apps into php project

1.0.0(7mo ago)010MITPHPPHP >=8.2

Since Oct 19Pushed 7mo agoCompare

[ Source](https://github.com/ngsoft/laravel-vite-adapter)[ Packagist](https://packagist.org/packages/ngsoft/php-vite-adapter)[ RSS](/packages/ngsoft-php-vite-adapter/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)Dependencies (4)Versions (2)Used By (0)

PHP Vite Adapter
================

[](#php-vite-adapter)

Package that makes possible to integrate Vite into your PHP Application using [laravel-vite-plugin](https://laravel.com/docs/12.x/vite) under the hood

Steps
-----

[](#steps)

### 1. Install this package

[](#1-install-this-package)

```
composer require ngsoft/php-vite-adapter
```

### 2. Install vite and dependencies

[](#2-install-vite-and-dependencies)

```
npm -D install vite@^7 typescript@^5 tslib@^2 @types/node@* laravel-vite-plugin@^2
```

### 3. Edit `package.json`

[](#3-edit-packagejson)

Add prerequisites to use .js files as modules

```
{
    "private": true,
    "type": "module",
    "devDependencies": {
        "@types/node": "^24.8.1",
        "laravel-vite-plugin": "^2.0.1",
        "tslib": "^2.8.1",
        "typescript": "^5.9.3",
        "vite": "^7.1.10"
    }
}
```

### 4. Edit your `vite.config.ts`

[](#4-edit-your-viteconfigts)

```
import {defineConfig} from 'vite';
import {fileURLToPath, URL} from 'node:url';
import laravel from 'laravel-vite-plugin';

// https://vite.dev/config/
export default defineConfig({
    plugins: [
        laravel({
            // those are the endpoints to use with the adapter
            input: ['src/app.ts'],
            // public directory relative to the project root
            publicDirectory: 'public',
            // build directory name relative to public
            buildDirectory: 'build',
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            // replace src to your js/ts libs (do the same for tsconfig mappings)
            '@': fileURLToPath(new URL('./src', import.meta.url)),
            // $lib is required by many modern frameworks (jsrepo)
            $lib: fileURLToPath(new URL('./src/lib', import.meta.url)),
        },
        conditions: ['browser'],
    },
    server: {cors: true},
});
```

### 5. edit `tsconfig.json` (optional)

[](#5-edit-tsconfigjson-optional)

This is a generic configuration that many frameworks (svelte, vue, ...) use

```
{
    "$schema": "https://json.schemastore.org/tsconfig",
    "_version": "5.0.0",
    "compilerOptions": {
        "importHelpers": true,
        "allowJs": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        "moduleResolution": "bundler",
        "verbatimModuleSyntax": true,
        "isolatedModules": true,
        "module": "esnext",
        "noEmit": true,
        "target": "esnext",
        "lib": [
            "esnext",
            "DOM",
            "DOM.Iterable"
        ],
        "paths": {
            "@": [
                "./src"
            ],
            "@/*": [
                "./src/*"
            ],
            "$lib": [
                "./src/lib"
            ],
            "$lib/*": [
                "./src/lib/*"
            ]
        }
    },
    "include": [
        "vite.config.js",
        "vite.config.ts",
        "src/**/*.ts",
        "src/**/*.js"
    ],
    "exclude": [
        "node_modules/**"
    ]
}
```

### 6. Edit `.gitignore`

[](#6-edit-gitignore)

`hot` file is created when using `vite` to develop using hot module reload `build` dir contains the `manifest.json` and the bundle you built using `vite build`

```
public/build
public/hot
```

### 7. Edit `.env` (optional)

[](#7-edit-env-optional)

The laravel plugin uses an `APP_URL` to link to the php application when running `vite` command.

```
# Supply the port you wish to use for your PHP application
APP_URL=http://127.0.0.1:8000
```

Then to start your PHP application development

```
# start vite in a terminal
vite

# then in another terminal
# using the php development server
php -S 127.0.0.1:8000 -t public
# or if using symfony cli
symfony server:start --no-tls --port=8000
```

Load Vite application from the PHP view
---------------------------------------

[](#load-vite-application-from-the-php-view)

In your PHP view when rendering the `` element, add the following code

```

```

Then your php application will serve your node application

###  Health Score

33

—

LowBetter than 75% of packages

Maintenance65

Regular maintenance activity

Popularity6

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity47

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

211d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/5a8b5abed81ea03ce4b93ef015ef273be7fab3ebca2050119c186f59e383c7b3?d=identicon)[ngsoft](/maintainers/ngsoft)

---

Top Contributors

[![ngsoft](https://avatars.githubusercontent.com/u/6670769?v=4)](https://github.com/ngsoft "ngsoft (3 commits)")

---

Tags

laraveladaptervitevite-plugin

###  Code Quality

Code StylePHP CS Fixer

### Embed Badge

![Health badge](/badges/ngsoft-php-vite-adapter/health.svg)

```
[![Health](https://phpackages.com/badges/ngsoft-php-vite-adapter/health.svg)](https://phpackages.com/packages/ngsoft-php-vite-adapter)
```

###  Alternatives

[stephenjude/filament-blog

Filament Blog Builder

20317.8k](/packages/stephenjude-filament-blog)[omaralalwi/laravel-trash-cleaner

clean logs and debug files (clockwork , laravel telescope and more)

221.8k](/packages/omaralalwi-laravel-trash-cleaner)[datomatic/nova-detached-actions

A Laravel Nova tool to allow for placing actions in the Nova toolbar detached from the checkbox selection mechanism.

11229.2k](/packages/datomatic-nova-detached-actions)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)