Nuclear Power Manager

    vue-print-object

    0.1.3 • Public • Published

    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

    Keywords

    none

    Install

    npm i vue-print-object

    DownloadsWeekly Downloads

    236

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    290 kB

    Total Files

    23

    Last publish

    Collaborators

    • cars10