Forem: Vue Mastery

Top AI Tools for Developers

Vue Mastery team — Wed, 02 Apr 2025 10:48:07 +0000

Written by David Nwadiogbu

As AI and LLMs reshape the tech landscape, many developers wonder about their future role. Rather than viewing AI as a threat, forward-thinking developers are discovering how these tools can enhance their capabilities and secure their position in the industry. From automating routine tasks to solving complex problems more efficiently, AI is becoming an invaluable ally in the developer’s toolkit.

The most successful developers today are those who are learning to leverage AI tools effectively, making themselves more valuable by combining human creativity and expertise with AI-powered productivity. By mastering these tools, developers can focus on higher-level problem-solving and innovation, skills that are increasingly in demand.

In this article, we’ll explore how you can gain a competitive edge by incorporating AI development tools into your workflow, showing you how to use them to boost your productivity and enhance your capabilities as a developer.

How AI Is Enhancing Developer Productivity

The software development landscape has changed rapidly. Before ChatGPT, developers would often turn to Google, YouTube and StackOverflow to help solve complex coding problems. Today, Stack Overflow questions and usage rate are at record lows and steadily declining year after year.

This is because more and more developers are turning to AI to research, write, and debug their code instead of filtering through multiple answers online that may not be relevant to their specific situation.

So, what tools are developers turning to these days to boost their workflows? Let’s examine some of the most popular AI tools and the key features driving this shift in developer behavior.

Top AI Tools for Developers

Cursor : is a powerful code editor built with AI features at its core. It’s essentially a fork of VS Code that incorporates different LLMs to offer intelligent code completion, debugging assistance, and chat-based help without leaving your editor. Its standout features include the ability to explain complex code, generate implementations from comments, and refactor existing code with natural language instructions.
GitHub Copilot : GitHub Copilot integrates with your editor and, like Cursor, lets you select your preferred AI agent. It also includes an extensions feature that integrates external devtools such as Docker, Sentry, or GitBook into the Copilot chat.
Claude : Anthropic has been leading AI development efforts with their advanced AI assistant. In 2024, Claude released artifacts which helped developers quickly prototype and build simple UIs to test their ideas. Earlier in 2025, they improved on that by releasing Claude Code, an agentic coding tool that lives in your terminal, has context on your codebase, and helps you code faster through natural language commands.
v0.dev : v0 is an AI-powered tool developed by Vercel that generates responsive UI components and full webpages from text descriptions. Developers can describe a specific UI element or webpage, and v0.dev will create the corresponding code using Tailwind CSS styling. This significantly accelerates the UI development process, allowing front-end developers to quickly prototype and iterate on designs without having to write CSS from scratch.
Bolt.new : Like v0, Bolt, a product built by Stackblitz, allows developers to create and deploy web applications. Bolt can convert text written in natural language into working web applications that can launch directly from your browser. The platform also has out-of-the-box integration with Supabase, making it ideal for full-stack web development. It also handles deployment, hosting, and scaling automatically, making it ideal for rapid prototyping and MVP development.
ChatGPT: ChatGPT launched publicly in 2022 and paved the way for the numerous AI agents such as Gemini, Perplexity and Deepseek. ChatGPT is a general purpose AI agent that can assist developers with a wide range of tasks such as debugging and explaining complex algorithms. Although ChatGPT wasn’t specifically built for developers, its versatility and knowledge of programming languages and frameworks make it an essential tool in many developers’ workflows.

Now that we’ve discussed these AI tools, let’s explore the different ways you, as a developer, can take advantage of these tools in your development workflow while suggesting the best tools for the job.

Ways to use AI for Development

Prototyping

With AI, developers can now describe functionality in natural language and have working code prototypes generated within seconds that serve as solid starting points. This allows teams to quickly test concepts, gather feedback, and refine their solutions before committing to full-scale development.

Example To demonstrate bolt.new’s prototyping capabilities, I gave it the following prompt: “Please build a recipe search and management application with Nuxt JS as the frontend and Nitro as the backend, connecting to an API that helps users discover, save, and organize recipes.”

Within seconds, a complete Nuxt.js app materialized from scratch. The tool installed all dependencies, created a well-structured pages directory, and even connected to a suitable food API for recipe searching.

Suitable tools for prototyping: Bolt.new, v0.dev

Code generation

Developers tend to spend a lot of time writing repetitive code like initializing a component or creating a new function. Involving AI into your workflow can help save time and reduce the likelihood of syntax errors allowing developers to focus on the more complex and creative aspects of development.

Example

Code generation is particularly useful when building apps with a design system. Rather than manually creating each component, we can leverage AI tools to generate them automatically.

Here’s a sample prompt written in cursor chat:

Cursor went on to first structure the components directory and then create every component on the list provided with full customization support.

Suitable tools for code generation: Cursor, Copilot

Pair programming

Many developers use AI assistants like Github Copilot and ChatGPT as virtual coding partners. These tools help with code completions, alternative implementations and assist in thinking through complex logic in real time. This collaborative approach combines human creativity with AI efficiency, resulting in higher quality code with fewer bugs.

Example

Adding features to your application is a great scenario for pair programming with AI. For instance, with our recipe management app, we can use AI to help us think through solutions for various enhancements: implementing a recipe rating system, improving search functionality to handle multiple keywords, or adding dietary restriction filters like ‘vegetarian’ or ‘gluten-free’.

Here’s an example where we add the dietary filtering feature:

adding a feature to filter recipes based on dietary restrictions

In my prompt (on the left), I asked Bolt to add a feature to filter these recipes based on dietary restrictions, suggesting options like vegetarian and gluten-free. Bolt not only rewrote the home page to include these filters but also added four more common dietary options from its knowledge base: vegan, dairy-free, keto, and paleo.

Suitable tools for pair programming: Cursor, Copilot

Debugging

One of the most significant ways AI is helping boost developer productivity is through improved debugging processes. AI tools can analyze code errors more efficiently than traditional debugging methods, often identifying issues that might take developers hours to locate manually. These tools use pattern recognition to pinpoint bugs by comparing against millions of code samples and can suggest fixes based on best practices and previous solutions.

Example

Some common bugs many Vue developers experience involve component lifecycle problems or template/rendering problems. For example, a common issue occurs when developers attempt to access DOM elements before they’re mounted.

Here’s a User Profile component that demonstrates these common errors:

📄Userprofile.vue

<template>
  <div>
    <h1>User Profile</h1>
    <p>Name: {{ user.name }}</p>
    <p>Email: {{ user.email }}</p>
    <div ref="profileDetails" class="profileDetails">
      <p>User details Loaded!</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const user = ref({});
const profileDetails = ref(null);
const fetchUserData = async () => {
  // Simulate an API call with a delay
  setTimeout(() => {
    user.value = {
      name: "John Doe",
      email: "john.doe@example.com",
    };
  }, 3000);
};
const showDetails = () => {
  console.log(profileDetails.value);
  if (profileDetails.value) {
    profileDetails.value.style.display = 'block';
  }
};
onMounted(() => {
  fetchUserData();
  showDetails(); // Attempt to access DOM element immediately
});
</script>
<style scoped>
.profileDetails {
  display: none;
}
</style>

In our code, the showDetails() function is called in onMounted() right after fetchUserData(). This causes an issue because it attempts to access and modify the DOM element before the user data has finished loading.

A straightforward solution is to share this code with an AI tool like Claude or ChatGPT and ask in plain language for help fixing it.

Let’s see the results when we ask Claude for help.

Prompt:

Claude’s response:

Updated 📄Userprofile.vue

<template>
  <div>
    <h1>User Profile</h1>
    <p v-if="isLoading">Loading user data...</p>
    <template v-else>
      <p>Name: {{ user.name }}</p>
      <p>Email: {{ user.email }}</p>
      <div class="profileDetails">
        <p>User details Loaded!</p>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const user = ref({});
const isLoading = ref(true);
const fetchUserData = async () => {
  isLoading.value = true;

  // Simulate an API call with a delay
  setTimeout(() => {
    user.value = {
      name: "John Doe",
      email: "john.doe@example.com",
    };
    isLoading.value = false;
  }, 3000);
};
onMounted(() => {
  fetchUserData();
});
</script>
<style scoped>
.profileDetails {
  margin-top: 20px;
  padding: 10px;
  background-color: #e6f7ff;
  border-radius: 4px;
}
</style>

Claude not only provides a solution to our code problem but also recommends best practices to improve our code quality making for a great learning opportunity!

Suitable tool: Claude, ChatGPT

Tips for an effective AI Development Workflow

While the tools we’ve discussed can significantly boost your productivity, getting the most out of them requires a strategic approach. Let’s explore some key considerations for developing an effective AI-powered workflow:

Be specific with your prompt: These tools need as much context as possible in order to provide suitable help. It is encouraged that you over-explain. This could mean being specific with the language/framework or coding style you want the AI to use and also what you don’t want. You should never assume that the AI knows what you want. For example, you could specify in your prompt that you want solutions written in Vue 3 using the composition API rather than the options API.
Give your AI a persona : You can start your prompt by asking your assistant to assume the persona of a senior software engineer. This personification makes the AI view problems from a specific expert’s perspective. For example, a “senior Vue developer with 10 years experience” might provide more framework-specific advice than a general prompt. This approach can yield more nuanced technical suggestions and help filter out introductory or irrelevant information.
Use Analogies : In particular scenarios where AI may struggle to understand complex concepts you can help ground them by relating the technical concept to something more familiar. When describing technical requirements, try comparing them to everyday scenarios. For example, instead of saying, “Implement a reactive data binding system,” which is rather abstract and non-specific, you could say, “Create a system that works like a smart thermostat that automatically adjusts when you change the temperature setting”. This is similar to how Vue’s reactivity system updates the DOM when data changes.
Prioritize learning and fact checking : Although AI can save time, it’s crucial to understand the solutions it provides if you want to become a better software developer. Don’t blindly copy-paste generated code and always verify AI-generated output against trusted documentation.

Where to go from here

These AI tools and processes have revolutionized development as we know it. However, like any tool at our disposal, AI has its limitations. It’s helpful to note that as your app grows more and more complex, it becomes harder to prompt the AI effectively. Also, unlike search engines, these tools aren’t free indefinitely. They typically require paid subscriptions as your usage increases.

Tools like Cursor and Copilot have made the development process more enjoyable. What would typically take days to implement has been reduced to mere minutes. I encourage you to continue to view these tools as aids to augment your development process rather than a complete replacement. The true skill to master is knowing when to use these tools and learning how to combine their computational efficiency with your creative problem-solving abilities.

If you’d like to get started with AI development, we have a great course here on Vue mastery to help you get started.

Originally published at https://www.vuemastery.com on April 2, 2025.

Vue Native? Vue + Lynx

Vue Mastery team — Fri, 28 Mar 2025 10:48:54 +0000

Written by David Nwadiogbu

Earlier this month, ByteDance — the company behind TikTok and CapCut — introduced Lynx.js to the world. This could be big news for the Vue community, as it may enable native app development with Vue!

Lynx is a UI framework built on JavaScript that allows developers to build both web and mobile applications that feel native thereby fulfilling the “write once, run anywhere” dream frontend/UI developers have pursued for a long time.

Now, you’ve most likely heard of cross-platform UI frameworks before, so why should this one matter? In this article, we’ll explore Lynx, how it works, and what it means for the future of native mobile apps built with Vue.

History of Mobile development with Vue

Before we get into Lynx and why this is an exciting update for the Vue community to keep an eye on, it’s important to discuss other cross-platform solutions that currently exist in the Vue ecosystem.

1. Nativescript-Vue

NativeScript-Vue allows developers to create native mobile applications using Vue and Nativescript. It provides direct access to native APIs and platform-specific functionalities while maintaining the familiar Vue syntax and development patterns. Nativescript Vue has been around since 2018 and is fully open source.

2. Ionic Vue with Capacitor

Ionic Vue combines the power of the Ionic Framework with Vue.js to create cross-platform applications using web technologies. While not strictly “native”, Ionic Vue applications can access native device features through Capacitor plugins, making it a popular choice for hybrid mobile development and mobile web/pwa solutions.

3. Quasar Framework

Quasar is an open-source Vue.js framework that enables developers to build applications for multiple platforms including web, mobile, and even desktop (through Electron) using a single codebase. It provides a rich set of Vue components and utilities, along with built-in support for PWA, Capacitor, and Electron, making it a versatile choice for cross-platform development.

While these are all great options for building cross-platform apps using Vue, they all come with their many challenges. Native-script uses webpack and doesn’t support modern development tooling like Vite and Rspack by default, Ionic Vue is great for web-like experiences but doesn’t always deliver truly native performance and feel, which is a big deal today. And Quasar, despite its comprehensive feature set, can have a steeper learning curve due to its all-in-one approach.

These challenges have created opportunity for innovation, particularly in achieving a balance between developer experience and native performance. That’s why Lynx, with its fresh perspective on cross-platform development, shows such promise.

Why Lynx for Mobile Vue Apps?

In the official documentation, Lynx is referred to as an alternative web tailored for app development. Let’s look at some key features that make Lynx a compelling option for Vue developers looking to build performant and scalable mobile applications.

1. Lynx is Performance Driven

Lynx is built for performance-first mobile applications and uses a dual-threaded architecture which means that key tasks during development are separated into multiple threads. Namely, the UI/main thread and the Application/Background thread.

Let’s break down these terms:

The UI/main thread : This is primarily responsible for rendering the user interface, and handling synchronous UI tasks like event handling. The UI thread is powered by a custom JS engine called Prim JS which was built and optimized specifically for Lynx. It also uses Rspeedy (a toolchain based on the popular Rust-based bundler Rspack).

The Background thread: This handles your application logic, such as data processing, API calls, and state management.

By separating these two threads, Lynx makes for a more fluid user experience where complex background tasks with heavy computations don’t block the main thread, thus resulting in instant first frame rendering for the end user.

This performance improvement can already be seen powering some parts of the Tiktok ecosystem such as its search, studio, and live.

2. Lynx takes a Web-first Approach

Another core feature of Lynx is that it remains true to its web-first approach. Lynx allows you to bring along your existing web development knowledge of building UIs with markup (HTML-like syntax) and native CSS just as you would for the web.

It takes it a step further by offering direct support for modern CSS features and visual effects like gradients, clipping and masking.

3. Lynx uses Components

Lynx encourages the component way of building UIs as seen in modern JS frameworks like Vue.

This component-based architecture promotes code reusability and maintainability. Developers can create encapsulated, reusable pieces of UI that manage their own state, making it easier to build and scale complex applications.

4. Lynx is framework and platform agnostic

Unlike React Native, Lynx takes a framework-agnostic approach. Lynx’s architecture allows for integration with other popular frontend frameworks like Vue. According to the announcement blog post, frameworks other than React already account for roughly half of Lynx’s total usage.

This design decision opens up possibilities for the Vue community to leverage Lynx’s powerful features while maintaining their preferred development environment.

Lynx is not only framework agnostic but also platform agnostic in terms of host platforms and rendering backends. This flexibility allows Lynx to expand to various platforms, including desktop computers, TVs, and IoT devices.

Vue + Lynx

Lynx launched with support for React (ReactLynx) as their initial frontend framework, and since then there has been a lot of discussions around creating its Vue counterpart.

The most popular of these discussions came from this post on X by Evan You (founder of Vue.js) where he states that the Vue team would be happy to support anyone willing to work on a Vue on Lynx integration.

Xuan Huang, a software engineer on the Lynx team and author of the blog post that announced Lynx also shared the team’s plans to have Vue on Lynx

And in less than 24hrs, Rahul Vashishtha, a member of the Vue community, had started working on a prototype for the project.

Although, for now, it’s just a prototype, we believe the Vue community will really benefit from a VueLynx integration.

One of Vue’s enduring strengths that fueled its rapid adoption — both in its early days and today — is its familiar syntax, mirroring standard HTML and CSS, which significantly eased the learning curve. Lynx extends this advantage, providing a similarly intuitive coding environment that minimizes the learning curve for developers already proficient in Vue.

Although, there’s no official Vue integration yet, you can already start integrating Lynx with your existing Vue app.

Example Vue + Lynx Code

Here is an example of what Vue + Lynx code may look like. This example code is from the Github prototype.

<script>
import lynxLogo from './assets/lynx-logo.png'

