Resources for Learning Vue & Nuxt
When learning a new technology, it's always helpful to have a good list of resources that can be utilized. In this post, we'll provide a list of resources that we think are useful when it comes to learning Vue and Nuxt.
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:
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.
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:
v-modelon 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.
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.
How to Evaluate if You Need a New Website
Your website is a digital reflection of your business. It’s not enough to “just have” a website. The site needs to serve your audience’s needs, support your business goals, and provide a consistent brand experience. Here are four...
Using AWS S3 and Imgix in Statamic for Performance
Performance can be expensive and complicated to self-manage when your website has a large number of assets. Here’s how we used AWS S3 and Imgix to boost more easily performance on the Laravel News website.