How To Build Vue Components That Play Nice

How To Build Vue Components That Play Nice

Very few people write Vue components originally intending them to be open-sourced. Most of us start out writing components for ourselves - we have a problem, and then decide to solve it by building a component. Sometimes we find ourselves wanting to solve the same problem in new locations in our codebase, and so we take our component and refactor it a bit to make it reusable. Then we want to use it in a different project, and so we move it out into an independent package. And then we think “hey, why not share this with the world?”, and so we open-source the component.

On the one hand, this is great, it means a large and growing availability of open-source components out there for anyone working in Vue (a search for “vue” on npmjs.com turns up over 12000 packages).

On the other hand, because most of these components evolved from a specific situation, and not all of us have experience designing components for reuse across many environments, many of these components do not “play nice” with the Vue ecosystem.

What does it mean to “play nice”? At a high level, it means behaving in a way that feels natural to Vue developers, and that is easy to extend and integrate into any sort of application.

After exploring a wide range of open source components, here’s what I think goes into making a Vue component that plays nice:

  1. Implement v-model compatibility
  2. Be transparent to events
  3. Assign attributes to the right elements
  4. Embrace browser norms for keyboard navigation
  5. Use events preferentially over callbacks
  6. Limit in-component styles

read more

Speed Up Development With Prototyping and Vue

Speed Up Development With Prototyping and Vue

Have you ever worked on a project that got away from you? It’s easy to start with a project, only to find yourself overwhelmed with new skills and challenges. Prototypes help keep projects small, and help developers decide if they’re worth pursuing. Furthermore, we can leverage the flexibility of Vue to build prototypes, so we can iterate on ideas quickly.

Product vs. Prototype

A product is what a user sees, like an app, a service, or a device. A prototype resembles the product, but is meant to experiment with a particular feature of the product at a low cost.

As web developers, we often make the product before the prototype. If you’ve ever had a weekend project turn into a month-long effort, consider taking the prototyping approach. Prototypes have some useful benefits:

  • You can make a prototype in an hour, as opposed to a day
  • Prototypes are not production-focused, so you don’t need a production environment (testing, deploying, etc.)
  • You can prototype one feature at a time, to see how it fits into your product (and if it’s worth implementing)
  • If you’d like to try out some new technology, you can use a prototype to explore it, instead of experimenting in a production environment

Products take more time to make, requiring research and testing. On the other hand, prototypes require less time and fewer resources. We’ll explore how to make a prototype instead of a product with modern web tools including Vue.js.

An Example

Suppose we want to make an app that tells a user when the sun will rise and set at a given location. Furthermore, we’d like to display a visual that shows what time in the day the sun rises/sets.

Goal: Make an app that shows the times that the sun will rise and set at a given location. The times should be shown in a data visualization.

Throughout this example, we’ll identify minimum viable solutions for our prototype. These minimum viable solutions come when we have to make a decision about what we’re building. We’ll choose an option more appropriate for building a prototype, instead of a product.

This is what the final product will look like:

read more

Create & Publish Web Components With Vue CLI 3

Create & Publish Web Components With Vue CLI 3

Are web components “the future” for the web platform? There are many opinions both for and against. What is a fact, though, is that browser support is emerging for web components and there are a growing number of tools and resources for authors interested in creating and publishing web components of their own.

Are web components the future?

A great tool for creating web components is Vue.js, and it’s been made even easier with the release of Vue CLI 3 and the new @vue/web-component-wrapper library.

In this article, I’ll discuss the reasons why you might want to create web components and show you how you make your first one with nothing more than a basic knowledge of Vue.

What are web components?

You’re familiar, of course, with HTML elements like divs, spans, tables etc. Web components are custom HTML elements that can be used and reused in web apps and web pages.

For example, you might create a custom element called video-player so you can provide a reusable video interface that has UI features beyond what’s available with the standard HTML 5 video element. This element could provide an attribute “src” for the video file and events like “play”, “pause” etc, to allow a consumer to programmatically control it:

<div>
  <video-player src="..." onpause="..."></video-player>
</div>

read more

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