Forem: Vue Mastery team

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.

Build a Greeting Card Maker w/ Vue 3 + Satori

Vue Mastery team — Thu, 19 Dec 2024 10:48:20 +0000

Written by Dubem Izuorah

For the creative developers out there seeking a festive project that leverages your coding skills, let’s build a digital Holiday Greeting Card that you can customize, add your own photo, and instantly download. We’ll be using some cutting-edge web technologies to make this happen, and along the way, you’ll learn about graphics generation, several cool packages, and some neat Vue 3 tricks.

What we are going to be building

Screenshot of Holiday Greeting Card Maker interface

By the end of this tutorial, you’ll have:

A fully functional web app for creating personalized holiday cards
Hands-on experience with Vue 3, Nuxt, and some powerful rendering libraries
An understanding of how to dynamically generate graphics in the browser

Project Initialization

We’ll use Nuxt 3 as our framework because it provides a robust, batteries-included setup for Vue applications. Open your terminal and let’s create our project by running the commands below:

npx nuxi init christmas-card-maker 
cd christmas-card-maker
yarn install

Why Nuxt? It gives us a solid foundation with built-in routing, easy module integration, and an overall easy setup. Perfect for our greeting card maker!

Installing Our Toolkit

Now, we’ll add the libraries that will make our card generation magic happen. Run the following commands on your terminal:

yarn add @vue/server-renderer @vueuse/core nuxt satori satori-html
yarn add -D @nuxtjs/tailwindcss

Let me break down why we’re choosing each of these:

@vue/server-renderer: Allows us to render Vue components & props as HTML strings - crucial for our SVG generation
satori: Converts our HTML and CSS string into beautiful SVG graphics
Satori HTML: A helper library for rendering HTML content compatible with Satori
@vueuse/core: Provides helpful utilities like local storage, watchDebounce and many more
@nuxtjs/tailwindcss: Gives us rapid styling capabilities

Configuring our Project

Let’s update our nuxt.config.ts to set up our development environment:

📄 nuxt.config.ts

export default defineNuxtConfig({
  ssr: false,
  devtools: { enabled: true },
  modules: ["@nuxtjs/tailwindcss"],
});

We’re disabling server-side rendering for this client-side app and enabling Tailwind CSS module. This gives us a lightweight, responsive setup perfect for our greeting card maker.

Coding our Card Maker

Now that we’re all setup, let’s dive into creating our Holiday Card Maker step-by-step.

Step 1. Implementing the Card Maker Interface

Let’s first focus on creating a simple layout for our card maker. We’ll set up a form with fields for the user to add a name, greeting, and an image upload. We’ll also add a preview area where the card will be displayed.

Here’s what the base layout will look like:

📄 app.vue

<template>
  <div class="flex justify-center h-screen items-start bg-gray-100 pt-20">
    <div class="border p-8 w-96 bg-white flex flex-col gap-8">
      <h1 class="text-xl font-medium">Christmas Greeting Card Maker</h1>
      <div class="border aspect-square banner-here relative" v-html="svg"></div>
      <form class="flex flex-col gap-4">
        <input type="text" v-model="form.name" class="px-4 py-1 border w-full" placeholder="Enter name" />
        <input type="text" v-model="form.greeting" class="px-4 py-1 border w-full" placeholder="Enter greeting" />
        <input type="file" accept=".png, .jpg, .jpeg" @change="handleFileChange" class="px-4 py-1 border w-full" />
        <small class="text-gray-400">Must be an image below 100kb, png, jpeg, or jpg formats only.</small>
        <button class="bg-indigo-500 text-white px-4 py-2" @click.prevent="downloadSvgAsJpeg(svg)">Download</button>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
...

So what’s happening here?

Card Preview: The with v-html="svg" is where our card will appear as an SVG once it’s generated.
Form Fields:

Two text fields: name and greeting. These will dynamically update the card when the user types.
File input: Allows users to upload an image.

File Restrictions: The small tag below the file input informs users about allowed file size and formats. Large images can slow down rendering, so we’re capping the size at 100KB.
Download Button: This triggers the downloadSvgAsJpeg function, which saves the card as a JPEG image.

Step 2. Setting up Dependencies

Now let’s set up the logic and install the packages needed to power our Holiday Card Maker. Let’s import a few packages that will make things easier for us.

📄 app.vue

...
</template>

