Generate static pages with variable number of elements

[danielo515]

Hello,

I was wondering if it is possible to generate static pages with a number of elements that varies depending on the number of elements on certain subfolder.

For example , a list of links to all the pages under the pages folder.

Regards

_{This question is available on Nuxt.js community (#c470)}

[stursby]

@danielo515 Could you provide an example folder structure? Not sure if I fully understand the question.

By default, Nuxt will generate a page for each .vue file in the /pages folder. If you have dynamic params, you need to provide Nuxt with an array of routes.

[danielo515]

Dear @stursby

It's not exactly about folder structure. Let me explain it better. I have a folder with a collection of files that represents applications that I build. Each file has some metadata about each app, title, description, paths to screenshots, etc. I want to be able to build a gallery on build time with the title and an screenshot. Then when you click on any item on the gallery you navigate to the details of that application. I don't want to edit the "gallery" component each time I add a file to that specific folder.

Investigating other alternatives to Nuxt I found that Gatsby has something that fits into my requirements.

They allow any container to export a GraphQl query. They use a set of plugins that made available certain parts of the filesystem as if they were tables in a database. This way you can, for example, query the titles of all the markdown files on a directory, or the tags, or get all the images, generate thumbnails for those images, and the build an index at build time containing all of them.

Is more clear now?
An example of what I mean is GatsbyGram, but I would prefer to use Vue 😄

[stursby]

@danielo515 Ok, that helps a bit. So are you getting your data from an API like GatsbyGram? Otherwise are you just relying on the folder structure? And then how are you authoring each "application"? Is each on a .vue file? And when you say "Each file has some metadata about each app...", what does this file look like?

[danielo515]

Dear @stursby , thanks for your respone.
To be clear, I'm not doing anything already, I'm just making some tests to see if Nuxt fits my requirements.

So are you getting your data from an API like GatsbyGram?

No, I would like to have an api like that available at build time. But keep in mind that GatsbyGram is an example application built with an api similar to what I'm expecting. The structure is described here:
https://www.gatsbyjs.org/blog/gatsbygram-case-study/#app-structure

Otherwise are you just relying on the folder structure?

I was thinking about that. Reading a folder and use that folder as source of information.

And then how are you authoring each "application"? Is each on a .vue file?

I can make them separate vue files, I don't have any problem with that. BUT, that will generate one page/route per file, which is one of the things I want, the other thing I want is to be able to LIST those pages at the index.

And when you say "Each file has some metadata about each app...", what does this file look like?

I have to think about it, but it will probably be a JSON file with fields describing the app.

Hope a more concrete example helps

This is the simplified index file

<template>
  <section class="container">

    <div>
      <h2 class="subtitle">
        <ProjectScreenShot v-for="app in apps" text="app.description" screenshot="app.thumbnail">
      </h2>

    </div>
  </section>
</template>

<script>
import ProjectScreenShot from '~/components/ProjectScreenShot'
import apps from 'some_Api_that_Parses_all_the_files_at_build_time'

export default {
  components: {ProjectScreenShot}
  data(){ return {apps} }
}
</script>

Where apps is provided by some kind of APi that reads JSON files from the apps directory, and then made them available to me.

apps
 |- app1.json
 | - app2.json

It would be ideal to be able to specify different parsers for JSON, mardown + yaml and so on.
Hope it is clearer now.

[sebastianmacias]

Hugo does exactly that. I would be a great feature for nuxt.

[danielo515]

Just for your information I ended using Gatsby because this feature. If you add it to Nuxt at any given point give me a shout and I will come back.

Regards

[stursby]

@danielo515 FYI, there's a new Nuxt project that should do exactly what you're looking for called Nuxtent.

[danielo515]

Thanks for the tip, I'll take a look

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.