Vue and Nuxt

Vue

The website is developed in a frontend framework called Vue. At the core, you can use it to define Components: reusable building blocks. They consist of both a template (specifying the html structure) and script (JS-code specifying the behavior of the component), and optional component-specific styling (CSS).

Nuxt

The site is rendered by Nuxt: "a server-side rendering framework which abstracts away most of the complex configuration involved in managing asynchronous data, middleware, and routing. It also helps structure Vue.js applications using industry-standard architecture for building simple or enterprise Vue.js applications." Nuxt can be used for either Single Page Applications (SPA), server side rendering (SSR) or static site generation (SSG) - in this project, we do the latter (SSG).

Implementation in this project

Of course, these frameworks come with their own documentation, so we won't go into detail about how to use them. Some relevant pointers though:

• Vue components can be authored in two different API styles: Options API and Composition API. In the documentation, you can toggle which style to display. For this project, the Composition API is used.
• Consequently, component definitions contain a <script setup>. As a result, imports and top-level variables / functions declared in <script setup> are directly usable in the template. So there's no need to export default { ... }.
• Vue has some built-in directives that you can use in templates, they can by recognized by the v--prefix. Some of them have short-hand notations, such as : for v-bind
• Vuetify is a library of pre-defined components that we use in this project. Its component names are also prefixed with v-.

Directory structure:

• In the pages directory, the major components for the web pages are defined. Many pages in the website contain a index.vue (listing all the different subpages) and a [...slug].vue: this is the component that renders a specific subpage, e.g. a page about a specific dataset or API. In the page-slug, data is defined so that it can be used to render the page.
• The smaller components that are used in the pages, are in the components directory.
• The (localized) contents of the pages is defined (mostly) in markdown in the content directory.