Registry / devops / vite-plugin-shopify-assets

vite-plugin-shopify-assets

library1.0.0jsnpmunverified

Vite plugin to watch and copy static assets (e.g., fonts, images, static JS/CSS) into a Shopify theme's assets folder during development and build. Version 1.0.0 is the first stable release, compatible with Vite 5 and 6 and Node 18–22. It works alongside vite-plugin-shopify, but can be used standalone. The plugin copies files from a public directory to the theme's assets folder, supports glob patterns, ignore filters, custom destinations, and rename functions for generating Liquid snippets from SVGs. It keeps the assets folder in sync on dev, watch, and build, ensuring that static assets are available in Shopify without manual copying.

devops web-framework

npm install vite-plugin-shopify-assets

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-SHOPIF

vite-plugin-shopify-assets

devopsjavascriptv1.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.

default

✓ import shopifyAssets from 'vite-plugin-shopify-assets'

✗ const shopifyAssets = require('vite-plugin-shopify-assets');

ESM-only; CJS require not supported as package type is module

shopifyAssets

✓ import { shopifyAssets } from 'vite-plugin-shopify-assets'

✗ import shopifyAssets from 'vite-plugin-shopify-assets'

default export is the plugin; named export also available

type Options

✓ import type { Options } from 'vite-plugin-shopify-assets'

✗ import { Options } from 'vite-plugin-shopify-assets'

TypeScript users should import types as type to avoid runtime import

Basic setup to sync public/ folder assets to theme assets/ folder with vite-plugin-shopify and vite-plugin-shopify-assets.

// vite.config.js import { defineConfig } from 'vite'; import shopify from 'vite-plugin-shopify'; import shopifyAssets from 'vite-plugin-shopify-assets'; export default defineConfig({ plugins: [ shopify(), shopifyAssets() ] });

Debug

Known issues

gotchaThe plugin requires the publicDir to be set (defaults to 'public'). If you change publicDir, you must update the plugin configuration accordingly — otherwise assets won't be found and nothing will be copied.

fix

Set the 'publicDir' option in shopifyAssets() to match your Vite publicDir value.

affects: >=1.0.0

gotchaWhen using targets as objects, the 'dest' option is relative to themeRoot (default: ''), not publicDir. Misunderstanding this can cause assets to be copied to unintended directories.

fix

Always make dest relative to themeRoot. For example, 'assets/fonts' becomes 'fonts' if themeRoot is the root.

affects: >=1.0.0

gotchaThe rename function receives (file, ext, src) but the documentation is sparse; the 'src' argument is the full relative path from publicDir, which can be confusing for complex rename logic.

fix

Test your rename function with sample files and log the arguments to understand the structure.

affects: >=1.0.0

Errors

Common errors & fixes

ERR_PACKAGE_PATH_NOT_EXPORTED: Package subpath './dist' is not defined by "exports" in package.json

Attempting to import from a subpath that does not exist in package exports

fix

Import only from 'vite-plugin-shopify-assets' which exports the plugin function and types.

ENOENT: no such file or directory, scandir 'public/'

The default publicDir 'public' does not exist in the project root

fix

Create a public/ directory or set the 'publicDir' option in the plugin to an existing directory.

Cannot find module 'vite-plugin-shopify-assets'

Package not installed, or project is using CommonJS require but the package is ESM-only

fix

Install with npm i -D vite-plugin-shopify-assets and use ES import syntax.

TypeError: shopifyAssets is not a function

Named import used when package only exports default; or default import used incorrectly

fix

Use default import: import shopifyAssets from 'vite-plugin-shopify-assets'.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

viterequiredpeer dependency, required as Vite plugin

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/knjshimi/shopify-vite ↗

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