export default {
  data() {
    return {
      title: "Hello VueLynx",
      message: "Welcome to Vue 3 in Lynx!",
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>
<template>
  <view>
    <image :src="lynxLogo" className='Logo--lynx' />
    <text className='Title'>Vue</text>
    <text className='Subtitle'>on Lynx</text>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <button @click="increment">Count: {{ count }}</button>
  </view>
</template>

This code takes the usual script (with options API) and template format and the only noticeable change here is in the template where we use Lynx-specific markup such as which is often used for layout capabilities, stylization, and wrapping other elements, the element is used to display text content and the element to display images.

These elements are rendered by Lynx into native UI components for iOS, Android, and web platforms. The relationship between platform-specific views and Lynx elements helps developers understand how to structure their components within this framework

Vue + Lynx will become a reality after the following build steps have been completed:

Make Vue compiler work with rspeedy: This step will compile Vue’s SFC to Lynx dual-thread compatible format splitting the template code to the main thread and script code to background thread, extracting style code to the main thread, injecting @lynx-js/css-extract-webpack-plugin, and applying runtime code like hot module reload

The addition of a new package like vue/runtime-lynx: This step is necessary to rewrite Vue’s DOM operation/runtime code to run on Lynx’s Element API.

Implement compile-time tools to split code into two threads: This requires additional API change to Vue like supporting script main to compile code to main thread script.

What’s Next for Vue + Lynx?
This new JS framework seems to have a lot of promise, especially considering its use and implementation on an app like Tiktok, with over 1 billion users globally.

However, it’s important to note that Lynx is still in its very early stages with no ecosystem, devtools or proper documentation yet. And although it’s said to be “production-ready”, the development team doesn’t recommend that you build your entire app from scratch using the framework, but rather integrate it with already existing apps.

The development of Vue + Lynx represents an exciting opportunity for Vue developers to build truly native mobile applications while leveraging their existing web development skills. As the ecosystem grows, we can expect to see more tools, components, and best practices emerge that will make Vue Lynx a suitable option for cross-platform development. And as always, Vue Mastery will be here to cover the updates and how to add these new skills to your arsenal.

With that said, we encourage you to support this development by contributing to the project if you can.

Originally published at https://www.vuemastery.com on March 28, 2025.

The Build Process of a Vue App: Rollup vs Rolldown

Vue Mastery team — Wed, 04 Dec 2024 11:00:36 +0000

Written by Andy Li

A build tool is essential for modern web development, acting as the engine that transforms your raw code into something browsers can understand and execute efficiently. Without a fast, reliable build tool, you could face frustratingly long startup times when launching your development server, and even simple code changes could take precious seconds to reflect in the browser—disrupting your development flow and productivity.

In this article, we'll talk about all the things that are involved in the build process of a Vue.js app (or a React.js app), including Vite, esbuild, Rollup, and an up-and-coming tool that is being built by Evan You (creatore of Vue.js and Vite.js) called Rolldown.

First, let's start with Vite.

Vite's Current Build Process

Like many other frameworks, Vue.js is using Vite as its build tool.

Vite has two different modes: development and production. They're implemented differently behind the scene.

Vite uses different build strategies for development versus production environments to optimize for their unique needs. During development, the focus is on providing rapid feedback and fast hot module replacement (HMR) for a smooth developer experience. In production, the priority shifts to generating optimized, performant bundles for end users.

Let's explore how Vite handles development builds, where its innovative approach really shines.

Vite in Development Mode

In development mode, build speed is crucial. Rather than bundling code after every change, Vite serves the modified files directly in ESM format (like Vue component's <script> code), allowing for rapid browser updates with minimal processing.

In practice, Vite transforms TypeScript code into browser-compatible JavaScript. While the development build requires fewer steps than production (which we'll explore shortly), converting code quickly is still demanding—especially since changes need to appear in the browser within seconds.

That's why Vite employs esbuild, a high-performance tool written in Go. Since Go compiles directly to machine language (the low-level binary instructions that processors can execute), esbuild delivers exceptional speed - a crucial requirement for modern development server setups.

Vite in Production Mode

While build speed matters in production, it's not the top priority. When creating a production build, you can expect some waiting time regardless of your build tool. Unlike development mode—which only processes one file and its dependencies at a time—production builds must bundle all code from scratch, making instant builds impossible.

Additionally, production builds often require extra steps. For example, you may need to transpile JavaScript code for older browsers—something unnecessary during development when you can simply use a modern browser.

Other crucial production build steps include minification (removing unnecessary characters from code while preserving functionality) and code splitting (breaking code into smaller chunks that load on demand). These processes directly impact the code's runtime performance.

The top priority for a production build is ensuring the code runs efficiently in users' browsers. This takes precedence over build speed since production builds happen occasionally, while users access your site frequently.

Vite chose Rollup for production bundling because of its rich plugin ecosystem, which could be used directly with Vite. Since Vite's plugin architecture mirrors Rollup's, this compatibility helped foster a thriving plugin community and contributed to Vite's widespread adoption.

💡
So to summarize: Vite uses esbuild (optimized for speed) for development builds and Rollup (known for its plugins) for production builds.

While this setup has worked well, a major change is coming: Vite will soon replace both esbuild and Rollup with a new tool called Rolldown.

Before exploring Rolldown, let's examine the challenges with Vite's current setup that led to Rolldown’s invention.

The Problems with Vite

When a build tool or a bundler processes your source code, it first creates an abstract syntax tree (AST) - a tree-like data structure that represents your code's syntax and structure. For example, a function declaration would become a "FunctionDeclaration" node in the AST, with child nodes for its parameters and body.

Using two different tools to parse the same source code is inefficient for code transformation, since a single tool (or set of compatible tools) could reuse the parsed results throughout the process.

While esbuild handles Vite's development mode, it also plays a role in production mode through minification. This means esbuild and Rollup operate sequentially in the build process. For React applications, the process becomes even more complex with the addition of SWC (another build tool written in Rust) alongside esbuild and Rollup.

Using multiple tools in sequence creates inefficiencies, as each tool must parse the code independently and pass results between them. While Rollup's robust plugin ecosystem makes it valuable for production builds, its slower speed compared to esbuild presents a trade-off. The ideal solution would be a tool that combines esbuild's performance with Rollup's extensibility—and this is precisely what Rolldown aims to achieve.

Introduction to Rolldown

Rolldown is a bundler written in Rust—a programming language that, like Go, compiles directly to machine code. This means Rolldown will achieve speeds similar to esbuild.

Since Rolldown shares a similar plugin API with Rollup, most existing Vite-compatible plugins will work seamlessly with the new Rolldown-powered version of Vite.

In essence, you'll be able to use Vite the same way you do now, just with improved performance.

So how much faster are we talking? If speed is the main selling point, it needs to be significantly faster to justify adopting a new tool, right?

According to benchmarks by Evan You, when testing the bundling speed of Vue's core source code, Rolldown's build setup performs over 7x faster than the Rollup-based setup.

This benchmark specifically measures production build time. What about development?

Currently, Vite uses esbuild for development. According to Evan You's benchmarks, Rolldown performs almost twice as fast as esbuild. This improvement is more modest than the Rollup comparison since esbuild is already highly performant.

All of these performance upgrades are powered by a suite of underlying tools in Rolldown. These include a new parser, linter, resolver, transformer and more—all part of the Oxc project (created by the Rolldown team).

Oxc is a set of JavaScript language tools. Although these tools are used in Rolldown, they can also be used individually in a non-Rolldown context. For instance, the Oxc linter is faster than ESLint, so it can be used in your CI workflow to catch code errors quickly before running ESLint.

Oxc tools are generally faster than other similar tools because they were written from scratch with performance as their primary goal.

The Future of Vite

While Rolldown is not yet production-ready, an alpha release of Vite featuring Rolldown integration is expected before the end of 2024. We'll continue reporting on the latest developments in Vue, Vite, and Rolldown in the coming months.

If you'd like to learn more about Vite, check out the course Lightning Fast Builds here on Vue Mastery, taught by Vite's creator Evan You himself.

Originally published at https://www.vuemastery.com on December 4, 2024.

Nuxt 4 features you can use now

Vue Mastery team — Thu, 12 Sep 2024 10:48:39 +0000

Written by Andy Li

Although Nuxt v4 is not out yet, there are some Nuxt 4 features (originally planned for Nuxt 4 release) being released in the latest minor version 3.13. We’re going to explore two of the bigger features from this release, namely, route groups and custom prefetch trigger.

Nuxt Route Groups

As you know, Nuxt.js routing is file-based routing. This means you don’t have to set up routing config, all you have to do is to name your file accordingly and put it in the right folder. The page URLs are mapped to the file names of the page components.

But if you put all the files on the same level like this, it could be difficult to see how they’re related.

Since about and contact are information-related while signup and login are authentication-related, the file structure would be more expressive if they are grouped like this with folders:

But the problem with this is that you might not want the extra prefix on the URL path.

The solution for this problem is called Route Groups. With the above example, the folders just have to be named with parentheses:

Now all these pages can still be accessed the same way. Basically, Nuxt just ignores the folders named with parentheses.

This is just an example. You can imagine if you have more pages in your projects, this more expressive way of structuring your files is valuable.

Custom Prefetch Triggers

Prefetching refers to loading the next page while the user is visiting the current page, so when the user actually clicks the next page, it will be loaded faster.

Specifically in Nuxt, only the page component code will be prefetched. This means if your component is fetching data from an API, that data will not be prefetched.

In Nuxt.js, prefetching is enabled by default if you use :

<NuxtLink href="/signup">signup</NuxtLink>

Here, the signup page will now be prefetched when this link is visible on screen the first time.

This means if multiple links to different pages appear on the screen, all of these pages will be prefetched — even if most of them won’t be visited.

This is very wasteful. So, when to trigger the prefetch becomes the key.

Nuxt now offers two triggers for prefetching:

The visibility trigger is the default configuration.

You can set the interaction trigger like this:

<NuxtLink href="/signup" prefetch-on="interaction">signup</NuxtLink>

While it’s technically possible to use both triggers on the same link, this offers little practical benefit. Any link that can be hovered is already visible on the screen — otherwise, you wouldn’t be able to hover over it in the first place.

In practice, you’ll likely have some links you want to prefetch by visibility and others by interaction. But as an option, you can set one trigger for the entire app in the config file:

📄 /nuxt.config.ts

export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLinks: {
        prefetchOn: {
          visibility: false,
          interaction: true
        }
      }
    }
  }
})

Here, we’re setting the global default to be prefetched by interaction. Note that visibility is set to true by default, so we had to set it back to false to disable it.

Once again, visibility is the default, so you don’t need to add anything to the config file if you just want to prefetch by visibility.

Other Features

We’ve only covered two of the more important features from Nuxt v3.13. You can find the full list of features in the official Nuxt Blog.

Originally published at https://www.vuemastery.com on September 12, 2024.

Dynamic Layouts with Vue jsx: A Guide to Flexible and Maintainable UIs

Vue Mastery team — Thu, 05 Sep 2024 10:48:54 +0000

Written by Dubem Izuorah

Have you ever spent hours tweaking the same web layout across multiple pages or struggled to make your UI adapt to changing data without breaking? These common challenges can slow down your development process and lead to frustrating, error-prone code.

Introducing Dynamic Layouts

By creating layouts at runtime based on data, you can build flexible, maintainable, and scalable applications that adapt effortlessly to changes. This approach,called Dynamic layouts , eliminates the need for repetitive HTML edits, allowing your UI to stay in sync with your data seamlessly.

In this article, we’ll explore how dynamic layouts can transform your development workflow and elevate your projects.

Why Use Dynamic Layouts?

Dynamic layouts are particularly beneficial when content frequently changes or when displaying responsive UIs that pull from APIs, other data sources, or respond to user interactions.

Benefits of Dynamic Layouts

Flexibility : Easily adjust UI components based on underlying data without modifying HTML or template code.
Maintainability : Adhere to the DRY (Don’t Repeat Yourself) principle, reducing repetitive code and simplifying maintenance.
Scalability : Manage your UI programmatically, allowing for easy updates, additions, or removals of items.
Error Reduction : Minimize manual HTML edits, decreasing the likelihood of errors.
Enhanced Responsiveness : Dynamically show or hide UI elements based on conditions, making the interface more responsive to user interactions or data changes.

Practical Scenarios for Dynamic Layouts

Dynamic layouts shine in various real-world scenarios, such as:

Forms : For form-heavy apps, it might be best to abstract you form fields into a computed property paired with some validation library. In the layout you can loop through your property to conditionally show form fields and properties like labels, class names, validation messages etc.
Blog Post Lists : Manage and update each post card’s content dynamically based on its data.
Content Blocks : Organize and display diverse content elements efficiently.
User Lists, Navigation Items, Dashboard Panels : Ensure consistent styling and easy adjustments without manual HTML updates.
Website Sections : Dynamically generate sections to maintain a cohesive and easily adjustable layout.

By generating these elements dynamically, you ensure consistency, simplify adjustments, and maintain a clean codebase.

Building a Dynamic Navbar

Let’s gain hands-on experience with dynamic layouts by building a dynamic navbar. For reference, here is the Github repo for this tutorial.

Requirements

Imagine you’re developing a payment platform and need to create a clean, extensible navbar component as shown in the screenshots below:

Navbar when a user is logged in

Navbar with no user logged in

Setting up the Environment

To focus on dynamic layouts, we won’t delve into environment setup details here. You can find the complete code samples in our GitHub repository.

Technologies Used:

Nuxt — Vue framework
Nuxt TailwindCSS — Styling
Phosphor-icons Vue — Icon components

Static Approach

A static Navbar component involves numerous HTML tags and properties, making the code hard to read and maintain.

Updating such a layout is error-prone, especially with repetitive elements sharing the same properties or styling.

While a static approach is useful for drafting layouts, dynamic layouts are preferable for maintainability and collaboration.

Example of a Static Navbar:

📄 App.vue

<template>
  <nav class="w-screen border-b py-4">
    <div class="container mx-auto flex items-center gap-10">
      <!-- Logo -->
      <NuxtLink href="/" class="flex items-center">
        <img src="https://logo.clearbit.com/google.com" class="w-10 h-10 object-contain" />
      </NuxtLink>

<!-- Dashboard or Home Link -->
      <NuxtLink v-if="user" href="/dashboard" class="flex items-center">
        <PhGauge size="24" />
        <span class="ml-2">Dashboard</span>
      </NuxtLink>
      <NuxtLink v-else href="/home" class="flex items-center">
        <PhHouseSimple size="24" />
        <span class="ml-2">Home</span>
      </NuxtLink>
      <!-- Spacer -->
      <div class="ml-auto"></div>
      <!-- Add Funds Button (Visible only when user is authenticated) -->
      <button v-if="user" class="flex items-center">
        <span class="text-white bg-green-500 px-4 py-2 rounded-lg">Add Funds</span>
      </button>
      <!-- User Avatar (Visible only when user is authenticated) -->
      <div v-if="user" class="flex items-center">
        <Avatar src="https://randomuser.me/api/portraits/men/40.jpg" />
        <span class="ml-2">Dubem Izuorah</span>
      </div>
      <!-- Auth Button -->
      <button class="flex items-center" @click="user = !user">
        <span>{{ user ? 'Logout' : 'Login' }}</span>
      </button>
    </div>
  </nav>
  <main class="h-64 bg-gray-100 flex justify-center pt-10 text-xl">App Here</main>
</template>
<script setup lang="jsx">
import { ref } from "vue";
import { NuxtLink, Avatar } from "#components";
import { PhGauge, PhHouseSimple } from "@phosphor-icons/vue";
// Simulate user authentication status
const user = ref(true);
</script>

While static layouts may suffice for simple interfaces, dynamic layouts offer superior maintainability and scalability.

Dynamic Approach

To create a dynamic navbar, we’ll want to define our layout data and generate UI components based on this data.

Defining the Data

Instead of hard-coding each menu item, we can create a list of menu items in our script with properties like title, image, to, icon, render, and class. This allows us to dynamically generate the navbar based on the data.

📄 App.vue

<script setup lang="jsx">
// Import necessary components
import { ref, computed } from "vue";
import { NuxtLink, Avatar } from "#components";
import { PhGauge, PhHouseSimple } from "@phosphor-icons/vue";

// Simulate user authentication status
const user = ref(true);
// Define menu items
const items = computed(() => [
  {
    key: "logo",
    image: "https://logo.clearbit.com/google.com",
    href: "/"
  },
  {
    icon: user.value ? PhGauge : PhHouseSimple,
    key: "dashboard",
    title: user.value ? "Dashboard" : "Home",
    to: user.value ? "/dashboard" : "/home",
  },
  {
    key: "spacer",
    class: "ml-auto",
  },
  {
    key: "add-funds",
    render: () => <span class="text-white bg-green-500 px-4 py-2 rounded-lg">Add Funds</span>
  },
  {
    key: "user",
    render: () => <Avatar src="https://randomuser.me/api/portraits/men/40.jpg" />,
    title: "Dubem Izuorah",
    hide: !user.value
  },
  {
    key: "auth",
    title: user.value ? "Logout" : "Login",
    onClick: () => user.value = !user.value
  },
]);
// Filter out hidden items
const menuItems = computed(() => items.value.filter(item => !item.hide));
</script>

Key Takeaways:

Reactive Layout : Use computed properties to update the layout based on reactive data like user.
Conditional Rendering : Apply different values using ternary operators based on state.
JSX Integration : Utilize JSX to include HTML elements and Vue components directly within property values.
Dynamic Properties : Use properties like hide to conditionally display items.
Event Handling : Store functions or event handlers (e.g., onClick) within data objects.
Modular Data Management : Move layout data to Vue composables or external JSON files for better organization.

Defining the Avatar Component

Create an Avatar component used within the dynamic navbar.

📄 Avatar.vue

<template>
  <div class="rounded-full w-10 h-10 bg-gray-100 overflow-hidden">
    <img class="w-full h-full object-cover" :src="src" />
  </div>
</template>

<script setup>
const props = defineProps({
  src: {
    type: String,
    required: true,
  },
})
</script>

This component creates a reusable avatar element that can display different images based on the ‘src’ prop passed to it. This makes it flexible and easy to use throughout your application for displaying user avatars or profile pictures.

Building the Layout

Use the defined data to render the navbar dynamically.

📄 App.vue

<template>
  <nav class="w-screen border-b py-4">
    <div class="container mx-auto flex items-center gap-10">
      <component
        v-for="item in menuItems"
        :key="item.key"
        :is="item.to ? NuxtLink : 'button'"
        v-bind="item"
        @click="item.onClick"
        class="flex items-center"
      >
        <img v-if="item.image" :src="item.image" class="w-10 h-10 object-contain" />
        <component v-if="item.render" :is="item.render" />
        <component v-if="item.icon" :is="item.icon" :size="24" />
        <span v-if="item.title" class="ml-2">{{ item.title }}</span>
      </component>
    </div>
  </nav>
  <main class="h-64 bg-gray-100 flex justify-center pt-10 text-xl">App Here</main>
</template>

<script setup lang="jsx">
// The script remains the same as above
</script>

Key Takeaways:

v-bind Usage : Attach multiple properties to elements simultaneously, keeping the template clean.
Unique Keys : Use the key attribute to prevent rendering issues during dynamic updates.
Dynamic Components : Utilize Vue’s dynamic components to render different elements based on data.
Event Binding : Attach events like @click dynamically based on data properties.
Component Modularity : Break down components further and import them as needed for better scalability.

By following this approach, you create a dynamic and flexible horizontal navbar that’s easy to extend or modify. This method not only saves time and effort but also ensures your codebase remains clean and maintainable.

Enhancing Flexibility with Vue JSX

Vue JSX allows developers to write Vue components using a syntax similar to React’s JSX, offering greater flexibility and expressiveness. Unlike Vue’s typical template-based approach, JSX allows you to embed HTML-like elements directly inside JavaScript logic. This is particularly useful in dynamic layouts where you need to generate or manipulate UI elements based on dynamic data.

Instead of separating logic and markup across different sections of the component (template and script), JSX enables you to manage both in one cohesive block of code.

In our solution, JSX helps simplify how we dynamically render components like the Avatar or conditional elements such as the “Add Funds” button.

For example, instead of hardcoding these elements into a template, we can dynamically generate them using a render function in JavaScript.

This allows us to update components like the navbar with real-time data, such as user authentication status, without duplicating code or scattering logic across the template and script sections.

By using JSX, we maintain cleaner, more maintainable code, while still leveraging Vue’s reactivity and flexibility.

Next Steps

Now that we understand dynamic layouts, it’s time to put your knowledge into practice. Here are some suggested next steps:

Refactor Existing Projects : Identify and refactor parts of your current projects where dynamic layouts can enhance efficiency and readability, especially in areas with repetitive HTML or component logic.
Integrate with CMS : Experiment with integrating a CMS or other systems with your dynamic layouts to create even more dynamic and responsive user interfaces.
Collaborate with Your Team : Share your insights on dynamic layouts with your team. Discuss how you can collectively leverage dynamic layouts in your projects to boost productivity and foster a culture of continuous improvement.
Explore Advanced Use Cases : Continue exploring more advanced applications of dynamic layouts. Mastery comes from consistent practice and exploration.

By taking these steps, you’re well on your way to becoming proficient in dynamic layouts. For an even smoother experience in creating dynamic interfaces, check out our course on Easy Interfaces with Vuetify, the popular component library for Vue.js developers.

By embracing dynamic layouts, you can streamline your development process, enhance your application’s flexibility, and maintain a cleaner, more maintainable codebase. Start integrating dynamic layouts into your projects today and experience the transformative impact on your workflow and application quality.

Originally published at https://www.vuemastery.com on September 5, 2024.

Minimalist Nuxt Authentication

Vue Mastery team — Fri, 12 Jul 2024 10:48:53 +0000

Written by Timi Omoyeni

Verifying user identity is crucial for protecting sensitive data. Authentication ensures users are who they claim to be, providing a vital defense against unauthorized access.

The Nuxt team understands the importance of Authentication which is why with Nuxt 2, we had the Auth Module. The Auth module provided zero-boilerplate authentication for Nuxt 2 using a configurable authentication scheme (cookie, local, etc) or any of its supported providers(Auth0, Facebook, etc).

Since the introduction of Nuxt 3, there have been 3rd party plugins like the Sidebase Nuxt Auth, Authjs Nuxt based on Auth.js that have made the authentication process easier for developers.

In this article, we will look into the Nuxt Auth Utils module, its features, and how to get started. The complete code for this article can be found on GitHub.

Introduction

Nuxt Auth utils is a minimalist authentication module for Nuxt exposing Vue composables and server utils. While there are other modules and plugins with more features for authentication, Nuxt Auth Utils is great for implementing authentication on your own as it provides an opportunity to learn.

With Nuxt Auth Utils, you automatically get access to data like loggedIn, user, and session, and the clear method available in the useUserSession() composable. These properties return updated information about the current user’s session and can be accessed anywhere in your app.

This is similar to how we use the $auth property to access user information in Nuxt 2, the difference now is that Nuxt 3 takes advantage of Vue Composables introduced in Vue 3.

Creating a personalized profile header with the current user’s name can be done like this:

<template>
  <header>
    <template v-if="loggedIn">
      <p>
        Hi
        {{ user?.username }}
      </p>
      <button @click="logout">Log out</button>
    </template>
    <p v-else>Guest</p>
  </header>
</template>

<script setup>
const { loggedIn, user, clear } = useUserSession();

const logout = () => {
  clear();
};
</script>

Using server utils, Nuxt auth utils automatically imports some helpers into the server/ directory that helps with session management. They include:

setUserSession: This function accepts two arguments, event, and an object. Inside this object, we are expected to pass a user object along with any extra information we want to save with the session.
replaceUserSession: This function behaves similarly to the setUserSession but as the name implies, it replaces the current session data with the new user data that is passed.
getUserSession: This function returns information about the current user session. This information is the same as the object passed to setUserSession and replaceUserSession.
clearUserSession: This function is used to clear a user’s session.
requireUserSession: This function works like a middleware that checks for a user session and returns it if present otherwise it returns a 401 error.

await setUserSession(event, {
  user: {
    // ... user data
  },
  loggedInAt: new Date()
  // Any extra fields
})

// Replace a user session. Same behaviour as setUserSession, except it does not merge data with existing data
await replaceUserSession(event, data)

// Get the current user session
const session = await getUserSession(event)

// Clear the current user session
await clearUserSession(event)

// Require a user session (send back 401 if no `user` key in session)
const session = await requireUserSession(event)

Note that this module requires the Nuxt server to be running as it uses the server API route hence, it cannot run with nuxt generate.

Nuxt Auth Utils Features

Hybrid Rendering

Hybrid rendering allows different caching rules per route using Route Rules and decides how the server should respond to a new request on a given URL.

When used with Nuxt Auth Utils, it does not fetch the user session during prerendering. It waits until after hydration and fetches it on the client side. This is because user sessions are stored in a secure cookie that cannot be accessed during prerendering.

As a solution to this, we use the <[AuthState](https://github.com/Atinux/nuxt-auth-utils/blob/c8b02d0b84a53ab4dd41f1808d9365d1c52c8366/src/runtime/app/components/AuthState.vue)> component to safely display auth-related data without worrying about the rendering mode.

<template>
  <header>
    <AuthState v-slot="{ loggedIn, clear }">
      <button v-if="loggedIn" @click="clear">Logout</button>
      <NuxtLink v-else to="/login">Login</NuxtLink>
    </AuthState>
  </header>
</template>

This component also offers support for a loading state that comes in handy while the user session is being fetched on the client side.

OAuth Providers

Other than the native email/username and password authentication flow, Nuxt Auth Utils also offers support for authentication with third-party services using OAuth. It also comes with event handlers that are exposed from the oauth global variable that is available in your server routes (server/ directory). Some of the supported providers include:

Google
GitHub
Auth0
Facebook
LinkedIn.

Extendable with Hooks

This module also provides hooks that let you perform extra actions when a session is fetched or updated. This can be achieved by using sessionHook.hook method, which accepts a hook string (’fetch’ or ‘clear’).

export default defineNitroPlugin(() => {
  // Called when the session is fetched during SSR for the Vue composable (/api/_auth/session)
  // Or when we call useUserSession().fetch()
  sessionHooks.hook('fetch', async (session, event) => {
    // extend User Session by calling your database
    // or
    // throw createError({ ... }) if session is invalid for example
  })

  // Called when we call useServerSession().clear() or clearUserSession(event)
  sessionHooks.hook('clear', async (session, event) => {
    // Log that user logged out
  })
})

This method is available anywhere in the server/ directory.

Getting Started with Nuxt Auth Utils

To fully understand how Nuxt Auth Utils work, we will build a simple Nuxt app that uses an SQL server.

Setup

First, we create our Nuxt project using the npx command;

npx nuxi@latest init nuxt-auth-demo

To use the auth utils in your Nuxt project, you need to install it using the following command:

npx nuxi@latest module add auth-utils

Once this installation is completed, our nuxt.config.ts file gets updated with the following lines of code:

📄 nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["nuxt-auth-utils"] // added automatically
})

