@fizzlab.io/vite-plugin-shopify-schema

v1.4.0

Published

a year ago

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

Downloads

0High
0Medium
0Low

sebastian-inman

vite shopify vite-plugin

vite-plugin-shopify-schema

vite-plugin-shopify-schema 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

# npm
npm i @fizzlab.io/vite-plugin-shopify-schema -D

# yarn
yarn add @fizzlab.io/vite-plugin-shopify-schema -D

# pnpm
pnpm add @fizzlab.io/vite-plugin-shopify-schema -D

Usage

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

import shopifySchema from 'vite-plugin-shopify-schema'

export default {
  plugins: [
    /* Plugin options are not required, defaults shown */
    shopifySchema({
      themeRoot: './',
      sourceCodeDir: 'frontend',
      entrypointsDir: 'frontend/entrypoints',
      additionalEntrypoints: [],
      snippetFile: 'vite-tag.liquid'
    })
  ]
}

The Shopify Vite Plugin 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.

/
└── frontend/
    └── entrypoints/
        ├── theme.scss
        └── theme.ts

Adding scripts and styles to your theme

The Shopify Vite Plugin generates a vite-tag snippet which includes <script> and <link> 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 <head> of your theme's layout:

{% liquid
  # Relative to entrypointsDir
  render 'vite-tag' with 'theme.scss'
  render 'vite-tag' with 'theme.ts'
%}

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`

{% liquid
  # Relative to sourceCodeDir
  render 'vite-tag' with '@/foo.ts'
  render 'vite-tag' with '~/foo.ts'
%}

{% liquid
  # Relative to project root
  render 'vite-tag' with '/bar.ts' # leading slash is required
%}

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.

{% render 'vite-tag' with 'theme.scss', preload_stylesheet: true %}

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:

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme