{"id":22623,"library":"vite-plugin-craftcms","title":"Vite Plugin Craft CMS","description":"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.","status":"active","version":"4.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/brianjhanson/vite-plugin-craftcms","tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-plugin-craftcms","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-craftcms","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-craftcms","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin extends Vite's build pipeline","package":"vite","optional":false}],"imports":[{"note":"Package is ESM-only since v3; named export not default.","wrong":"const vitePluginCraftCms = require('vite-plugin-craftcms')","symbol":"vitePluginCraftCms","correct":"import { vitePluginCraftCms } from 'vite-plugin-craftcms'"},{"note":"Default import is not available; must use named import.","wrong":"import vitePluginCraftCms from 'vite-plugin-craftcms'","symbol":"vitePluginCraftCms","correct":"import { vitePluginCraftCms } from 'vite-plugin-craftcms'"},{"note":"Type import for options object; only available in TypeScript projects.","wrong":"","symbol":"type","correct":"import type { VitePluginCraftCmsOptions } from 'vite-plugin-craftcms'"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport { vitePluginCraftCms } from 'vite-plugin-craftcms';\n\nexport default defineConfig(({ command }) => ({\n  base: command === 'serve' ? '' : '/dist/',\n  server: {\n    port: process.env.VITE_DEV_PORT || 3000,\n  },\n  build: {\n    manifest: true,\n    outDir: './web/dist/',\n    rollupOptions: {\n      input: './src/entry.html',\n    },\n  },\n  plugins: [\n    vitePluginCraftCms({\n      outputFile: './templates/_partials/vite.twig',\n    }),\n  ],\n}));\n","lang":"javascript","description":"Minimal Vite config using vite-plugin-craftcms with entry.html, Twig partial output, and dev server on port 3000."},"warnings":[{"fix":"Upgrade Node to >=18 and Vite to >=6.0.0.","message":"v3.0.0 drops support for Node < 18 and Vite < 6.0.0.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Update outputFile to include '[name]' for multiple entry points.","message":"v2.0.0 changes output file naming when multiple entry points are used; [name] pattern is required.","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"fix":"Use a minimal HTML fragment with relative asset paths in './src'.","message":"The plugin expects an HTML fragment as entry file; using a full HTML document may cause issues.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Place static assets in the directory specified by publicDir (e.g., './web/dist').","message":"Static asset URLs via the Twig macro only work for files inside the Vite publicDir.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm i -D vite-plugin-craftcms' and use 'import { vitePluginCraftCms } from 'vite-plugin-craftcms''.","cause":"Package not installed or not using ESM import.","error":"Error: Cannot find module 'vite-plugin-craftcms'"},{"fix":"Change 'import vitePluginCraftCms from ...' to 'import { vitePluginCraftCms } from ...'.","cause":"Default import used instead of named import (package is ESM-only).","error":"TypeError: vitePluginCraftCms is not a function"},{"fix":"Upgrade Node to version 18 or higher.","cause":"Running Node < 18 with v3+ of the plugin.","error":"[vite] URL import is not available in old Node.js versions"},{"fix":"Set server.origin in Vite config or ensure dev server uses HTTPS if production does.","cause":"Mismatch between server.origin and expected proxy URL; often due to HTTPS vs HTTP.","error":"The service worker navigation preload request was cancelled before 'preloadResponse' resolved."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}