Here, nuxt-auth-utils is added to the modules array so our application can start up our application with the configuration for the module. The next thing we need to do is to add NUXT_SESSION_PASSWORD to our .env file. This step is optional in development as the plugin automatically generates one if it isn’t set.

Building The Server

Now that the configuration is complete, we will build our server. For this, we will use a simple SQLite server that requires username and password for both signup and login.

The first thing we need to do is create a server/ directory in the root folder of our project. This directory will contain folders for both our database configuration and authentication files.

Here’s what our project structure will look like:

nuxt-auth-demo/
│
├── server/
│   ├── api/
│   │   ├── auth/
│   │   │   ├── signup.js
│   │   │   ├── login.js
│   ├── db/
│   │   ├── database.js
│
├── other-project-files

Before we can set up our database, we need to install the following packages in our project:

sqlite: This is the SQLite library for Node.js, which allows us to interact with SQLite databases.
sqlite3: This is the SQLite3 database driver for Node.js, used by the sqlite library.
bcrypt: This is a library to help us hash passwords, ensuring that user passwords are stored securely.

You can install these packages using the following command:

yarn add sqlite sqlite3 bcrypt

After installing, we create a database.js file and add the following:

📂 server/db/database.js

import { open } from "sqlite";
import sqlite3 from "sqlite3";

export const initDb = async () => {
  try {
    const db = await open({
      filename: "./database.sqlite",
      driver: sqlite3.Database,
    });

    await db.exec(`
      CREATE TABLE IF NOT EXISTS users (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        username TEXT UNIQUE,
        password TEXT
      )
    `);

    console.log("Database initialized successfully");
    return db;
  } catch (error) {
    console.error("Failed to initialize database:", error);
    throw error;
  }
};

This file establishes and initializes the SQLite database, makes sure the required tables are there, and offers a connection method.

Firstly, we import open function which is used to open and connect to the db, and sqlite3, which is the SQLite database driver. We export initDb function, which will open and connect to the db.

In this function, we call the open function and pass an object:

{
    filename: "./database.sqlite",
    driver: sqlite3.Database,
}

This object contains filename, which accepts the file path to our database file.

This file is automatically created the first time initDb is run and it uses the file path passed to this field to create this value. This means “./database.sqlite” will be created in the root folder of our project while "./server/db/database.sqlite" will be created inside the db/ directory.

We also have a driver property that specifies which database to use (sqlite3.database).

The open function resolves a promise, so we wrap it in a try/catch block. If the connection is successful, we execute an SQL command db.exec, which creates a users table if it does not exist in the db with each row having columns for a unique id, and username, and password.

Still, if it fails, we throw an error that says Failed to initialize database with the specific error.

Finally, we export this initDb function to reference our db from our auth files.

After setting up our database, we will create an api folder inside the server/ directory. Within this folder, we will create an auth folder, which will contain both the signup.js and login.js files.

Let us start with signup.js:

📂 server/api/auth/signup.js

import bcrypt from "bcrypt";
import { initDb } from "../../db/database";

export default defineEventHandler(async (event) => {
  try {
    const body = await readBody(event); // Retrieve request body
    if (!body) {
      return { error: "Request body is empty or undefined" };
    }

    const { username, password } = body;

    if (!username || !password) {
      return { error: "Username and password are required" };
    }

    const db = await initDb(); // Initialize database connection
    const hashedPassword = await bcrypt.hash(password, 10); // Hash password

    try {
      // Insert user data into database
      await db.run("INSERT INTO users (username, password) VALUES (?, ?)", [
        username,
        hashedPassword,
      ]);
      const userData = { username: user.username };
      await setUserSession(event, {
        user: userData,
        loggedInAt: new Date(),
      });
      return { success: true, user };
    } catch (error) {
      console.error("Error creating user:", error);
      return createError({
        statusCode: 409,
        statusMessage: "Username already exists",
      });
    }
  } catch (error) {
    console.error("Error handling signup request:", error);
    return createError({
      statusCode: 400,
      statusMessage: "Failed to process request",
    });
  }
});

Here, we use the defineEventHandler function to set up our signup API so Nuxt recognizes our API and makes it available under /api/auth/signup. In this function, we can access the body of this request (i.e username and password) by passing event to readBody.

This function resolves a promise, so we must handle it within a try/catch block to properly manage potential errors.

On success, we get the request's body and destructure it to extract username and password. If there’s an error, we use createError for error handling. This ensures that any issues during the process are captured and reported appropriately.

Before we can proceed with storing this user data in the database, we need to hash the user’s password. We use the bcrypt.hash method, which accepts two arguments: password and salt. The password is the user’s plain text password, and 10 is the salt length, determining the complexity of the hashing process.

If the provided data is valid, the signup process succeeds, and we fetch the newly created user information using db.get. This information is then passed to setUserSession with a loggedInAt property to store the time.

At this point, our signup endpoint is ready and we can test it using either the Nuxt DevTools or by creating a signup.vue file in the pages/ directory.

When building out APIs in the server/ directory, Nuxt DevTools can automatically read the directory for valid APIs to display for easy testing. This is why we can see our api folder listed here but not the db folder. Using this approach, we can quickly test our API to ensure it works.

In our app, we’re going to create a form component, AuthForm.vue in our components/ directory which will look like this:

📂 components/AuthForm.vue

<template>
  <form @submit.prevent="submit" class="auth__form">
    <h1 class="auth__heading">{{title}}</h1>
    <div class="auth__div">
      <label for="username" class="form__label">Username</label>
      <input
        type="text"
        name="username"
        id="username"
        required
        v-model="username"
        class="form__input"
      />
    </div>
    <div class="auth__div">
      <label for="password" class="form__label">Password</label>
      <input
        type="password"
        name="password"
        id="password"
        required
        v-model="password"
        class="form__input"
      />
    </div>
    <button class="form__button" :disabled="loading">
      <template v-if="loading">please wait...</template>
      <template v-else>{{title}}</template>
    </button>
  </form>
</template>

<script setup>
const username = ref("");
const password = ref("");

defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    required: true,
  },
});
const emit = defineEmits(["submit"]);

const submit = () => {
  const payload = {
    username: username.value,
    password: password.value,
  };
  emit("submit", payload);
};
</script>

<style lang="scss" scoped>
.auth {
  &__form {
    border: 1px solid #e0e0e0;
    padding: 20px;
    border-radius: 8px;
  }
  &__div {
    margin-bottom: 30px;
  }
}

.form {
  &__label {
    display: block;
    margin-bottom: 4px;
    max-width: 300px;
    box-sizing: border-box;
  }
  &__input {
    height: 50px;
    width: calc(100% - 20px);
    padding-left: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
  }
  &__button {
    height: 50px;
    border-radius: 8px;
    background-color: #008065;
    color: #fff;
    border: 0;
    width: 100%;
    cursor: pointer;
  }
}
</style>

In this component, we create a form that accepts username and password. When the form is submitted, the submit function emits the value obtained from the form to the parent component using the submit event.

We also define props using the defineProps method: title, and loading. Since we plan to use this form for signup and login, we use the title prop to make the form heading dynamic. We use the loading prop to indicate a network request is in progress and to disable the button during this time.

In pages/ directory, we create signup.vue with the following code:

📂 pages/signup.vue

<template>
  <div class="signup">
    <AuthForm :loading="loading" @submit="register" title="Sign up" />
    <p class="signup__text">
      Already registered?
      <nuxt-link :to="{ name: 'login' }">Log in</nuxt-link>
    </p>
  </div>
</template>

<script setup>
import AuthForm from "@/components/AuthForm.vue";

const loading = ref(false);
const router = useRouter();

const register = async (body) => {
  loading.value = true;
  try {
    await $fetch("/api/auth/signup", {
      method: "POST",
      body,
    });
    router.push({name: 'Dashboard'})
    loading.value = false;
  } catch (error) {
    alert(error.statusMessage || error);
    loading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.signup {
  width: 100%;
  padding: 50px;
  max-width: 400px;
  margin: auto;
  color: #333333;
  &__text {
    text-align: right;
    & a {
      text-decoration: underline;
      color: inherit;
    }
  }
}
</style>

Here, we import AuthForm.vue, provide the necessary props, and assign the register function to handle the submit event. When this form is submitted, we call our signup method using $fetch, attaching the request body and method to the request.

On success, we redirect the user to the /dashboard route, which can contain information like username, ID, login time, etc.

Our dashboard.vue file looks like this:

📂 pages/dashboard.vue

<template>
  <header>
    <template v-if="loggedIn">
      <p>
        Hi
        {{ user?.username }}
      </p>
      <p @click="logout">Log out</p>
    </template>
    <p v-else>Hi Guest, <nuxt-link :to="{ name: 'login' }">Login</nuxt-link></p>
  </header>
</template>

<script setup>
const { loggedIn, user, clear, fetch } = useUserSession();

fetch()
const logout = () => {
  clear();
};
</script>

<style lang="scss" scoped></style>

Here, we use the Nuxt Auth Utils composable to fetch log-in status (loggedIn), user information (user), the fetch function that fetches the updated user information, and logout function (clear). With this data available, we can display the username of the currently authenticated user.

Our login.js API looks like this:

📂 server/api/auth/login.js

import bcrypt from "bcrypt";
import { initDb } from "../../db/database";

export default defineEventHandler(async (event) => {
  try {
    const body = await readBody(event); // Retrieve request body
    if (!body) {
      console.error("Request body is empty or undefined");
      return createError({
        statusCode: 400,
        statusMessage: "Request body is empty or undefined",
      });
    }

    const { username, password } = body;

    if (!username || !password) {
      console.error("Username or password missing");
      return createError({
        statusCode: 400,
        statusMessage: "Username and password are required",
      });
    }

    const db = await initDb(); // Initialize database connection
    const user = await db.get("SELECT * FROM users WHERE username = ?", [
      username,
    ]);

    // For security reasons, do not specify if username or password is incorrect
    if (!user || !(await bcrypt.compare(password, user.password))) {
      console.error(`Invalid username or password for user: ${username}`);
      return createError({
        statusCode: 401,
        statusMessage: "Invalid username or password",
      });
    } else {
      const userData = { username: user.username };
      await setUserSession(event, {
        user: userData,
        loggedInAt: new Date(),
      });
    }

    return { success: true, user };
  } catch (error) {
    console.error("Error handling login request:", error);
    return createError({
      statusCode: 500,
      statusMessage: "Failed to process request",
    });
  }
});

This file is similar to the signup.js file as we use defineEventHandler to declare our login function. After verifying the body of the login request contains both username and password, we initialize a connection to the database using our imported initDb function.

Upon a successful connection, we query the database for a matching username using the .get("SELECT * FROM users WHERE username = ?",[username]) where username is the provided username in the body of the request. We also compare the provided password with the password in the database (if the user exists) using the bcrypt.compare method and return an error if the passwords do not match.

If the user exists in the database, we set the user session by calling setUserSession and also pass user and loggedInAt to our session data.

Finally, we use createError to handle all the possible errors that may occur from this request and attach the appropriate status code and explanatory messages.

To test our login function, we create a login.vue in the pages/ directory.

📂 pages/login.vue

<template>
  <div class="login">
    <AuthForm :loading="loading" @submit="login" title="Sign in" />
    <p class="login__text">
      New here?
      <nuxt-link :to="{ name: 'signup' }">Sign up</nuxt-link>
    </p>
  </div>
</template>

<script setup>
import AuthForm from "@/components/AuthForm.vue";

const loading = ref(false);
const router = useRouter();

const login = async (body) => {
  loading.value = true;
  try {
    await $fetch("/api/auth/login", {
      method: "POST",
      body,
    });
    router.push({name: 'Dashboard'})
    loading.value = false;
  } catch (error) {
    console.log({error});
    alert(error.statusMessage ||error);
    loading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  padding: 50px;
  max-width: 400px;
  margin: auto;
  color: #333333;
  &__text {
    text-align: right;
    & a {
      text-decoration: underline;
      color: inherit;
    }
  }
}
</style>

In this file, we use the AuthForm component to collect the user details and pass them to the login function. In this function, we call our login endpoint /api/auth/login and pass the payload which we get from the AuthForm component.

On a successful login, we redirect the user to the /dashboard page by calling router.push({name: 'Dashboard'}) where Dashboard is the route name which we show the username and a log out button.

In this tutorial, we set up a basic session and user data implementation. However, our implementation can be further extended to use a stateful setup where a random session token is generated and stored in the user table, which can be used to verify a session’s validity. To see how this is done, be on the lookout for the Nuxt Authentication course.

Wrapping up

In this article, we have covered creating a server in Nuxt with SQL and how to use Nuxt Auth Utils to manage user sessions. We explored the features of Nuxt Auth Utils and highlighted their usefulness.

With Nuxt Auth Utils, managing user sessions becomes seamless, secure, and efficient, ensuring your application provides a reliable and secure authentication experience and CSRF protection. To further your learning, keep an eye out for our upcoming Nuxt Authentication course here on Vue Mastery!

Originally published at https://www.vuemastery.com on July 12, 2024.

Upgrading to Nuxt 4

Vue Mastery team — Mon, 24 Jun 2024 10:48:49 +0000

Nuxt v4 is coming out soon. This version of Nuxt is predominantly about performance upgrades and API consistency. Although there are no ground-breaking user-facing changes, we'll still go through them one by one in this tutorial to make sure your Nuxt v3 app can still run on v4.

At the time of this writing, nuxt v4 has not been released yet. But you can still try it out using v3.12.

First, upgrade the Nuxt version in your app:

npx nuxi@latest upgrade

This will upgrade your project to the latest Nuxt version.

With v3.12, you have to set the compatibilityVersion option to 4:
nuxt.config.ts

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4
  },
  ...
})

