Now that we have our vue cli build environment set up and working nicely, let’s try building some components! We’ll go through the process of getting App.vue set up as the main file which will simply make use of components to display things. We can begin by just rendering some html from the main App.vue file, then we will export that markup to it’s own component.…
Vue.js has an optional command line interface for quickly building out the boilerplate for Single Page type Applications. This sounds like fun, and something we should set up right away! The vue-cli tool gives us a “batteries-included” build environment that makes use of all those modern bells and whistles frontend tools you hear so much about today. Setting it up is easy and you’ll be up and running with hot-reload, lint-on-save, and production-ready builds in a snap.…
In this tutorial we’ll create a VueJS image upload component so that users can upload an image to use as an avatar in the application. The goal is to re create the mechanism of an image upload via an html form, however it will all be done in a Vue component. This will allow for real time image updating in the browser, in addition to putting the image in storage and setting the avatar image path in the database in one fell swoop.…
This tutorial will add the feature of autocomplete as you type. In the form where a user can enter a reply to a thread, we want the application to automatically start fetching usernames to choose from when you type a string that begins with the @ symbol. There is a jQuery plugin built for this exact purpose called At.js. In addition to autocomplete of usernames, the plugin also offers emoji like characters such as smileys, coffee cups, and more.…
Community based websites often times allow you to mention another user by screen name. For example, if you post a message to Twitter and include a user’s name including the @ symbol, then the user will get a notification that you mentioned them. This tutorial will recreate that type of feature in the forum based application we have been building. In the replies area of threads, if a user types in a reply and includes @Tom as an example, then when Tom logs into his account he should see a notification in the upper right navigation bar area to alert him that he has a thread to check out.…
