Merge branch 'main' into main

Author: danielroe

.github/workflows/ci.yml

@@ -45,7 +45,7 @@ jobs:
       - run: corepack enable
       - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
-          node-version: 18
+          node-version: 20
           cache: "pnpm"
 
       - name: 📦 Install dependencies

docs/app/app.config.ts

@@ -16,6 +16,9 @@ export default defineAppConfig({
       },
     },
   },
+  github: {
+    rootDir: 'docs',
+  },
   socials: {
     nuxt: 'https://nuxt.com',
     x: 'https://x.com/nuxt_js',

docs/content/3.providers/shopify.md

@@ -0,0 +1,101 @@
+---
+title: Shopify
+description: Nuxt Image integration with Shopify CDN.
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/image/blob/main/src/runtime/providers/shopify.ts
+    size: xs
+---
+
+Integration between [Shopify CDN](https://cdn.shopify.com/) and Nuxt Image.
+
+To use this provider, you just need to pass the image URL from the Storefront API response to the `src` prop.
+
+Configure the provider in your `nuxt.config.ts` (optional):
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  image: {
+    shopify: {
+      baseURL: 'https://cdn.shopify.com/',
+    }
+  }
+})
+```
+
+## Modifiers
+
+The Shopify CDN provider supports the following default modifiers:
+
+- `width`
+- `height`
+- `format`
+- `quality`
+
+Additionally, the following modifiers are supported:
+
+- `padColor`
+- `crop`
+- `cropLeft`
+- `cropTop`
+- `cropWidth`
+- `cropHeight`
+
+### Format
+
+The `format` modifier is supported.
+
+```vue
+<NuxtImg src="..." width="300" height="300" modifiers="{ format: 'gif' }" />
+```
+
+### Quality
+
+The `quality` modifier is supported.
+
+```vue
+<NuxtImg src="..." width="300" height="300" modifiers="{ quality: 10 }" />
+```
+
+### Crop
+
+The `crop` modifier is supported with the following values:
+
+- `center`
+- `top`
+- `bottom`
+- `left`
+- `right`
+- `region`
+
+```vue
+<NuxtImg src="..." width="300" height="300" modifiers="{ crop: 'center' }" />
+```
+
+#### Crop Region
+
+The `crop` modifier can also be used to crop an image to a specific region.
+
+```vue
+<NuxtImg
+  src="..." 
+  width="300" 
+  height="300" 
+  modifiers="{ 
+    crop: 'region', 
+    cropLeft: 100, 
+    cropTop: 100, 
+    cropWidth: 450, 
+    cropHeight: 300
+  }"
+/>
+```
+
+### Pad color
+
+The `padColor` modifier can be used to pad an image with a background color. Must be a hex color value.
+
+```vue
+<NuxtImg src="..." width="300" height="300" modifiers="{ padColor: 'ff0000' }" />
+```

docs/content/index.md

@@ -156,6 +156,7 @@ orientation: horizontal
     - prepr
     - prismic
     - sanity
+    - shopify
     - storyblok
     - strapi
     - twicpics

docs/package.json

@@ -6,10 +6,10 @@
   },
   "dependencies": {
     "@nuxt/image": "link:..",
-    "@nuxt/ui-pro": "^3.1.3",
-    "better-sqlite3": "^12.0.0",
-    "docus": "^3.0.4",
-    "nuxt": "^3.17.5",
-    "tailwindcss": "^4.1.10"
+    "@nuxt/ui-pro": "^3.2.0",
+    "better-sqlite3": "^12.2.0",
+    "docus": "^3.0.5",
+    "nuxt": "^3.17.6",
+    "tailwindcss": "^4.1.11"
   }
 }

docs/public/providers/shopify.svg

@@ -8,6 +8,6 @@
   },
   "dependencies": {
     "@nuxt/image": "latest",
-    "nuxt": "3.17.5"
+    "nuxt": "3.17.6"
   }
 }

example/package.json

@@ -39,7 +39,7 @@
     "test:types": "vue-tsc --noEmit && nuxt typecheck playground && nuxt typecheck example"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.17.5",
+    "@nuxt/kit": "^3.17.6",
     "consola": "^3.4.2",
     "defu": "^6.1.4",
     "h3": "^1.15.3",
@@ -51,27 +51,27 @@
     "ufo": "^1.6.1"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "1.4.1",
+    "@nuxt/eslint-config": "1.5.2",
     "@nuxt/module-builder": "1.0.1",
-    "@nuxt/schema": "3.17.5",
-    "@nuxt/test-utils": "^3.19.1",
-    "@types/node": "^22.15.32",
+    "@nuxt/schema": "3.17.6",
+    "@nuxt/test-utils": "^3.19.2",
+    "@types/node": "^22.16.2",
     "@types/semver": "^7.7.0",
-    "@unhead/vue": "^2.0.10",
+    "@unhead/vue": "^2.0.12",
     "@vitest/coverage-v8": "^3.2.4",
     "@vue/test-utils": "^2.4.6",
-    "changelogen": "^0.6.1",
-    "eslint": "9.29.0",
+    "changelogen": "^0.6.2",
+    "eslint": "9.30.1",
     "happy-dom": "^18.0.1",
     "installed-check": "^9.3.0",
     "ipx": "^3.0.3",
     "jiti": "2.4.2",
-    "knip": "^5.61.2",
-    "nitropack": "^2.11.12",
-    "nuxt": "^3.17.5",
+    "knip": "^5.61.3",
+    "nitropack": "^2.11.13",
+    "nuxt": "^3.17.6",
     "ofetch": "^1.4.1",
-    "pkg-pr-new": "^0.0.53",
-    "playwright-core": "^1.53.1",
+    "pkg-pr-new": "^0.0.54",
+    "playwright-core": "^1.53.2",
     "semver": "^7.7.2",
     "tinyexec": "^1.0.1",
     "tinyglobby": "^0.2.14",
@@ -80,16 +80,16 @@
     "vitest": "^3.2.4",
     "vitest-environment-nuxt": "^1.0.1",
     "vue": "3.5.17",
-    "vue-tsc": "^2.2.10"
+    "vue-tsc": "^3.0.1"
   },
   "optionalDependencies": {
     "ipx": "^3.0.3"
   },
-  "packageManager": "pnpm@10.12.2",
+  "packageManager": "pnpm@10.13.1",
   "resolutions": {
     "@nuxt/image": "workspace:*",
-    "@nuxt/schema": "3.17.5",
-    "@types/node": "^22.15.32",
+    "@nuxt/schema": "3.17.6",
+    "@types/node": "^22.16.2",
     "vue": "3.5.17"
   },
   "engines": {

package.json

@@ -96,6 +96,9 @@ export default defineNuxtConfig({
     sanity: {
       projectId: 'zp7mbokg',
     },
+    shopify: {
+      baseURL: 'https://cdn.shopify.com/',
+    },
     strapi: {
       baseURL: 'http://localhost:1337/uploads/',
     },

playground/nuxt.config.ts

@@ -8,6 +8,6 @@
   },
   "devDependencies": {
     "@nuxt/image": "latest",
-    "nuxt": "3.17.5"
+    "nuxt": "3.17.6"
   }
 }