A basic Gridsome project would be structured like this:
. ├── package.json ├── gridsome.config.js ├── gridsome.server.js ├── static/ └── src/ ├── main.js ├── layouts/ │ └── Default.vue ├── pages/ │ ├── Index.vue │ └── Blog.vue └── templates/ └── BlogPost.vue
The root directory
Contains information about which plugins are installed in your project.
This file contains configuration and options for installed plugins.
This file is optional and is used to hook into various parts of the Gridsome server. The file must export a function which will have access to the API.
Import global styles and scripts here. The file also has an export function that has access to the Client API. This file is the place to install Vue plugins, register components and directives, etc.
Create components in this directory if you want to share one or more layouts for your pages or templates.
All components in this directory become the pages for your website.
Each page will get its path based on the location of its
src/pages/Index.vue will become the homepage for your website,
src/pages/AboutUs.vue will be
If you are importing an external data source, like posts from a WordPress blog, into your project then each post would look for a component in this directory for its template. The name of the component file must match the node type in your GraphQL schema.
Files in this directory will be copied directly to
dist during build. For example, /static/robots.txt will be located at https://yoursite.com/robots.txt
In Gridsome you can use the aliases
@ to link to files inside the
/src folder. For example, you can import a Vue component by using
import Card from '~/components/Card'
Global styles, images, fonts and icons are usually added to a
Shared or global components
Components that you want to use in several pages or templates can be stored
Data files like
.yaml that you want to import into your components, can be stored in a