vite-plugin-shopify weekly downloads statistics

vite-plugin-shopify

vite-plugin-shopify aims to integrate Vite as seamlessly as possible with Shopify themes to optimize your theme development experience.

Features

• ⚡️ Everything Vite provides, plus: • 🤖 Automatic entrypoint detection • 🏷 Smart tag generation to load your scripts and styles • 🌎 Full support for assets served from Shopify's CDN • 👌 Zero-Config • 🔩 Extensible

Install

Usage

Add the vite-plugin-shopify to your vite.config.js file and configure it:

Volt, a Vite plugin for Shopify development does not require you to specify the entry points for your theme. By default, it treats JavaScript and CSS files (including preprocessed languages such as TypeScript, JSX, TSX, and Sass) within the frontend/entrypoints folder in the root of your project as entry points for Vite.

Adding scripts and styles to your theme

Volt, a Vite plugin for Shopify development generates a vite-tag snippet which includes and tags, and all the liquid logic needed to load your assets.

With your Vite entry points configured, you only need to reference them with the vite-tag snippet that you add to the of your theme's layout:

Legacy syntax (still supported):

Note: The new syntax using named parameters (entry:) is required for compatibility with Shopify's strict Liquid parser. The old with syntax is still supported for backward compatibility but may be deprecated in future Shopify updates.

During development, the vite-tag will load your assets from the Vite development server and inject the Vite client to enable Hot Module Replacement. In build mode, the snippet will load your compiled and versioned assets, including any imported CSS, and use the asset_url filter to serve your assets from the Shopify content delivery network (CDN).

Loading additionalEntrypoints

Preloading stylesheets

You can pass the preload_stylesheet variable to the vite-tag snippet to enable the preload parameter of the stylesheet_tag filter. Use it sparingly. For example, consider preloading only render-blocking stylesheets. Learn more.

Legacy syntax (still supported):

Import aliases

For convenience, ~/ and @/ are aliased to your frontend folder, which simplifies imports:

Example

See the vite-shopify-example theme for a basic demonstration of vite-plugin-shopify usage.

Bugs

Please create an issue if you found any bugs, to help us improve this project!

Thanks

We would like to specifically thank the following projects, for inspiring us and helping guide the implementation for this plugin by example:

• vite_ruby • laravel-vite • Laravel Vite Plugin

Description from the npm listing.