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
Vue.js is an exciting new framework for developing front-end JavaScript applications. It promises to be a "Progressive" web framework, and I don't think they mean in a Political sense but means that Vue.js can be plugged into the part of an application which requires a richer experience. It is also supposed to be Approachable, works directly from HTML, CSS and JavaScript, while being Versatile and Performant. In this example we'll build a starter application, and embed it into an HTML web page. Specifically, this web page.
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,
It's relatively easy to setup a blank Electron application, but of course the modern best practice is to use an application framework when creating an HTML+JavaScript application. The Electron development model more-or-less-exactly matches the model in regular web browsers. That means we can use a framework like React or Vue.js to make a powerful Electron app. In this tutorial we'll set up a simple Electron app, then add to it a simple bit of Vue.js code, and see that it is pretty simple to bring the two together.
Rudimentary form validation in Vue.js with Buefy/Bulma
As a follow-up to we want to study form validation. That example includes a little form in which we enter some information, and we want a little bit of validation to make sure we don't add bad entries.
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.
