James McGrath

Reusing pages in different routes in Nuxt

Mar 09, 2021
1 minute

Say you got this design and it’s exactly the same for different routes. A real world example of this is when we implemented AMP on mamamia.com.au. The only difference between the AMP and non-AMP pages was the amp-img component. It was decided that we were going to reuse the page in both routes and just conditionaly load the amp-img component depending on the route.

Our directory structure looked someting like this


We felt it was best to find a way to use the same template for both routes. Our biggest concern was maintaining two files that are practically Identical. Our solution was to use one file in the /_page directory and the /amp route would import the file and display it.

This is what is in /_page/amp/index.vue.

    import index from "~/pages/_page/index.vue" export default index