Next, let's talk about the changes you should be expecting in Nuxt 4.

Nuxt 4 Folder Structure

The most obvious change in Nuxt v4 is the new folder structure:

Now you have to put the client-side code in the app folder instead of the root folder. But the server folder can stay where it is.

This change would require you to move some of your files around, but this change is optional. If you don't do it, Nuxt can still detect it and use the old way.

This is a performance upgrade because the file watchers don't have to watch all the files in the root folder. Secondly, this is also a DX upgrade because IDEs can provide better support with client code and server code separated in their own folders. For instance, server code is usually running in a Node.js environment, and the client code is running in a browser environment. Separating the two different types of code means that the IDE can be configured for each folder separately.

useAsyncData & useFetch

There are a handful of miscellaneous changes with useAsyncData and useFetch that you need to be mindful of.

First of all, the data fetched using useAsyncData and useFetch will be cached and made available to other pre-rendered pages without refetching.

This data-sharing feature has been experimental, but in Nuxt 4, it’s a real feature.

The data ref that gets returned will now be a shallow ref:

(Shallow ref will only be reactive if the .value itself is reassigned.)

Both of these composables also return a refresh function that you can call to refetch the data. And this refresh function can be configured with a dedupe option:

Instead of using true and false, now you have to use cancel or defer to set the dedupe option. Cancel means cancelling the duplicated request (the new one), and defer means wait for the existing one to finish before executing the new one.

When useAsyncData is configured with a default value, refreshNuxtData will reset the data back to that default value:

(Previously, this would reset the comments to undefined. And since useFetch couldn’t be configured with a default value, this doesn’t affect useFetch.)

On a related note, if you didn’t set a default value, it will now default to undefined. This applies to both useAsyncData and useFetch:

(Previously, it defaults to null.)

Other Nuxt 4 Changes

Finally, there are changes that don't affect most projects so you probably don't need to worry about them. But I include them here for completeness:

Now Nuxt scans the index.js files in the child folders inside /middleware.
Now the builder:watch hook emits an absolute path, instead of a relative path.
Some template-specific code generation utils have been removed, and .ejs file compilation is removed, too.
Some experimental features have also been removed, so their corresponding config options have been removed too: treeshakeClientOnly, configSchema, polyfillVueUseHead, respectNoSSRHeader.

Where to go next?

From a framework user standpoint, Nuxt 3 and Nuxt 4 are basically the same Nuxt. You can think of Nuxt 4 as a more fleshed out version of Nuxt 3. This is great because you can still use most of the Nuxt 3 learning materials currently available.

If you enjoy visually illustrated content like this tutorial, you should check out the Real World Nuxt course and the Nuxt API Routes course here on VueMastery.com.
Originally published at https://www.vuemastery.com on June 24, 2024.

Nuxt’s Server-Only Components should be on your radar

Vue Mastery team — Mon, 25 Mar 2024 10:48:37 +0000

Written by Andy Li

Have you heard of React Server Component? It’s a newer type of component rendering that has been making a wave in the React community in the past year.

The significant aspect of React Server Component is its server-only rendering. This means it doesn’t necessitate client-side rendering, eliminating the need for hydration. Hydration refers to the process of rendering JavaScript components on the client side. As it involves loading and executing code, hydration can significantly impact the first-load performance of a Server Side Rendered (SSR) webpage.

React Server Component is all about reducing the need for hydration.

Nuxt.js now has something similar called Server-Only Component (or just Server Component ). As of Nuxt v3.11, it’s still an experimental feature. But we can try it out and see what it’s all about.

Server-Only Rendering

As it sounds, “ Server-only Component ” means it only runs and renders on the server, never on the client. It will only send the rendered HTML to the client. The source code of that component is not needed on the client side.

To use this feature, there’s no need to change your code. Just add the extension .server before the .vue extension.

(you can clone this sample app here, it’s from my course Real World Nuxt 3)

You can add the extension to any component or page component that you want to render only on the server.

Pros and Cons

The good thing is that the page will now load faster without an additional hydration step on the front end.

Here’s a performance comparison on loading the page.

Before:

After:

(ignore Idle and Total , they are not relevant to the page’s performance)

Look at the Scripting part (the yellow part), that’s where the hydration takes place. Since there’s no hydration with server-only rendering, there’s less Scripting work needed to be done while loading the page.

Additionally, the source code of the page component will only run on the server, meaning all related dependencies will also remain there. This includes any sensitive logic, like fetch calls to an API server that should be kept private. As long as these are not used in other regular components, they too will stay on the server.

But the tradeoff is that a server-only component can’t be interactive because they are no longer Vue components on the client side. They are just a bunch of HTML at that point.

In practice, we would have to mix and match different types of components to get the desired results.

Mixing Server-Only Components and SSR

Once server-only components are no longer in the experimental stage, an intuitive method should be available to mark a nested component as interactive, tentatively via the nuxt-client attribute. This would allow you to render a page as server-only, while also having the ability to nest interactive components within the page, rendered with classic SSR. This is a top-down approach.

Alternatively, the page can be rendered using traditional Server Side Rendering (SSR), where you can selectively choose which nested components to render in server-only mode. Simply add the .server extension to the components you want to render as server-only. This is the bottom-up approach.

The top-down approach is great for pages with mostly static content, but where there’s a bit of interactive UI.

The bottom-up approach is more suitable when the page frame is highly interactive, but contains a large section of static content. For instance, the main body of a blog article usually displays a significant amount of static content.

As of version 3.11.1, this feature is still under development, so the final developer experience (DX) remains uncertain.

However, the server-only component feature is built on the component. The DX of using is more defined, so we’ll discuss that next.

Nuxt Island

Instead of making an entire component server-only, we can render a specific component in the template server-only by using the component.

For example, with this code (from the sample project):

/pages/posts/[post].vue

<template>
  <main>
    <template v-if="post">
      <h1>
        {{ post.title }}
        <CategoryLink :category="post.category" />
      </h1>
      <RenderMarkdown :source="post.content" />
    </template>
  </main>
</template>

The code is rendering some markdown content using a component called RenderMarkdown.

We can render it in the server-only mode through :

/pages/posts/[post].vue

<template>
  <main>
    <template v-if="post">
      <h1>
        {{ post.title }}
        <CategoryLink :category="post.category" />
      </h1>
      <NuxtIsland
        name="RenderMarkdown"
        :props="{ source: post.content }"
      />
    </template>
  </main>
</template>

RenderMarkdown has to have the .island.vue extension for this to work.

This approach is more flexible because the rendering of a component is more related to the context in which that component is used rather than the component itself.

In this example, the prop post.content doesn’t get changed like a state does, so rendering it in server-only would improve performance without sacrificing the functionality of the page

However, there might be another scenario where we use RenderMarkdown and the prop passed to it is supposed to be reactive. In such cases, rendering RenderMarkdown server-only may not be optimal. The reactivity of the prop would trigger the server-only component to render again on the server over the network, and have its HTML sent to the frontend, also over the network. This could actually result in degraded performance.

So with , you have the freedom to choose how a component should be rendered when you’re using it, not when you’re creating it.

Looking Ahead

The Nuxt team has mentioned that v3.11 is likely the last minor update before the next major version. Hopefully, we’ll see server-only component as a stable feature soon in Nuxt v4.

Until then, you can still optimize the performance of your site by utilizing the various rendering modes currently available in Nuxt.js. You can check out the Real World Nuxt 3 course on Vue Mastery to learn all about that.

Originally published at https://www.vuemastery.com on March 25, 2024.

Effortless Forms w/ FormKit

Vue Mastery team — Fri, 22 Mar 2024 10:48:26 +0000

Written by Timi Omoyeni

When building a web app, one of the most common features developers will be building and managing is forms. They can be crucial to the success of a business, which is why it’s so important that your forms are intuitive for users to complete, well validated, and easy for developers to maintain.

This is where a tool like FormKit comes in, which provides not just UI elements to deliver high quality forms, but offers built-in validation, and support for more advanced features like schema-driven forms and more.

Join me as we explore how FormKit can save us time, energy and maintenance for use in our Vue.js projects.

You can find all the code examples used in this tutorial on [_GitHub](https://github.com/Timibadass/formkit-app)._

Introduction to FormKit

According to their official documentation, FormKit is a comprehensive form-building framework designed for Vue developers. It enables faster and more accessible authoring of high-quality production-ready forms, with improved DX, UX, and reduced code.

Naturally, when building out forms in projects, regardless of the framework, it’s common to use libraries that assist with validation in addition to UI libraries for the required form components.

From there, building out the form schema becomes your responsibility. Depending on the complexity, it can be a tedious task. FormKit is unique because it’s a one-stop shop that enables developers to efficiently build all of the necessary features without relying heavily on other libraries.

FormKit’s underlying architecture exists to make the process of obtaining data from your form more straightforward, regardless of how complex the structure may seem.

Here are some of the features the FormKit framework provides:

Form UI elements : The element accepts a type prop for the form element type you need. This component translates to the default HTML tag in the browser, while also providing additional features beyond the default elements.

2. Form Configuration: FormKit provides additional attributes/props like validations, prefix-icon, help, and many more that further enhance the behavior of our form and also help provide a better UX for users.

3. Form Schema : FormKit also provides a powerful schema to store and generate forms. Under the hood, the FormKit element is powered by this schema, a JSON-serializable data format for storing DOM structures and implementations.

FormKit has other exciting features, some of which include:

Styling
Accessibility
Extensibility

FormKit is particularly useful in form building because it embodies all the necessary features needed when building out a form. This comes in handy when thinking about performance and the maintenance of your codebase because you can set up validation, a beautiful UI, and also generate forms using JSON schema using only FormKit. This reduces the number of libraries needed to get your project running, thereby reducing your application’s bundle size and ultimately improving your app’s performance.

Getting Started with Formkit

To use FormKit in our project, we’ll need the following:

Node.js v 14.18.0, 16.12.0, or higher.
Vue 3 or Nuxt 3.
A terminal to run our commands.

For Nuxt 2 or Vue 2 users looking for a library that offers the same benefits as FormKit, you can check out VueFormulate. VueFormulate is a predecessor to FormKit. It includes all the features and supports older versions of Vue and Nuxt.

To install FormKit in a new project, you can use any of the package managers like npm or yarn using the following commands:

npm

// Nuxt 3
npm install @formkit/nuxt

// Vue 3
npm install @formkit/vue

yarn

// Nuxt 3
yarn add @formkit/nuxt

// Vue 3
yarn add @formkit/vue

FormKit also offers an installation command for setting up a project from scratch with FormKit.

npx formkit@lates create-app
// or 
npx formkit@latest create-app //latest formkit version

This command is followed by a series of prompts that guide you on how to set up your new project.

For this tutorial, we are going to create a Vue 3 project using the npx formkit@latest create-app command and follow the setup prompt that follows.

npx formkit@latest create-app

Once this setup is complete, we can install FormKit in our app.

After this installation is complete, along with the other instructions provided, when we visit the link our app is hosted on, we should see a default FormKit page.

The code powering this page can be found in App.vue and it looks like this:

<script setup>
async function submit() {
  await new Promise(r => setTimeout(r, 1000))
  alert('Submitted! 🎉')
}
</script>

<template>
  <div class="bg-white rounded-xl shadow-xl p-8 mx-auto my-16 max-w-[450px]">
    <img
      src="https://pro.formkit.com/logo.svg"
      alt="FormKit Logo"
      width="244"
      height="50"
      class="mx-auto mb-8 w-48"
    >
    <FormKit
      type="form"
      #default="{ value }"
      @submit="submit"
    >
      <FormKit
        type="text"
        name="name"
        label="Name"
        help="What do people call you?"
      />
      <FormKit
        type="checkbox"
        name="flavors"
        label="Favorite ice cream flavors"
        :options="{
          'vanilla': 'Vanilla',
          'chocolate': 'Chocolate',
          'strawberry': 'Strawberry',
          'mint-chocolate-chip': 'Mint Chocolate Chip',
          'rocky-road': 'Rocky Road',
          'cookie-dough': 'Cookie Dough',
          'pistachio': 'Pistachio',
        }"
        validation="required|min:2"
      />

      <FormKit
        type="checkbox"
        name="agree"
        label="I agree FormKit is the best form authoring framework."
      />
      <pre class="font-mono text-sm p-4 bg-slate-100 mb-4">{{ value }}</pre>
    </FormKit>
  </div>
</template>

In this file, we can see the FormKit component being used in four places, with the name prop accepting three different values:

form: used for binding all values from all form elements as one.

name.
checkbox.

We also have a formkit.theme.mjs, which is shipped by default when you set up your project using the npx command. This theme is known as Regenesis which, under the hood is a Tailwind theme that can be useful in styling your form components.

We are going to learn about all the possible values that the FormKit element can accept and how we can make the best out of all the features FormKit has to offer.

The FormKit Element

Now that we have successfully set up our project to use FormKit, it is time to look at what the component can do. FormKit ships with only this component, which is capable of serving all intended purposes related to building a complete form. This is possible because the component includes a few props that are used for accessibility and general form logic.

Let’s take a look at some of these props.

FormKit type property

The FormKit component accepts a type prop that is used to set the behavior of the component. This prop accepts a handful of values, most of which are native input element types (text, email, date, password) and are used to determine the type of input to render. By default, this prop has a value of text.

<template>
  <div>
    <FormKit />
  </div>
</template>

If we inspect our code in the browser, we can see what the component translates to:

The type prop also accepts a type form that is used to group fields as well as make the process of validation much easier.

Here’s an example of what that would look like:

<FormKit type="form">
   <FormKit label="Car brand" type="select" name="cars" />
   <FormKit label="Number of seats" type="select" name="numberOfSeats"/>
   <FormKit label="Price" type="number" name="price" />
</FormKit>

FormKit name property

The name property is used to bind input values to their corresponding property. If this prop is not set on your form, a default value of type + ‘_n’ is set where type is the input type passed to the component and n is the number of input elements you have in your form.

For example, if we do this:

<FormKit type="text" name="address"/>

It translates to the following in the DOM:

Create an input element of type ”text”.
Give it a name of “address”.
Bind every value in this form to the property address in our imaginary form object.

The name prop comes in handy when you group your input elements using the type value of form. This automatically binds the value in all the input fields in your form to their respective name values without the need for v-model.

Other FormKit component props include:

id
label
placeholder
help
plugins
validation-visibility

While we are already familiar with some of these properties, we’ll explore the others and see them in action in a later section.

Building a simple form with FormKit

When building a login form using plain HTML, it usually looks like this:

<form action="">
  <label for="email">Email</label>
  <input type="email" name="email" id="email">
  <label for="password">Password</label>
  <input type="password" name="password" id="password">
  <button>Login</button>
</form>

Here, we have a login form that consists of email and password fields, each with their respective labels, as well as a submit button.

When viewed in the browser, we’d get a form that looks something like this:

But we can recreate this form with fewer lines of code using FormKit.

Let’s create a new component called LoginForm , which will use three types:

form : This type helps us group all the values in our input field under one form.
email : We use this to inform FormKit that we expect an email address to be entered in the input. Thus, it should apply the default email validation to the given value.
password : We also use this value to specify that we want a password input field.

LoginForm.vue

<FormKit type="form">
  <FormKit type="email" name="email" label="Email" />
  <FormKit type="password" name="password" label="Password" />
</FormKit>

When we check this out in the browser, we should see a simple login form being displayed.

