Oscar the owl and Vershd logo
A simple Vue.js tree view SFC control

A Simple Vue.js Tree View SFC Control

8th May 2018

This is part of our series Best Software Development Practices. 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

    <div class='file-viewer'>
        <!-- Show the folder name -->
        <div class='folderName' :style='indent'
            @click='toggleChildren'>{{ (displayChildren ? '-' : '+') +
        <!-- 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'>
        <!-- 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 }}

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.

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

The CSS Code in the Vue SFC

<style scoped>
.fileName {
    cursor: pointer;

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 Even Further

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.
Vershd is the effortless Git GUI for Windows, Mac, & Linux
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