Join our community

Get access to the complete guide to developing and deploying fast, production-ready Nuxt apps.

6-6 Show Course Completion Percentage

In this lesson, we update our UI to show chapter and course completion as a percentage.

First, we do some calculations in our Pinia store in order to get the right data. We put this in a computed to ensure it’s always up-to-date as we toggle completion for lessons.

Second, we update our course.vue page to display this data. We make this conditional on a user being logged in — otherwise we don’t have any data to show!

This course was originally built with Nuxt 3, but it's no longer being maintained. You can still follow the lessons, but make sure to use the exact dependency versions listed in the course repository to avoid breaking changes.

If you’re looking for the most up-to-date and fully supported version, we recommend Mastering Nuxt: Full Stack Unleashed , which uses Nuxt 4 and actively being maintained.