Pages
Pages are responsible for presenting your data at a URL. Each page will be generated statically and have its own
index.htmlfile with the markup.
You have two options for creating pages in Gridsome:
- Using the file system - For creating pages with Single File Components
- Using the Pages API - For creating pages programmatically.
File-based pages
Single File Components in the src/pages directory will automatically be available with their own URLs. The file location is used to generate the URL and here are a few basic examples:
src/pages/Index.vuebecomes/(The frontpage)src/pages/AboutUs.vuebecomes/about-ussrc/pages/about/Vision.vuebecomes/about/visionsrc/pages/blog/Index.vuebecomes/blog
A simple page component might look like this:
<template>
<div>
<h1>Hello, world!</h1>
</div>
</template>Pages in src/pages are typically used for fixed URLs like /about or for listing blog posts at, for example /blog. Read more about how to create pages for single blog posts etc.
Programmatic pages
Pages can be created programmatically by using the createPages hook in gridsome.server.js. This is useful if you want to manually create pages from an external API without using GraphQL data layer.
module.exports = function (api) {
api.createPages(({ createPage }) => {
createPage({
path: '/my-page',
component: './src/templates/MyPage.vue'
})
})
}Dynamic routing
Pages can have dynamic routes. Dynamic routes are useful for pages that only need client-side routing. For example user pages that fetch info from an external API in production based on a segment in the URL.
Learn more about dynamic routing
Page meta info
Gridsome uses vue-meta for handling meta info about the page.
<template>
<div>
<h1>Hello, world!</h1>
</div>
</template>
<script>
export default {
metaInfo: {
title: 'Hello, world!',
meta: [
{ name: 'author', content: 'John Doe' }
]
}
}
</script>Learn more about populating <head>.
Custom 404 page
Create a src/pages/404.vue component to have a custom 404 page.