vue-print-object

A component to print and collapse javascript objects

Codepen

Features

• Print javascript objects
• Highlighting of different types (number, string, boolean, etc)
• Collapsible: collapse keys
• Highlight of complete objects on hover

Installation

Via npm

First add it to your package.json:

npm install vue-print-object --save
# or yarn 
yarn add vue-print-object

Or manually via <script> tag

If you don't use npm you can download the minified version in dist/vue-print-object.min.js and the css in dist/vue-print-object.css, then add it to your site:

<link rel="stylesheet" href="vue-print-object.css">
<script src="vue-print-object.min.js"></script>

Loading the minified version will automatically register the component VuePrintObject globally on the browsers window object.

Usage

Import the component js and css (alternatively copy and customize the css):

import PrintObject from 'vue-print-object'

import 'vue-print-object/dist/vue-print-object.css'

Then load the component:

// globally
Vue.use(PrintObject)
 
// or in a component
export default {
  components: {
    PrintObject
  }
}

Finally use the component:

<print-object :printable-object="myObject"></print-object>

export default {
  data: () => {
    myObject: {
      a: 1,
      b: "hello",
      c: {
        d: [3, 4]
      },
      e: false
    }
  }
}

Codepen

Options

name	type	description
printable-object	Object	The object that you want to print
initial-collapsed	Boolean or Array	Set to true to collapse all keys by default. Set an array of strings to collapse only specific keys.

Examples

Basic example

<print-object :printable-object="myObject"></print-object>

export default {
  data: () => {
    myObject: {
      a: 1
    }
  }
}

Collapse all keys by default

<print-object :printable-object="myObject" initial-collapsed></print-object>

export default {
  data: () => {
    myObject: {
      a: 1,
      b: {
        c: 2
      },
      d: {
        e: 3
      }
    }
  }
}

Collapse specific keys by default

<print-object :printable-object="myObject" :initial-collapsed="['b']"></print-object>

export default {
  data: () => {
    myObject: {
      a: 1,
      b: {
        c: 2
      },
      d: {
        e: 3
      }
    }
  }
}

License

MIT