Also, we can see that a submit button is automatically added to this form. This is part of the benefits that come with wrapping our form inside a . This input type comes with several benefits like error handling, form submission, loading states, and more. We can change the text of this button using the submit-label prop.

LoginForm.vue

<FormKit type="form" submit-label="Login">
  <FormKit type="email" name="email" label="Email" />
  <FormKit type="password" name="password" label="Password" />
</FormKit>

Now when we save this change and view it in the browser, we should see that our form button now has the text “Login”.

As discussed earlier, another benefit of grouping our form elements using the type form is being able to access the values of every field inside this form.

To see this in action, we are going to modify our LoginForm.vue component.

In this code snippet, we have added a @submit event with a logDetails function. This event is the same as the native submit event we are used to; it returns an argument that contains all the values of the inputs in the form.

To demonstrate this, let’s log the values in our console to show that they are correct. With this approach, we do not need to use v-model in our input fields to get their values.

<template>
  <div>
    <FormKit type="form" submit-label="Login" @submit="logDetails">
      <FormKit type="email" name="email" label="Email" />
      <FormKit type="password" name="password" label="Password" />
    </FormKit>
  </div>
</template>

<script>
//log values to the console
const logDetails = (v) => {
  console.log(v);
}
</script>

We can see the values of our form being logged after submitting the form.

At the moment, we can submit the form without filling in the form, which is not how most production-ready forms work. To fix this, we are going to add a validation prop to both the email and password fields and set it to required.

<FormKit type="form" submit-label="Login" @submit="logDetails">
  <FormKit type="email" name="email" label="Email" validation="required" />
  <FormKit type="password" name="password" label="Password" validation="required" />
</FormKit>

At this point, if we try to add and delete any property from either field, this is what we see in the browser:

It also adds another error when you attempt to submit the form.

For this form, simply passing a required value for validation meets our current needs. As we proceed, we’ll explore additional validation options for more intricate forms.

FormKit Configuration

As we continue building our forms, we may need further configurations, such as custom validation and data manipulation. Since FormKit aims to be the “form framework” for every project and JavaScript framework on the web, it includes everything you are likely to need to build a form. Let’s take a look at some of the available configurations.

Validations

In the Vue.js ecosystem, libraries such as Vuelidate are available for form validation and validation messages. These tools simplify the complex task of validation, allowing us to concentrate on the UI and overall application logic.

As we saw above, with FormKit we can achieve this task using the validation prop.

In the code snippet below, we are using two types of inputs: select for “cars” and “numberOfSeats”, and number for “price”.

To handle validation, we can make use of the validation prop which is attached to all fields. With FormKit, we can use multiple validation rules for one input field by separating the rules with a pipe (|) as used in our “Price” field: validation="required | min:10000 | max:50000"

For this input, we make use of three validation rules:

required: This field is required.
min: The value entered for our price cannot be less than 10,000.
max: The value entered for our price cannot exceed 50,000.

FormKitExample.vue

<template>
 <div>
  <FormKit type="form" submit-label="Submit" @submit="validateForm">
   <FormKit label="Car brand" type="select" :options="cars" name="cars" v-model="state.car" validation="required" />
   <FormKit label="Number of seats" type="select" :options="seats" name="numberOfSeats" v-model="state.numberOfSeats" validation="required" />
   <FormKit label="Price" type="number" v-model="state.price" name="price" validation="required | min:10000 | max:50000" />
  </FormKit>
 </div>
</template>

You can find the full list of validation rules in FormKit here

In addition to validation, FormKit provides a validation-messages prop that allows you to customize the error messages for your validations.

<FormKit label="Price" type="number" v-model="state.price" name="price" validation="required | min:10000 | max:50000" :validation-messages="{
    max: ({ node: { value } }) => `${value} is above the allowed price range`
   }" />

Here, we added the validation-messages prop which accepts an object of the validation rules we intend to customize. Each rule returns a function that takes the node as an argument, this node has access to the form element (input, form, group) and the value for them (depending on the type). This allows us to make use of the value inside the input field in our custom message.

Error Handling with FormKit

The use of input fields and form validations has become standard practice on the frontend, regardless of backend validation. Despite these precautions, submission errors can still occur due to various reasons such as server downtime or validation errors. With FormKit, we can display these errors to the user with any of the following methods:

Using the errors prop on the element.
Displaying errors using node.setErrors()
Using the FormKit Vue plugin method $formkit.setErrors()

Using the errors Prop in Formkit

This approach necessitates the grouping of your form using the component. This component has access to the @submit event and the values of all fields within your form.

Consequently, we can utilize this event to decide when to display these errors to the user.

<template>
  <FormKit type="form" submit-label="Submit" @submit="createUser" :errors="errors">
    <FormKit
      name="fullName"
      id="fullName"
      type="text"
      label="Full Name"
      validation="required"
    />
    <FormKit
      name="email"
      id="email"
      type="email"
      label="Email"
      validation="required"
    />
    <FormKit
      name="address"
      id="address"
      label="Address"
      type="textarea"
      validation="required"
    />
  </FormKit>
</template>

<script setup>
import { ref } from "vue";
const errors = ref([""]);
const createUser = (v) => {
  setTimeout(() => {
  errors.value = ['Something happened']
 }, 2000);
};
</script>

In this example, we have a form with three inputs, fullName, email, and address. We group this form using the and add an errors prop. We pass an errors ref to this prop so we can set the errors dynamically after submitting the form. This is our way of mimicking a network request to the server that fails and returns errors that must be displayed to the user.

Displaying errors using node.setErrors() in FormKit

When a method is passed to the @submit event, it automatically receives value and node as arguments. The node provides us with all the information about the form while the value contains the values of all fields inside the form in an object.

With this approach, we can handle errors that are specific to both the input fields and the general form. We can achieve this by using the submit event on the form and the setErrors method.

The setErrors method takes two arguments:

An array for form-specific errors.
An object for setting input field-specific errors.

Using the same form from above, let’s modify the createUser function to check if the email has “yopmail” in it. If this condition is met, we’ll use the node.setErrors method to set the errors from this form.

First, we’ll pass a form error with the text “Something happened” and then another error specifically related to the email field that prompts the user to enter a valid email:

const createUser = (v, node) => {
 if (v.email.includes("yopmail")) {
    node.setErrors(["Something happened"], {
      email: "Please enter a valid email",
    });
  }
};

In addition to displaying form-related messages at the bottom of your form, FormKit also provides you with other ways to handle validation and errors related to your form, such as , , and APIs available in @formkit/vue when using the Composition API.

Internationalization in FormKit

Internationalization (i18n) is an important aspect of configuring FormKit. With support for multiple languages, FormKit allows you to provide a localized experience to your users using the @formkit/i18n package, which provides support for 43 languages.

By configuring internationalization in FormKit, you can create forms that cater to users from different language backgrounds, enhancing the usability and accessibility of your application.

To configure i18n in FormKit, let’s create a formkit.config.js file in the root folder of our application. In this file, we can import the desired language from the @formkit/i18n package and add it to the locales object.

Finally, we can set this language as the default language for our app by passing it as a string to the locale property.

Let’s set our default language to German in our config file:

formkit.config.js

import { de } from '@formkit/i18n'

export default {
  locales: { de },
  locale: 'de',
}

If we save these changes and submit our form again (with validation errors) our default language should change from English to German.

Note that by default, ‘en’ is passed as the locale for your app when it is not otherwise set, and you can customize it, just as we have done. We can also change this value programmatically using any of the following

$formkit.setLocale(newLocale) where newLocale is any of the supported languages on FormKit when using the Options API.
config: With the Composition API, we do not have access to the $formkit plugin. Instead, we make use of the configuration object, which is globally available and can be injected by calling inject(Symbol.for('FormKitConfig')).

The FormKit Schema

Under the hood, the FormKit element is powered by the FormKit schema. The FormKit Schema is a JSON-serializable data format for storing DOM structures and component implementations, including FormKit forms. This schema is capable of generating forms using their respective input types by passing an array of inputs to the component.

In this example, we create a login form using FormKit’s schema by passing an array of three objects to .

These objects contain the following:

$el: short for element.
$formkit: which is short for in which the value passed here (e.g. email) is assigned as the form type.
name, label, and validation: standard props for FormKit.

SchemaExample.vue

<template>
  <FormKitSchema :schema="schema" />
</template>

<script setup>
import { FormKitSchema } from "@formkit/vue";
import { ref } from "vue";
const schema = ref([
  {
    $el: "h1",
    children: "Login",
  },
  {
    $formkit: "email",
    name: "email",
    label: "Email",
    validation: "required|email",
  },
  {
    $formkit: "password",
    name: "password",
    label: "Password",
    validation: "required|length:5,16",
  },
]);
</script>

When we check this in the browser, we should get this result:

Although this schema was initially designed for building and implementing forms, it can also be used successfully for other DOM elements and components.

For example, we can utilize the schema to create a div element with multiple nested paragraphs, as shown below:

const schema = ref([
 {
  $el: 'div',
  children: [
   {
    $el: 'h1',
    children: 'This is a heading',
   },
   {
    $el: 'p',
    children: 'This is a paragraph',
   },
   {
    $el: 'p',
    children: 'This is another paragraph but with styling',
    attrs: {
     style: {color: 'blue'}
    }
   }
  ]
 }
])

In this code snippet, we use a div element and add a children property which takes an array of objects. These objects are also elements with properties we have seen earlier excluding the attrs property. The attrs property (an abbreviation for “attributes”) is utilized to set both native HTML and custom attributes on elements. In this instance, we use it to assign the style attribute to the second paragraph element, setting its color to blue.

When we open the app in our browser, we should see our changes being applied correctly:

Using Plugins With FormKit

Out of the box, FormKit ships with a couple of plugins that can improve the general experience of your forms. These plugins include the following:

AutoAnimate: useful for adding animations to your application (or forms).
Barcode input: allows scanning of a variety of 1D and 2D barcode types using cameras connected to your browsing device.
Auto-height textarea: Allows you to give textarea a height that adjusts based on its content.
Floating labels: useful for creating floating labels in your input fields.
Multi-step input: makes the process of breaking forms down into steps easy.
Save to localStorage: makes it easy to save input/form values to local storage
Zod validation: This plugin allows you to enable validation on your forms and input using Zod schema.

These plugins are included in the @formkit/addons package that has to be installed separately.

Let’s install this package in our project using this command:

yarn add @formkit/addons

After installation, we can import the plugin we need in our formkit.config.js file.

For this example, we are going to utilize the createLocalStorage plugin.

import { de } from '@formkit/i18n'
import { defaultConfig } from '@formkit/vue'
import { createLocalStoragePlugin } from '@formkit/addons' //import plugin here

const config = defaultConfig({
  plugins: [
    createLocalStoragePlugin({
      prefix: 'vuemastery',
      maxAge: 1000 * 60 * 60 * 4, // 4 hours
      debounce: 500,
    }),
  ],
  locales: { de },
  locale: 'de',
})
export default config

Coming from our existing formkit.config.js code, we import defaultConfig from the @formkit/vue package and also the createLocalStoragePlugin from @formkit/addons.

To configure the behavior of this plugin, we add the createLocalStoragePlugin to the plugins array and pass three properties:

prefix : This is a string that is going to be prefixed to the key in the browser’s local storage. In our case, we’re using ‘vuemastery’ and this means we can identify the value of our form in local storage by checking for a key that starts with ‘vuemastery’. The default is formkit.
maxAge: This works the same way caching and headers that are set in the backend work. We have set our example to 4 hours, which means that the values in the form become stale and invalid after 4 hours have elapsed. The default value is 1 hour (**1000 * 60 * 60**).
debounce : We use this value to set a time the plugin has to wait before saving the changes in our form to local storage. This is done to reduce (or increase) the frequency at which the local storage is updated. The default value is 200.

After completing the configuration, we need to specify which forms should use this plugin. To do this, we add the use-local-storage attribute to the forms where we want to persist the data. This will ensure everything works as expected.

<template>
 <div>
  <FormKit type="form" submit-label="Submit" @submit="validateForm" use-local-storage>
   <FormKit label="Car brand" type="select" :options="cars" name="cars" v-model="state.car" validation="required" />
   <FormKit label="Number of seats" type="select" :options="seats" name="numberOfSeats" v-model="state.numberOfSeats" validation="required" />
   <FormKit label="Price" type="number" v-model="state.price" name="price" validation="required | min:10000 | max:50000" :validation-messages="{
    max: ({ node: { value } }) => `${value} is above the allowed price range`
   }" />
  </FormKit>
 </div>
</template>

<script setup>
import { reactive, ref } from "vue";
const cars = ref(["Toyota", "Lexus", "Honda", "Ford", "Chevrolet"]);
const seats = ref([1,2,3,4]);
const state = reactive({
  numberOfSeats: "",
  car: "",
  price: "",
});
const validateForm = async () => {
  console.log(state.value);
};
</script>

In this code, we added the use-local-storage to the form wrapper. When we fill out this form after adding this plugin and refresh our browser, we will see all the existing data.

This plugin allows additional configuration options such as beforeLoad, an optional asynchronous callback that receives the form data. It enables modification of the localStorage data before applying it to the form. Another option is key, which lets us include an optional key in the localStorage key name. This is useful for associating data with a specific user, among other things.

For a complete list of configuration options for this plugin and other plugins, refer to the official FormKit documentation.

Wrapping up

FormKit enhances the native HTML form experience with its user interface and customizable features. It offers a range of essential tools for our form-building process.

FormKit’s styling configuration makes it easy to customize your input’s appearance. This is particularly useful when working with a project’s theme or style guide. Moreover, FormKit provides icons as visual cues for your form’s purpose.

FormKit also allows building custom inputs that utilize its features. If you prefer creating your components, you can read more about custom inputs here.

To understand the technical aspects of the FormKit library and learn how to use it effectively, refer to the configuration and architecture documentation. These resources provide detailed information about node and the form layout and structure with FormKit.Originally published at https://www.vuemastery.com on March 22, 2024.

Vue tools to master in 2024

Vue Mastery team — Wed, 27 Dec 2023 10:48:32 +0000

Written by Timi Omoyeni

As we approach a new year, it is crucial to stay updated on the latest topics and tools to enhance your skills as an engineer. This can be challenging due to the continuously evolving web development landscape and the rapid pace of innovations in the Vue.js ecosystem. To help you stay ahead, let us explore some topics that are a great starting point for becoming a better Vue.js developer in 2024.

Vue 3 Vapor mode 🌬️

If you’ve been following Vue Creator Evan You, you’ve heard him talk a lot recently about Vapor mode. The name is admittedly quite cool, but what does vapor mode mean, after all?

In short, Vapor mode is an alternative compilation strategy aimed at improving the performance of your Vue.js application. It takes the same Vue single file component and compiles it into JavaScript output that is more performant, uses less memory, and requires less runtime support code compared to the current Virtual DOM-based output. It was inspired by Solid.js — a simple and performant reactivity for building user interfaces.

The benefits of using Vapor include:

More performant
Uses less memory
requires less runtime support