<script setup lang="ts">
import { createSSRApp } from "vue";
import { renderToString } from "@vue/server-renderer";
import { useLocalStorage, watchDebounced } from "@vueuse/core";
import satori from "satori";
import { html } from "satori-html";
import ChristmasCard from "./components/ChristmasCard.vue";
const form = useLocalStorage("app-form", {
  name: "",
  greeting: "Merry Christmas",
  photo: null,
});
const svg = ref("");
const fonts = ref([]);
...
</script>

Why do we need this setup?

createSSRApp and renderToString : Render Vue components to HTML strings by virtually mounting the component and its props and rendering out its final output.
useLocalStorage : Save form data locally, so users don’t lose progress if they reload.
watchDebounced : Helps us prevent performance issues by delaying the processing of user inputs until a certain duration after typing has stopped.
satori : Convert HTML to SVG for our graphics.
satori-html : Parse HTML strings into a format satori understands.
The fonts ref uses useLocalStorage to persists the user’s inputs. If you refresh the page, we won’t lose the form input and can continue where we left.
The svg and fonts variables will store the generated card design and loaded font data.

Step 3. Creating the Card Template

Next, let’s create the card template component we imported earlier. This is where the magic happens.

We’ll use the data from the form to personalize the card. In components/ChristmasCard.vue, we’ll design our card’s visual template. Think of this like designing a canvas where users can personalize their greeting.

📄 components/ChristmasCard.vue

<template>
  <div class="w-full bg-red-500 h-full flex flex-col text-white text-7xl font-bold p-10 items-center justify-center"
    style="background-image: url(/img/sincerely-media-8EhZobADF8M-unsplash.jpg);">
    <div class="font-bold mb-8 " style="font-size: 100px;"> {{ greeting }}</div>
    <img v-if="photo" :src="photo" class="rounded-full border-4 border-red-900 mb-8" style="width:400px;height:400px">
    <div class="bg-red-500 px-2 py-2">From</div>
    <div> {{ name || 'Add your name here' }}</div>
  </div>
</template>

<script setup lang="ts">
defineProps(['name', 'greeting', 'photo'])
</script>

Here’s what’s happening:

Placeholders: {{ greeting }} and {{ name }} dynamically display user inputs.
Image Upload: If the user uploads an image, it appears in the card.
Background: We’re adding a festive look with a red background image from unsplash.

Step 4. Loading Fonts and Initializing the App

Back to the app.vue file, here we have to first load up at least one font file, as Satori requires it to render the graphics. Since our app logic happens on the client, let’s set up some hooks to initialize things and render the graphics for the first time.

📄 app.vue

// Back to app.vue
...
onMounted(async () => {
  fonts.value = await loadFonts([{ name: "InstrumentSans", url: "/fonts/InstrumentSans-Regular.ttf" }]);
  refreshGraphics();
});

watchDebounced(form, refreshGraphics, { deep: true, debounce: 500, maxWait: 1000 });
async function loadFonts(fonts) {
  return Promise.all(
    fonts.map(async (font) => ({
      ...font,
      data: await (await fetch(font.url)).arrayBuffer(),
    }))
  );
}
...

Breaking it down:

We use the onMounted hook, which is auto-imported in Nuxt 3, to load and store the fonts needed for generating the graphics.
You can use any .ttf font file. To get the same font I used, “Instrument Sans” font, visit Google Fonts, click “Get Font,” then download the font files. Extract the ZIP file, and copy the .ttf font (e.g., InstrumentSans-Regular.ttf) into the public/fonts folder of your Nuxt project. Reference it as /fonts/InstrumentSans-Regular.ttf in your code.
Inside onMounted, we call refreshGraphics to generate the initial SVG graphics once the font has loaded.
We use watchDebounced to track changes in the form and update the graphics 500ms after the last update. Note: this is a performance trick.
The loadFonts function loads the required fonts all at once using Promise.all instead of sequentially. Another performance trick to note.

Step 5. Generating SVG from Vue Component

Here’s where we tie everything together. We’ll convert the ChristmasCard component into an SVG.

📄 app.vue

...
async function refreshGraphics() {
  const content = await renderToHTML(ChristmasCard, form.value);
  const markup = html(content);
  svg.value = await satori(markup, { width: 1080, height: 1080, fonts: fonts.value });
}
...

Let me explain:

We first use the renderToHTML utility function to convert the ChristmasCard.vue component imported earlier into HTML string
Then we are using the html function imported from satori-html earlier to convert the HTML string into a markup format acceptable by the satori package
Finally, we call satori, passing in the markup, width and height configuration as well as the fonts that we loaded earlier in the onMounted hook
The resulting svg string is stored in the svg.value ref, which we used in the app.vue template section to display the svg on the viewport. See in the template section

