7 Vue.js Backends Compared

7 Vue.js Backends Compared

Which backend are you planning to use for your next Vue.js project?

Often developers choose what they’re familiar with. If you’re primarily a Laravel developer, for example, I’ll bet Laravel will be first to your mind when planning a new project.

It makes sense to work with what you already know and enjoy. That said, each backend has its own strengths and weaknesses, and certain project requirements may better match one more so than others.

Your best bet is to get familiar with what’s available so you can make a well-informed choice. In this article, we’ll investigate the suitability of some of the most popular backend options for Vue apps:

The de facto choice for a Vue.js backend is Express.js, a microframework for Node.js.

Before we consider Express specifically, let’s first consider the advantages of Node.js. Firstly, Node is written in JavaScript. This means you can share code between a Vue client and a server app. It also means you can use server-side rendering to generate your Vue app on the server and deliver it to the client fully rendered. Secondly, Node is really fast thanks to non-blocking I/O and its great ability to handle concurrent requests.

read more

5 Awesome Boilerplates/Templates For VueJS Projects

5 Awesome Boilerplates/Templates For VueJS Projects

Are you about to begin an important Vue project? To ensure you start with a solid foundation, you might use a template (aka boilerplate, skeleton, starter, or scaffold) rather than starting from npm init or vue init.

Many experienced developers have captured their wisdom about building high-quality Vue apps in the form of open source templates. These templates include optimal configuration and project structure, the best third-party tools, and other development best practices.

vue-starter Vue Starter for isomorphic PWAs with Vue

Unlike Vue CLI 3, which is optimized for flexibility, templates are opinionated. It’s important, therefore, to choose the one that fits with your development philosophy and has roughly the same features that you’ll need out of the box.

Some considerations for choosing a Vue template include:

  • Webpack
  • PWA
  • Full-stack with authentication
  • Good documentation
  • GraphQL
  • Testing

Etc.

There are many great Vue.js templates out there, but in this article, we’ll look at 5 that include key features that new projects will often require.

read more

Create A YouTube-style Recommendation Engine With Node & Vue

Create A YouTube-style Recommendation Engine With Node & Vue

One of the best ways to hook the users of your app is to show them personalized content. A good example is YouTube’s video suggestions based on previously watched videos. Another popular one is Amazon’s suggestion to view similar items based on previously viewed products. Another example is Instagram’s method of choosing which images and videos to show when you search or explore.

What You Will Learn

In this article, we’ll walk you through the steps of building a simple application that suggests personalized videos to a user based on videos the user has recently uploaded: the user uploads videos and in return gets a feed of related videos. To do this, we are going to take advantage of Cloudinary’s video player and their Automatic Video Tagging Add-on, powered by Google.

Your finished app will look something like this:

Final Screenshot

Dependencies

To build this app, we are going to use a Node server for the backend and Vue for our front-end. To perform this tutorial yourself, verify that:

  • Node is installed on your machine
  • Node Package Manager (npm) is installed on your machine.

read more

Is My Single-Page Application SEO Friendly?

Is My Single-Page Application SEO Friendly?

A notoriously murky area of single-page application (SPA) development is SEO. Depending on who you ask, search engine crawling of client-rendered content is either totally fine, fine as long as it’s synchronous or not at all fine.

Due to the confusion caused by all this conflicting advice, I regularly see the question “is my Vue SPA okay for SEO?” come up in places like the Vue.js Developers Facebook group, the Vue.js Forums and r/vuejs on Reddit.

In this article, we’ll challenge the popular opinions, do doing some basic tests and try to conclude with some sensible advice for building SEO-friendly SPAs.

The issue with client-rendered content

The standard implementation of a single-page app provides a page “shell” to the browser without any meaningful content included. The content is instead loaded on demand from the server with AJAX and then added to the page by JavaScript.

This allows a user to view the “pages” of an SPA site without a page refresh, theoretically improving UX.

SPA content loading model

read more

Vue CLI 3: A Game Changer For Frontend Development

Vue CLI 3: A Game Changer For Frontend Development

Vue creator Evan You’s recent conference keynote didn’t mention much about new features for Vue, instead he focused almost entirely on Vue CLI 3.

A CLI tool is a mere utility that doesn’t directly add any features to your Vue apps, so why the fuss?

The astonishing rise of Vue’s popularity over the past year has highlighted what developers really care about in a framework: performance, flexibility, and ease of use.

As you’ll see, Vue CLI 3 is a major leap forward in both flexibility and ease of use. It provides your Vue project with instant access to the best build tools from the frontend world, combining them seamlessly with sensible defaults. At the same time, it allows easy configuration and customization to fit your specific needs.

To achieve this, Vue CLI 3 has adopted a new plugin-based architecture, departing from the template-based architecture of versions 1 and 2. Under this new architecture, project configuration is siloed in independent plugins i.e. one for TypeScript, one for ESLint etc.

Here are some things you’ll love about Vue CLI 3:

  • No lock in, as plugins can be added at any point in the development lifecycle
  • Zero config plugins allow you to spend time developing rather than configuring
  • Easy to upgrade, as configuration can be customized without “ejecting”
  • Allows developers to make their own plugins and presets

Last but not least, Vue CLI 3 takes you from a blank canvas to a running server really fast, allowing you to prototype a project with nothing more than a single .vue file.

Plugin architecture

The base configuration for a Vue CLI 3 project is bare-bones Webpack and Babel. All the additional features can be added via plugins, which enhance the project configuration in one or more of the following ways:

read more