It is an experimental feature that was first announced in 2022 and has its own repo. It compiles differently when enabled in a component, resulting in a lighter rendering code and improving performance. To achieve this, it only supports a subset of Vue features, including the Composition API and .</p> <p>As Vapor mode gets closer to its official release, Vue Mastery will be publishing exclusive content on how to use it for its fullest impact.</p> <h3> <a name="vue-2-end-of-life" href="#vue-2-end-of-life" class="anchor"> </a> Vue 2 End of Life 🪦 </h3> <p>In 2022, Vue 3.x became the default version for creating new Vue applications. Now, as of December 31 of 2023, Vue 2 reaches its end of life. Evan You recently <a href="https://blog.vuejs.org/posts/vue-2-eol">reminded us</a> of this update and the possible next steps and recommendations for Vue 2 users.</p> <p>After its EOL, Vue 2 will still be available on all distribution channels and package managers but will no longer receive updates (bug and security fixes).</p> <p>What does this mean for the community? The following will be deprecated:</p> <ol> <li>All major and minor versions of Vue 2 core</li> <li>vue-router versions exclusively supporting Vue 2 (3.x and below)</li> <li>Vuex versions with exclusive support for Vue 2 (3.x and below)</li> </ol> <p>With these updates in mind, developers still working with this version have been presented with a handful of options ranging from migrating to Vue 3 to the proposed <a href="https://github.com/vuejs/vue/releases/tag/v2.7.16">v2.7.16</a>, which is the final release of Vue 2. You can also check out this article on <a href="https://v2.vuejs.org/lts/">LTS</a> and the <a href="https://blog.vuejs.org/posts/vue-2-eol">EOL</a> to help you decide on the best option for your Vue 2 applications.</p> <p>Keep in mind, we have an entire library of <a href="https://www.vuemastery.com/courses/">Vue 3 courses</a> here on Vue Mastery to help Vue 2 developers transition.</p> <h3> <a name="nuxt-tools" href="#nuxt-tools" class="anchor"> </a> Nuxt Tools ⛰️ </h3> <p>This year, we had the release of several interesting tools that are either powered by Nuxt or aimed at improving the overall developer experience of building with Nuxt.</p> <p>These updates include:</p> <ol> <li>Nuxt DevTools</li> <li>Nuxt Studio</li> <li>Nuxt UI</li> <li>Nuxt Icon</li> </ol> <h3> <a name="nuxt-devtools" href="#nuxt-devtools" class="anchor"> </a> Nuxt DevTools </h3> <p>Nuxt DevTools was first announced on the 27th of March 2023 and has received a lot of positive feedback from the community. It was created to help developers understand and improve the overall experience of developing their Nuxt app. In November 2023, Nuxt DevTools v1.0 was released, and with this release, it is enabled by default in new Nuxt projects( from Nuxt v3.8).</p> <p>Some of the Nuxt DevTools features include:</p> <ol> <li>In-app devTools — floating panel visible anywhere in the app that opens the devtools.</li> <li>Pages view — Shows a list of all the pages registered in your app with easy navigation.</li> <li>Module management — allows you to view all the modules registered in your app with the links to their documentation and repositories.</li> </ol> <p>You can find out more about the DevTools by reading <a href="https://www.vuemastery.com/blog/exploring-the-nuxt-3-devtools/">this article</a> on Vue Mastery.</p> <h3> <a name="nuxt-studio" href="#nuxt-studio" class="anchor"> </a> Nuxt Studio </h3> <p>Another exciting update that you should pay attention to in 2024 is Nuxt Studio. This is a powerful platform specifically designed for creating, editing, and deploying Nuxt 3 applications that are reliant upon <a href="https://content.nuxtjs.org/">Nuxt Content V2</a>, which is a git-based CMS powered by Markdown.</p> <p>Nuxt Studio is useful for content-heavy projects like blogs, documentation, and portfolios. With Nuxt Studio, developers have an easier way to collaborate with non-developer members of their team (such as marketing and design) to make contributions to their sites without the need to be technical. It comes with several features including the Studio Editor, which improves the process of making changes and collaboration among teams.</p> <p>You can find out more about Nuxt Studio in this <a href="https://www.vuemastery.com/blog/touring-nuxt-studio">article</a>.</p> <h3> <a name="nuxt-ui" href="#nuxt-ui" class="anchor"> </a> Nuxt UI </h3> <p>Nuxt UI simplifies the creation of stunning and responsive web applications with its comprehensive collection of fully styled and customizable UI components designed for Nuxt apps. It was created using technologies like Headless UI and Tailwind CSS and was also developed by Nuxt Labs.</p> <p>It has a collection of over 40 components built for Nuxt that have been beautifully designed and are also fully customizable.</p> <p>Some of its features include:</p> <ol> <li>Dark mode support</li> <li>Support for LTR and RTL languages</li> <li>Bundled icons</li> <li>HMR support through Nuxt App Config</li> </ol> <p>You can find out more about Nuxt UI in this <a href="https://www.vuemastery.com/blog/build-an-x-clone-w-nuxt-ui/">article</a> and the <a href="https://ui.nuxt.com/getting-started/installation">official documentation</a>.</p> <h3> <a name="nuxt-3-updates" href="#nuxt-3-updates" class="anchor"> </a> Nuxt 3 updates </h3> <p>Nuxt 3 was officially released in November of 2023 and has been well received by the community as it is based on Vite, Vue 3 and <a href="https://nitro.unjs.io/">Nitro</a> and comes with first-class TypeScript support.</p> <p>With this release, it set the ball rolling for a series of exciting excitements that came from the Nuxt community in 2023. These updates range from edge-side rendering to several version updates including interactive server components. This feature makes it possible to play around with interactive components within Nuxt server components. Although it is new and experimental, it’s an exciting change</p> <h3> <a name="formkit" href="#formkit" class="anchor"> </a> FormKit 📝 </h3> <p>Another exciting tool we have seen as a result of Vue 3 and Nuxt 3 is FormKit. As the name implies, FormKit is a comprehensive form-building framework for Vue developers that makes authoring high-quality, production-ready forms faster and more accessible, with better DX, UX, and less code.</p> <p>The idea behind this tool is for it to be the one-stop shop for everything <em>form</em>. This can range from the several input field UI components that are available to both free and Pro users, to the FormKit Schema that helps you generate and implement forms and other DOM elements.</p> <p>Some of its features include:</p> <ol> <li>Validation — FormKit offers configurations and an easily extendable validation prop that can be used to validate the values of the fields</li> <li>Plugins — It also ships with plugins like <a href="https://formkit.com/plugins/auto-animate">AutoAnimate</a> and <a href="https://formkit.com/plugins/local-storage">Save to localStorage</a> that improve the general user experience while using forms built using FormKit.</li> <li>Inputs — Support for up to 20 of the popular inputs that are used when creating forms.</li> <li>Internationalization — Support for several languages with multi-language support (you can switch between several languages at a time).</li> </ol> <h3> <a name="elevate-your-code-in-2024" href="#elevate-your-code-in-2024" class="anchor"> </a> Elevate your code in 2024 </h3> <p>It’s clear that Vue 3’s impact on the Vue ecosystem has been vast and still continues to spread into the tools, libraries and conventions that Vue developers use now and into the future.</p> <p>To help you stay at the top of your game in 2024, Vue Mastery is currently offering <a href="https://www.vuemastery.com/holiday/">60% off a full year</a> access to our library of 50+ courses and 205 conference talks so that you can learn what you need to succeed as a Vue developer and catapult your career.</p> <p><em>Originally published at</em> <a href="https://www.vuemastery.com/blog/vue-tools-to-master-in-2024/"><em>https://www.vuemastery.com</em></a> <em>on December 27, 2023.</em></p> <hr>

How to Build Accessible Vue.js Applications

Vue Mastery team — Thu, 21 Dec 2023 10:48:40 +0000

Written by Uchechukwu Azubuko

If you desire to build high-quality applications, you need to spend some time prioritizing and optimizing the components that you build for accessibility to everyone. This means considering how your app is able to be used by people with various cognitive, physical, auditory, verbal, visual, and neurological abilities.

This article serves as a guide for you to learn the strategies for building inclusive applications using Vue.js. In the end, you will have acquired knowledge on how to utilize the framework's strengths to build high-quality applications that everyone can use.

Introduction to Accessibility in Vue.js

Accessibility describes how usable a website is for all kinds of people. When an application is referred to as accessible (shortened to “a11y”), it means that anybody from any background can seamlessly operate the application and have an enjoyable experience. To achieve this, you need to not only focus on improving the performance of the application, but also spend time building it in a way that it is perceivable, operable, understandable, and robust (POUR). Those are the four core principles of the Web Content Accessibility Guidelines (WCAG).

Optimizing an application for accessibility aims to minimize the number of people who are unable to use it. Thus, the need for accessibility cannot be over-emphasized since not everyone uses the web the same way.

Accessibility Checklist for a Vue.js Application

Vue.js comes with its own set of accessibility issues particular to single-page applications.

For example, in a traditional web app, when a user navigates to a page or makes an asynchronous request, the entire page is refreshed. This refresh also redirects the keyboard or screen reader focus to the top of the page.

However, in single-page apps, data is dynamically updated without a page refresh. By default, this means that the focus remains on the button or link that was activated. As a result, users who cannot see the page are not notified of the change.

But these issues can be rightly tackled and remedied.

Let’s take a look at an ideal checklist that can serve as a starting point for transforming your application into an inclusive one. This will enable you to create accessible Vue.js applications more easily.

So we’ll be covering:

Improve Keyboard Accessibility
Facilitate Focus Management
Setup Accessible Routing and a Page Title for Each Page
Write Semantic HTML from the Beginning
Buttons vs Links
Give Descriptive Names to Images
Closed Captions for Videos
Ensure Optimized Contrast
Use Descriptive Hyperlinks
Convey Change of State
Specify the Language for Each Document
Implement Accessible Animations
Consider Light and Dark Modes

Improve Keyboard Accessibility With tabindex Attribute

Keyboard navigation is an essential aspect of accessibility, as it makes it possible for people using screen readers or other assistive technologies to intuitively interact with a webpage, via tab order. Thus, tab order must follow an intuitive and predictable sequence aligned with the flow of content on a web page. This is where tabindex comes in.

The tabindex attribute is used for making HTML elements focusable or sequentially unfocusable when using the TAB key of a keyboard for navigation.

To include an element that is not focusable by default (e.g. <div>, <span>) in the tab order, we can use tabindex="0". Use tabindex="-1" to remove an element from the tab order, such as hidden elements or decorative images.

<template>
  <!--     Buttons are focusable by default but with tabindex set to -1, the button is no longer focusable -->
  <button tabindex="-1">Unfocusable button</button>
</template>

Facilitate Focus Management

Focus management involves determining how to display a currently active or highlighted item to users when the mouse is not in use. It also ensures that changes in focus are predictable.

Here are some tips on facilitating focus management:

When it comes to forms, ensure you set the first field in any form to autofocus, then programmatically set focus to the field that follows by calling the .focus() method on it. This way, users don’t have to make use of their mouse while filling out a form.

<template>
  <form class="form">
    <div class="form-control">
      <label for="email">Email</label>
      <input
        autofocus
        type="email"
        name="email"
        id="email"
        @keypress.enter="setFocusOnSecondInputField"
      />
    </div>
    <div class="form-control">
      <label for="password">Password</label>
      <input ref="inputTwo" type="password" name="password" id="password" />
    </div>
  </form>
</template>

<script lang="ts" setup>
// Referring to the second input field element in the template
const inputTwo = ref<HTMLElement | null>(null);

// Function to set focus to the second input field when the enter key is pressed
const setFocusOnSecondInputField = () => inputTwo.value?.focus();
</script>

Some elements are naturally focusable, by default (when using the TAB key on a keyboard), otherwise, with tabindex="0", any element can be placed into the tab order.

<template>
  <div tabindex="0" @click="doSomething" class="card">
    This is clickable card component, with tabindex set to 0, so that it can be
    focusable
  </div>
</template>

With the ref attribute, you can refer to an element in the template of a component. For example, assuming the desire is to shift focus to a capture button when a page is mounted:

<template>
    <div class="button-container">
        <button ref="captureButton">Capture</button>    
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

const captureButton = ref<HTMLElement | null>(null);
const focusOnCaptureButton = () => {
    captureButton.value?.focus();
};

onMounted(() => focusOnCaptureButton());
</script>

<style>
.button-container { 
    display: flex;  
    align-items: center;    
    justify-content: center;    
    height: 300px;  
    background-color: white;
}
</style>

In the code snippet above, when the page is mounted, the .focus() method is called on the capture button, and it receives focus. This demonstrates how focus can be programmatically set on an element.

Setup Accessible Routing and a Page Title for Each Page

By default, a Single Page Application (SPA) consists of just one page, hence the name. However, it is important to ensure that users who interact with your app in a non-visual way are kept informed when the browser's location is modified since route changes may not be obvious to them.

The way to announce to our users that they’ve entered a new page is as follows:

On every main page of your app, you should set up a skip link. This link should be the first accessible link for screen readers.

Ideally, browsers read web pages from top to bottom. However, it is common to have a navigation bar at the top of web pages. The issue arises for screen reader users, as the navigation is read out as a list of links, which can be time-consuming.

To assist screen reader users in bypassing the navigation and accessing the main content, a skip link should be included at the top of the page. However, this skip link should be visually hidden from users who do not use/need screen readers.

<template>
    <a href="#" class="skip-link" ref="skipLink">Skip to main content</a>   
    <h1>Contact Page</h1>
</template>

<style>
.skip-link {
    white-space: nowrap;
    margin: 1em auto;
    top: 0;
    position: fixed;
    left: 50%;
    margin-left: -72px;
    opacity: 0;
}

.skip-link:focus {
    opacity: 1;
    background-color: white;
    padding: 0.5em;
    border: 1px solid black;
}
</style>

Using a watch, programmatically shift focus to the skip link whenever a user changes routes, by calling focus on the template ref for the skip link. Also using the watch, make sure to update the title of the new web page.

<script lang="ts" setup>
import { ref, watch } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const skipLink = ref<HTMLElement | null>(null);

watch(
    () => route.path,
    () => {
        document.title = "Contact";
        skipLink.value?.focus();
    },
    { immediate: true }
);
</script>

Set up a visually-hidden container that serves as an announcer of a list of possible announcements for assistive technology users. Make sure the skip link references this container.

Next, use the aria-live attribute to announce that navigation to a new page has occurred.

In this demo below, the infoToRead array serves as a list of announcements, and when the Contact page is mounted, the info "You are now on the contact page" is populated as an announcement to be made.

<template>
    <a href="#navigation-info" ref="skipLink" class="skip-link"
    >Skip to main content</a>   
    <ul id="navigation-info" class="visually-hidden" :aria-live="ariaLive"> 
        <li v-for="(info, index) in infoToRead" :key="index">{{ info }}</li>    
    </ul>   
    <h1>Contact Page</h1>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";

const ariaLive = ref<"off" | "assertive" | "polite">("assertive");
const infoToRead = ref<string[]>([]);
const speak = (info: string) => {
    if (info) {
        infoToRead.value.push(info);    
    }
};

onMounted(() => speak("You are now on the contact page"));

// ... other scripts
</script>