Step 6. Utility Functions

Let’s wrap up everything we’ve been working on by adding some essential utility functions for our code and template features.

Adding Image Upload Support

We’re adding functionality to handle image uploads. This will ensure that users can select an image, check if it’s within the size limit (100KB), and display it.

Paste this below the refreshGraphics code:

📄 app.vue

...
async function handleFileChange(event: Event) {
  const file = (event.target as HTMLInputElement)?.files?.[0];
  if (file && file.size > 100 * 1024) throw new Error("File size must be below 100kb");
  const reader = new FileReader();
  reader.onload = () => (form.value.photo = reader.result as string);
  reader.readAsDataURL(file);
}
...

Why check file size? We’re limiting the file size to ensure smooth performance. Anything larger could slow things down, so 100KB is a safe upper limit.

Converting Vue component to HTML string

Next, we’ll render the Vue component as an HTML string. This allows us to use Vue for server-side rendering, email templates, or static site generation. In this case, it’s for generating a greeting card template. Let’s add this as well to our code.

...
async function renderToHTML(Component, props = {}) {
  return await renderToString(createSSRApp(Component, props));
}
...

Explanation:

createSSRApp : This function is used to create a server-side rendered (SSR) Vue application instance, which can be rendered to an HTML string.
renderToString : This renders the Vue component (GreetingCard) to an HTML string, passing any props needed by the component.

Downloading the Card as a JPEG

Finally, let’s add code that will enable us to download our card as a JPEG.

📄 app.vue

...
function downloadSvgAsJpeg(svgString, filename = "image.jpeg") {
  const blob = new Blob([svgString], { type: "image/svg+xml" });
  const url = URL.createObjectURL(blob);
  const img = new Image();

img.onload = () => {
    const canvas = document.createElement("canvas");
    canvas.width = canvas.height = 1080;
    canvas.getContext("2d")?.drawImage(img, 0, 0, 1080, 1080);
    const link = document.createElement("a");
    link.href = canvas.toDataURL("image/jpeg");
    link.download = filename;
    link.click();
    URL.revokeObjectURL(url);
  };
  img.src = url;
}
</script>
<style>
...

Why does this work? By using HTML Canvas API, we can draw the SVG onto the canvas and convert it into a JPEG for easy downloading. It’s a quick and efficient way to generate image files from vector graphics.

Step 7. Styling

To ensure the SVG element is displayed correctly within the container, we need to apply some CSS styling. Since the generated SVG has a fixed size of 1080px by 1080px, but the parent container is smaller, we need to scale the SVG to fit inside the container without distortion.

📄 app.vue

...

<style>
.banner-here svg {
  width: 100%;
  height: 100%;
}
</style>

This CSS rule ensures that the SVG element inside the .banner-here div is resized to fill the available space while maintaining its aspect ratio.

By now, your project should look something like this screenshot. Let’s run it to see the real magic!

Running our code

To see our app in action, run the command below and open http://localhost:3000 on your browser.

For reference, here is the Github repo for this tutorial.

yarn dev

You should see something resembling the interface in the GIF above. You can edit the details, add an image, and download your image. Congrats! You now have your own personal Holiday Card maker.

Wrapping Up

You’ve just built a personalized greeting card maker! 🎉 But don’t stop here. Experiment with different designs, add more customization options, or even create cards for other occasions.

Some ideas to expand your project:

Add more background themes
Include text color/font selection
Create templates for birthdays, anniversaries

Want to do more on the client side? Discover how to render 3d objects in the browser by reading this article.

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

What’s next for Vue in 2025?

Vue Mastery team — Wed, 18 Dec 2024 10:00:15 +0000

Written by Andy Li

As we head into 2025, staying on top of the Vue ecosystem isn’t just about keeping up — it’s about gaining the competitive edge that comes with mastering the latest features, performance improvements, and development workflows that will shape the future of Vue applications, including being prepared for any changing APIs of the tools we use.

In this article, we’ll explore the upcoming releases of key Vue tools: Nuxt v4, Vite v6, Vitest v3, and Pinia v3. We’ll also examine the current state of Vue’s Vapor mode.

Let’s explore the key updates coming for Vue developers. You’ll understand how these tools are evolving and how to prepare your development workflow for 2025!

Nuxt 4

While Nuxt v4 doesn’t have a confirmed release date yet, you can already try out its features!

