Registry / web-framework / vite-plugin-craftcms

vite-plugin-craftcms

library4.0.0jsnpmunverified

Integrates Vite with Craft CMS without requiring a Craft plugin. Current stable version is 4.0.0, compatible with Vite 6 or 7 and Node 18+. The plugin parses Vite's HTML output and generates Twig partials for asset injection. Key differentiators: no Craft plugin needed, supports multiple entry points, auto-generates Twig macros for static assets, and respects Vite's server.origin. Release cadence: major versions track Vite major releases, with minor/patch updates for dependency bumps.

web-framework devops

npm install vite-plugin-craftcms

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-CRAFTC

vite-plugin-craftcms

web-frameworkjavascriptv4.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vitePluginCraftCms

✓ import { vitePluginCraftCms } from 'vite-plugin-craftcms'

✗ const vitePluginCraftCms = require('vite-plugin-craftcms')

Package is ESM-only since v3; named export not default.

vitePluginCraftCms

✓ import { vitePluginCraftCms } from 'vite-plugin-craftcms'

✗ import vitePluginCraftCms from 'vite-plugin-craftcms'

Default import is not available; must use named import.

type

✓ import type { VitePluginCraftCmsOptions } from 'vite-plugin-craftcms'

Type import for options object; only available in TypeScript projects.

Minimal Vite config using vite-plugin-craftcms with entry.html, Twig partial output, and dev server on port 3000.

// vite.config.js import { defineConfig } from 'vite'; import { vitePluginCraftCms } from 'vite-plugin-craftcms'; export default defineConfig(({ command }) => ({ base: command === 'serve' ? '' : '/dist/', server: { port: process.env.VITE_DEV_PORT || 3000, }, build: { manifest: true, outDir: './web/dist/', rollupOptions: { input: './src/entry.html', }, }, plugins: [ vitePluginCraftCms({ outputFile: './templates/_partials/vite.twig', }), ], }));

Debug

Known issues

breakingv3.0.0 drops support for Node < 18 and Vite < 6.0.0.

fix

Upgrade Node to >=18 and Vite to >=6.0.0.

affects: >=3.0.0

breakingv2.0.0 changes output file naming when multiple entry points are used; [name] pattern is required.

fix

Update outputFile to include '[name]' for multiple entry points.

affects: >=2.0.0 <3.0.0

gotchaThe plugin expects an HTML fragment as entry file; using a full HTML document may cause issues.

fix

Use a minimal HTML fragment with relative asset paths in './src'.

affects: >=1.0.0

gotchaStatic asset URLs via the Twig macro only work for files inside the Vite publicDir.

fix

Place static assets in the directory specified by publicDir (e.g., './web/dist').

affects: >=1.0.0

Errors

Common errors & fixes

Error: Cannot find module 'vite-plugin-craftcms'

Package not installed or not using ESM import.

fix

Run 'npm i -D vite-plugin-craftcms' and use 'import { vitePluginCraftCms } from 'vite-plugin-craftcms''.

TypeError: vitePluginCraftCms is not a function

Default import used instead of named import (package is ESM-only).

fix

Change 'import vitePluginCraftCms from ...' to 'import { vitePluginCraftCms } from ...'.

[vite] URL import is not available in old Node.js versions

Running Node < 18 with v3+ of the plugin.

fix

Upgrade Node to version 18 or higher.

The service worker navigation preload request was cancelled before 'preloadResponse' resolved.

Mismatch between server.origin and expected proxy URL; often due to HTTPS vs HTTP.

fix

Set server.origin in Vite config or ensure dev server uses HTTPS if production does.

Upgrade

Version history

4.0.0latest on npm

Audit

Dependencies

viterequiredPeer dependency; plugin extends Vite's build pipeline

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/brianjhanson/vite-plugin-craftcms ↗

packagehttps://www.npmjs.com/package/vite-plugin-craftcms ↗