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!