{"id":22839,"library":"vite-plugin-shopify","title":"vite-plugin-shopify","description":"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.","status":"active","version":"4.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/barrel/shopify-vite","tags":["javascript","vite","shopify","vite-plugin","typescript"],"install":[{"cmd":"npm install vite-plugin-shopify","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-shopify","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-shopify","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"vite-plugin-shopify is a Vite plugin and requires Vite as a peer dependency","package":"vite","optional":false}],"imports":[{"note":"The plugin is ESM-only and ships TypeScript types. Default import is the recommended way.","wrong":"const shopify = require('vite-plugin-shopify')","symbol":"shopify","correct":"import shopify from 'vite-plugin-shopify'"},{"note":"The package exports a default function. Named import is incorrect.","wrong":"import { shopify } from 'vite-plugin-shopify'","symbol":"default export","correct":"import shopify from 'vite-plugin-shopify'"},{"note":"For type definitions of options, import from 'vite-plugin-shopify/client'. The main package only exports the plugin function.","wrong":"import { ShopifyPluginOptions } from 'vite-plugin-shopify'","symbol":"type imports","correct":"import type { ShopifyPluginOptions } from 'vite-plugin-shopify/client'"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite'\nimport shopify from 'vite-plugin-shopify'\n\nexport default defineConfig({\n  plugins: [\n    shopify({\n      themeRoot: './',\n      sourceCodeDir: 'frontend',\n      entrypointsDir: 'frontend/entrypoints',\n      snippetFile: 'vite-tag.liquid',\n      versionNumbers: false,\n      tunnel: false,\n      themeHotReload: true\n    })\n  ]\n})","lang":"javascript","description":"Configure vite-plugin-shopify with default options in a Vite config file. All options are optional."},"warnings":[{"fix":"Update @shopify/cli to version >=3.77.0 and follow migration guide for theme-hot-reload.","message":"v4.0.0 replaces hot reloading with @shopify/theme-hot-reload. You must use @shopify/cli >= 3.77.0.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Use the new syntax with named 'entry:' parameter for compatibility with Shopify's strict Liquid parser.","message":"Old '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\"').","severity":"deprecated","affected_versions":">=4.0.3 <5.0.0"},{"fix":"Upgrade to v4.1.1 or later, or set build.modulePreload to false in Vite config to disable modulepreload.","message":"modulepreload 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.","severity":"gotcha","affected_versions":">=4.0.0 <4.1.1"},{"fix":"Upgrade to v4.1.0 or later, or manually configure server.allowedHosts to allow your tunnel domain.","message":"With tunnel: true, you may get 'Blocked request' errors in Vite 7 due to missing server.allowedHosts config. Fixed in v4.1.0.","severity":"gotcha","affected_versions":">=4.0.0 <4.1.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm install vite-plugin-shopify --save-dev' (or yarn/pnpm equivalent) and ensure node_modules is present.","cause":"Package not installed or installed as dev dependency but not resolved.","error":"Cannot find module 'vite-plugin-shopify'"},{"fix":"Change liquid from 'render 'vite-tag' with 'theme.scss'' to 'render 'vite-tag', entry: 'theme.scss''.","cause":"Using deprecated 'with' syntax for vite-tag instead of named parameter syntax.","error":"Shopify CLI error: 'render' tag with 'with' syntax is not supported in strict Liquid mode"},{"fix":"Upgrade to vite-plugin-shopify v4.1.0+ or add the tunnel domain to server.allowedHosts in vite.config.js.","cause":"Tunnel domain not in server.allowedHosts when using tunnel: true with Vite 7.","error":"Blocked request: This request has been blocked because the host is not allowed"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}