Tags in Gridsome

cguttweb profile image Chloe ・1 min read

I've recently attempted to setup tags on my blog posts I'm attempting to create a page as detailed in the docs to be able to see posts with various tags. I've setup a template using src/templates/Tag.vue and updated my gridsome.server.js file as suggested:

  api.loadSource((actions) => {
    const posts = actions.addCollection("Post");
    const tags = actions.addCollection("Tag");

    // makes all ids in the `tags` field reference a `Tag`
    posts.addReference("tags", "Tag");

      id: "1",
      title: "The author",

      id: "1",
      title: "A post",
      tags: ["1"],

but how do I actually create that page? Do I need ot setup it up my config file to create it? Or do I setup a single file component? I don't understand and the docs aren't clear it seems as though it's missing a step or am I misunderstanding? Has anyone done this if so what am I missing? I am referencing the tags under the posts in my config.

      use: "@gridsome/source-filesystem",
      options: {
        typeName: "Post",
        path: "content/posts/**/*.md",
        refs: {
          // Creates a GraphQL collection from 'tags' in front-matter and adds a reference.
          tags: {
            typeName: "Tag",
            create: true,

Any help appreciated.

Posted on by:

cguttweb profile



Web developer (with BA in Archaeology and history) looking to develop my skills further particularly around JavaScript and VueJS


markdown guide

If similar to Gatsby, it is possible to avoid using GraphQL.

Also, you can use template instead of page.


Thanks for the reply. I've setup a template but not sure how I then get a list of posts with tags? Is it just I need to add it to my config? I'm missing something I'm just not sure what that is.


Thanks I've followed that but it doesn't make sense. I've even looked at the default blog starter and tried copying that but that fails too. I'll have to take a closer look this weekend try and figure it out.