Tutorial: Integrate Pixo in Vue app

This post is part from series of posts related to integrating Pixo into most popular frameworks. You may check also:

You can check the example and the source code here.

Create new Vue app

We start with creating a boilerplate app. We need Vue-CLI for that purpose, so make sure to install it if you don’t already have it:

npm install -g @vue/cli

Then create the new application:

vue create vue-pixo

This creates the required files structure, dependencies and tooling – everything you need to start developing your business logic.

Start the app

npm run serve

This will start dev server on localhost:8080 where you can see the welcome screen.

The browser will automatically reload every time you save a file.

Integrate Pixo

Now let’s get the real work done.

Add Pixo.Bridge dependency

Open in your editor public/index.html and add <script src="https://pixoeditor.com/editor/scripts/bridge.m.js"></script> somewhere between the <head></head> tags.

This will add Pixo.Bridge to your global object (window). The Bridge class is required in order to create a “bridge” between your app and Pixo Service.

Create Pixo Bridge

Next step is to create new instance of Pixo.Bridge in your app component.

Create a new file src/components/PixoImage.vue and add the following code:

<template>
  <img v-bind:src="src" v-on:click="edit" />
</template>

<script>
const { Pixo } = window;

export default {
  name: 'PixoImage',
  props: {
    src: String,
  },
  methods: {
    edit() {
      new Pixo.Bridge({
         type: 'modal',
         apikey: 'xxxxxxxxxxxx', // put your API key here!
         onSave: img => this.$emit('edited', img.toDataURL()),
      }).edit(this.$props.src);
    }
  }
}
</script>

Now let’s see what’s happening:

We need to declare a <template /> for our component; this template renders an Image with a src attribute bound to the data model and a click handler bound to a method
Pixo is a global object (also property of the window object) created in the previous step; we need it in order to instantiate the Bridge
We export new reusable Vue component that will render an image and also integrates Pixo as editor; it expects the src of the image as a property
The component provides an edit() method that is bound in the template; when the image is clicked, this method is invoked and it will create the new Pixo.Bridge instance, providing the image’s src to edit, and an onSave callback that emits 'edited' event; this is a custom Vue event and will notify the parent component that the image was edited in Pixo

Don’t forget to replace the dummy string with your real API key.

Use the new component in our app

Finally we need to update our app component to use our freshly created Pixo component for displaying images and adding editing functionality.

Open src/App.vue and replace the existing content with the following:

<template>
  <div id="app">
    <h1>Click the image to edit it</h1>
    <PixoImage v-bind:src="src" @edited="updateSrc" />
  </div>
</template>

<script>
import PixoImage from './components/PixoImage.vue'

export default {
  name: 'App',
  components: {
    PixoImage
  },
  data: () => ({
    src: 'https://via.placeholder.com/350x150',
  }),
  methods: {
    updateSrc(src) {
      this.src = src;
    }
  }
}
</script>

Check the browser and voila! The image is shown, and click on it loads Pixo! Now let’s break down what’s happening above:

Our App provides a <template /> that renders the <PixoImage /> component, providing it with a src from App’s data model, and handling the @edited event with the updateSrc() handler
<PixoImage /> component renders with the given src
When image is edited and saved, updateSrc() handler takes care to update the src in App’s data model, which is also propagated to the <PixoImage /> component and it re-renders

That’s it! Simple as pie!

Source code and demo

Integration of Pixo in Vue app

You can extend & configure Pixo with anything you want, just make sure that you read our documentation.