Oscar the owl and Vershd logo

A Simple Vue.js Tree View SFC Control

8th May 2018

This is part of our Releases category. We also have a Git Tips series.

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

Boost Your Software Development

Do you need a Git GUI that's totally free for personal use? Vershd boosts your software development productivity by making Git simple with a unique UI/UX. It's a Git GUI that prevents errors and creates clarity. This Git client soars over your repository and then swoops down to quickly tackle branches, commits and files. It deals with Git, so you can concentrate on coding.

Get screenshots and a 60 second video of what Vershd, the effortless Git GUI can do for you.
Oscar the owl and Vershd logo
 © 2020 Blightysoft
Made in England
St. George's flag of EnglandThe Union Jack, the flag of the United KingdomThe European Union flagThe United Nations flag
chevron-right linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram