vue-print-object

Component to print a javascript object

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-print-object
1310.1.34 years ago5 years agoMinified + gzip package size for vue-print-object in KB

Readme

vue-print-object
A component to print and collapse javascript objects

npm version
Screenshot
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