Advanced Server-Side Rendering With Laravel and Vue: Multi-Page App

A few weeks ago I wrote a tutorial on the new Vue server-side rendering capabilities for Laravel. That tutorial mostly focused on the set up of SSR in a Laravel environment and so I only had time to demonstrate a simple “Hello World" app with no significant features.
Now I want to build on that previous tutorial and demonstrate how to server render a Vue app that includes multiple pages with Vue Router since most of your Laravel projects will have more than one page.

Link: https://dzone.com/articles/advanced-server-side-rendering-with-laravel-amp-vu?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Vuebnb: A Full-Stack Vue.js and Laravel App

This year I’ve been writing a new book called Full-Stack Vue Web Development: Vue.js, Vuex, and Laravel. It’ll be published in early 2018 by Packt Publishing.
The book is centered around a case study project, Vuebnb, a simple clone of Airbnb. In this post, I’ll give a high-level overview of how it works so you get a sense of what’s involved in building a full-stack Vue/Laravel app from scratch.

Link: https://dzone.com/articles/vuebnb-a-full-stack-vuejs-and-laravel-app?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Comparing Progressive JavaScript Frameworks: Angular and Vue.js

Vue.js, the open source JavaScript framework, helps build beautiful web interfaces. Its excellent features can be strongly leveraged when it is paired with other web tools. Nowadays, many developers are replacing Angular and React.js with Vue.js.
This brings us to the topic of the article – should I go for Vue or Angular?

Link: https://dzone.com/articles/comparing-progressive-javascript-frameworks-angula?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Create a Vuex Undo/Redo Plugin for Vue.js

There are many benefits to centralizing your application state in a Vuex store. One benefit is that all transaction are recorded. This allows for handy features like time-travel debugging where you can jump between previous states to isolate problems.
In this article, I’ll demonstrate how to create an undo/redo feature with Vuex, which works in a similar way to time-travel debugging. This feature could be used in a variety of scenarios from complex forms to browser-based games.

Link: https://dzone.com/articles/create-a-vuex-undoredo-plugin-for-vuejs?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Server-Side Rendering With Laravel and Vue.js 2.5

Server-side rendering is a great way to increase the perception of loading speed in your full-stack app. Users get a complete page with visible content when they load your site, as opposed to an empty page that doesn’t get populated until JavaScript runs.
One of the downsides of using Laravel as a backend for Vue.js was the inability to server render your code. Was. The release of Vue.js 2.5.0 has brought server-side rendering support to non-Node.js environments including PHP, Python, Ruby, etc.

Link: https://dzone.com/articles/server-side-rendering-with-laravel-amp-vuejs-25?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Build A Collapsible Tree Menu With Vue.js Recursive Components

A recursive component in Vue.js is one which invokes itself e.g.:
Vue.component(‘recursive-component’, {
template: `
<recursive-component></recursive-component>`
});
Recursive components are useful for displaying comments on a blog, nested menus, or basically anything where the parent and child are the same, albeit with different content. For example:

Link: https://dzone.com/articles/build-a-collapsible-tree-menu-with-vuejs-recursive-1?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Getting Your Head Around Vue.js Scoped Slots

Scoped slots are a useful feature of Vue.js that can make components more versatile and reusable. The only problem is they’re difficult to understand! Trying to get your head around the interweaving of parent and child scopes is like solving a tough math equation.
A good approach when you can’t understand something easily is to try put it to use in solving a problem. In this article, I’ll demonstrate how I used scoped slots to build a reusable list component.

Link: https://dzone.com/articles/getting-your-head-around-vuejs-scoped-slots?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Get Going With Kendo UI and Vue: A GIF Guide

I am a big fan of Vue.js, so I was delighted when the team said we would be supporting Kendo UI component wrappers for it. Let’s jump in and create a Vue application with the Vue CLI and add a color picker component. Here’s what we’ll be covering:

Installing and creating a Vue app with the Vue CLI.
Installing Kendo UI components.
Adding Kendo UI Default styling.
Implementing a Kendo UI ColorPicker component.
Where to go next. 

Creating a Vue App
First, we need to go to our terminal and globally (-g) install the Vue CLI using npm.

Link: https://dzone.com/articles/get-going-with-kendo-ui-amp-vue-a-gif-guide?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Why You Should Avoid Vue.js DOM Templates

It’s a common practice for a Vue app to use the DOM as its template, as it’s the quickest and easiest architecture to set up.
This practice comes with a few catches, however, that make it an undesirable choice for any serious project. For example, the markup you write for a DOM template is not always what you get when your app runs.

Link: https://dzone.com/articles/why-you-should-avoid-vuejs-dom-templates?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev