Creating Reusable Transitions in Vue

Creating Reusable Transitions in Vue

Transitions in Vue.js are really great. There is no doubt that they can bring your app to life very easily but often you have to write them from scratch in each project or even bring some CSS library like animate.css to make them look good.

What if we could encapsulate these into components and simply reuse them across several projects? We will look at several ways to define transitions and dig our way to make them really reusable.

Raw transition component and CSS

The easiest way to define a transition is using the transition or transition-group components. This requires defining a name and some CSS for the transition.

App.vue

<template>
  <div id="app">
    <button v-on:click="show = !show">
      Toggle
    </button>
    <transition name="fade">
      <p v-if="show">hello</p>
    </transition>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      show: true
    };
  }
};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

Seems easy, right? However, there is a problem with this approach. We can’t really reuse this transition in another project.

Encapsulated transition component

What if we encapsulate the previous logic into a component and use it as a component instead?

read more

The Ultimate Vue.js & Laravel CRUD Tutorial

The Ultimate Vue.js & Laravel CRUD Tutorial

CRUD (Create, Read, Update and Delete) are the basic operations of data storage, and one of the first things you learn as a Laravel developer.

But what happens when you add a Vue.js single-page app as the frontend to this the stack? Suddenly you have to deal with asynchronous CRUD, since operations now occur without a page refresh. This will require special attention to ensuring the state of the data is consistent in both the front end backends.

In this tutorial, I’ll show you how to set up a full-stack Vue & Laravel app and demo each of the CRUD operations. AJAX is the key to this architecture, so we’ll use Axios as the HTTP client. I’ll also show you some strategies for dealing with the UX pitfalls of this architecture.

You can check out the finished product in this GitHub repo.

Demo app

The demo full-stack app allows a user to create new “Cruds”, which I decided, after an incredible amount of creative thinking, are alien creatures with strange names and the ability to change from red to green and back.

The Cruds are shown on the main page, and the user has the power to create new Cruds, to delete them, or to update their color.

Vue Laravel CRUD demo

CRUD in the Laravel backend

We’ll begin the tutorial with the Laravel backend where the CRUD operations are fulfilled. I’ll keep this part brief as Laravel CRUD is a topic covered extensively elsewhere.

In summary, we will:

  • Set up a database
  • Set up RESTful API routes by using a Resource Controller
  • Define methods in the controller to perform the CRUD operations

Database

Firstly, the migration. Our Cruds have two properties: a name, and color which we store as text.

read more

End-To-End Testing A VueJS HackerNews Clone

End-To-End Testing A VueJS HackerNews Clone

In this blog post I will show how to test a HackerNews clone without pulling out hair.

There is an elegant and fast Vue.js 2 HackerNews clone made by the framework’s author himself: vuejs/vue-hackernews-2.0 with live demo hosted at https://vue-hn.now.sh/. The clone has all the bells and whistles one can expect from a modern progressive application: includes server-side rendering, inlined CSS, routing, single file components, etc. There is only one thing the code is missing - tests! Hmm.

HackerNews with Vue

What would it take to quickly confirm that this project is working? Would you need to jump through hoops if you wanted to add tests? Would you write unit tests or would end-to-end tests be better? Would the tests work in a modern browser or using JavaScript DOM emulation? Would the entire experience be full of pain and misery?

I will show you can quickly write lots of end-to-end tests without any pain. These tests are most important ones - because they ensure that the deployed application is actually usable by the end user. My tool of choice is Cypress - our open source free test runner.

Setup

I start testing by forking the repository and getting a local copy.

git clone git@github.com:bahmutov/vue-hackernews-2.0.git
cd vue-hackernews-2.0
npm install

read more

4 Essential ES2015 Features For Vue.js Development

4 Essential ES2015 Features For Vue.js Development

ES2015 (aka ES6) is the current specification of the JavaScript language. If you’re new to JavaScript or haven’t updated your JavaScript knowledge recently, there are a number of new features in ES2015 that make development much better and more enjoyable.

If you’re a Vue developer, you’d benefit from learning all these new features. But as a means of triage, you might start with those features that apply to Vue specifically.

In this article, I’ll show you four ES2015 features that you’ll use on a daily basis with Vue. I’ll provide an explanation and brief example of each.

  1. Arrow functions
  2. Template literals
  3. Modules
  4. Destructuring and spread syntax

1. Arrow functions

Arrow functions are a new way to declare JavaScript functions. They provide a shorter syntax, but differ from regular JavaScript function in other ways, too.

// Regular JavaScript function
function(parameters) {
  statements
}

// Arrow function
(parameters) => {
  statements
}

read more

Use a Vue.js Render Prop!

Use a Vue.js Render Prop!

TLDR; I show that Vue can use JSX to utilize the React pattern of a render prop. Source code here

In Vue, templates are typically how we compose/extend/mix/open source our components. This is contra the experience of React developers who write most of their compiled html in JSX.

Thanks to a similar architecture of using the virtualDOM + createElement API and babel-plugin-transform-vue-js, we can write our Vue components in almost the same way we write React! (Not that we should do this for all components, but it’s fun to see design patterns and utilize them).

UPDATE: I’m using render props in https://github.com/educents/vue-autosuggest in the renderSuggestion prop, so go check it out!

Render props demo

For demonstration, I will use an example from Use a Render Prop! article by Michael Jackson.

First the SFC:

read more