A file-system browser component for Electron/Vue.js applications
Many kinds of applications need to browse files in the file system. For example most programmers text editors (I'm writing this in Microsoft Visual Studio Code) include a sidebar showing the file-system. Therefore it's important to have such a component to use in Electron/Vue.js applications. In this article we'll look at one way to implement such a component.
Add/remove list items in Vue.js built with Bulma/Buefy
Most applications with item lists you want to add or remove individual items. With Vue.js it's easy and obvious how to render an item list. What's not so obvious is how to manipulate the list afterwards. The Vue.js documentation doesn't say how to remove items or change items.
Getting started with Vue.js application development
Nuxt.js overview, running Vue.js on the server to pre-render on the server
Vue.js is an application framework for the front end running inside browsers. It supports building single-page-applications (SPA) or simply enhancing a web page with fancy interactivity. However it isn't always useful to have a big application running in the client. With Nuxt.js the Vue.js code is pre-rendered on the server so that the initial load of the page has already-rendered HTML. Subsequent interactivity on the page is still managed by client-side Vue.js code running in the browser.
Quickly start a new Electron and Vue.js application project,
Showing a tree structure, like a file-system, in Vue.js
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
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.