Building A Vue Front End For A Laravel API

Building A Vue Front End For A Laravel API

The previous article had us building a JSON Rest API using the Laravel Framework. In this tutorial, we’ll use Vuejs to build a front end which can consume the API we have in place. Instead of rendering blade files, we can use Vue components and AJAX to simply fetch the data we need to display from the API. We’ll even learn a little bit about customizing the CSS in Laravel using SCSS and Laravel Mix.…

Vue.js Express Tutorial

MEVN Tutorial

In this tutorial we are going to build a small project using the MEVN stack. MEVN is the acronym for MongoDB, Express, VueJS, and Node.js as the full stack application. MongoDB is our data storage mechanism, Express is the middleware to handle HTTP requests and routing, VueJS is the client side JavaScript to render data, and Node.js is the server our application will run on. As an added bonus, we’ll include a cool Bootswatch theme to make the CSS look good.…

27 Awesome VueJS Libraries

Vue Libraries

Let’s take a look at some popular JavaScript libraries making use of VueJS. There are many to choose from, and you should be able to meet any user interface challenge you might come up against using some of these tools. We’ll look at Element, Storybook, iView, Vuex, Vux, Nuxt, Vue Cli, Mint UI, Vuetify, Vue Router, Best Resume Ever, Weex, Vue Resource, VuePress, Vue Material, Quasar Framework, Bootstrap Vue, Vee Validate, Vuestic, Poi, Keen UI, Cube UI, Vue Multiselect, Filepond, Buefy, Vuelidate, and Eagle.js.…

Vuejs Router Tutorial

Vuejs Router

We’ve been covering a whole lot of information about the Vuejs JavaScript framework. In this tutorial we’ll take a look at the Vue Router, which allows developers to create SPA’s, or so called Single Page Applications. The Router is the important feature of a single page application, since without it we couldn’t create one. In a single page application, there is only one page. It could be just an index.html file for example, which hosts a Vuejs application.…

Vuejs Form Example

Vuejs Form Example

Let’s see how to work with html forms when using Vue by way of a vuejs form example. This tutorial will cover several topics and will also include a live demonstration you can try for yourself. In forms, there are many input types to deal with and we will cover most of them here. We’ll see how to fetch values from input fields and how to work with that data.…

VueJS Dynamic Components

VueJS Dynamic Components

Another really cool feature of VueJS is Dynamic Components. What are dynamic components you ask? Well, let’s say you have a main component and you would like to dynamically load other components into the main template by clicking a button or some other means. This is what can be accomplished with dynamic components. In this tutorial, we’ll create some dynamic components in Vue and test them out in a live demo.…

Vue Slots Tutorial

Vue Slots Tutorial

Vue has support for slots built in and it is based on the shadow dom. It is a specification that is still in development but worth taking a look at to learn more about how they work, should this development approach become more common. Angular JS has a similar type of feature of content distribution which is referred to as transclusion. This tutorial will take a look at a few examples of slots in VueJS and how you can use them.…