Introduction

Thank you to those on the Vue Land Discord and elsewhere who inspired these ideas.

Recently I've been adding pages to the Vue Land FAQ rather than putting them here, so if you want more content like this I suggest taking a look at that FAQ.

This collection of components and patterns is intended as a learning aid for those who are new to Vue.

Their primary purpose is to illustrate how core Vue 3 features can be combined to create standard UI components. The techniques used are intended to demonstrate idiomatic Vue usage for these types of scenarios. These examples have very limited functionality and are not intended to be production-ready components.

As with all code, trade-offs have been made and alternative approaches may be better in some cases. The explanation that accompanies each example attempts to discuss some of its shortcomings.

In pretty much all cases, the styling and accessibility of these components is nowhere near the standard that would be expected of a real component library. Most developers choose to use a third-party component library, not least to avoid having to tackle those problems themselves. Some libraries that are compatible with Vue 3 are listed at the bottom of this page.

Introduction

Example components

Patterns

Guides

Exercises

Component libraries

Introduction ​

Example components ​

Patterns ​

Guides ​

Exercises ​

Component libraries ​

Introduction

Example components

Patterns

Guides

Exercises

Component libraries