CODEWITHSUNDEEP
vue.jssitemapquasar-frameworkquasar
Qiuzman
Qiuzman

Reputation: 1761

Adding a sitemap.xml to Quasar Framework

I have found some old information online regarding generating/adding a sitemap for vuejs using quasar framework but this was before vite was introduced into the quasar config. So how would I go about generating a sitemap in the more recent versions of quasar?

I was able to find this which used older versions that still relied on web pack:

https://nsrtechx.com/how-to-seo-vue-js-site/

If I follow these and install via yarn it tells me the module cannot be found when adding the require statement to the top of the quasar config and running Quasar Dev. Also there is no longer a extendwebpack option in the config.

Also my website is a single page style so its more scrollable than anything else so my navigation bar scrolls to #services, #contact-us etc. Not sure if that is allowed in the sitemap .

Upvotes: 3

Views: 791

Answers (1)

Jean Claveau
Jean Claveau

Reputation: 1471

I found this simple and well working solution (if you use Quasar with Vite): https://github.com/jbaubree/vite-plugin-sitemap

By adding the following lines to your quasar.config.js (here is an example for a pwa build)

// ...
import Sitemap from 'vite-plugin-sitemap'

// ...
export default configure(function (/* ctx */) {
  return {
    // ...
    build: {
      // ...
      vitePlugins: [
        Sitemap({ // https://github.com/jbaubree/vite-plugin-sitemap#configuration-options
          hostname: `https://${process.env.DOMAIN || `localhost`}`,
          readable: false,
          outDir: `./dist/pwa`, // change this according to your build mode
          dynamicRoutes: [
            `/my_first_route`,
            `/my_first_route/sub_route`,
            `/my_second_route`,
          ],
        }),
      ],
    },
  },
})

You will get an updated robots.txt and a sitemap.xml every time you run quasar build

Upvotes: 1

Related Questions