Vue.js application development

Nuxt.js overview, running Vue.js on the server to pre-render on the server

(Tue Sep 04 2018 00:00:00 GMT+0300 (Eastern European Summer Time)) 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.

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

(Thu Jul 26 2018 00:00:00 GMT+0300 (Eastern European Summer Time)) 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.

Rudimentary form validation in Vue.js with Buefy/Bulma

(Sat Jul 21 2018 00:00:00 GMT+0300 (Eastern European Summer Time)) As a follow-up to Vue.js application development 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.

Add/remove list items in Vue.js built with Bulma/Buefy

(Sat Jul 21 2018 00:00:00 GMT+0300 (Eastern European Summer Time)) 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

(Fri Jul 20 2018 00:00:00 GMT+0300 (Eastern European Summer Time)) 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.