Skip to content

A vuejs component to print javascript objects

License

Notifications You must be signed in to change notification settings

cars10/vue-print-object

Repository files navigation

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

About

A vuejs component to print javascript objects

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published