Vue.js Tutorials - Vue.js Courses and Tutorials

Nuxt 3 Beta First Impressions

Written by Daniel Kelly

Nuxt 3 Beta made it's debut on October 12 and I couldn't be more thrilled to give the tires a good kick and take it for a test drive. Here's an overview of some of the cool new features, as well as some of the quirks I've found.

Tips and Gotchas for Using key with v-for in Vue.js 3

Written by Daniel Kelly

When working with v-for in Vue it is typically recommended to provide a special key attribute. Something like this:

<div v-for="item in items" :key="item.id">

The purpose of this key attribute is to give "a hint for Vue's virtual DOM algorithm to identify VNodes when diffing the new list of nodes against the old list" (from Vue.js Docs).

What’s Coming in Nuxt 3?

Written by Daniel Kelly

With the conclusion of the first Nuxt Nation Conference, a lot of us have Nuxt 3 on the brain. So what did the conference yield about the future of Nuxt? Here's quick overview of what we learned!

Import Aliases in Vite

Written by Daniel Kelly

Perhaps, you're moving from Vue CLI to Vite as your build tool of choice and in the process you realize that the @ alias no longer works 😱.

This was exactly my experience, as well as my reaction. How in the world was I going to avoid such nasty looking imports as this ../../../someComponent.vue?

What is a Vue.js Composable?

Written by Daniel Kelly

Vue 3 introduced the Composition API, which has since taken the community by storm. In my opinion, the single best feature of the Composition API is the ability to extract reactive state and functionality into their own reusable modules or "composables".

Building a Multi-Step Form with Petite-Vue

Written by Daniel Kelly

Are you building an informational website with primarily static content? If so a lot of JavaScript frameworks are probably overkill. Vue on the other hand has always had the ability to be adopted incrementally. In other words, your whole site could be mostly static or server side rendered and you could just add in Vue here and there where some extra interactivity was needed.

Now Evan You (founder of Vue.js) has made an even lighter weight version of Vue made specifically for this use case. It's called Petite Vue.

6 Tips for Building Large Scale Vue.js 3 Applications

Part 3 of 3 in our How to Structure a Large Scale Vue.js Application series.
Written by Daniel Kelly

Vue.js 3 is a solid framework for building applications both large and small. In our series How to Structure a Large Scale Vue.js Application, we've been exploring how to best utilize it for your large scale projects. We've examined what a good file structure looks like, some standards for predictability, and using ESLint and Prettier for clean and consistent code.

In this article, let's take a look at 6 tips I've picked up from the Vue community and from my own experience developing large scale Vue.js applications.

ESLint and Prettier with Vite and Vue.js 3

Part 2 of 3 in our How to Structure a Large Scale Vue.js Application series.
Written by Daniel Kelly

In the previous article of the "How to Structure a Large Scale Vue Application" series, we took a look at some standards that you can employ in your Vue.js application to keep your codebase predictable, easy to navigate, and understandable. Another step you can take to improve the developer experience when building a large scale application, especially with a team, is to setup some automated process for code linting and formatting.

How to Structure a Large Scale Vue.js Application

Part 1 of 3 in our How to Structure a Large Scale Vue.js Application series.
Written by Daniel Kelly

What is the best way to structure a Vue.js application so that it scales and remains maintainable and extendable the more it grows? This is a question that I've heard on numerous occasions and I think one answer to that question lies in the principle of predictability. When it comes to creating a scalable project you want everything about it to be as predictable as possible.

Building a Tag Input Component with the Vue 3 Composition API

Written by Daniel Kelly

Ever wonder how to build one of those fancy tag input components like you see in blog admin panels or in notion docs? Well, wonder no more! In this article we'll use Vue 3's composition API to make a reusable tag input component of our very own. Along the way we'll cover some important concepts you should know to be effective with the Vue 3 composition API.