Tags in Gridsome

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");

    tags.addNode({
      id: "1",
      title: "The author",
    });

    posts.addNode({
      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.

Comments

[Pacharapol Withayasakpunt]

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

Also, you can use template instead of page.

[Chloe]

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.

[Pacharapol Withayasakpunt]

Have you tried GraphQL explorer?

[Valentin Prugnaud 🦊]

Didn't try it, but maybe this can help? gridsome.org/docs/taxonomies/

[Chloe]

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.