I am currently replacing a legacy jquery frontend with vue/nuxt.
Current backend already has massive routing logic. Move and duplicate that logic into nuxt (page dir routing system) for several reasons does not seem possible. For example:
Routes:
https://example.org/some-category/p12345
https://example.org/catalog/products/p12345
https://example.org/product-list/product/12345
...etc
// need to render only the one page - Product page
// only BE is known which page is shoud be render for that provided URL
For that reason we decided to make some convention with BE and FE.
- we declare a complete list of pages(components on FE) that shoud be render on FE (e.g. Home, Category, Product etc.)
- on BE API we added a field called "pagetype" that tell us what page is shoud be render for provided URL
On the nuxt side we make page _.vue (in pages dir) where we handle all of the user's URLs. And when user navigate to some URL we fecthing BE API for that URL to get the page data and field "pagetype", which will tell FE what component shoud be render.
For now implementation for render "pagetype" component is work with vue :is directive:
// pages/_.vue
<template>
<div>
<component :is="component" />
</div>
</template>
<script>
export default {
data() {
return {
component: ''
}
},
async fetch() {
const { pageType, pageData } = await this.$http.$get('https://example.org/some-category/p12345?json=true');
this.component = pageType;
},
};
</script>
But this implementation has several disadvantages:
- overloaded entry point (_.vue page)
- no page logic incapsulation/separation on a page level (need to transer it down to component level)
- no nuxt page features such as layout, middleware etc. on a component level
Is there a way to render a spicific page (from nuxt page dir) on the fly (with router middleware or another way) according to name of the page without using a routing methods based on nuxt page dir routing or router.js file hardcode routing?
Or how to transfer page features methods such as layout, middleware, head, validate to a level down - to component level to be able to use them in components.