When you build a Vue.js single page application, search engines often struggle to discover all your pages. That’s where knowing how to generating sitemap in Vue.js becomes essential for every developer who wants their application to rank well on Google.
The sitemap is similar to a roadmap for the search engines’ crawlers. They will know exactly what pages are available on your website and how to reach those pages. Without the proper implementation of the sitemap, your beautiful Vue application will remain hidden from the search engines, regardless of the quality of the content you provide.
In this tutorial, we will cover the whole process of how you can implement the Vue.js dynamic sitemap generator plugin using vite-plugin-sitemap.
Why Sitemap is Important in Vue.js Application
Vue.js applications are single page applications by nature. This means all content loads dynamically through JavaScript, making it difficult for search engine bots to crawl and index your pages properly.
Traditional websites serve separate HTML files for each page. Search engines can easily follow links and discover content. Vue applications work differently. They load one HTML file and swap content using JavaScript routing.
Benefits of Implementing Sitemaps in Vue.js
Here are the key advantages of adding a sitemap to your Vue application:
- Faster Indexing: Search engines discover your new pages quickly without waiting to crawl through your entire site structure.
- Complete Page Discovery: Every route in your application gets listed, ensuring no important page remains hidden from crawlers.
- Priority Control: You can tell search engines which pages matter most, helping them understand your content hierarchy.
- Update Frequency Signals: Sitemaps communicate how often your content changes, helping crawlers schedule revisits efficiently.
- Better SEO Performance: Proper indexing leads to improved search rankings and increased organic traffic to your application.
- Debug Crawling Issues: When pages aren’t appearing in search results, your sitemap helps identify indexing problems quickly.
Getting Started with vite-plugin-sitemap
The vite-plugin-sitemap package offers an elegant solution for generating XML sitemaps in Vue applications. This plugin integrates seamlessly with Vite and Vue Router, making sitemap for Vue single page application creation straightforward.
First, install the package in your Vue.js project:
npm install vite-plugin-sitemap --save-devOr if you prefer yarn:
yarn add vite-plugin-sitemap -DThis plugin reads your Vue Router configuration and automatically generates a sitemap.xml file during the build process. It supports both static routes and dynamic routes with parameters.
Sitemap Index Generation
For larger applications with multiple sections, you’ll want to create a sitemap index. This approach organizes your URLs into separate sitemap files, making management easier. Here’s the basic configuration in your vite.config.js file:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Sitemap from 'vite-plugin-sitemap'
export default defineConfig({
plugins: [
vue(),
Sitemap({
hostname: 'https://yourwebsite.com',
generateRobotsTxt: true,
readable: true
})
]
})This configuration creates a basic sitemap with your hostname and generates a robots.txt file automatically. The readable option formats the XML output for easier debugging.
Adding Static Pages to Your Sitemap
Static pages include routes that don’t change based on parameters. Think of your home page, about page, contact page, or any fixed content sections.
Let’s configure static routes for a typical Vue application:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Sitemap from 'vite-plugin-sitemap'
const staticRoutes = [
'/',
'/about',
'/services',
'/contact',
'/pricing',
'/faq'
]
export default defineConfig({
plugins: [
vue(),
Sitemap({
hostname: 'https://yourwebsite.com',
routes: staticRoutes,
changefreq: 'weekly',
priority: 0.8,
lastmod: new Date().toISOString()
})
]
})Each route gets added to your sitemap with the specified change frequency, priority level, and last modification date. You can customise these values based on how important each page is to your SEO strategy.
Adding Dynamic Pages to Your Sitemap
Dynamic pages present a bigger challenge. These include blog posts, product pages, user profiles, or any content fetched from an API. For a complete Vue.js sitemap.xml implementation, you need to handle these routes properly.
Here’s how to generate sitemap entries for dynamic content:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Sitemap from 'vite-plugin-sitemap'
const staticRoutes = [
'/',
'/about',
'/blog',
'/contact'
]
const dynamicRoutes = [
'/blog/getting-started-with-vue',
'/blog/vue-composition-api-guide',
'/blog/state-management-pinia',
'/blog/vue-router-best-practices'
]
const allRoutes = [...staticRoutes, ...dynamicRoutes]
export default defineConfig({
plugins: [
vue(),
Sitemap({
hostname: 'https://yourwebsite.com',
routes: allRoutes,
generateRobotsTxt: true
})
]
})In real applications, you’ll fetch dynamic routes from your database or CMS. Here’s a more practical approach:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Sitemap from 'vite-plugin-sitemap'
async function fetchBlogPosts() {
const response = await fetch('https://api.yoursite.com/posts')
const posts = await response.json()
return posts.map(post => `/blog/${post.slug}`)
}
async function fetchProducts() {
const response = await fetch('https://api.yoursite.com/products')
const products = await response.json()
return products.map(product => `/shop/${product.id}`)
}
export default defineConfig({
plugins: [
vue(),
Sitemap({
hostname: 'https://yourwebsite.com',
dynamicRoutes: async () => {
const blogRoutes = await fetchBlogPosts()
const productRoutes = await fetchProducts()
return [...blogRoutes, ...productRoutes]
}
})
]
})This setup fetches your content during build time and generates a complete sitemap with all your dynamic URLs included.
Additional Configuration Examples
Let’s take few example which includes edge cases for generating sitemap in vue.js application with help of vue router.
Setting Different Priorities for Different Sections
You might want your product pages indexed with higher priority than blog posts. Here’s how to achieve that:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Sitemap from 'vite-plugin-sitemap'
export default defineConfig({
plugins: [
vue(),
Sitemap({
hostname: 'https://yourwebsite.com',
routes: [
{ url: '/', priority: 1.0, changefreq: 'daily' },
{ url: '/products', priority: 0.9, changefreq: 'daily' },
{ url: '/blog', priority: 0.7, changefreq: 'weekly' },
{ url: '/about', priority: 0.5, changefreq: 'monthly' },
{ url: '/contact', priority: 0.4, changefreq: 'yearly' }
]
})
]
})Excluding Specific Routes
Some pages shouldn’t appear in search results. Admin panels, user dashboards, or internal tools need exclusion from your sitemap:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Sitemap from 'vite-plugin-sitemap'
export default defineConfig({
plugins: [
vue(),
Sitemap({
hostname: 'https://yourwebsite.com',
exclude: [
'/admin',
'/admin/*',
'/dashboard',
'/user/settings',
'/checkout',
'/login',
'/register'
]
})
]
})Verifying Your Sitemap Works
After building your application, check that your sitemap generates correctly. Run the build command:
npm run buildNavigate to your dist folder and open sitemap.xml. You should see all your routes formatted as XML entries with proper URLs, change frequencies, and priorities.
Upload your built application to your hosting platform. Then visit https://yourwebsite.com/sitemap.xml in your browser. If everything works correctly, you’ll see your complete sitemap displayed.
Submit your sitemap URL to Google Search Console and Bing Webmaster Tools. These platforms will use your sitemap to discover and index your Vue application pages efficiently.
Conclusion
Creating a sitemap for your Vue.js application doesn’t need to be complicated. With vite-plugin-sitemap, you can generate XML sitemap for Vue application automatically during every build process. This ensures search engines always have access to your latest content structure.
Remember to update your sitemap configuration whenever you add new route sections. Include both static pages and dynamic content routes for complete coverage. Set appropriate priorities to guide search engines toward your most valuable pages.
Need sitemap generation for other frameworks? See our step-by-step guides for React, python, Laravel.