<style>
.visually-hidden {
    position: absolute;
    margin: -1px;
    border: 0;
    padding: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

// ... other styles
</style>

The aria-live attribute transforms an element into a notification container. It sets the priority for how screen readers should treat updates to a live region on a non-interactive document.

Finally, you should have code that looks like so:

<template>
    <a href="#navigation-info" ref="skipLink" class="skip-link"
    >Skip to main content</a>   
    <ul id="navigation-info" class="visually-hidden" :aria-live="ariaLive"> 
        <li v-for="(info, index) in infoToRead" :key="index">{{ info }}</li>    
    </ul>   
    <h1>Contact Page</h1>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const ariaLive = ref<"off" | "assertive" | "polite">("assertive");
const infoToRead = ref<string[]>([]);
const speak = (info: string) => {
    if (info) {
        infoToRead.value.push(info);    
    }
};
const skipLink = ref<HTMLElement | null>(null);

watch(
    () => route.path,
    () => {
        document.title = "Contact";
        skipLink.value?.focus();
    },
    { immediate: true }
);

onMounted(() => speak("You are now on contact page"));
</script>

<style>
.visually-hidden {
    position: absolute;
    margin: -1px;
    border: 0;
    padding: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.skip-link {
    white-space: nowrap;
    margin: 1em auto;
    top: 0;
    position: fixed;
    left: 50%;
    margin-left: -72px;
    opacity: 0;
}

.skip-link:focus {
    opacity: 1;
    background-color: white;
    padding: 0.5em;
    border: 1px solid black;
}
</style>

One of the strategies employed here was to give the announcing div a class of visually-hidden, to visually hide the element without removing it from the DOM and accessibility tree. This ensures that the content remains accessible to assistive technologies such as screen readers.

Also, the title of the HTML document should be set to convey the purpose of the page (for example, "Contact Page" as seen in our code above) when the user enters the page, otherwise, the generic name for the application would be displayed as the document title.

Write Semantic HTML from the Beginning

At the foundation of every accessible application is semantic markup.

Whenever possible, make use of semantic HTML. Automatically, native elements have rich semantics, while generic elements like span's and div's have generic semantics.

For example, if you need to create a custom button, be sure to use the native button tag rather than a div or span. By doing this, you take advantage of the accessibility benefits provided by the button tag.

However, if there is no native element for the use case, the WAI-ARIA Specification can come in handy to improve the semantic meaning of the element on the DOM.

Let's now look at various ways to build semantically correct components.

Accessible headings: Headings are used to organize content and make it easy to navigate. Assistive technologies rely on the appropriate rendering of headings to traverse the accessibility tree in an orderly way rather than traversing node by node through the DOM. Hence, it is essential to use headings in order of hierarchy: <h1> - <h6>, include a heading text within a section, and make use of heading tags where needed, rather than styling a text to appear like one.

For example, the hierarchical structure for headings of a documentary article webpage would look like:

h1 = title of the documentary article
    h2 = subheading in the content of the documentary article
        h3 = subheading under the h2 content
            h4 = subheading under the h3 content
    h2 = subheading in the content of the documentary article
    h2 = associated news (displayed in the aside section)
    h2 = contact us (displayed in the footer)
        h3 = address (the address information of the webpage)
        h3 = socials (social media links of the webpage)

Make use of landmarks for easy navigation: Landmarks serve as a means of navigation through an HTML document for non-visual users who rely on assistive technology. By default, HTML sectioning elements such as main, nav, and aside define various ARIA landmarks. Therefore, if sectioning elements are used without a proper understanding of their purpose, users of assistive technologies may become confused when interacting with your application.

HTML element	Landmark role
<header>	Title of the web page
<main>	The main content of a web page
<aside>	Complements the main content, while being meaningful on its own
<form>	Describe a collection of form-related elements
<nav>	Navigation on a web page
<footer>	Content information about a document
<section>	Region on the document with high relevance

    // Using landmarks and proper headings
    <template>
        <main role="main" aria-labelledby="main-title">
            <h1 id="main-title">The Main Title</h1>
            <section role="region" aria-labelledby="section-title-1">
                <h2 id="section-title-1">The Section Title</h2>
                <h3>The Section Subtitle</h3>
            </section>
        </main>
    </template>

Accessible forms: Building an accessible form involves using related semantic form elements such as <form>, <label>, <button>, <textarea>, <input>, <fieldset>. An accessible form is more than just displaying input tags for which users can input related information. Binding the id of the input tag to the for attribute of the label is crucial for improving the accessibility of the form. This ensures that the input fields are associated with their corresponding labels, providing a clear purpose for each input field throughout the form.
```
<label for="class">Class:</label>
<input type="text" name="class" id="class" v-model="class" />
```
Build semantic tables: Data tables need to be built properly so that they are accessible. This way, someone using a screen reader can seamlessly scan through the table with the right navigation. This can be achieved by the following:
- All table data should be wrapped with the <table> element.
- The <summary> element should provide a summary of a table’s instance.
- When using the th element, ensure that the scope attribute is in place. This helps assistive technologies detect if the table header is for the column or row of a cell.

Buttons vs Links

Ideally, links should not be buttons, and buttons should not be links.

If the interaction leads to a change in state but not a location change, use a button. On the other hand, if you are referring to a piece of content that has its URL, use a link.

An icon button can be made accessible to screen reader and keyboard users by making use of the aria attribute, like so:

<template>
    <button>
        <i class="icon icon-star" aria-hidden="true"></i>
        <span class="visually-hidden">Star</span>
    </button>
</template>

<style>
.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
</style>

Here, the value of true for the aria-hidden attribute sets the icon to be hidden when used by screen readers, while the visually-hidden class makes the text appear rendered to a screen reader while it’s visually hidden from view.

This way a visually impaired user can identify the button.

If you need to create a button using the div tag, set the role attribute of the div to button and assign a tabindex of 0. This ensures that a keyboard or screen reader can access the div (now acting as a button).

It’s also important to make sure that button events are accessible by keyboard and screenreader users, no matter the kind of event that is triggered by adding key modifiers like for v-on or @, for example, @keyup.page-down="onPageDown"

Give Descriptive Names to Images

Always describe the appearance of an image in a way that is thoroughly descriptive. Instead of:

<img src="image.png" alt="people holding a flag"/>

It can be more descriptive, like so:

<img src="image.jpg" alt="two men holding the Nigerian flag"/>

This also applies to SVGs. By giving value to the aria-label attribute:

<template>
    // aria-label
    <svg aria-label="Uche Azubuko's SVG"></svg>

    // aria-labelledby => exposes the title as its accessible name
    <svg aria-labelledby="svg-title">
        <title id="svg-title">Uche Azubuko's SVG</title>
    </svg>
</template>

When it comes to images that are used solely for decorative purposes, it is acceptable to use an empty alt text. However, it is important to include the alt attribute and not omit it entirely.

Closed Captions for Videos

When working with videos within your application, make sure that all your videos have accurate captions. This can be implemented using the <track> element.

With the <track> element, you can specify a text file that contains the subtitle information, along with the language it is in.

For example:

<template>
    <video id="video" controls preload="metadata">
        <source src="video/UA-films.mp4" type="video/mp4" />
        <source src="video/UA-films.webm" type="video/webm" />
        <track
            label="English"
            kind="subtitles"
            srclang="en"
            src="captions/vtt/UA-films-en.vtt"
            default />
        <track
            label="Español"
            kind="subtitles"
            srclang="es"
            src="captions/vtt/UA-films-es.vtt" />
    </video>
</template>

Ensure Optimized Contrast

Ensure that the colors used in your application have optimal contrast. The contrast between the colors of any text and its associated background must be distinct— meeting minimum ratio levels to ensure legibility and make content readable for visually impaired users.

WebAIM Color Contrast is a helpful tool in achieving this.

Let's have a look at how to ensure color accessibility using WebAIM's color contrast checker.

First, head over to https://webaim.org/resources/contrastchecker/.

Next, enter the colors for the foreground and background of your content, or choose any color using the color picker. The lightness slider can be used to lighten or darken a color.

After the foreground and background colors have been entered, the checker will display the contrast ratio of the inputted colors, and a pass or fail indicator when used for normal or large texts and graphical or user interface components like buttons or form fields.

This is a sample report for a contrast ratio that is not accessible.

This is a sample report for a contrast ratio that is highly accessible.

This provides a straightforward way to be sure that the colors used in your applications are compliant with WCAG 2.0, WCAG 2.1, and WCAG 2.2. guidelines.

WCAG (stands for Web Content Accessibility Guidelines) explain how to improve the accessibility of web content for people with disability.

Use Descriptive Hyperlinks

Ensure that you use descriptive hyperlinks in your application, instead of just the URL. Since screen readers announce the presence of a link to non-visual users, a descriptive link is necessary and important as it helps to provide a proper context of where a link will take them when clicked.

So, instead of doing this:

<a href="https://github.com/ucheazubuko">Click here</a>

Implement it this way instead:

<a href="https://github.com/ucheazubuko">Learn more about Uche Azubuko</a>

Convey Change of State

Make it a habit to use aria-live regions to programmatically expose dynamic changes to the content of a page so that they can be announced by the assistive technology in use.

This is similar to using a toast to inform visual users when parts of a page change without requiring the entire page to load. For instance: an alert for incoming messages.

The code snippet below illustrates how a toast notification can be built for assistive technology users using the aria-live attribute. When the showToast function gets called, the information about the toast is announced to the user, while the toast container itself is visually hidden.

<template>
  <ul class="visually-hidden" :aria-live="ariaLive">
    <li v-for="(toastInfo, index) in toasts" :key="index">
      {{ toastInfo }}
    </li>
  </ul>
</template>

<script setup lang="ts">
import { ref } from "vue";

type ToastDetail = {
  id?: string;
  title: string;
  description: string;
  type: "error" | "success" | "";
  duration: number;
};

const ariaLive = ref<"off" | "assertive" | "polite">("polite");

const toasts = ref<ToastDetail[]>([]);

const showToast = (toastInfo: ToastDetail) => {
  // Your business logic for displaying toast here
  toasts.value.push({
    ...toastInfo,
    id: (Date.now() + Math.random()).toString(36),
  });
};
</script>

<style>
.visually-hidden {
  position: absolute;
  margin: -1px;
  border: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
</style>

Specify the Language for Each Document

Declaring the language used on your website is important for screen readers to accurately interpret the content, especially for multi-language websites. This can be done by setting the lang attribute at the document level of the application, as shown below:

<html lang="es">...</html>

Specifying the appropriate language can also be done at the component level, especially if the components have different languages. By setting the correct language on your website, you prevent a screen reader from using its default language when identifying text content.

Implement Accessible Animations

Animations in your application can be made accessible by listening for the "reduced motion" preference in your user's system. This allows for more control over the interfaces within an app.

By using the prefers-reduced-motion feature, you can configure the application's animations to respect the user's preference for reduced motion.

Here’s a sample code showing how to achieve this:

/* Remove all animations, transitions, and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce), (update: slow) {
    html*:focus-within* {
        scroll-behavior: auto;
    }

    *,
    **::before*,
    **::after* {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

Also, making animations optional by creating toggles for switching the presence of animations can come in handy, as shown in this demo by Una Kravets, using a simple “reduce animation” switch. Another example is the Animal Crossing website which has a toggle button on the header to enable or disable motion.

Consider Light and Dark Modes

Rather than limiting your users to just one style, it can be helpful to let them toggle between themes. This serves as a great way for them to customize the app to their need.

A simple theme switcher looks like this:

<template>
    <form class="theme-switcher">
        <label for="theme-switcher">Theme Switcher</label>
        <input type="checkbox" id="theme-switcher" v-model="isDarkTheme" />
    </form>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
const isDarkTheme = ref(false);

watch(
    isDarkTheme,
    () => {
        document.body.classList.toggle("light-theme");
    },
    { immediate: true }
);
</script>

<style>
.light-theme {
    background: #fff;
    color: #1e202a;
    transition: all 0.3s;
}
</style>

An alternative could be configuring your app to display following a user’s preferred system theme using CSS prefers-color-scheme. While doing this, ensure that all themes are accessible including fonts, and zooming levels.

Accessibility Tools for Vue.js Applications

Some several third-party libraries and packages are available to correct the scenarios that cause accessibility failures, help Vue developers comply with accessibility guidelines, and aid the journey in creating accessible applications.

Some examples of reliable Vue accessibility libraries include the following:

vue-announcer: This is a package that offers a convenient way to use live regions in your Vue app so that screen reader users are informed when there is a dynamic update to certain parts of your application. For example, loading indicators, progress notifications, etc.
a11y-vue-dialog: When building accessible modals, you don’t have to start totally from scratch. This a library for creating accessible modal dialogs within a Vue application.
focus-trap-vue: Assists in dealing with focus management— to send focus in and out of sight, under any circumstance.
vue-skip-to: Helps keyboard or screen reader users skip to the main content of an application for what matters most.
vue-dark-mode: This library gives your users more control regarding their theme preference when using your application.

Vue A11y is a community that is concerned about improving web accessibility in Vue.js applications. You can visit the webpage to find more accessibility tools.

How to Build an Accessible Vue Component

Now it's time to put theory into practice by building an accessible modal dialog component using Vue.

Modals are a very common design element on the web. When building a modal dialog, the most critical aspect of accessibility is focus management because it renders every other part of a screen inactive except itself.

In this short demo, we will learn how to improve accessibility in our apps when working with modals so that we expose accessibility information for screen reader users.

Making an accessible modal can be broken down into four main parts:

When opened, focus is set on the close button.
Elements outside the modal are made unreachable through a keyboard or mouse.
Tab order should be appropriately set.
When closed, focus is returned to the element that triggered the visibility of the modal.

At first glance, this may seem like a short list, but these tips can greatly enhance the user experience for your users.

Project Setup

First, create a new Vue project using Vite. We’ll name this project accessible-vue-dialog. Setup a new project using this command:

npm init vite@latest

Next, navigate into your project’s directory and run the development server:

cd accessible-vue-dialog
npm i

You can now view the frontend for the starting code in the browser by navigating to localhost:5173.

Building the Modal Component

In the components folder, create a new file called AppModal.vue. In this file, we’re going to build out the base modal interface with some input fields and buttons so that it represents a login modal. Feel free to use slots to render anything else.

We have created the modal with a div element, set its role to dialog, and sectioned the dialog semantically. Notice how we have subtly built an accessible form in our demo with proper markup. It's like achieving two goals with one action, isn't it?

To toggle the visibility of the modal, isOpen has been passed as a prop, and close is passed as an emit.

At this point, when you tab through the modal, you will notice that elements beneath the modal dialog can also receive focus, and we don’t want this. So, the first thing we can do to improve accessibility is to ensure that the close button on the modal receives focus whenever the modal is opened.

We’ll create the modal using a div element and set its role to dialog. Our modal dialog contains a header titled Login, which signifies the purpose of the modal. It’s followed by a form that holds email and password fields for user login. And finally, there will be action buttons to close or submit the form.

<template>
  <div class="modal-container">
    <div class="modal" role="dialog">
      <header class="modal-header">Login</header>
      <main>
        <form class="modal-form">
          <div class="form-control">
            <label for="email">Email</label>
            <input type="email" name="email" id="email" />
          </div>
          <div class="form-control">
            <label for="password">Password</label>
            <input type="password" name="password" id="password" />
          </div>
          <div class="form-btns-wrapper">
            <button @click.prevent="close">Close</button>
            <button @click.prevent="submitForm">Submit form</button>
          </div>
        </form>
      </main>
    </div>
  </div>
</template>

Let’s add some functionality to our modal. To control the visibility of the modal, let’s create a boolean property called isOpen that can be toggled between true and false. Next, we’ll create an event that closes the modal. Let’s call this event close and emit it whenever the “Close” button is clicked. Finally, we can create a simple alert message whenever a user submits a form.

<script lang="ts" setup>
import { PropType } from "vue";

const emits = defineEmits(["close"]);
defineProps({
  isOpen: {
    type: Boolean as PropType<boolean>,
    required: true,
  },
});

const close = () => {
  emits("close");
};

const submitForm = () => {
  alert("Hello, your form has been submitted!");
};
</script>

Our modal needs some styling to make it visually distinct and centred in the viewport. Let’s add these styles with appropriate sizes and margins for the modal and its content to our code.

<style scoped>
.modal-container {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  width: 20rem;
  transform: translateY(-2rem);
  margin: 0 auto;
  padding: 1.25rem;
  z-index: 90;
  background-color: #fff;
}

.modal-header {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.form-control {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.form-control label {
  margin-bottom: 0.25rem;
  width: 100%;
  display: block;
  flex-basis: 100%;
  text-align: left;
}

.form-control input {
  flex-basis: 100%;
  padding: 0.5rem;
  background-color: #fff;
  border: 1px solid #ddd;
}

.form-btns-wrapper {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}
</style>

At the end of the day, our AppModal.vue file should look like this:

<template>
  <div class="modal-container">
    <div class="modal" role="dialog">
      <header class="modal-header">Login</header>
      <main>
        <form class="modal-form">
          <div class="form-control">
            <label for="email">Email</label>
            <input type="email" name="email" id="email" />
          </div>
          <div class="form-control">
            <label for="password">Password</label>
            <input type="password" name="password" id="password" />
          </div>
          <div class="form-btns-wrapper">
            <button @click.prevent="close">Close</button>
            <button @click.prevent="submitForm">Submit form</button>
          </div>
        </form>
      </main>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { PropType } from "vue";

const emits = defineEmits(["close"]);
defineProps({
  isOpen: {
    type: Boolean as PropType<boolean>,
    required: true,
  },
});

const close = () => {
  emits("close");
};

const submitForm = () => {
  alert("Hello, your form has been submitted!");
};
</script>

<style scoped>
.modal-container {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  width: 20rem;
  transform: translateY(-2rem);
  margin: 0 auto;
  padding: 1.25rem;
  z-index: 90;
  background-color: #fff;
}

.modal-header {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.form-control {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.form-control label {
  margin-bottom: 0.25rem;
  width: 100%;
  display: block;
  flex-basis: 100%;
  text-align: left;
}

.form-control input {
  flex-basis: 100%;
  padding: 0.5rem;
  background-color: #fff;
  border: 1px solid #ddd;
}

.form-btns-wrapper {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}
</style>

Currently, when tabbing through the modal, you may notice that elements beneath the modal dialog can also receive focus, which is not desired. To improve accessibility, we need to ensure that the close button on the modal receives focus whenever the modal is opened.

With the help of a package called focus-trap, we can fix this without having to reinvent the wheel. Let’s run this command to install focus-trap into our project:

npm i focus-trap focus-trap-vue

Once that is done, import the package into the main.ts file of your app.

// main.ts
import { FocusTrap } from "focus-trap-vue";
app.component("FocusTrap", FocusTrap);

Next, in AppModal.vue, wrap the root element of the modal dialog (the element that should act as a focus trap) with the <FocusTrap> component.

<template>
  <FocusTrap
    v-if="isOpen"
  >
    <div tabindex="0" class="modal-container">
      <div class="modal" role="dialog">
        <header class="modal-header">Login</header>
        <main>
          <form class="modal-form">
            <div class="form-control">
              <label for="email">Email</label>
              <input type="email" name="email" id="email" />
            </div>
            <div class="form-control">
              <label for="password">Password</label>
              <input type="password" name="password" id="password" />
            </div>
            <div class="form-btns-wrapper">
              <button ref="closeBtn" @click.prevent="close">Close</button>
              <button @click.prevent="submitForm">Submit form</button>
            </div>
          </form>
        </main>
      </div>
    </div>
  </FocusTrap>
</template>

In the <FocusTrap> component, pass the initial-focus and active props to the FocusTrap component. To begin with, set the value of initial-focus to a function that returns a reference to the element that we want to place focus on when the modal dialog is opened. In this demo, that element will be the close button.

Generally, it is advisable to set the initial focus on an interactive element rather than the modal container itself.

<template>
  <FocusTrap
      v-if="isOpen"
    :initial-focus="() => $refs.closeBtn"
  >
    ...
  </FocusTrap>
</template>

Next, let’s set the value of active to the value of isOpen. This is what activates focus trap.

Our AppModal.vue component should now look like this:

<template>
  <FocusTrap
    :active="isOpen"
    v-if="isOpen"
    :initial-focus="() => $refs.closeBtn"
  >
    <div tabindex="0" class="modal-container">
      <div class="modal" role="dialog">
        <header class="modal-header">Login</header>
        <main>
          <form class="modal-form">
            <div class="form-control">
              <label for="email">Email</label>
              <input type="email" name="email" id="email" />
            </div>
            <div class="form-control">
              <label for="password">Password</label>
              <input type="password" name="password" id="password" />
            </div>
            <div class="form-btns-wrapper">
              <button ref="closeBtn" @click.prevent="close">Close</button>
              <button @click.prevent="submitForm">Submit form</button>
            </div>
          </form>
        </main>
      </div>
    </div>
  </FocusTrap>
</template>

<script lang="ts" setup>
import { PropType } from "vue";

const emits = defineEmits(["close"]);
defineProps({
  isOpen: {
    type: Boolean as PropType<boolean>,
    required: true,
  },
});

const close = () => {
  emits("close");
};

const submitForm = () => {
  alert("Hello, your form has been submitted!");
};
</script>

<style scoped>
.modal-container {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  width: 20rem;
  transform: translateY(-2rem);
  margin: 0 auto;
  padding: 1.25rem;
  z-index: 90;
  background-color: #fff;
}

.modal-header {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.form-control {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.form-control label {
  margin-bottom: 0.25rem;
  width: 100%;
  display: block;
  flex-basis: 100%;
  text-align: left;
}

.form-control input {
  flex-basis: 100%;
  padding: 0.5rem;
  background-color: #fff;
  border: 1px solid #ddd;
}

.form-btns-wrapper {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}
</style>

Now, each time the isOpen prop is true, the focus trap is activated, and the modal is fully focused. This time, tabbing around never leaves the modal. Make sure to set the tabindex="0" attribute on the root level element of the modal dialog component, so that your modal becomes a focusable one if it isn’t already.

<div tabindex="0" class="modal-container">

Finally, we need to render the AppModal component in App.vue and add a button for toggling the visibility of the modal.

// App.vue  

<template>
  <button @click.prevent="openModal">Open modal</button>
  <AppModal :isOpen="modalIsOpen" @close="closeModal" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import AppModal from "./components/AppModal.vue";

const modalIsOpen = ref(false);

const closeModal = () => {
  modalIsOpen.value = false;
};

const openModal = () => {
  modalIsOpen.value = true;
};
</script>

Right now, we have settled 1-3 of the 4 main parts required to build an accessible modal dialog:

When opened, focus is set on the close button.
Elements outside the modal are made unreachable through a keyboard or mouse.
Tab order should be appropriately set.

For item 4: when the modal is closed, focus is returned to the element that triggered its visibility, we can return focus to the button that opened the modal dialog by calling the focus() method on the button after the modal has been closed.

To achieve this, we have to create a watch function that checks if the modal is open or closed, in App.vue. In the watch, we pay attention to both the new and previous values of modalIsOpen .

If the new value of modalIsOpen is false and the old value of modalIsOpen is true, focus should be returned to the button that opened the modal dialog.

// Watcher to check the new and previous value of isOpen
watch(
  () => modalIsOpen.value,
  (newVal, oldVal) => {
    if (newVal === false && oldVal === true) {
      openModalBtn.value?.focus();
    }
  }
);
</script>

Your App.vue file should now look like this:

// App.vue
<template>
  <button ref="openModalBtn" @click.prevent="openModal">Open modal</button>
  <AppModal :is-open="modalIsOpen" @close="closeModal" />
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import AppModal from "./components/AppModal.vue";

const modalIsOpen = ref(false);

const closeModal = () => {
  modalIsOpen.value = false;
};

const openModal = () => {
  modalIsOpen.value = true;
};

const openModalBtn = ref<HTMLElement | null>(null);

// Watcher to check the new and previous value of isOpen
watch(
  () => modalIsOpen.value,
  (newVal, oldVal) => {
    if (newVal === false && oldVal === true) {
      openModalBtn.value?.focus();
    }
  }
);
</script>

That’s pretty much it on how to build an accessible modal dialog with Vue.js.

Vue A11yDialog is a tool that can help you easily build accessible modal dialog in Vue, but remember to set up the @dialog-ref emitted event which is required to call instance methods of the created dialog.

Testing for Accessibility in a Vue Application

Amidst demanding deadlines, it is important not to neglect accessibility testing.

As a result, there are a lot of helpful tools for testing if your web app is accessibility compliant. They include the following:

vue-axe: A tool that analyzes and audits pages of a Vue application and lists all accessibility issues, so that you can build better inclusive apps.
eslint-plugin-vuejs-accessibility: This plugin checks .vue files within your app, specifically focusing on detecting accessibility errors.
Google Chrome’s Lighthouse
WAVE: This is an awesome accessibility tool also available as a browser extension for testing your application.
Landmarks is an extension available on Chrome and Firefox. It assists in debugging the correctness of landmarks within your application and identifying the need for additional labels.
HeadingsMap is an extension available on Chrome and Firefox that offers a quick overview of the meaningfulness and structure of the headings in your application. It simulates the experience of a screen reader user.

Wrapping Up

When building your Vue apps, it is important to prioritize accessibility. Remember that web accessibility is an ongoing process, so don't let the pursuit of perfection hinder you from getting started, even if you make mistakes along the way.

Implementing accessibility may seem daunting at first, but I assure you it is not as difficult as it appears, especially now that you have read this article. You can find all the demo code in this GitHub repository.

Originally published at https://www.vuemastery.com on December 21, 2023.

Nuxt Icon

Vue Mastery team — Thu, 14 Dec 2023 10:48:48 +0000

Written by David Atanda

Nuxt Icon is a module that allows Nuxt developers to directly access hundreds of thousands of everyday icons within their app components. It presents a fast, elegant, and performant-friendly way to add icons to our app’s components. The module greatly simplifies the developer experience of working with icons by giving instant access to icons in a simple way rather than manually downloading SVG icons and adding them to your app.

Nuxt Icon pulls its icons from Iconify’s API which is an open-source repository for icons in general. This allows us to access a large number of icons that are constantly increasing based on the open-source contributions.

Installation

Run this command in the terminal to install Nuxt-Icon with npm :

npm install --save-dev nuxt-icon

If you’re using yarn, make sure to run this instead:

yarn add --dev nuxt-icon

Next, we’ll have to add nuxt-icon to our nuxt.config.ts file to initialize it within our app.

import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
  modules: ['nuxt-icon']
})

Usage

To use the icons in our app, we’d have to use the component. This component has three main props: name, color, and size.

The name prop represents the icon’s name. You can find the name of your intended icon inside iconify’s site.
We use color to define the literal color of the icon.
size describes the height and width of the icon

After installing Nuxt-Icon you can use it by just adding the component. You now add the props above to the component to display the correct icon.

For example, here we add the name and color props to the component.

<Icon name="mingcute:add-fill" color="black" />

You can also convert an emoji into an SVG icon by using the emoji as the icon’s name

<Icon name="🚀" />

Custom Icon

Finally, we can use a custom icon within our app. It just has to be within the components/global/ folder.

For example, we have a custom icon called CustomIcon.

<Icon name="CustomIcon" />

In this case, CustomIcon is imported from components/global/CustomIcon.vue

// CustomIcon.vue
<template>
  <svg width="47.63" height="32" viewBox="0 0 256 172"><path fill="#80EEC0" d="M112.973 9.25c-7.172-12.333-25.104-12.333-32.277 0L2.524 143.66c-7.172 12.333 1.794 27.749 16.14 27.749h61.024c-6.13-5.357-8.4-14.625-3.76-22.576L135.13 47.348L112.973 9.25Z" /><path fill="#00DC82" d="M162.505 38.733c5.936-10.09 20.776-10.09 26.712 0l64.694 109.971c5.936 10.091-1.484 22.705-13.357 22.705H111.167c-11.872 0-19.292-12.614-13.356-22.705l64.694-109.971Z" /></svg>
</template>

Config

We can create a configuration in our app for Nuxt-Icon. This config is a set of rules for the default state of our and its props. This can be helpful when building a large project where you need to abstract certain parts of the component to make sure there’s not a lot of repetition, allowing you to stick to the DRY (Don’t Repeat Yourself) principle.

Now, let’s define a single configuration that’s applicable everywhere in our app. To do that, create an app.config.ts file at the root of the project and set up nuxtIcon.

export default defineAppConfig({
  nuxtIcon: {
    size: '20px', 
    class: 'app-icon', 
    aliases: {
      'mLogo': 'logos:medium',
    }
  }
})

In the config above, we’re defining the size of all components in our app as 20px and setting the CSS class to app-icon. The aliases object allows us to assign a name to the actual icon name as mentioned earlier; usually a simpler and intuitive name. In the configabove, we’re replacing logos:medium with mLogo.

Please note that without writing a custom config, the default size of all will remain 1emand the default class, icon.

An additional object you can add to the config file is iconifyApiOptions. It contains a property called url which is only useful if you have a self-hosted version of iconify; you can add the URL endpoint of your version. In this case, you can also add a publicApiFallback property that’s a boolean to determine whether to fall back to the public Iconify API if the self-hosted API doesn’t work. This fallback only works for the component, not for the component (we’ll discuss what the component is in a bit).

export default defineAppConfig({
  nuxtIcon: {
    // ...
    iconifyApiOptions: {
      url: 'https://<your-api-url>',
      publicApiFallback: true 
    }
  }
})

You can find more details about the config and all its available properties here.

Render Function

You can display an in your Nuxt component using the render function. First, you import it like this:

import { Icon } from '#components'

Then assign it to a variable called CustomIcon. Keep in mind that while assigning it to a variable, we have to define the props. The name prop is defined as logos:medium and color is defined as black.

const CustomIcon = h(Icon, { name: 'logos:medium', color: 'black' })

Go ahead to use it as a component within our app’s component as .

<script setup>
import { Icon } from '#components'const CustomIcon = h(Icon, { name: 'logos:medium', color: 'black' })
</script>
<template>
  <p><CustomIcon /></p>
</template>

Let’s go back to what is. It uses the icon as a mask-image and uses to eventually render the icon on your browser. It’s mostly for performance reasons than anything because besides the component name, every other thing is the same.

<template>
  <IconCSS name="logos:medium" />
</template>

P.S: is currently experimental with Nuxt UI and is constantly changing.

Now that we’ve gone through Nuxt Icon and how to use it within our regular applications, let’s now replicate Medium’s onboarding screen using Nuxt Icon.

Building Our Onboarding Screen

Now that we’ve been introduced to Nuxt Icon and its properties, it’s time to put it into practice by building with it. Let’s take a look at what we’ll be building.

Our demo app is the onboarding screen for Medium users. While replicating this screen, we’d be implementing all icons using Nuxt-icon. Let’s jump right in:

Installation

To get started, we’ll need to set up our Nuxt project. Run this command in your terminal:

npx nuxi@latest init nuxt-medium

Navigate into your project’s directory and initiate your project:

cd nuxt-medium

npm run dev

Now we can install Nuxt-Icon. Run this command in your terminal:

npm install --save-dev nuxt-icon

#or

yarn add --dev nuxt-icon

export default defineNuxtConfig({
  modules: ["nuxt-icon"],
  devtools: { enabled: true },
});

Styling and Typography

Let’s start out by adding the right fonts to the project. Go into our sample repo and download these two fonts: GT-Super-Display-Light-Trial and Sohne. Once they’ve been downloaded, create a fonts folder inside our project’s public folder and have them live there. So both font files live inside the public/fonts folder.

We’re going to be styling our project using SASS. Feel free to use plain CSS if you want

Within the root folder, create an assets folder, then create a scss folder inside of it. Now, inside the assets/scss folder, we’re going to create four stylesheet files: base.scss ( foundational styles for our HTML elements), layout.scss(page styles), main.scss (where we import all the style files), and typography.scss(our font styles).

The goal here is to add our custom font files to the stylesheet. Within our typography.scss, we add these fonts using @font-face.

// typography.scss
@font-face {
  font-family: "GT-Super-Display-Light-Trial";
  src: url("/fonts/GT-Super-Display-Light-Trial.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "sohne";
  src: url("/fonts/sohne.otf") format('opentype'),;
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

For base.scss file, we take a bunch of the main HTML elements and give them a default style for our project. These include setting the margin, border, and padding to 0. Then, we go on to set the default font-family to "sohne" and vertical-align is set to baseline.

We then set our default display to block; while margin-block-start and margin-block-endare set to 0.

// base.scss
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-family: "sohne", Courier, monospace;
  vertical-align: baseline;
  margin-block-start: 0;
  margin-block-end: 0;
  display: block;
}

For the html, set your font-size to 62.5% because we’re using rem to represent font-sizeinstead of px. So, the logic is that the root font size of our browsers is 16px, and we want to make it possible to convert our px to rem in tens. So, we calculate the percentage of 10px out of 16px as 62.5%.

Technically, this means that 10px = 1rem everywhere in our app. For instance a font-size of 14px can be defined as 1.4rem.

html {
  /* 62.5% of 16px browser font size is 10px */
  font-size: 62.5%;
}
.some-element {
  /* 1.4 * 10px = 14px */
  font-size: 1.4rem;
}

Layout

Next, we define our app’s layout. Go into your app.vue and create a parent div

with the CSS class .wrapper. This is going to act as a container for our app display.

// app.vue
<template>
  <div class="wrapper">

  </div>
</template>

Now, let’s go into our layout.scss file in scss/layout.scss and style our .wrapper class. We’ll set the display to grid and set its content to the center with justify-content: center.

.wrapper {
  display: grid;
  justify-content: center;
}

Header

Now, to the exciting part. Let’s create another div inside of the .wrapper div and add a class called .wrapper__inner.

<template>
  <div class="wrapper">
    <div class="wrapper__inner">

    </div>
  </div>
</template>

Similarly, we’ll add the SCSS styles for this new div in layout.scss. Let’s define its display as grid and font-family as GT-Super-Display-Light-Trial.

.wrapper {
  ...
  &__inner {
    display: grid;
    font-family: "GT-Super-Display-Light-Trial", Courier, monospace;
  }
}

Now, we can add our component inside the div. Let’s call its class name wrapper__inner__icon, and its props include name, width, height, and color.

The name of the Icon is logos:medium, the width is 7em, height is 2.5em, and color is black.

<template>
  <div class="wrapper">
    <div class="wrapper__inner">
      <Icon
        class="wrapper __inner__ icon"
        name="logos:medium"
        width="7em"
        height="2.5em"
        color="black"
      />
    </div>
  </div>
</template>

Directly beneath the , we can add the necessary text for the title of the onboarding page and its description.

<template>
  <div class="wrapper">
    <div class="wrapper__inner">
      <Icon
        class="wrapper __inner__ icon"
        name="logos:medium"
        width="7em"
        height="2.5em"
        color="black"
      />
      <h3 class="wrapper __inner__ title">What are you interested in?</h3>
      <p class="wrapper __inner__ select">Choose three or more.</p>
    </div>
  </div>
</template>

Firstly, we’d give a general style to wrapper__inner__icon and wrapper__inner__select. We’ll set justify-self for each of them to center and font-size to 2rem.

.wrapper {
  display: grid;
  justify-content: center;
  &__inner {
    display: grid;
    font-family: "GT-Super-Display-Light-Trial", Courier, monospace;
    &__icon,
    &__select {
      justify-self: center;
      font-size: 2rem;
    }
    &__title {
      margin-top: 8rem;
      justify-self: center;
      margin-bottom: 4rem;
      font-size: 2.8rem;
      line-height: 3.2rem;
      font-weight: 400;
    }
  }
}

For wrapper__inner__title, we’d set it’s margin-top to 8rem, margin-bottom to 4rem, and justify it to the center. For the font-size, it’ll be slightly more prominent than the icon at 2.8rem, line-height is set at 3.2rem, and font-weight at 400.

Let’s run our app’s development server

#yarn
yarn dev

#npm
npm run dev

We should see our app displayed in our browser:

Options List (Categories)

Next, we’ll be displaying our list of categories for users to select while onboarding.

Let’s create a new div for this section. We’ll give the div a class of wrapper__options

<div class="wrapper__options">

</div>

Now, let’s add styles for our .wrapper__options. Set the display to flex, width to 70%, and wrap the div’s content using flex-wrap: wrap.

Next, let’s add a margin of 4.8rem auto 13vh auto. This helps us to set div in the middle and add some margin on top and below.

To enable scrolling, we’ll add overflow: auto, define the gap between the div items as 1rem, and justify-content: center.

.wrapper {
  display: grid;
  justify-content: center;
  &__inner {
    ...
  }
  &__options {
    display: flex;
        width: 70%;
        flex-wrap: wrap;
    margin: 4.8rem auto 13vh auto;
    justify-content: center;
    gap: 1rem;
    overflow: auto;
    @media (max-height: 800px) {
      height: 60vh;
    }
  }
  &__footer {
    ...
  }
}

For the content, let’s loop over each option. The list of options we want to display are topic categories for preferred articles on Medium. Within the root folder, create a new folder called data and add the file item-list.js. Copy and paste the file’s content from here.

// data/item-list.js
export const categories = [{ id: 1, icon: "ant-design:code-filled", name: "Programming", }, { ... }]

Individual item in the categories array contains an id, the icon’s name, and the display name for each item.

Let’s import the categories array into app.vue and loop over its items. We’d be using v-forto loop over it with v-for="category in categories", and define the :key prop with category.id.

<script setup>
import { categories } from "/data/items-list.js";
</script>
<div class="wrapper__options">
  <div :key="category.id" v-for="category in categories">
    <OptionButton :category="category" />
  </div>
</div>

We’re creating a new component to loop over called: . This component with be inside our components folder as components/OptionButton.vue.

Within the component, we define the props. In this case, we use defineProps to define the category prop; its type is an Object and it’s required.

Next, we’d want to change the UI of the button when a user clicks and selects a category. To do this, let’s create a reactive variable called toggleUser to track this behaviour.

// OptionButton.vue
<script setup>
import { ref } from "vue";
const props = defineProps({
  category: {
    type: Object,
    required: true,
  },
});
const { category } = props;
const toggleUser = ref(false);
</script>

This entire component is a . Directly on the we have the @click event to change the style when it’s clicked. In our case, once it’s clicked we want to change the booleanvalue for toggleUser. We also add dynamic classes that takes effect based on boolean value.

Technically, anytime toggleUser is true, .wrapper__options__button__active style is added to the . All it does is change the border’s color to green when clicked.

The first in the button is the avi that displays the icon property that we’re passing into it through the category prop. We’ll set the :name prop to category.icon, size to 1.5em, and class is wrapper__options__button__avi. Then, we’ll display the category.name.

Next, we have two icons: the plus icon (clarity:plus-line)and check (iconamoon:check-light) icon. Let’s use v-if to display the plus icon when toggleUser is false and vice-versa with the check icon.

<template>
  <button
    @click="toggleUser = !toggleUser"
    :class="[
      toggleUser && 'wrapper __options__ button__active',
      'wrapper __options__ button',
    ]"
  >
    <Icon
      size="1.5em"
      class="wrapper __options__ button__avi"
      :name="category.icon"
    />
    {{ category.name }}
    <Icon
      v-if="!toggleUser"
      size="1.5em"
      name="clarity:plus-line"
    />
    <Icon
      v-else
      size="1.5em"
      name="iconamoon:check-light"
      color="green"
    />
  </button>
</template>

For the styles, .wrapper__options__button has a transparent border and the border-radiusis 9.9rem. We also add other styles like setting the display to flex, aligning the items to the center, adding the appropriate font-size, and padding.

.wrapper {
  &__options {
    ... 
    &__button {
      border: 1px solid transparent;
      border-radius: 9.9rem;
      display: flex;
      align-items: center;
      font-size: 1.4rem;
      padding: 0.7rem 1.5rem;
      &__icon {
        margin-left: 0.8rem;
      }
      &__avi {
        margin-right: 0.8rem;
      }
      &__active {
        border: 1px solid green;
      }
    }
  }
  ...
}

.wrapper__options__button__icon and .wrapper__options__button__avi both have a margin-left and margin-right of 0.8rem respectively. As mentioned earlier, .wrapper__options__button__active sets the border to the color green.

Footer

Go back into the app.vue, and inside of it, create a div at the bottom with the class .wrapper__footer with a with .wrapper__footer__button.

<template>
  <div class="wrapper">
    <div class="wrapper__inner">
      ...
    </div>
    <div class="wrapper__options">
      ...
    </div>
    <div class="wrapper__footer">
      <button class="wrapper __footer__ button">Continue</button>
    </div>
  </div>
</template>

For the styles, we set the height of .wrapper__footer as 13vh, width is 100%, bottom is 0, and position is fixed. We also set the appropriate line-height to 2, text-align is center, background-color is white, font-size is 3rem, and font-weight is bold.

.wrapper {
  ... 
  &__footer {
    line-height: 2;
    text-align: center;
    background-color: white;
    font-size: 3rem;
    font-weight: bold;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 13vh;
    &__button {
      font-family: "sohne", Courier, monospace;
      border: none;
      background-color: black;
      color: white;
      border-radius: 9.9rem;
      width: 45%;
      padding: 1.2rem 0;
      font-size: 1.4rem;
      margin: 1.2rem 0;
    }
  }
}

.wrapper__footer__button has a font-family of "sohne", Courier, monospace. background-color is black, color is white, and border-radius is 9.9rem.

We set the 's width to 45%, padding is set to 1.2rem 0, we have font-size: 1.4rem;, border: none, and margin is 1.2rem 0.

Wrapping Up

Congratulations on making it this far! You have successfully learned about Nuxt-Icon and how to use it in your production app. Here is the source code and the live demo to this tutorial.

If you’d like to advance your learning, check out the official Nuxt-Icon documentation.

https://medium.com/media/dc9ed2ee6467c10b34d002942813c6d5/href

Originally published at https://www.vuemastery.com on December 14, 2023.