Vite Plugin Glslify

2.3.0 verified Fri May 01 auth: no javascript

A Vite plugin (v2.3.0, stable) that integrates glslify to compile GLSL shader code with #pragma glslify imports. It transforms tagged template literals (glsl`...`) and function calls (glsl(`...`)) in JavaScript/TypeScript files, as well as .glsl, .vert, .frag files. Ships TypeScript types. Unlike manual glslify CLI usage, it auto-plugs into Vite's dev server and build pipeline. Requires Vite ^5.2.9 || ^6.

Common errors

error Cannot find module 'vite-plugin-glslify' ↓

cause Package not installed or used in a CommonJS project (require).

fix

npm install vite-plugin-glslify --save-dev and use ESM imports (import).

error TypeError: glslify is not a function ↓

cause Named import used incorrectly; the plugin function is exported as default and named.

fix

Use import glslify from 'vite-plugin-glslify' or import { glslify } from 'vite-plugin-glslify'.

error The requested module 'vite-plugin-glslify' does not provide an export named 'glslify' ↓

cause Importing 'glslify' as a named export from a version that only exports default (pre-v2).

fix

Use default import: import glslify from 'vite-plugin-glslify'.

Warnings

breaking v1 to v2: peer dependency changed from vite@^2 to vite@^5||^6, plugin options restructured (funcName, options object). ↓

fix Update to vite-plugin-glslify@^2.0.0 and adjust vite.config.js to match new Options interface.

gotcha The plugin returns an array of plugins (Plugin[]), not a single plugin. Using as a single plugin will cause Vite to ignore it. ↓

fix Spread the result or assign directly: glslify() returns an array; Vite accepts arrays in plugins.

gotcha Tagged template literals are only transformed if transformLiterals is true (default). If you disable it, `glsl` tagged templates will remain unchanged. ↓

fix Set transformLiterals: true or remove the option to use default.

deprecated The `funcName` option defaults to /glsl/ matching any function named glsl, but using a string like 'glsl' may match unintended functions in older versions. ↓

fix Use a regex pattern in funcName, e.g., /^glsl$/.

Install

npm install vite-plugin-glslify

yarn add vite-plugin-glslify

pnpm add vite-plugin-glslify

Imports

glslify (default)
```
import glslify from 'vite-plugin-glslify'
```
ESM default import; works with TypeScript.

glslify (named)

wrong

const glslify = require('vite-plugin-glslify')

correct

import { glslify } from 'vite-plugin-glslify'

ESM-only package; CommonJS require will fail.

DEFAULT_EXTENSIONS
```
import { DEFAULT_EXTENSIONS } from 'vite-plugin-glslify'
```
Useful for extending the default file extensions.

glslify function as plugin entry

wrong

import { glslify } from 'vite-plugin-glslify'; export default { plugins: [glslify] }

correct

import glslify from 'vite-plugin-glslify'; export default { plugins: [glslify()] }

glslify() returns a Plugin[] array, not a single plugin object.

Quickstart

Configures vite-plugin-glslify with include/exclude patterns, options for transforming tagged literals and files, and passes transforms to glslify.

// vite.config.js
import { defineConfig } from 'vite';
import glslify from 'vite-plugin-glslify';

export default defineConfig({
  plugins: [glslify({
    include: [/src\/.*\.(ts|js)$/],
    exclude: ['node_modules/**'],
    transformLiterals: true,
    transformFiles: true,
    extensions: [/\.vert$/, /\.frag$/, /\.glsl$/],
    options: {
      transforms: [
        ['glslify-hex', {}]
      ]
    }
  })]
});