Setting up Pintura Image Editor with NuxtJS

For a quick start use the Nuxt 2 example project or Nuxt 3 example project as a guideline.

It includes a normal, modal, and overlay editor example as well as an integration of FilePond and Pintura Image Editor.

For the most part the NuxtJS installation process is the same as the Vue installation process, we only have to make a couple additional adjutments to the nuxt.config.js file.

Adjusting the nuxt.config.js file

Then we edit the config file as shown below.

// nuxt.config.js
export default {
    /* other configuration settings */

    build: {
        transpile: [
            '@pqina/pintura',
            '@pqina/vue-pintura',
            '@pqina/filepond-plugin-image-editor',
        ],
    },
};

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