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?

Read more "Learning Vue.js in 2022"

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.

Read more "How to Migrate from Vue CLI to Vite"

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.

Read more "VueUse Head and Netlify PreRendering for SEO and Social Friendly SPAs"

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).

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

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.

Read more "Building a Multi-Step Form with Petite-Vue"