Most of the Nuxt v4 features are already available in the current version of Nuxt v3 — you just need to opt into them through the Nuxt config file:

📄 /nuxt.config.js

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

Make sure you’re using Nuxt v3.12 or higher to enable these features. To see the complete list of available Nuxt 4 features, check out my article Upgrading to Nuxt 4.

Even without updating the config, you can access some Nuxt 4 features by default in v3.13 or higher. I cover two of these features — Nuxt Route Groups and Custom Fetch Trigger — in my article Nuxt 4 features you can use now.

Vite 6

Vite is a tool that many frameworks depend on, powering the build process of countless modern web apps. The recently released Vite v6 introduces the Environment API — a feature that standardizes how JavaScript runs across different environments (client, server, edge, etc.). While most developers won’t use the Environment API directly, it serves primarily as a tool for framework and plugin creators.

Another recent important topic of Vite is the transition from Rollup to Rolldown. Set to replace Rollup in Vite’s internal achitecture, Rolldown is a new build tool that promises significantly faster build times and better memory efficiency, which will be especially beneficial for large-scale applications. For those who are wondering, Vite v6 is still using Rollup as its bundler.

If you want to learn more about Vite and Rolldown, you can check out the Build Process of a Vue app: Rollup vs Rolldown article.

Vitest 3

Vitest is currently at v2.1. Since it’s built on top of Vite, Vitest will release v3 in January 2025 to align with Vite’s new version. In terms of functionality, Vitest v3 is essentially equivalent to what would have been “Vitest v2.2.”

The Vitest Node API — which lets you run tests through a Node.js program — remains experimental in v2.1. While it will stay experimental in v3.0, the Vitest team plans to make it a stable feature in v3.1.

Pinia 3

Pinia is the official store management tool for Vue.js. The best thing about Pinia is that its API has been stable since v1, and v3 is no exception.

You still define a store with defineStore:

import { defineStore } from 'pinia'

export const useSampleStore = defineStore({})

You can still set your state, getters, and actions the same way:

export const useSampleStore = defineStore('sample', {
  state() {
    return { text: '' }
  },
  getters: {
    uppercase(state) {
      return state.text.toUpperCase()
    }
  },
  actions: {
    setText(val) {
      this.text = val 
    }
  }
}

And you can still use the Composition API style syntax to do the same thing:

export const useSampleStore = defineStore('sample', () => {
  const text = ref('')

const uppercase = computed(() => {
    return text.value.toUpperCase()
  })
  const setText = (val) => {
    text.value = val
  }
  return { text, uppercase, setText }
})

The biggest change of this new version is that it will drop support for Vue v2. So this means, if you plan to use Pinia v3, your app would have to be running Vue v3.

Vapor Mode

Vue’s Vapor mode is still under research and development.

If you haven’t heard of it, it’s a version of Vue.js that doesn’t rely on Virtual DOM for rendering. Every time the state of a component is changed, Vue.js will create a Virtual DOM (VDOM) to represent the component’s new rendered result. Then, the VDOM is compared to the VDOM from the previous rendering in a process called diffing to figure out what has to be updated in the actual DOM.

Vapor Mode is designed to eliminate this Virtual DOM creation and the diffing steps, in order to make the reactive process faster.

By default, Vue.js with Virtual DOM is already fast. However, if you have too many reactive elements on the same page, and they have to be updated frequently, the user experience can get laggy at times. This is the use case for which Vapor mode is being created.

Vapor mode basically compiles your source code into a runtime version of the code that is already aware of what has to be updated when something is changed. More work is done in compile time so that less work has to be done in runtime.

Although Vapor Mode is still in development, you can experiment with it through the vue-vapor repo. Since it’s designed as a drop-in performance upgrade, you won’t need to modify your Vue.js components to benefit from the faster rendering — though your components must use the Composition API syntax.

On Vue Mastery, you can soon check out our Vapor Mode course taught by Vue Creator Evan You!

What’s Next for Vue in 2025

While 2025 doesn’t seem poised to drastically disrupt your Vue development workflow, we can expect positive evolution of the tools we already know and use. The Vue ecosystem has been steadily stabilizing, with fewer syntax changes compared to previous years. This stability means you won’t need to worry about your code breaking when installing new versions.

Staying tuned into the latest tools, workflows, and best practices in the Vue ecosystem ensures we stay on the leading edge of our career field. Our library of Vue courses, conferences talks and articles can help you stay at the top of your game, and right now you can get an entire year’s subscription for 50% off ! Become the best Vue developer you can be in 2025.

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

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>