Oscar the owl and Vershd logo

A Simple Vue.js Tree View SFC Control

8th May 2018

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

Pushing to the Horizon

Do you want to use Git far more easily, with no commands or parameters to remember, and with a clear overview of your repository, plus the ability to preview changes? Then make your life easier, get a free download of Vershd, the effortless Git GUI.
Designed from the ground up to prevent errors, accidental deletions, and having to write all of this morning's code. Again.

Features include:
  • Rewind is simpler and easier than using Revert or Reset. It winds the clock back on commits, letting you choose whether to keep pending files or not.
  • Advanced Context Menus. Right clicking on a commit lets you merge, cherry pick, or create a branch there and then. Files have many ways to compare them to either historic or working files on your desktop.
  • See everyone's work in the clearest way possible. Branches shows branches and their commits, where you can easily pull, push, cherry pick and more. Pending shows what you can commit or stash. Files shows commits' details. Stashes helps you apply, view and delete your stashes.
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