Showing a tree structure, like a file-system, in Vue.js

By: (plus.google.com) +David Herron; Date: July 26, 2018

Tags: Vue.js » JavaScript

Many kinds of applications show a tree structure of data items, such as files in a file system. Over the last couple weeks I implemented (blog.sourcerer.io) a simple Markdown editor in Vue.js/Electron - and while the sample application did not show a file-system tree a full version of the application would do so. We use this sort of widget all the time in programs and web applications, but do you know how to implement such a widget? Speaking for myself I could probably work it out - it's nested UL and LI elements with some custom styling and whatnot - but I'd rather use a pre-baked tree component for Vue.js instead. The application shown here demonstrates using one such tree component.

We need the Vue.js CLI tool installed. See Getting started with Vue.js application development

$ vue init webpack-simple sl-vue-tree

If you need a tour of the skeleton see Getting started with Vue.js application development

The sl-tree-vue widget is the Vue.js tree component we've chosen for this example. The code is available via npm at: (www.npmjs.com) https://www.npmjs.com/package/sl-vue-tree

To help with styling the sl-vue-tree component we'll use the Font Awesome library of icons. It is available via npm at: (www.npmjs.com) https://www.npmjs.com/package/vue-awesome

To install both:

$ cd sl-vue-tree
$ npm install sl-vue-tree vue-awesome --save
$ npm install

In index.html, make this change:

<div id="example-sl-vue-tree"></div>

In main.js use this:

import Vue from 'vue'
import App from './App.vue';

import slVueTree from 'sl-vue-tree';
import 'sl-vue-tree/dist/sl-vue-tree-dark.css';
Vue.component('sl-vue-tree', slVueTree);

import 'vue-awesome/icons';
import Icon from 'vue-awesome/components/Icon';
Vue.component('icon', Icon);

new Vue({
  el: '#example-sl-vue-tree',
  render: h => h(App)
});

The middle section is where we added code, the top and bottom is what the skeleton gave us.

The first section brings in the sl-vue-tree component. We import the component, then use Vue.component to register the component globally. We've also imported one of the theme CSS files.

The second section brings in the Font Awesome library. First we bring in the icons, then we bring in the Icon component. With that component we can use one of the icons simply with the <icon> tag.

Then, change App.vue to this:

<template>
  <div id="app">

    <sl-vue-tree v-model="nodes" @nodeclick="nodeClick">

      <template slot="toggle" slot-scope="{ node }">
          <span v-if="!node.isLeaf">
            <icon name="caret-right" v-if="!node.isExpanded"></icon>
            <icon name="caret-down"  v-if="node.isExpanded"></icon>
          </span>
      </template>

      <template slot="title" slot-scope="{ node }">
          <icon name="file" v-if="node.isLeaf"></icon> {{ node.title }} </template>

      <template slot="sidebar" slot-scope="{ node }">
          <icon name="circle" v-if="node.data.isModified"></icon>
      </template>
    </sl-vue-tree>
  </div>
</template>

<script>

var nodes = [
    {title: 'Item1', isLeaf: true},
    {title: 'Item2', isLeaf: true, data: { visible: false }},
    {title: 'Folder1'},
    {
      title: 'Folder2', isExpanded: true, children: [
        {title: 'Item3', isLeaf: true},
        {title: 'Item4', isLeaf: true, data: { isModified: true }}
      ]
    }
];

export default {
  name: 'app',
  data () {
    return {
     nodes: nodes
    }
  },
  methods: {
    nodeClick(node) {
      console.log(node);
    }
  }
}
</script>

<style>
</style>

We've set up an sl-vue-tree component, with its data stored in the nodes object. That object is fairly self-explanatory. It is an array of objects conforming to this declaration:

interface ISlTreeNodeModel<TDataType> {
    title: string;
    isLeaf?: boolean;
    children?: ISlTreeNodeModel<TDataType>[];
    isExpanded?: boolean;
    isSelected?: boolean;
    isDraggable?: boolean;
    isSelectable?: boolean;
    data?: TDataType; // any serializable user data
}

The only place you're allowed to put custom data is in the data field. In the example above we've added an isModified flag to one of items, and then in the sidebar we use that flag to show an icon.

The interesting thing about this is sl-vue-tree has several slots into which we can inject our own HTML code. In Vue.js a slot is an injectable part of the Component. Each slot is defined in the component's template, and then in the application's template we can define <template> elements that are injected into the named slot.

The toggle slot is applicable only for items with children. It shows a toggle button to control whether the children are visible. The toggle icon is only shown for non-leaf items.

The title slot renders both an icon to show the item type, as well as the name (the title field) of the item. The item type icon is only shown for leaf items.

The sidebar slot appears way over on the right side, and can be used for an extra status indicator. In this case we're planning to show a dot-thing to indicate the file is modified.

The nodeClick function is, at the moment, solely to show data about each item. Obviously it or any of the other functions supported by this component can be used for actual application-specific purposes.

Once you've made the changes, you can run it on your laptop with: npm run dev

You'll get something like this:

