v8.38.0

Setting up Pintura Image Editor with Vue

For a quick start use the Vue example project included in the product package as a guideline. It includes a normal, modal, and overlay editor example as well as an integration of vue-filepond and Pintura Image Editor.

Installing the modules

Using private npm

The pintura and vue-pintura modules are 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_KEY

Now we can install the needed modules like shown below.

npm install --save @pqina/vue-pintura @pqina/pintura

Using 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 and react-pintura modules from the product package to this folder.

We can now install the modules like shown below.

npm install --save ./local_modules/vue-pintura ./local_modules/pintura

Using 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

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="./my-image.jpeg"></PinturaEditor>

Default 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: './my-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 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: './my-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