Vue.js Tutorials - Vue.js Courses and Tutorials

Learning Vue.js in 2022

Written by Daniel Kelly

As Thanksgiving fast approaches this year, I'm sure we all have things to be thankful for. Be it friends, family, adventure, health, success, or otherwise, I hope that 2021 was a good year for you!

Also, as you look forward to 2022 in the coming month and a half, if professional success is on your to-do list, then I invite you to join the thousands of other developers who benefit from Vue School each and every day.

We've got a Black Friday sale to rival all sales 🎉 but more on that in a minute.

First, what's Vue School got to offer? What can you learn by joining Vue School?

Use Supabase Auth with Vue.js 3

Written by Daniel Kelly

Supabase is a self-proclaimed "Open Source Firebase Alternative". I've been interested in working with Supbase for a bit now and thought I'd experiment with using their authentication API to get authentication setup for a Vue.js 3 application.

How to Migrate from Vue CLI to Vite

Written by Daniel Kelly

If you've been developing with Vue prior to 2021 there's a good chance that your build tool of choice was the Vue CLI. It's been the de-facto standard for scaffolding Vue.js projects for a while. Now though, Evan You's next generation build tool Vite, has been garnering a lot of attention and is a great alternative to the Vue CLI.

VueUse Head and Netlify PreRendering for SEO and Social Friendly SPAs

Written by Daniel Kelly

One of the traditional set backs with SPA's is that since all the content is rendered on the client side, many social sharing previews don't work and some search engines can't properly index your site.

In this article let's remedy that situation for a Vue.js 3 powered SPA by using the VueUse/head package and Netlify PreRendering.

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.