Setting up Pintura Image Editor with Vue
For a quick start use the Vue 3 example project or Vue 2 example project as a guideline.
It includes a normal, modal, and overlay editor example, as well as an example showing how to integrate FilePond with Pintura.
Installing the Vue modules
Using test version
Test versions of the pintura and vue-pintura modules are available on NPM.
npm install --save @pqina/vue-pintura @pqina/pinturaUsing private npm
The pintura module is available on the pqina private npm.
In our project root directory we create a file called .npmrc and copy the snippet below to the file. Then we replace PQINA_NPM_KEY with our private npm key as displayed on the pqina customer portal.
@pqina:registry=https://npm.pqina.nl/
//npm.pqina.nl/:_authToken=PQINA_NPM_KEYNow we can install the needed modules like shown below.
npm install --save @pqina/vue-pintura @pqina/pinturaUsing local modules
Instead of installing from the private npm we can create a local_modules folder inside our project root directory. We then copy paste the pintura files from the product package, the vue-pintura package is available on npm.
We can now install the modules like shown below.
npm install --save @pqina/vue-pintura ./local_modules/pinturaUsing Pintura with Vue 2
When using the vue-pintura module with Vue 2 we need to import the Pintura components from @pqina/vue-pintura/vue-2 instead of @pqina/vue-pintura
Vue Events and properties
To listen for DOM events we can use the Vue v-on directive. Please note that just as with the Pintura Image Editor Custom Element events are prefixed with pintura:, so instead of listen for load we listen for pintura:load.
<PinturaEditor @pintura:load="handleImageLoad($event)"></PinturaEditor>Properties can be used as we would with the normal JavaScript version of the editor but should be prefixed with a colon ':', so src needs to be set as :src
<PinturaEditor :src="image.jpeg"></PinturaEditor>Default Vue implementation example
In the default example below we'll use the getEditorDefaults method to quickly create an image editor.
This creates a "default" editor that has all available plugins loaded and comes preset with all plugin default options and English locale. Each of these settings can be adjusted freely.
<template>
<div>
<div style="height: 600px">
<PinturaEditor
v-bind="editorDefaults"
:src="src"
:imageCropAspectRatio="imageCropAspectRatio"
></PinturaEditor>
</div>
</div>
</template>
<script>
// Import the editor default configuration
import { getEditorDefaults } from '@pqina/pintura';
// Import the component from `vue-pintura`
// When using Vue 2 import from @pqina/vue-pintura/vue-2 instead
import { PinturaEditor } from '@pqina/vue-pintura';
export default {
name: 'App',
components: {
PinturaEditor,
},
data() {
return {
// Pass the editor default configuration options
editorDefaults: getEditorDefaults(),
// The source image to load
src: 'image.jpeg',
// This will set a square crop aspect ratio
imageCropAspectRatio: 1,
};
},
};
</script>
<style>
@import '../node_modules/@pqina/pintura/pintura.css';
// When using local_modules replace with
// @import '../local_modules/pintura/pintura.css';
</style>Advanced Vue implementation example
In this example we'll create a custom editor, using a custom set of plugins, locale, and available options.
While this example is a lot more verbose it does allow us to create a more optimal editor package. The build process will tree-shake unused functionality resulting in a smaller build target.
<template>
<div>
<div style="height: 600px">
<PinturaEditor
v-bind="editorDefaults"
:src="src"
:imageCropAspectRatio="imageCropAspectRatio"
></PinturaEditor>
</div>
</div>
</template>
<script>
// Import the editor functionality
import {
// Import the default image reader and writer
createDefaultImageReader,
createDefaultImageWriter,
// The method used to register the plugins
setPlugins,
// The plugins we want to use
plugin_crop,
plugin_finetune,
plugin_annotate,
// The user interface and plugin locale objects
locale_en_gb,
plugin_crop_locale_en_gb,
plugin_finetune_locale_en_gb,
plugin_annotate_locale_en_gb,
// Because we use the annotate plugin we also need
// to import the markup editor locale and the shape preprocessor
markup_editor_locale_en_gb,
createDefaultShapePreprocessor,
// Import the default configuration for the markup editor and finetune plugins
markup_editor_defaults,
plugin_finetune_defaults,
} from '@pqina/pintura';
// Import the component from `vue-pintura`
// When using Vue 2 import from @pqina/vue-pintura/vue-2 instead
import { PinturaEditor } from '@pqina/vue-pintura';
// This registers the plugins with Pintura Image Editor
setPlugins(plugin_crop, plugin_finetune, plugin_annotate);
export default {
name: 'App',
components: {
PinturaEditor,
},
data() {
return {
// Our editor custom configuration options
editorDefaults: {
// This will read the image data (required)
imageReader: createDefaultImageReader(),
// This will write the output image
imageWriter: createDefaultImageWriter(),
// The markup editor default options, tools, shape style controls
...markup_editor_defaults,
// The finetune util controls
...plugin_finetune_defaults,
// This handles complex shapes like arrows / frames
shapePreprocessor: createDefaultShapePreprocessor(),
// This will set a square crop aspect ratio
imageCropAspectRatio: 1,
// The icons and labels to use in the user interface (required)
locale: {
...locale_en_gb,
...plugin_crop_locale_en_gb,
...plugin_finetune_locale_en_gb,
...plugin_annotate_locale_en_gb,
...markup_editor_locale_en_gb,
},
},
// The source image to load
src: 'image.jpeg',
// This will set a square crop aspect ratio
imageCropAspectRatio: 1,
};
},
};
</script>
<style>
@import '../node_modules/@pqina/pintura/pintura.css';
// When using local_modules replace with
// @import '../local_modules/pintura/pintura.css';
</style>Next steps
With the editor set up, we can continue to configure the editor to our liking by adjusting the available options exposed by the editor API
