PHPackages                             swordfox/vite - 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. swordfox/vite

ActiveSilverstripe-vendormodule[Utility & Helpers](/categories/utility)

swordfox/vite
=============

Vite Frontend Tooling, Lightning Fast HMR for SilverStripe 4

4.0.2(3mo ago)43.5k12MITPHPPHP ^7.4 || ^8.0

Since May 10Pushed 3mo ago2 watchersCompare

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

READMEChangelogDependencies (2)Versions (15)Used By (2)

 [ ![Vite Silverstripe logo](https://camo.githubusercontent.com/f193a7190de411486e016c7d619b2cb66f3f768f266167ebd6cccf94e6eadf67/68747470733a2f2f7777772e73776f7264666f782e6e7a2f73732d766974652e706e67) ](https://www.swordfox.nz)

Silverstripe Vite Plugin
========================

[](#silverstripe-vite-plugin)

[Vite](https://vitejs.dev/) 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 Silverstripe.

Install
-------

[](#install)

To clone and run this application, you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line, in the root folder of your project:

1. Install the plugin

```
composer require swordfox/vite
```

2. Copy vite yml config

```
cp vendor/swordfox/vite/_config/vite.yml.example app/_config/vite.yml
```

Make sure to set the path to images folder of your theme `assetsImageFolder`

You can also use `extra_requirements_css`, `editor_css` as shown in the config, in order to apply custom css to admin environment through Vite

3. Copy vite config

```
cp vendor/swordfox/vite/vite.config.js.example vite.config.js
```

You might need to update paths to your assets in vite.config.js, eg.: `themes/custom/src/app.scss`

4. Prepare package.json

We need to set up package.json in our project root folder. Use it for all frontend packages. If you have one, make sure to include npm scripts follows:

```
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

```

and install necessary packages:

```
npm install laravel-vite-plugin autoprefixer@latest sass --save-dev

```

or run the command to copy example package.json from the source folder to start with

```
cp vendor/swordfox/vite/package.json.example package.json
```

5. Finally, run

```
npm install
```

6. Add APP\_URL to your .env with the local address of your website

```
APP_URL=//mywebsite.com
# APP_URL_CDN="//cdn.mywebsite.com"
ASSET_URL=${APP_URL}
SS_BASE_URL=${APP_URL}

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
```

How To Use
----------

[](#how-to-use)

We need to include css in our head tag

```

  ...
  $Vite.CSS

```

The same goes with js requirements, but it can be included in body tag instead, at the very bottom

```

  ...
  $Vite.JS

```

Excellent! Next, let's get into a groove. For dev environment you need to run

```
npm run dev
```

Compiling for Production

```
npm run build
```

In order to add assets in your template .ss files you can use these helpers:

```
$Vite.asset('themes/custom/src/images/image.jpg')
```

or, shortcut if you set `assetsImageFolder` in your `vite.yml` as mentioned above

```
$Vite.image('image.jpg')
```

You can also reach vite helper through SiteConfig

```
$SiteConfig.Vite.image('image.jpg')
```

Make sure to include glob import that will handle assets on `npm run build`. To do so, add this at the very top of your main js file. You might need to update paths or include other assets that are involved in your own build.

```
import.meta.glob([
  './images/**',
  './fonts/**',
]);

```

Don't forget to update your .gitignore by adding these

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

```

You are all set now, enjoy.

###  Health Score

47

—

FairBetter than 94% of packages

Maintenance82

Actively maintained with recent releases

Popularity25

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 75% 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 ~77 days

Recently: every ~161 days

Total

14

Last Release

90d ago

Major Versions

2.0 → 3.02023-06-25

3.2.7 → 4.0.02026-02-08

### Community

Maintainers

![](https://www.gravatar.com/avatar/96b760811dd50cc818deef02183cfabd8efacbc8f27af1c5f1fcde738980d2dd?d=identicon)[swordfox](/maintainers/swordfox)

---

Top Contributors

[![goldfinch](https://avatars.githubusercontent.com/u/2291826?v=4)](https://github.com/goldfinch "goldfinch (12 commits)")[![swordfox](https://avatars.githubusercontent.com/u/549500?v=4)](https://github.com/swordfox "swordfox (4 commits)")

---

Tags

silverstripeviteHmr

### Embed Badge

![Health badge](/badges/swordfox-vite/health.svg)

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

PHPackages © 2026

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