In Use TypeScript to Develop Vue.js Web Applications we’ve seen how TypeScript Vue apps development by creating class based components and using decorators. This course will extend it, showing you how you can use Vuex with TypeScript in order to manage the state of your Vue app. We’ll see how…

Face Detection and Recognition have become an increasingly popular topic these days. It’s a great advantage for a machine to know which user is in a picture. The applications of facial recognition in our world today are endless. From Face, iD unlock to identifying criminals on the run using real-time…

A recursive component is one which invokes itself and is useful for displaying comments on a blog, nested menus or anything where the parent and child are the same. In this tutorial, I’ll give you a demonstration of how to build a collapsible tree menu.

Learn Vue.js from Top Articles for the Past Year (v.2018)For Jan-Dec 2017, we compared nearly 10,000 tutorials about Vue.js 2.0 and picked the Top 40 (0.4%).

Mybridge AI ranks articles based on the quality of content measured by our machine and a variety of human factors including the number of shares and minutes read.This directory is designed to make your life easier as it organizes the most useful articles by 17 key topics, where experienced web…

catch(function(err) { – // return status code as false – return res.json({‘status’ : false}); – }); – }); – Once the user makes a POST request to the /upload route, the route gets the image file from the HTTP Request, converts it to a base64 version and then uploads it…

The upload method takes the image that was uploaded, resets the uploadStatus ( this is done so that when a user is performing multiple uploads, the status is cleared before each upload ) and then calls the showPreview method: – […] – methods: { – upload: function(files) { – this.model.image…

How to add Semantic UI to your Vue projectThis tutorial covers how to add Semantic UI (with customizations) to your Vue.js project.This is aimed at Webpack users and targets the latest version of Semantic UI tutorial does not cover anything jQuery related.

If you do want rapid out-of-the box JS functionality I recommend which is a Vue wrapper for Semantic UIand is 100% compatible with this tutorial.The starting point of this tutorial will be the vue-cli webpack-simple can get the full code of this tutorial on github here: LessSemantic UI is powered…

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable.npm install less –save-devInstalling Semantic UI (Less distribution)We will be installing the Less-only distribution of…

Instructs webpack to emit the required object as file and to return its public URL.npm install file-loader –save-devConfiguring Semantic UIIn your project’s root, create a new folder called ‘semantic-theme’.

Add the following inside ‘theme.config’:Adapting your Webpack configurationAdapt module rules:Adapt resolve entry:Integrating Semantic UI:Adapt main.js to import Semantic ui:Adapt App.vue:Result:Customizing your themeFrom here on you can follow the official customization guide: the theme’s primary color:Create the following file: the contents of site.variables to the following:GithubIn case you get stuck you can get…

A tree of recursive UI components will be the visual representation of some recursive data structure.

Let’s make a recursive component to display our data structure called .

To begin the recursion we invoke the component in our main template, using the root properties for the props: – – Here’s how it looks so far: – – It’d be nice to visually identify the “depth” of a child component so the user gets a sense of the structure…

In the component template above you can see that this value will be incremented each time it is passed to any child nodes.

Since recursive data structures can be large, a good UI trick for displaying them is to hide all but the root node so the user can expand/contract nodes as needed.