Oscar the owl and Vershd logo
Menu

A Simple Vue.js Tree View SFC Control

Whilst building Vershd, our Git client that we hope will bring ease and elegance to all things Git, we needed a Vue JS tree view control to show the files and folders associated with different situations. The idea was simply to show a list of files and folders on screen in an easy to understand tree view fashion, and be able to contract and expand folders to hide and show their contents easily.

After finding the excellent example here at vuejsdevelopers.com I thought I'd provide an extension to this using a single file component (SFC). It's just Vue, HTML, CSS and JavaScript.

The Template (HTML) Code in the Vue SFC

<template>
<div class='file-viewer'>
<!-- Show the folder name -->
<div class='folderName' :style='indent'
@click='toggleChildren'>{{ (displayChildren ? '-' : '+') +
folderName}}
</div>
<!-- Note that this calls itself recursively to show inner folders -->
<file-viewer v-if='displayChildren' v-for='folder in folders'
:key='folder.folderName' :folders='folder.folders'
:files='folder.files' :folderName='folder.folderName'
:depth='depth + 1'>
</file-viewer>
<!-- And now display the files in this outer folder -->
<div class='fileName' :style='fileIndent'
v-if='displayChildren' v-for='file in files'
:key='file'>{{ file }}
</div>
</div>
</template>

The JavaScript Code in the Vue SFC

This is the Vue component being set up with Props that will be populated with data by the tree data further below.

And some computed properties to make sure the inner file-viewer components are indented correctly.

<script>
import Vue from 'vue'

export default Vue.extend({
name: 'file-viewer',
data() {
return { displayChildren: true }
},
props: ['folderName', 'folders', 'files', 'depth'],
computed: {
indent() {
return { transform: `translate(${this.depth}em)` }
},
fileIndent() {
return { transform: `translate(${this.depth + 1}em)` }
},
},
methods: {
toggleChildren() {
this.displayChildren = !this.displayChildren
},
},
})
</script>

The CSS Code in the Vue SFC

<style scoped>
.folderName,
.fileName {
cursor: pointer;
}
</style>

Instantiating the Control

You can then use the file-viewer elsewhere by invoking it as below. Note that the 'depth' binding is only ever set here; as the tree view recurses, the property will increment the depth as necessary. Similarly, the 'folders' and 'folderName' props will be reassigned by the next iteration of the file-viewer.

<!-- This calls itself recursively in the JavaScript -->
<file-viewer :folderName='tree.folderName' :folders='tree.folders' :depth='0'></file-viewer>

The Raw Data

Then pass in the information using this data property:

tree: {
folderName: 'Root Folder',
folders: [
{
folderName: 'Folder 1',
files: ['Folder 1 file a', 'Folder 1 file b'],
folders: [
{
folderName: 'Folder 2.1',
files: ['Folder 2.1 file a', 'Folder 2.1 file b']
},
{
folderName: 'Folder 2.2',
files: ['Folder 2.2 file a', 'Folder 2.2 file b'],
folders: [
{
folderName: 'Folder 2.2.1',
files: ['Folder 2.2.1 file a', 'Folder 2.2.1 file b']
}
]
}
]
}
]
}

The Result

You can see the result on this CodePen; naturally, it has been altered to fit the the restrictions of CodePen, so it isn't a single file component. But the results are the same. We started with some tree like data, and ended up with a clickable, expandable, contractible tree view control with the folders and files laid out in an easy to read form!

Simple Vue.js tree view results

Effortless Git

Vershd is an effortless Git GUI that boosts software development. It works on Windows, macOS, and Linux. It's free for personal, educational, non-profit and trade union use.

Designed for intermediate and beginner Git users, our unique UI/UX boosts your software development and makes Git simple.

Coding help

Designed to improve your software development life, this is a full list of our coding help pages.

There's more to assist you, with Git tips and best software development practices, on our resources page.

We also have this free download to help with Git - our Git cheat sheet

Customers say...

I love any tool that makes my life easier... This is perfect, just the right amount of control. No more, no less. Easy to get started, push and rollback changes... It's a no brainer!
Hayden T.
Oscar the owl and Vershd logo
 © 2021 Blightysoft
Made in England
St. George's flag of England, the Union Jack flag of the United Kingdom, the European Union flag, and the United Nations flag.
chevron-right linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram