Vue SSG Template and dynamic pages

ServiceStack VS Vue
1

Hello, I am looking at your Jamstack new template Vue SSG
https://vue-ssg.jamstacks.net/

I like it a lot!

Looking at the blog posts example (using Markdown) and how the list of posts is also generated on publish.

Trying to get my head around this, and if it is possible if we were getting the posts from an API instead of Markdown files…

If I follow what you have done and try to adapt it:

In the page plugin, we can use dynamic routes using [id]

We can make an API call in vite-ssg

It shows some code like this:

// main.ts

import { ViteSSG } from 'vite-ssg'
import App from './App.vue'

export const createApp = ViteSSG(
  App,
  { routes },
  ({ app, router, initialState }) => {
    // ...
  },
)
export async function includedRoutes(paths, routes) {
  // Sensitive key is managed by Vite - this would not be available inside 
  // vite.config.js as it runs before the environment has been populated.
  const apiClient = new MyApiClient(import.meta.env.MY_API_KEY) 

  return Promise.all(
    routes.flatMap(async route => {
      return route.name === 'Blog'
        ? (await apiClient.fetchBlogSlugs()).map(slug => `/blog/${slug}`)
        : route.path
    })
  )
}

Of course the API call will NOT be from the api project but from an ANOTHER ServiceStack project
That seems possible so far.

But in the [Post].Vue or [Slug].Vue file, if we are doing an API call, it would NOT be done during the publish / generation of the HTML? or would vue-SSG do this magic?

Have you look at this when building your template? I cannot see anyone mentioning this.
I will eventually try to code it, but looking if someone already tried it or has some pointers.

Thank you

2

Hi @tiptopweb,

It is something we looked into briefly when researching the template but there are quite a few moving parts that would need to be custom in the template (not generic vite plugins) that would then heavily depend on the structure of your services you are pulling data from.

If the routes are added correctly, you might be able to use onServerPrefetch composition API which would be called during build for the [Post]. Someone references doing something similar in the vite-ssg issues here, but haven’t tested this myself.

Other SSGs frameworks do support this “headless CMS” style functionality, so you might be able to get some ideas of implementation from Gatsby or Nuxt libraries that support some of the content platforms.

2 Likes
3

Thank you very much @layoric , the link to onServerPrefetch is making a lot of sense. I will try sometimes and report here if I managed.

The other option was to use Gridsome but they use Vue2, and there is no roadmap for using Vite / Vue3

1 Like
4

Yeah not sure how well it will work as it needs to integrate with a few moving parts, i.e. vite-plugn-md, vite-plugin-pages and vite-ssg, you’ll also need to update this to attach front matter from the markdown page to the route:

Personally I think the cleaner option that has the best chance of working is to run a pre-publish script that writes all the DB content to .md pages in the structure you want them before publishing the App.

Should be fairly straight forward with either a custom node .js script or fairly easy with #Script’s built-in support or RDBMS and file system APIs.

5

That’s a good idea! Thank you

1 Like
6

On that subject, I just found Astro

They have at the top of the code file what they call a Frontmatter Script
We can put there Javascript or TypeScript that will run at BUILD TIME!
We can make API calls there, this is making everything easy

It allows for Vue3 component (and React and others) + TailwindCSS + Markdown
Routing is similar
It is using Vite to build
Sites get generated as Html only, and then they use partial hydratation

For a documentation / brochure site, that can be connected to a Headless CMS, it fits the bill

2 Likes