npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vite-plugin-shopify

v3.1.1

Published

Vite plugin providing integration for Shopify themes

Downloads

14,246

Readme

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

npm i vite-plugin-shopify -D

# yarn
yarn add vite-plugin-shopify -D

# pnpm
pnpm add vite-plugin-shopify -D

Usage

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

import shopify from 'vite-plugin-shopify'

export default {
  plugins: [
    /* Plugin options are not required, defaults shown */
    shopify({
      // Root path to your Shopify theme directory (location of snippets, sections, templates, etc.)
      themeRoot: './',
      // Front-end source code directory
      sourceCodeDir: 'frontend',
      // Front-end entry points directory
      entrypointsDir: 'frontend/entrypoints',
      // Additional files to use as entry points (accepts an array of file paths or glob patterns)
      additionalEntrypoints: [],
      // Specifies the file name of the snippet that loads your assets
      snippetFile: 'vite-tag.liquid',
     // Specifies whether to append version numbers to your production-ready asset URLs in `snippetFile`
      versionNumbers: false,
     // Enables the creation of Cloudflare tunnels during dev, allowing previews from any device
      tunnel: false
    })
  ]
}

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.

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

Adding scripts and styles to your theme

Volt, a Vite plugin for Shopify development 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 %}

Import aliases

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

import App from '@/components/App.vue'
import '@/styles/my_styles.css'

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: