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

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