@craydel/craydel-image-uploader

CraydelImageUploader

Installation

Get the latest version by NPM:

$ npm i @craydel/craydel-image-uploader

Register Plugin

If you use the plugin API, the component will be registered as a global component just like when including it with the script tag, but you won't need to re-register it through the components property in your own components.

Create the plugin file e.g craydel-components.js file.

// craydel-components.js
import Vue from 'vue'
import CraydelImageUploader from '@craydel/craydel-image-uploader/src/CraydelImageUploader.vue'

const Components = {
  CraydelImageUploader,
};

Object.keys(Components).forEach(name => {
  Vue.component(name, Components[name]);
});

export default Components;

Next reference the plugin file in your nuxt.config.js

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
  '~/plugins/craydel-components.js'
]

Props

Name	Type	Default	Description
id	string	random ID	Sets the DOM id on the component.
height	number | string	undefined	Sets the height for the image preview.
width	number | string	undefined	Sets the width for the image preview.
max-height	number | string	undefined	Sets the maximum height for the image preview.
max-width	number | string	undefined	Sets the maximum width for the image preview.
min-height	number | string	undefined	Sets the minimum height for the image preview.
min-width	number | string	undefined	Sets the minimum width for the image preview.
aspect-ratio	number | string	undefined	Calculated as width/height, so for a 1920x1080px image this will be 1.7778. Will be calculated automatically if omitted.
contain	boolean	false	Prevents the image from being cropped if it doesn’t fit.

 

Usage

An example showing an image uploader.

<craydel-image-uploader></craydel-image-uploader>