bigfork/silverstripe-vitesse

Silverstripe and Vite, built on Laravel’s Vite support

Maintainers

Details

github.com/bigfork/silverstripe-vitesse

Source

Issues

Installs: 1

Dependents: 2

Suggesters: 0

Security: 0

Stars: 0

Watchers: 0

Forks: 0

Open Issues: 1

Type:silverstripe-vendormodule

0.0.1 2025-06-18 21:48 UTC

Requires

BSD-3-Clause 639f10eea928aa7291cf343e63d8847ffea0b09b

  • Loz Calver <loz.woop@bigfork.co.uk>

laravelsilverstripelaravel-vitevite

This package is auto-updated.

Last update: 2025-06-19 15:34:51 UTC

README

Support for Vite in Silverstripe, built atop Laravel’s Vite components.

Setup

composer require bigfork/silverstripe-vitesse

Setup the laravel-vite-plugin in your vite.config.js:

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

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'src/scss/style.scss',
        'src/scss/editor.scss',
        'src/js/app.js',
      ],
      refresh: [
        'templates/**/*.ss',
      ],
    }),
  ],
  // ... etc
})

Full configuration example and matching YAML configuration.

Usage

Most of the Laravel Vite documentation applies, though with an adjusted syntax for Silverstripe templates vs Blade.

Include scripts/stylesheets using the <% vite %> tag, for example:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <% base_tag %>
    {$MetaTags}

    <% vite 'src/scss/style.scss', 'src/js/app.js' %>
</head>

For React projects, you can also include <% viteReactRefresh %>. Note that this must be included before any calls to <% vite %>

Paths for assets processed via Vite can be output using $viteAsset:

<img src="{$viteAsset('src/images/logo.svg')}" alt="Logo" width="100" height="100" />

File contents for assets processed via Vite can be output using $viteContent:

<div class="my-inline-svg">
    {$viteContent('src/images/image.svg')}
</div>

Configuration

If you’re using different build directories, or want to take advantage of other features, you can adjust configuration via YAML or directly in PHP:

YAML config:

SilverStripe\Core\Injector\Injector:
  Bigfork\Vitesse\Vite:
    calls:
      buildDirectory: [ 'useBuildDirectory', ['dist'] ]

PHP method calls:

use Bigfork\Vitesse\Vite;
use SilverStripe\CMS\Controllers\ContentController;

class PageController extends ContentController
{
    protected function init()
    {
        parent::init();
        Vite::inst()->useScriptTagAttributes(['data-foo' => 'bar']);
    }
}