website·Indexed 29 days ago
https://shopify-vite.netlify.app/A Vite plugin designed to integrate Vite into Shopify development, providing fast Hot Module Replacement (HMR) and a streamlined developer experience for Shopify themes.
preload parameter of the stylesheet_tag filter by passing preload_stylesheet: true to the vite-tag snippet. This should be used sparingly for render-blocking stylesheets.{% render 'vite-tag', entry: 'theme.scss', preload_stylesheet: true %}package.json contains "type": "module" or use .mjs/.mts extensions for config files.# Initialize project
npm init -y
# Install Vite and the Shopify plugin
npm i -D vite vite-plugin-shopify{ "type": "module", "scripts": { "dev": "vite dev", "build": "vite build" } }
outDir on build. To remove only the files generated by Vite and preserve files added by third-party apps in the assets/ folder, disable build.emptyOutDir and use the @driver-digital/vite-plugin-shopify-clean plugin.$ npm i -D @driver-digital/vite-plugin-shopify-cleanimport shopify from 'vite-plugin-shopify'
import shopifyClean from '@driver-digital/vite-plugin-shopify-clean'
export default {
build: {
emptyOutDir: false
},
plugins: [
shopifyClean(),
shopify()
]
}vite-tag snippet to load assets. Add this to the <head> of your theme's layout. In development, it enables Hot Module Replacement (HMR); in production, it serves hashed assets from the Shopify CDN. Use the named entry: parameter for compatibility with Shopify's strict Liquid parser.{% liquid
# Recommended: New syntax for strict Liquid parser
render 'vite-tag', entry: 'theme.scss'
render 'vite-tag', entry: 'theme.ts'
%}
{# Legacy syntax (backward compatibility) #}
{% render 'vite-tag' with 'theme.scss' %}npm-run-all or concurrently within your package.json scripts.{
"scripts": {
"dev": "run-p -sr \"shopify:dev -- {@}\" \"vite:dev\" --",
"shopify:dev": "shopify theme dev",
"vite:dev": "vite",
"shopify:push": "shopify theme push",
"build": "vite build"
},
"devDependencies": {
"npm-run-all": "^4.1.5",
"vite": "^4.2.1",
"vite-plugin-shopify": "^2.0.2"
}
}// Execution command: // $ npm run dev -- --store johns-apparel --live-reload full-page
# Apply the preset
npx @preset/cli apply barrel/shopify-vite --path preset
# Optional flags:
# --no-base (Skip Vite installation)
# --no-tailwindcss (Skip Tailwind CSS installation)@vitejs/plugin-react plugin and add it to your Vite configuration. Ensure JSX files use .jsx or .tsx extensions. The vite-tag snippet automatically includes the React refresh script during development.npm i -D @vitejs/plugin-reactimport { defineConfig } from 'vite'
import shopify from 'vite-plugin-shopify'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [
shopify(),
react()
]
})ngrok http 5173), copy the provided ngrok-free.app URL, and pass it to the tunnel option in the shopify plugin configuration.import shopify from 'vite-plugin-shopify'
export default {
plugins: [
shopify({
tunnel: 'https://123abc.ngrok-free.app'
})
]
}Customize the directory structure for your Shopify theme development using the following options:
themeRoot (string, default: ./): The root path to your Shopify theme directory.sourceCodeDir (string, default: frontend): The directory containing your front-end source code.entrypointsDir (string, default: frontend/entrypoints): The directory containing your front-end entry points.server.cors.origin option in vite.config.js. This allows you to specify a list of allowed domains or regex patterns.import shopify from 'vite-plugin-shopify'
export default {
plugins: [
shopify()
],
server: {
cors: {
origin: [
/^https?:\/\/(?:(?:[^:]+\.)?localhost|127\.0\.0\.1|\[::1\])(?::\d+)?$/,
'https://johns-apparel.myshopify.com',
'https://johnsapparel.com'
]
}
}
}Chrome security updates may block public websites from requesting assets from private local servers (localhost). To fix this in the Shopify Theme Editor, enable the tunnel feature in the vite-plugin-shopify configuration to create a public HTTPS connection.
Starting with v4.1.0, the plugin automatically sets server.cors defaults and configures server.allowedHosts when tunnel: true is enabled.
export default defineConfig({
plugins: [
shopify({ tunnel: true }),
tailwindcss()
],
server: {
allowedHosts: ['.trycloudflare.com'],
cors: {
origin: [
/^https?:\/\/(?:(?:[^:]+\.)?localhost|127\.0\.0\.1|\[::1\])(?::\d+)?$/,
/\.myshopify\.com$/
]
}
}
})
Control how assets are bundled and loaded into the Shopify theme:
additionalEntrypoints (string[], default: []): An array of file paths or glob patterns for additional files to be used as entry points.snippetFile (string, default: vite-tag.liquid): The name of the Liquid snippet file used to load assets.versionNumbers (boolean, default: false): When enabled, appends version numbers to production-ready asset URLs within the snippetFile.