nuxt-modern-cropper

Nuxt Modern Cropper

Power-packed wrapper over cropperjs (v2).

This package is a Nuxt module wrapper over vue-modern-cropper, for more information and examples check it's repo.

Table of Contents

Usage

Install & Setup

pnpm add -D nuxt-modern-cropper vue-modern-cropper

Add nuxt-modern-cropper to your Nuxt config file:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'nuxt-modern-cropper',
  ],
})

That's it! You can now use <ModernCropper /> in your Nuxt app ✨

To infer the type of the component for ref creation, make sure to use import type to avoid build error, because the module is client-only.

import type { ModernCropper } from '#components'

const cropperRef = ref<InstanceType<typeof ModernCropper>>()

// Or better, use `useTemplateRef` to automatically infer the type (vue 3.5+)
const cropperRef = useTemplateRef('cropperRef')

Contribution

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run ESLint
pnpm run lint

# Run Vitest
pnpm run test
pnpm run test:watch

# Check a version before releasing (does not publish)
pnpm run release:check 1.8.0

Releasing

Releases are version-first and manual, and run from GitHub Actions — do not tag or publish locally.

1. Open Actions → Release → Run workflow on main.
2. Enter the version to ship, without a leading v (e.g. 1.8.0).
3. Optionally set dry-run to stop before anything is pushed or published.

The workflow verifies the version against package.json, runs lint/types/tests, builds, lets changelogen bump the version, write CHANGELOG.md, commit and tag v<version>, pushes it, creates the GitHub release, and publishes to npm with provenance over OIDC trusted publishing.

One-time setup, before the first dispatch:

• Publish the package by hand once — npm only lets you configure a trusted publisher for a package that already exists.
• On npmjs.com → the package → Settings → Trusted Publisher, add this repository with the workflow filename release.yml.