Resources for Learning Vue & Nuxt

In this post, we'll provide a list of resources that we think are useful when it comes to learning Vue and Nuxt.

Documentation

The official documentation for a technology is often invaluable, whether you're just starting out or you've been working with the technology for years. Here are links to the documentation for Vue, Vuex, Nuxt, and Vue Test Utils:

• Vue 2
• Vue 3
• Vuex 3 (for Vue 2)
• Vuex 4 (for Vue 3)
• Nuxt
• Vue Test Utils (for unit testing Vue components)

Online courses

If you learn best via video and coding along, then these courses (both free and paid) are excellent options:

• Vue — The Complete Guide (with Router, Vuex, Composition API) (paid) — a nearly 50-hour deep dive into building apps with both Vue 2 and Vue 3, including how to manage application state with Vuex.
• Build Web Apps with Vue JS 3 & Firebase (paid) — a project-based course that provides in-depth knowledge of Vue, as well as how to use Firebase as a backend for Vue apps.
• Vue JS Essentials with Vuex and Vue Router (paid) — a shorter course that teaches the essentials of Vue, Vue Router, and Vuex.
• Vue.js 2 Tutorial (free) — a YouTube tutorial series that delves into Vue 2 concepts and routing.
• Vue.js 3 Tutorial (free) — a YouTube tutorial series that teaches Vue basics, as well as how to use the Composition API.
• Vue.js Crash Course (free) — a project-based YouTube crash course that teaches the fundamentals of Vue 3.
• Vuex Tutorial (free) — a short YouTube tutorial series on state management with Vuex.
• Vuex Crash Course (free) — a project-based YouTube crash course that teaches state management with Vuex.
• Nuxt.js — Vue.js on Steroids (paid) — a short course that teaches how to build Nuxt apps.

Additionally, Vue School and Vue Mastery both offer a wide variety of free and paid Vue courses, and Laracasts has a few Vue series, some of which are entirely free and some of which contain a combination of free and paid episodes.

Blog posts

If your learning style is more geared towards reading, then you may find these blog posts on a variety of Vue topics to be helpful:

• Using v-model on Nested Vue Components — an explanation of how to build a custom component that operates on chunks of data.
• Sharing Data in a Laravel/Vue Application — an explanation of how data is transferred between Laravel and Vue.
• Passing Data from Craft CMS to a Vue Component — an explanation of how to pass data from Craft CMS into a Vue component.
• Intro to the Vuex Map Helpers — an introduction to how the Vuex map helpers can be used to clean up the code in Vue components.
• Accessible Drag-and-Drop in Vue — a walk-through of how to build an accessible drag-and-drop component in Vue.
• Renderless Components in Vue.js — an explanation of what renderless components are, where they can be useful, and how to build them.
• Use Vue.js Data Binding Options for Reactive Applications — a project-based explanation of 3 different approaches to managing reactive data binding in Vue apps.
• Tips to Supercharge Your Slots (Named, Scoped, and Dynamic) — an explanation of 6 patterns for using slots in Vue apps.

Vue Mastery also has an entire blog devoted to Vue.

Wrapping up

Learning a new technology can be daunting, but it becomes less so when you have good resources at your disposal. We hope you found this list useful, and we'd love to hear from you if you have any great Vue or Nuxt resources that you'd like to share. Let us know @zaengle.