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:
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.vue becomes /(The frontpage)src/pages/AboutUs.vue becomes /about-us/src/pages/about/Vision.vue becomes /about/vision/src/pages/blog/Index.vue becomes /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.
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'
})
})
}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
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>.
Create a src/pages/404.vue component to have a custom 404 page.