{"id":22831,"library":"vite-plugin-shopify-assets","title":"Vite Plugin Shopify Assets","description":"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.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/knjshimi/shopify-vite","tags":["javascript","vite plugin","shopify","copy","theme assets","typescript"],"install":[{"cmd":"npm install vite-plugin-shopify-assets","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-shopify-assets","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-shopify-assets","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency, required as Vite plugin","package":"vite","optional":false}],"imports":[{"note":"ESM-only; CJS require not supported as package type is module","wrong":"const shopifyAssets = require('vite-plugin-shopify-assets');","symbol":"default","correct":"import shopifyAssets from 'vite-plugin-shopify-assets'"},{"note":"default export is the plugin; named export also available","wrong":"import shopifyAssets from 'vite-plugin-shopify-assets'","symbol":"shopifyAssets","correct":"import { shopifyAssets } from 'vite-plugin-shopify-assets'"},{"note":"TypeScript users should import types as type to avoid runtime import","wrong":"import { Options } from 'vite-plugin-shopify-assets'","symbol":"type Options","correct":"import type { Options } from 'vite-plugin-shopify-assets'"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport shopify from 'vite-plugin-shopify';\nimport shopifyAssets from 'vite-plugin-shopify-assets';\n\nexport default defineConfig({\n  plugins: [\n    shopify(),\n    shopifyAssets()\n  ]\n});","lang":"javascript","description":"Basic setup to sync public/ folder assets to theme assets/ folder with vite-plugin-shopify and vite-plugin-shopify-assets."},"warnings":[{"fix":"Set the 'publicDir' option in shopifyAssets() to match your Vite publicDir value.","message":"The 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always make dest relative to themeRoot. For example, 'assets/fonts' becomes 'fonts' if themeRoot is the root.","message":"When 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Test your rename function with sample files and log the arguments to understand the structure.","message":"The 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.","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":"Import only from 'vite-plugin-shopify-assets' which exports the plugin function and types.","cause":"Attempting to import from a subpath that does not exist in package exports","error":"ERR_PACKAGE_PATH_NOT_EXPORTED: Package subpath './dist' is not defined by \"exports\" in package.json"},{"fix":"Create a public/ directory or set the 'publicDir' option in the plugin to an existing directory.","cause":"The default publicDir 'public' does not exist in the project root","error":"ENOENT: no such file or directory, scandir 'public/'"},{"fix":"Install with npm i -D vite-plugin-shopify-assets and use ES import syntax.","cause":"Package not installed, or project is using CommonJS require but the package is ESM-only","error":"Cannot find module 'vite-plugin-shopify-assets'"},{"fix":"Use default import: import shopifyAssets from 'vite-plugin-shopify-assets'.","cause":"Named import used when package only exports default; or default import used incorrectly","error":"TypeError: shopifyAssets is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}