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

• Nuxt Modern Cropper
  • Table of Contents
  • Usage
    • Install & Setup
  • Contribution

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
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release