PHPackages                             offline/oc-vite-plugin - 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. [Framework](/categories/framework)
4. /
5. offline/oc-vite-plugin

ActiveOctober-plugin[Framework](/categories/framework)

offline/oc-vite-plugin
======================

Vite integration for October CMS

v2.1.1(10mo ago)2435010PHPPHP >=8.0

Since Aug 25Pushed 10mo ago4 watchersCompare

[ Source](https://github.com/OFFLINE-GmbH/oc-vite-plugin)[ Packagist](https://packagist.org/packages/offline/oc-vite-plugin)[ RSS](/packages/offline-oc-vite-plugin/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (3)Versions (21)Used By (0)

Vite ⚡integration for October CMS
---------------------------------

[](#vite-integration-for-october-cms)

This plugin provides simple integration of [Vite](https://vitejs.dev/) for [October CMS](https://octobercms.com/) (Versions 3+).

Setup
-----

[](#setup)

Install the plugin using composer

```
composer require offline/oc-vite-plugin
```

For the Vite integration to work, you first need to set the `VITE_MANIFEST`env variable to the path of the manifest file generated by Vite.

```
# /themes/your-theme/assets/build/.vite/manifest.json
VITE_MANIFEST=assets/build/.vite/manifest.json
```

Then make sure to place the `{% styles %}` and `{% scripts %}` tags in your layout, so assets are included correctly.

Configuring Vite
----------------

[](#configuring-vite)

Install Vite via npm in your theme.

```
npm install --dev vite@latest
# or
yarn add -D vite@latest
```

You can adapt the following Vite configuration to bundle your theme assets:

```
// themes/your-theme/vite.config.ts
import { defineConfig } from 'vite'
import { resolve, basename } from 'path'

// Your JS/TS/CSS entrypoints.
const input = {
    main: resolve(__dirname, 'resources/ts/main.ts'),
    css: resolve(__dirname, 'resources/scss/main.scss'),
}

// Auto detect the theme name, works only if one theme is available.
// const themeName = __dirname.match(/themes\/([^\/]+)/)[1];
const themeName = 'your-theme'

export default defineConfig({
    // Included assets will use this path as the base URL.
    base: `/themes/${themeName}/assets/build/`,
    build: {
        rollupOptions: { input },
        manifest: true,
        emptyOutDir: true,
        // Output assets to /themes/your-theme/assets/build
        outDir: resolve(__dirname, 'assets/build'),
    },
    server: {
        hmr: {
            // Do not use encrypted connections for the HMR websocket.
            protocol: 'ws',
        },
        cors: {
            // Your APP_URL
            origin: 'http://app.test',
        },
    }
})
```

Workflow
--------

[](#workflow)

- To use Vite in development, start the Vite server using the `vite` command
- To build assets for production, use the `vite build` command

Including Vite Assets
---------------------

[](#including-vite-assets)

Use the `vite()` function anywhere in Twig to include assets from the Vite Dev Server or the Vite manifest.json (depending on the environment).

You must provide an array of files to include as the first argument. All paths are relative to the theme directory.

```
{# includes /themes/your-theme/resources/ts/main.ts #}
{{ vite([ 'resources/ts/main.ts' ]) }}

{# or using the object syntax: #}
{{ vite([ { path: 'resources/ts/main.ts' }, { path: 'resources/scss/main.scss' } ]) }}

{# force a script/link tag if the asset has no extension:  #}
{{ vite([ { path: '@some-special-vendor-asset', ext: 'js' }, { path: '@has-no-extension', ext: 'css' } ]) }}
```

By default, the `vite()` function will output the required assets to your markup directly.

### Using October's asset pipeline

[](#using-octobers-asset-pipeline)

If you want to push assets to October's asset pipeline instead, you can set the `render` parameter to false. No output will be generated where the `vite()` function was called in this case.

```
{{ vite([ { path: 'resources/ts/main.ts', render: false } ]) }}
```

Remember to place the `{% styles %}` and `{% scripts %}` tags in your layout, for this to work.

### Passing in additional attributes

[](#passing-in-additional-attributes)

Any additional attributes will be passed to the generated HTML tag.

```
{{ vite([ { path: 'resources/ts/main.ts', defer: true ]) }}
```

### Including assets from PHP code

[](#including-assets-from-php-code)

You can use a special `vite:` token to include files in PHP:

```
$this->controller->addJs('vite:resources/ts/main.ts');
```

The asset will now be included using October's asset pipeline and output wherever you have placed the `{% scripts %}` and `{% styles %}` tag.

Environments
------------

[](#environments)

### Dev

[](#dev)

By default, `local` and `dev` are regarded as dev environments. If your app environment is a dev environment, the Vite Dev Server will automatically be included for you.

You can use the following `.env` variables to configure how the Vite Dev Server is included:

```
# These are the defaults:
VITE_MANIFEST_FILENAME=manifest.json
VITE_DEV_ENVS=dev,local
VITE_HOST=http://localhost:5173
```

### Production

[](#production)

If your app is configured to be run in a production environment, the plugin will automatically use the Vite manifest to include assets.

###  Health Score

42

—

FairBetter than 90% of packages

Maintenance54

Moderate activity, may be stable

Popularity25

Limited adoption so far

Community18

Small or concentrated contributor base

Maturity61

Established project with proven stability

 Bus Factor1

Top contributor holds 86.5% 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

Every ~54 days

Recently: every ~120 days

Total

20

Last Release

316d ago

Major Versions

v1.0.2 → v2.0.02022-10-01

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/8600029?v=4)[Tobias Kündig](/maintainers/tobias-kuendig)[@tobias-kuendig](https://github.com/tobias-kuendig)

---

Top Contributors

[![tobias-kuendig](https://avatars.githubusercontent.com/u/8600029?v=4)](https://github.com/tobias-kuendig "tobias-kuendig (45 commits)")[![davidkvasnovsky](https://avatars.githubusercontent.com/u/12381721?v=4)](https://github.com/davidkvasnovsky "davidkvasnovsky (2 commits)")[![verenaroe](https://avatars.githubusercontent.com/u/49275087?v=4)](https://github.com/verenaroe "verenaroe (2 commits)")[![anik1ng](https://avatars.githubusercontent.com/u/505388?v=4)](https://github.com/anik1ng "anik1ng (1 commits)")[![sergeitoroptsev](https://avatars.githubusercontent.com/u/35667885?v=4)](https://github.com/sergeitoroptsev "sergeitoroptsev (1 commits)")[![wpluut](https://avatars.githubusercontent.com/u/15816596?v=4)](https://github.com/wpluut "wpluut (1 commits)")

### Embed Badge

![Health badge](/badges/offline-oc-vite-plugin/health.svg)

```
[![Health](https://phpackages.com/badges/offline-oc-vite-plugin/health.svg)](https://phpackages.com/packages/offline-oc-vite-plugin)
```

###  Alternatives

[october/october

Built using October CMS: The Laravel-Based CMS Engineered For Simplicity

11.1k257.9k2](/packages/october-october)[juzaweb/cms

Juzaweb CMS is a Content Management System (CMS) developed based on Laravel Framework and web platform whose sole purpose is to make your development workflow simple again. Project develop by Juzaweb

187571.2k](/packages/juzaweb-cms)[codewithdennis/larament

Larament is a time-saving starter kit to quickly launch Laravel 13.x projects. It includes FilamentPHP 5.x pre-installed and configured, along with additional tools and features to streamline your development workflow.

3691.5k](/packages/codewithdennis-larament)[ecotone/laravel

Laravel integration for Ecotone

21307.6k3](/packages/ecotone-laravel)

PHPackages © 2026

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