How to stop Google excluding pages in your NuxtJS app when using the sitemap module

I recently noticed this message in the Google Search Console, Google wasn’t indexing most of my pages on this NuxtJS website. After googling this message, I found that this had been raised not long before on GitHub and it seems to happen when the app is generated and served, pages are generated with and without the trailing slash and are treated individually so Google sees one page as two pages.

Here is the link to the solution that I followed: https://github.com/nuxt/content/issues/674#issuecomment-742761219

1. Add trailingSlash: true to the sitemap module configuration in the nuxt.config.js file.

2. Inside any layouts that you use add the following which adds a canonical tag to the head of every page to set paths with trailing slash as the canonical.

   <script>
   export default {
     head() {
      const { path } = this.$route;
      const pathWithSlash = path.endsWith('/') ? path : `${path}/`;
      let canonical = `https://www.websitedomain.com${pathWithSlash}`;
      return {
       link: [
        { rel: 'canonical', href: canonical }
       ]
      }
     }
   }
   </script>
   
   

3. Once redeployed, resubmit the sitemap in the Google Search Console and await for the changes, it could take a couple of days. The 'Duplicate, submitted URL not selected as canonical' in my console changed to 0 and 'Submitted and indexed' increased.