Build A i18n Filter Using Vue.js & Native Web Specs

Build A i18n Filter Using Vue.js & Native Web Specs

I’m still learning Vue and one of the things I was a bit slow to discover were filters. (To be fair, they are towards the end of the docs!) Filters, as you can probably guess, allow you to define simple textual transformations to values. So for example, the docs demonstrate a Capitalization filter that will convert the first letter in a string to uppercase. Vue doesn’t ship with any filters baked in, but it’s incredibly easy to write them. A great use case for this is in internationalization and globalization, broadly defined as formatting values in the user’s preferred language.

This helps prevent problems like figuring out exactly what this date is: 4/8/73. For Americans, this is April 8th, 1973. For pretty much the rest of the planet, that date is August 4th, 1973. It would certainly be nice if we could simply format those values appropriately, and automatically, for our users.

This is not a new problem, of course, and multiple libraries exist to help with this. The incredible Moment.js has great support for this right now. But did you know that there’s actually a web standards way of doing this? The Intl spec has been around for nearly six years, but browser support hasn’t been terribly great till most recently. currently reports support at a pretty high 85%.

Can I Use - Internationalization API stats

Given this level of support, it would be pretty safe to make use of it within our applications. Checking for Intl support can be a simple if(window.Intl) and fallback could be… well, simply punting and displaying the value as is. You would have to decide for yourself if that strategy makes sense.

read more

Getting Started with NativeScript-Vue 1.0

Getting Started with NativeScript-Vue 1.0

Last week, the NativeScript-Vue team announced a 1.0 release of NativeScript-Vue 🎉

As its name implies, NativeScript-Vue is a project that integrates Vue.js into NativeScript, allowing you to build completely native iOS and Android apps using Vue.js.

In this article we’ll look at how you can start building your first app using NativeScript-Vue, and answer some common questions along the way. Let’s get started.

Choosing your environment

First things first, there are two ways to develop with NativeScript-Vue.

  • Option 1: Work in NativeScript Playground: NativeScript Playground is a browser-based NativeScript development environment that lets you start coding without setting up native iOS and Android SDKs on your development machine.
  • Option 2: Use the NativeScript CLI: The NativeScript CLI is a command-line interface for creating, building, and running NativeScript apps. Because the NativeScript CLI builds actual iOS and Android binary files, you must install the necessary native dependencies to develop using the CLI.

In this article we’ll start devleoping using NativeScript Playground, as it’s a great tool for learning how NativeScript-Vue works without going through the hassle of setting up a local environment. After that, we’ll look at the next steps you need to take to set up a local NativeScript-Vue development workflow.

For now, let’s dive right in and start building.

read more

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.


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

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


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 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.


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

git clone
cd vue-hackernews-2.0
npm install

read more