Need a little help getting it to work :(

[jjaimealeman]

I'm having a little trouble understanding and getting this to work. All installed: // package.json

"vue": "^3.2.31",
"vue-router": "^4.0.14"
"vite": "^2.9.1",
"vite-plugin-pages": "^0.23.0",
"vite-plugin-pages-sitemap": "^1.2.2"

// vite.config.js

import Pages from 'vite-plugin-pages'
import generateSitemap from 'vite-plugin-pages-sitemap'

export default defineConfig({
    plugins: [
        vue(),
        Pages({
            onRoutesGenerated: async(routes) => {
                generateSitemap({
                // hostname: 'https://mywebsite.com/',
                hostname: 'http://localhost:3000/',
                routes: [...routes],
                readable: true,
                })
            },
        }),

    ],
})

Only have 2 pages, / and /menu.

Upon running npm run build I was expecting to see a generated sitemap.xml file 🤔

Also tried this routes: ['/', '/menu'],

What am I doing wrong?!

[jbaubree]

Can you provide me a repo with your code?

[jjaimealeman]

Can you provide me a repo with your code?

At the moment it is a Private repo as it's for a Client of mine.

[jjaimealeman]

in full: vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'
import Pages from 'vite-plugin-pages'
import generateSitemap from 'vite-plugin-pages-sitemap'

export default defineConfig({

    // plugins: [vue()],

    // Sunday, February 20, 2022 @ 10:05:17 PM
    // https://youtu.be/PbKWt-_oI3Q
    // an 'opt-in' compiler time macro.
    plugins: [
        vue({
            reactivityTransform: true
        }),
        Icons({ /* options */ }),
        Components({
            resolvers: [
                    IconsResolver(),
                ]
            }),

        Pages({
            onRoutesGenerated: async(routes) => {
                generateSitemap({
                // hostname: 'https://mywebsite.com/',
                hostname: 'http://localhost:3000/',
                // routes: [...routes],
                routes: ['/', '/menu'],
                readable: true,
                })
            },
        }),

    ],

    resolve: {
        alias: {
            '@': resolve(__dirname, 'src'),
        },
    },
    // server: {
    //  open: true,
    // },
})

[jbaubree]

With this code, no sitemap.xml is provided in public folder when you run npm dev or npm build? Can you provide me full package.json

[jjaimealeman]

package.json

{
    "name": "vite-vue3-tailwind-starter",
    "description": "A simple boilerplate using Vue3, Vite, and TailwindCSS for my projects.",
    "version": "0.0.1",
    "author": {
        "name": "Jaime J. Aleman",
        "email": "jjaimealeman@gmail.com",
        "url": "https://github.com/jjaimealeman/vite-vue3-tailwind-starter"
    },
    "license": "WTFPL",
    "scripts": {
        "dev": "vite --host",
        "build": "vite build",
        "serve": "vite preview"
    },
    "dependencies": {
        "@vueuse/core": "^8.2.5",
        "@vueuse/head": "^0.7.5",
        "axios": "^0.26.1",
        "tailwindcss-fluid-type": "^1.3.3",
        "unplugin-icons": "^0.14.1",
        "vue": "^3.2.31",
        "vue-router": "^4.0.14"
    },
    "devDependencies": {
        "@iconify/json": "^2.1.27",
        "@tailwindcss/aspect-ratio": "^0.4.0",
        "@tailwindcss/forms": "^0.5.0",
        "@tailwindcss/line-clamp": "^0.3.1",
        "@tailwindcss/typography": "^0.5.2",
        "@types/tailwindcss": "^3.0.10",
        "@vitejs/plugin-vue": "^2.3.1",
        "@vue/compiler-sfc": "^3.2.31",
        "autoprefixer": "^10.4.4",
        "prettier": "^2.6.2",
        "prettier-plugin-tailwindcss": "^0.1.8",
        "tailwindcss": "^3.0.23",
        "unplugin-vue-components": "^0.19.2",
        "vite": "^2.9.1",
        "vite-plugin-pages": "^0.23.0",
        "vite-plugin-pages-sitemap": "^1.2.2"
    }
}

[jbaubree]

i have made this simple repo https://github.com/jbaubree/jjaimealeman with your package.json and vite.config.ts. Using pnpm, all is working well on my side

[jbaubree]

@jjaimealeman let me know if you solved your problem

[jjaimealeman]

Maybe I'm just a little confused 🤔

In the sample above, ./public/sitemap.xml already exists.

I thought the plugin would crawl the routes and generate the sitemap.xml based on the current two pages in my routes.js?

At the moment it's just these two routes: ['/', '/menu'],.

[jbaubree]

Oh you have a routes.js, you are not using vite-plugin-pages to generate your routes? That's the problem..

[jjaimealeman]

How so amigo? I'm trying to understand this.

[jbaubree]

Follow this README https://github.com/hannoeru/vite-plugin-pages :)

[marcodarko]

is there any solution for people using routes.js style setup? now that we are using Vite we can't use vue-cli-plugin-sitemap

[jbaubree]

@marcodarko you can use vite-plugin-sitemap

[marcodarko]

@jbaubree omg thank you so much IDK why this didn't come up on my search results. TY!

[marcodarko]

@marcodarko you can use vite-plugin-sitemap

Actually this one still needs you to configure your routes as directories or the sitemap won't have anything. Looks like you still need to call Pages() in the config from vite-plugin-pages, which I am not using.

It's close to a solution but it's not functional the way I need it unfortunately. It'd be ideal if it could handle the traditional way of defining routes using vue-router. Similar to vue-cli-plugin-sitemap, which was perfect until now.. Thank you anyway, hope this feedback is helpful in some way.

[jbaubree]

@marcodarko as README says, you can also give array of routes using dynamicRoutes. For example, if you have a router.js with following routes:

export const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

you can configure your vite.config.js like this:

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Sitemap from 'vite-plugin-sitemap'
import { routes } from './router'

const config = defineConfig({
  plugins: [
    Vue(),
    Sitemap({
      hostname: 'https://myhost.com',
      dynamicRoutes: routes.map(route => route.path),
    }),
  ],
})

export default config

I hope this will help you.

[marcodarko]

@jbaubree yeah that's pretty much what I did but it quickly became too complicated with nested routes and special slugs. I'm gonna give it another shot but I wish it would handle these common things out of the box.

[jbaubree]

@marcodarko i will think about it 👍