IDE integration


npm install -s @bluepjs/vue3-ide


Add IDE module to your Vue app

// main.js
// ...
import bluep from '@bluepjs/vue3-ide'
// ...
// ...

Your application should manage “communication” with Virtual Machine to get VM possibilities.

const vmInfo = vm.ideData()

Integrate Editor into page:



Options object used to configure editor icons and starting page, for example:

computed: {
  editorOptions () {
    return {
      icons: { ...iconsObject },
      select: { ...selectObject },
      features: { ...featuresObject },
      dialogs: { ...dialogsObject }

Options are:

  • icons - used “i class” style. Without icons some buttons right now are not visible (has no text, will be fixed in future)

  • select - object recieved on @select event to start editor with required element open


Default icons are preconfigured for font-awesome:

const defaultIcons = {
  enum: 'fas fa-list-ol',
  struct: 'fab fa-delicious',
  function: 'fas fa-scroll',
  class: 'fas fa-file-code',
  library: 'fas fa-book',
  event: 'fas fa-bell',
  chevronRight: 'fas fa-chevron-right',
  chevronDown: 'fas fa-chevron-down',
  view: 'far fa-eye',
  add: 'fas fa-plus',
  remove: 'fas fa-trash',
  edit: 'fas fa-pencil-alt',
  save: 'fas fa-save',
  run: 'fas fa-play',
  close: 'fas fa-times',
  fw: 'fa-fw'


Features allows tune IDE


Under development!

Not all features are implemented.

List and structure of features is not stable yet.

Default features are:

const defaultFeatures = {
  save: true,  // save button enabled
  run: true,   // run button enabled
  panels: {    // [not fully implemented]
    librarySelector: true, // library selector panel enabled
    libraryContent: true,  // library content panel enabled
    variablesBar: true,    // variables bar (function options) enabled
    variablePanel: true    // variable panel enabled
  create: {    // [not implemented]
    libraries: false,      // allow clreate libraries
    classes: true,         // allow create classes
    functions: true,       // allow create functions
    events: true,          // allow create events
    structs: true,         // allow create structs
    enums: true,           // allow create enums
    consts: true           // allow create consts [consts are not implemented]
  limit: {     // [not implemented]
    nodes: [],             // allowed nodes regexps
    types: []              // allowed types regexps


To overwrite standart browser dialogs set dialogs settings:

const dialogsObject = {
  confirm: async (question) => { return Boolean },
  prompt: async (question) => { return String },
  alert: async (message) => { return }


  • save - “SAVE” button clicked. $event is updated library

  • run - “RUN” buttn clicked. $event contains information about library and function codes to run

  • select - fires when some element is selected to edit