Handling dynamic pages at runtime

[dantownsend]

Hi, I recently came across this project and think it's amazing.

Most of my apps have a structure similar to this:

/
/about
/blog
    /some-blog-post
/app
    /project
        /some-uuid

Most of the pages fit in with the Iles model really well - they're mostly static, with a bit of interactivity.

However, everything under /app is highly dynamic, and can't be pre-rendered ahead of time because the subpages depend on the logged in user. In a perfect world I'd be able to use Vue Router on sub paths - so in this example, everything under /app is basically a traditional Vue SPA controlled by Vue Router.

I can work around this by using GET params, so rather than having /app/project/some-uuid, I can have a single page and use GET params - /app/project?uuid=abc123. It's a bit of a hack, but it works.

Is there any other guidance you can provide on this? Thanks

[ElMassimo]

Hi Daniel! @dantownsend

Like with any single-page application, you need to ensure requests to nested paths are served the main HTML file, which will then takeover and render the appropriate page.

In this case, you would want the app.html file to be served for any request such as /app/project/some-uuid. The specific configuration will depend on how you are hosting your app, for example in Netlify:

/app/* /app.html 200

For development, you could add middleware to the Vite dev server to do the same (Vite automatically serves index.html for nested requests, but in this case you'll have to configure that manually since it's a different path).

---

In terms of how to implement it, you have a few options:

• Use a single island that contains all interactivity, and register the router in the main component's script setup:

  import { getCurrentInstance } from 'vue'
  const app = getCurrentInstance().appContext.app
  app.use(router)

  This approach might be useful if these pages share the same layout as the main app, and a nice aspect of it is that at least the layout portion would be pre-rendered.

• Use an .html page instead, which will be built separately by Vite, giving you full control on the output (it will be independent from the rest of the site). The downside is that it won't be pre-rendered.

If you share an example repo I'd be happy to show you how you might apply these techniques 😃

---

An alternative that you can use if the interactive pages are not conceptually "the same site", is to use a subdomain to host a separate Vite app, such as https://projects.site.com.

[gilesbutler]

Hey @ElMassimo,

We have a very similar setup to @dantownsend.

We're trying to use a single island that will contain our app and only be loaded on the client.

I'm struggling to get the setup working correctly though. Should we have something like the following in pages/app.vue...

<script lang="ts">
import { getCurrentInstance } from 'vue'
import {createRouter, createWebHistory} from 'vue-router'

export default {
  setup() {
    const Sites = { template: '<div>Sites</div>' }
    const App = { template: '<div>App</div>' }
    const router = createRouter({
      history: createWebHistory('/app/'),
      routes: [
        {
          path: '/',
          name: 'app',
          component: App,
        },
        {
          path: '/sites',
          name: 'sites',
          component: Sites,
        },
      ],
    })

    const app = getCurrentInstance().appContext.app
    app.use(router)
  }
}
</script>

The Sites and App components would be replaced with imports to other components, they're inline just for testing purposes.

Then the following in iles.config.ts...

vite: {
    server: {
        proxy: {
          '/app/*': {
            target: 'http://localhost:3000/app',
          },
        }
      },
    },

Thanks

[ElMassimo]

That's one way to do it. The component you described should be an island, the setup would work (get the app instance, and install the router). Since îles is also using Vue Router in development, you would want to create a catch-all route for app, so that it routes any nested paths instead of going to a 404. You might get some warnings about "page won't be generated" for nested paths, but you can ignore that, just provide an empty parameter so that app.html is generated. Configuring Vite should be unnecessary.

Using a separate app.html file might be simpler than this strategy though (than two separate vue routers working in combination).

[gilesbutler]

Thanks @ElMassimo that's super helpful.

I'm just exploring the app.html option now. Would that essentially be a completely new Vue app? Where would it be located and what's the best way to set it up? i.e doing something like npm init vue@latest in the root of the project? I'm not so sure on how it would connect to the app.html and where it would build to.

We have a lot of components that would be used between both the Iles app and the separate Vue app so it would be great to be able to import them without duplicating code.

Thanks

[ElMassimo]

@gilesbutler Vite will process those .html files, so you would be able to define it as with any Vite app, allowing you to add a script tag referencing a file, where you can import Vue, and other dependencies, as well as components.

Here's an example in my blog, where I referenced a CSS file:

<link rel="stylesheet" href="/src/styles/todo.css"/>

and Vite compiled it and fingerprinted it.

More information here:

• feat: support html entrypoints that coexist with the generated pages #53

[gilesbutler]

Ok great, thanks @ElMassimo - I'll take a look and see how we go. Thanks for all your help and quick responses :)