Gathering detailed insights and metrics for vite-plugin-shopify-assets
Installations
npm install vite-plugin-shopify-assetsDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Min. Node Version
^18.18.0 || ^20.0.0 || >=22.0.0
Node Version
22.12.0
NPM Version
10.9.0
Score
59.5
Supply Chain
90.1
Quality
84.9
Maintenance
100
Vulnerability
98.6
License
Releases
2
Contributors
1
Unable to fetch Contributors
Languages
5
TypeScript
SCSS
Liquid
JavaScript
CSS
TypeScript (90.77%)
SCSS (4.89%)
Liquid (2.4%)
JavaScript (1.89%)
CSS (0.04%)
Developer
knjshimi
Download Statistics
Total Downloads
3,753
Last Day
13
Last Week
69
Last Month
303
Last Year
3,617
GitHub Statistics
3 Stars
81 Commits
1 Watching
1 Branches
1 Contributors
Bundle Size
106.90 kB
Minified
31.60 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.0.0
Package Id
vite-plugin-shopify-assets@1.0.0
Unpacked Size
32.68 kB
Size
8.26 kB
File Count
4
NPM Version
10.9.0
Node Version
22.12.0
Publised On
19 Dec 2024
Total Downloads
Cumulative downloads
Total Downloads
3,753
Last day
116.7%
13
Compared to previous day
Last week
21.1%
69
Compared to previous week
Last month
25.7%
303
Compared to previous month
Last year
2,559.6%
3,617
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
3
Peer Dependencies
1
Versions
Vite Plugin Shopify Assets
Created to be used alongside vite-plugin-shopify, for those who need to watch static assets, keeping the Shopify theme assets folder always in sync.
Please give your feedback, and send me any questions. A better documentation is in progress.
Installation
1npm i -D vite-plugin-shopify-assets # npm 2yarn add -D vite-plugin-shopify-assets # yarn
Basic Usage
Assumptions for the basic usage example:
- Your Shopify theme folders are located in the root.
- Your Vite
publicDirconfig option is not set (will default to 'public'). - You have a
public/folder, which holds all your static files, located in the root. - You have not added custom configuration to vite-plugin-shopify.
- You have not added custom configuration to vite-plugin-shopify-assets.
In your vite.config.js file, you need to import the plugin:
1// vite.config.js 2import shopify from 'vite-plugin-shopify'; 3import shopifyAssets from 'vite-plugin-shopify-assets'; 4 5export default defineConfig({ 6 plugins: [shopify(), shopifyAssets()], 7});
Based on the folder structure below...
1my-shopify-project/ 2 ├── public/ 3 │ ├── static-script.js 4 │ └── static-style.css 5 ├── frontend/ 6 │ └── entrypoints/ 7 │ ├── main.ts 8 │ └── style.css 9 ├── assets/ 10 ├── config/ 11 ├── layout/ 12 ├── locales/ 13 ├── sections/ 14 ├── snippets/ 15 └── templates/
... Your assets folder when running vite build will look like this:
1assets/ 2├── .vite/manifest.json 3├── main-[HASH].js 4├── style-[HASH].css 5├── static-script.js 6└── static-style.css
It works on dev, watch and build.
1{ 2 "name": "my-shopify-project", 3 "scripts": { 4 "dev": "vite", 5 "watch": "vite build --watch", 6 "build": "vite build" 7 } 8}
1npm run dev 2# yarn watch 3# pnpm build
Advanced usage
In your vite.config.js file, you can add custom configuration options:
1// vite.config.js
2import shopify from 'vite-plugin-shopify';
3import shopifyAssets from 'vite-plugin-shopify-assets';
4
5export default defineConfig({
6 plugins: [
7 // Barrel's vite-plugin-shopify
8 shopify({
9 themeRoot: 'theme',
10 sourceCodeDir: 'frontend',
11 }),
12
13 // This plugin
14 shopifyAssets({
15 themeRoot: 'theme',
16 publicDir: 'frontend/assets',
17 targets: [
18 // when targets are passed as strings, all target options use the default
19 // Note: target sources are relative to publicDir
20 'fonts/*.{woff,woff2,ttf,otf,svg}',
21 'images/*.{jpg,jpeg,gif,png,webp,svg}',
22
23 // when targets are passed as objects, you can specify options
24 {
25 // glob pattern for source assets
26 src: '**/*.{js,liquid,text,md,json,css}',
27
28 // glob patterns to ignore
29 ignore: ['other-ignored/**/*', 'icons/**/*', 'images/**/*'],
30 },
31
32 {
33 // when a non-static asset (eg: used in js) also needs to be copied as a static asset,
34 // you can tell the plugin to find it elsewhere. Note: relative to publicDir
35 src: '../icons/icon-*.svg',
36
37 // the default destination is {themeRoot}/assets, but you can specify
38 // a different source (relative to themeRoot)
39 dest: 'snippets',
40
41 // rename function, useful for making liquid snippets out of svg files for example
42 rename: (file, ext, src) => `${file}.liquid`,
43
44 // cleanMatch - USE WITH CAUTION:
45 // glob pattern, relative to the dest folder, of files that should be cleaned/deleted
46 // useful when the dest folder is not the default `{themeRoot}/assets` to avoid unused asset files
47 // being shipped with the theme
48 //
49 // Only use this when you are certain that ALL files matching the pattern
50 // have their source elsewhere and thus can be safely deleted
51 cleanMatch: 'icon-*.liquid',
52 },
53 ],
54 }),
55 ],
56});The above configuration assumes the below folder structure:
1my-shopify-project/ 2 ├── frontend/ 3 │ ├── assets/ 4 │ │ ├── fonts/ 5 │ │ │ └── static-font.woff 6 │ │ ├── images/ 7 │ │ │ └── static-image.png 8 │ │ ├── other/ 9 │ │ │ └── static-script-1.js 10 │ │ └── static-script-2.js 11 │ └── icons/ 12 │ └── icon-arrow.svg 13 └── theme/ 14 ├── assets/ 15 ├── config/ 16 ├── layout/ 17 ├── locales/ 18 ├── sections/ 19 ├── snippets/ 20 └── templates/
Acknowledgements
- Vite Plugin Shopify by Barrel/NY (Thanks for the amazing plugins!)
- Vite Plugin Static Copy
No vulnerabilities found.
No security vulnerabilities found.