https://github.com/polarisation/vue-nested-list

Vue.js component for rendering JavaScript objects and arrays as nested HTML lists
https://github.com/polarisation/vue-nested-list

vuejs-components vuejs2

Last synced: 7 months ago
JSON representation

Vue.js component for rendering JavaScript objects and arrays as nested HTML lists

• Host: GitHub
• URL: https://github.com/polarisation/vue-nested-list
• Owner: Polarisation
• License: mit
• Created: 2017-03-23T20:26:50.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2018-04-19T10:56:37.000Z (about 8 years ago)
• Last Synced: 2025-10-08T12:59:31.748Z (8 months ago)
• Topics: vuejs-components, vuejs2
• Language: JavaScript
• Size: 6.84 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# vue-nested-list

Vue.js component for rendering JavaScript objects and arrays as nested HTML lists. This can be handy to quickly get reasonable HTML output of complex data during prototyping.

The content passed into the component will be rendered as follows:

- `Object`s as definition lists (`
`) with keys (`
`) and values (`

`),

- `Arrays`s as unordered lists (`
`) with each item in a `
`,

- Anything else in a `.`


[![NPM](https://nodei.co/npm/vue-nested-list.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-nested-list/)

## Usage

Register the component, for example globally:

```

const VueNestedList = require('vue-nested-list').NestedList;

Vue.component('nested-list', VueNestedList);

```

Now you can use in Vue.js templates. Let's say you have `person` object defined as a property on the data object:

```

var vue = new Vue({

	el: "#app",

	data: {

		person: {

			name: "John Smith",

			age: 25,

			hobbies: ["coding", "swimming", "whisky"],

			competencies: {

				"javascript": "strong",

				"vue.js": "good",

				"angularjs": "poor"

			}

		},

	}

})

```

You can now use the component in the Vue template:

```

{{person.name}}


```

And the data will be output as `dl` and `ul` elements:

```

John Smith



	
name
 
John Smith

	
age
 
25

	
hobbies
 


		


			
coding

			
swimming

			
whisky

		

	

	
competencies
 


		


			
javascript
 
strong

			
vue.js
 
good

			
angularjs
 
poor

		

	



```


To get nicely nested output across browsers when rendered, you will need a little CSS for the definition list, something like:

```

dt {

	font-weight: bold;

}

dt:after {

	content: ":"

}

dd {

	margin-left: 2em;

}

```

## Install

```

$ npm install vue-nested-list

```

## License

MIT