Registry / web-framework / vite-plugin-shopify

vite-plugin-shopify

library4.1.2jsnpmunverified

Vite plugin that integrates Vite into Shopify theme development. Current stable version is 4.1.2 with support for Vite 5, 6, 7, and 8. It provides automatic entrypoint detection, smart tag generation for scripts and styles, full CDN asset support, and hot reloading via @shopify/theme-hot-reload. Key differentiators: zero-config setup, support for Shopify's strict Liquid parser, and automatic tunnel configuration for development previews. Unlike other Shopify Vite integrations, it handles CORS, modulepreload, and snippet generation out of the box. Release cadence is approximately monthly with minor and patch updates.

web-framework devops

npm install vite-plugin-shopify

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-SHOPIF

vite-plugin-shopify

web-frameworkjavascriptv4.1.2

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.

shopify

✓ import shopify from 'vite-plugin-shopify'

✗ const shopify = require('vite-plugin-shopify')

The plugin is ESM-only and ships TypeScript types. Default import is the recommended way.

default export

✓ import shopify from 'vite-plugin-shopify'

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

The package exports a default function. Named import is incorrect.

type imports

✓ import type { ShopifyPluginOptions } from 'vite-plugin-shopify/client'

✗ import { ShopifyPluginOptions } from 'vite-plugin-shopify'

For type definitions of options, import from 'vite-plugin-shopify/client'. The main package only exports the plugin function.

Configure vite-plugin-shopify with default options in a Vite config file. All options are optional.

// vite.config.js import { defineConfig } from 'vite' import shopify from 'vite-plugin-shopify' export default defineConfig({ plugins: [ shopify({ themeRoot: './', sourceCodeDir: 'frontend', entrypointsDir: 'frontend/entrypoints', snippetFile: 'vite-tag.liquid', versionNumbers: false, tunnel: false, themeHotReload: true }) ] })

Debug

Known issues

breakingv4.0.0 replaces hot reloading with @shopify/theme-hot-reload. You must use @shopify/cli >= 3.77.0.

fix

Update @shopify/cli to version >=3.77.0 and follow migration guide for theme-hot-reload.

affects: >=4.0.0

deprecatedOld 'with' syntax for rendering vite-tag (e.g., 'render "vite-tag" with "theme.scss"') is deprecated in favor of named parameter syntax (e.g., 'render "vite-tag", entry: "theme.scss"').

fix

Use the new syntax with named 'entry:' parameter for compatibility with Shopify's strict Liquid parser.

affects: >=4.0.3 <5.0.0

gotchamodulepreload tags are only generated when build.modulePreload is not explicitly set to false. In v4.1.1, a fix ensures they are omitted when set to false.

fix

Upgrade to v4.1.1 or later, or set build.modulePreload to false in Vite config to disable modulepreload.

affects: >=4.0.0 <4.1.1

gotchaWith tunnel: true, you may get 'Blocked request' errors in Vite 7 due to missing server.allowedHosts config. Fixed in v4.1.0.

fix

Upgrade to v4.1.0 or later, or manually configure server.allowedHosts to allow your tunnel domain.

affects: >=4.0.0 <4.1.0

Errors

Common errors & fixes

Cannot find module 'vite-plugin-shopify'

Package not installed or installed as dev dependency but not resolved.

fix

Run 'npm install vite-plugin-shopify --save-dev' (or yarn/pnpm equivalent) and ensure node_modules is present.

Shopify CLI error: 'render' tag with 'with' syntax is not supported in strict Liquid mode

Using deprecated 'with' syntax for vite-tag instead of named parameter syntax.

fix

Change liquid from 'render 'vite-tag' with 'theme.scss'' to 'render 'vite-tag', entry: 'theme.scss''.

Blocked request: This request has been blocked because the host is not allowed

Tunnel domain not in server.allowedHosts when using tunnel: true with Vite 7.

fix

Upgrade to vite-plugin-shopify v4.1.0+ or add the tunnel domain to server.allowedHosts in vite.config.js.

Upgrade

Version history

4.1.2latest on npm

Audit

Dependencies

viterequiredvite-plugin-shopify is a Vite plugin and requires Vite as a peer dependency

Agent activity

13 hits · last 30 days

node

Bingbot

OpenAI (training)

Resources

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

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