webpage vs Vue component

[epaulson]

This is mostly a question for @shreyasnagare (and don't worry about answering it for a while, if you're on break take some time off!)

When should something be a markdown file and when should something be a .Vue component on the site? For example,
we've got webpages/consortium.md, but we also have src/Pages/Members.vue

I probably just made webpages/consoritum.md not knowing what I was doing - should I migrate the consortium page to be a Vue thing? Or, did you just future-proof Members.vue in case we wanted to have like a members.json that Members.vue could automatically generate itself from?

[shreyasnagare]

TL;DR

Rule of thumb: If you can do something solely with Webpages (Markdown + some plugins), it’s best not to create a .vue file. Doing so will allow more people to contribute to the website. I generally use Gridsome Pages (individual Vue-based webpages) when I run into templating or logic-based limitations that come with Markdown. VueJS Components are just reusable elements that you can import into any .vue file (including Gridsome Pages/Templates OR other VueJS components).

---

That is a great question, @epaulson. Sorry about the delay, I’m traveling at the moment. Thank you for your patience.

The original design of the website required every page to be a Gridsome Page/Template - basically .vue files. I added the Markdown renderer later for easier maintainability. Although the Markdown pages are helpful, they certainly have some limitations. While plugins for remark might help with things like embedding a YouTube video on the markdown page or adding size constraints to images, one would still need Vue/JavaScript if the webpage requires: populating items from an external JSON file, pulling in data from the GraphQL layer (example: adding or retrieving data) or even reusing certain UI elements. Given how restrictive Markdown is when it comes to styling things, sometimes it’s just easier to work with VueJS directly (cases where you want to manually add spacing/style to your images or text in a way Markdown won’t let you). I’d use Webpages (Markdown) wherever I can (Vue pages can become too messy too soon).

About Markdown Webpages and types of .vue source files:

• Gridsome Page: I’d describe this as a Vue version of an HTML+CSS+JS page - generally used when the webpage is one of a kind or unique. Every Gridsome Page has one path - example: ./src/pages/Tools.vue ->brickschema.org/tools.
• Gridsome Template: This is for situations where you’d want to create a series of Pages following the same template - like Ontology Docs (AHU/VAV… all these pages look similar because they all use the src/templates/Class.vue template), other examples: blog posts, tool details pages. Every page generated through a Gridsome Template will have a similar path - example brickschema.org/tools/<tool-name> unless stated otherwise.
• Markdown Webpages: This is nothing but the Webpage Gridsome Template in action. Markdown files that we create in the ./webpages directory serve as datapoints for that template to render. These pages won’t have similar URLs and the target path must be stated in the Markdown file headers.
• VueJS Components: Reusable VueJS elements - like the search bar or the tree you see on the left of every ontology page. Component can import other components. The components you see in ./src/components are custom components I created. You can, however, import components provided by other VueJS modules if you want. Components let you keep the codebase more modular and allow you to do things like:

<div>
    <MyHugeReusableComponent :data=“passingDataForTheComponentToRender”/>
    <MyHugeReusableComponent :data=“passingSomeOtherDataForTheComponentToRender”/>
</div>

I do plan to populate Members.vue from a JSON file in the future.