« Rep. McCarthy was not shadow banned, his Twitter account was misconfigured to hide postings What is Shadow Banning? Banning a member such that they do not know they're banned »
2016 Election 2018 Elections Acer C720 Ad block Air Filters Air Quality Air Quality Monitoring AkashaCMS Amazon Amazon Kindle Amazon Web Services America Amiga and Jon Pertwee Android Anti-Fascism AntiVirus Software Apple Apple Hardware History Apple iPhone Apple iPhone Hardware April 1st Arduino ARM Compilation Artificial Intelligence Astronomy Astrophotography Asynchronous Programming Authoritarianism Automated Social Posting AWS DynamoDB AWS Lambda Ayo.JS Bells Law Big Brother Big Data Big Finish Big Science Bitcoin Mining Black Holes Blade Runner Blockchain Blogger Blogging Books Botnets Cassette Tapes Cellphones China China Manufacturing Christopher Eccleston Chrome Chrome Apps Chromebook Chromebox ChromeOS CIA CitiCards Citizen Journalism Civil Liberties Climate Change Clinton Cluster Computing Command Line Tools Comment Systems Computer Accessories Computer Hardware Computer Repair Computers Conservatives Cross Compilation Crouton Cryptocurrency Curiosity Rover Currencies Cyber Security Cybermen Cybersecurity Daleks Darth Vader Data backup Data Formats Data Storage Database Database Backup Databases David Tenant DDoS Botnet Department of Defense Department of Justice Detect Adblocker Developers Editors Digital Nomad Digital Photography Diskless Booting Disqus DIY DIY Repair DNP3 Do it yourself Docker Docker MAMP Docker Swarm Doctor Who Doctor Who Paradox Doctor Who Review Drobo Drupal Drupal Themes DVD E-Books E-Readers Early Computers eGPU Election Hacks Electric Bicycles Electric Vehicles Electron Eliminating Jobs for Human Emdebian Encabulators Energy Efficiency Enterprise Node EPUB ESP8266 Ethical Curation Eurovision Event Driven Asynchronous Express Face Recognition Facebook Fake News Fedora VirtualBox Fifth Doctor File transfer without iTunes FireFly Flash Flickr Fraud Freedom of Speech Front-end Development G Suite Gallifrey Gig Economy git Github GitKraken Gitlab GMAIL Google Google Chrome Google Gnome Google+ Government Spying Great Britain Green Transportation Hate Speech Heat Loss Hibernate High Technology Hoax Science Home Automation HTTP Security HTTPS Human ID I2C Protocol Image Analysis Image Conversion Image Processing ImageMagick In-memory Computing InfluxDB Infrared Thermometers Insulation Internet Internet Advertising Internet Law Internet of Things Internet Policy Internet Privacy iOS iOS Devices iPad iPhone iPhone hacking Iron Man iShowU Audio Capture iTunes Janet Fielding Java JavaFX JavaScript JavaScript Injection JDBC John Simms Journalism Joyent Kaspersky Labs Kext Kindle Kindle Marketplace Large Hadron Collider Lets Encrypt LibreOffice Linux Linux Hints Linux Single Board Computers Logging Mac Mini Mac OS Mac OS X MacBook Pro Machine Learning Machine Readable ID Macintosh macOS macOS High Sierra macOS Kext MacOS X setup Make Money Online Make Money with Gigs March For Our Lives MariaDB Mars Mass Violence Matt Lucas MEADS Anti-Missile Mercurial MERN Stack Michele Gomez Micro Apartments Microsoft Military AI Military Hardware Minification Minimized CSS Minimized HTML Minimized JavaScript Missy Mobile Applications Mobile Computers MODBUS Mondas Monetary System MongoDB Mongoose Monty Python MQTT Music Player Music Streaming MySQL NanoPi Nardole NASA Net Neutrality Network Attached Storage Node Web Development Node.js Node.js Database Node.js Performance Node.js Testing Node.JS Web Development Node.x North Korea npm NVIDIA NY Times Online advertising Online Community Online Fraud Online Journalism Online Photography Online Video Open Media Vault Open Source Open Source and Patents Open Source Governance Open Source Licenses Open Source Software OpenAPI OpenJDK OpenVPN Palmtop PDA Patrick Troughton PayPal Paywalls Personal Flight Peter Capaldi Peter Davison Phishing Photography PHP Plex Plex Media Server Political Protest Politics Postal Service Power Control President Trump Privacy Private E-mail server Production use Public Violence Raspberry Pi Raspberry Pi 3 Raspberry Pi Zero ReactJS Recaptcha Recycling Refurbished Computers Remote Desktop Removable Storage Republicans Retro Computing Retro-Technology Reviews RFID Rich Internet Applications Right to Repair River Song Robotics Robots Rocket Ships RSS News Readers rsync Russia Russia Troll Factory Russian Hacking Rust SCADA Scheme Science Fiction SD Cards Search Engine Ranking Season 1 Season 10 Season 11 Security Security Cameras Server-side JavaScript Serverless Framework Servers Shell Scripts Silence Simsimi Skype SmugMug Social Media Social Media Networks Social Media Warfare Social Network Management Social Networks Software Development Software Patents Space Flight Space Ship Reuse Space Ships SpaceX Spear Phishing Spring Spring Boot Spy Satellites SQLite3 SSD Drives SSD upgrade SSH SSH Key SSL Stand For Truth Strange Parts Swagger Synchronizing Files Tegan Jovanka Telescopes Terrorism The Cybermen The Daleks The Master Time-Series Database Tom Baker Torchwood Total Information Awareness Trump Trump Administration Trump Campaign Twitter Ubuntu Udemy UDOO US Department of Defense Video editing Virtual Private Networks VirtualBox VLC VNC VOIP Vue.js Walmart Weapons Systems Web Applications Web Developer Resources Web Development Web Development Tools Web Marketing Webpack Website Advertising Weeping Angels WhatsApp William Hartnell Window Insulation Windows Windows Alternatives Wordpress World Wide Web Yahoo YouTube YouTube Monetization