I have following scenario in my Nuxt 3 app.
// https://nuxt.com/docs/api/configuration/nuxt-config
const routes = [
'/A/',
'/B/',
'/C/D/',
]
export default defineNuxtConfig({
devtools: {
enabled: true,
timeline: {
enabled: true,
},
},
compatibilityDate: '2024-04-03',
ssr: true,
nitro: {
preset: 'vercel',
prerender: {
crawlLinks: false,
routes: [
...routes
]
}
}
})
I also have one “catch-all” component in my pages directory. pages → […slug].vue
<script setup lang="ts">
const { data } = await useFetch(`/api/page?slug=test`);
</script>
<template>
<div>
<TemplateRenderer :page-template="data?.title || 'No title'" />
</div>
</template>
<style scoped>
</style>
TemplateRenderer.vue just displays page-template prop.
When I build this locally and test it SSG is working fine, however on Vercel SSG doesnt work for routes ending with trailing slash (if I visit for example /A/ or /A, SSG will not work, instead the site will be SSR-ed).
I’ve also tried to prerender routes without trailing slash, in that case prerendering works. However if I navigate for example to /A/ Nuxt will navigate me back to /A (it’s not a server redirect, but it’s happening on Vue router level).
This is sadly quite cruical to me since I’m tracking certain kind of data on my webpage and it gives false analytics (bounce rate is showing false values due to this). So any help or tips how to overcome this error either on Vercel or Nuxt level would be much appreciated.
amyegan
(Amy Egan)
October 24, 2024, 7:44pm
2
Hey @azurresolutions-gmai . Does the router config use strict ? That would disallow trailing slash.
opened 09:38PM - 13 Nov 22 UTC
enhancement
### Describe the feature
Yes, here we go again. I'd like to propose uniform t… railing slash handling - as I did [for Nuxt 2](https://github.com/nuxt/nuxt.js/pull/6331) - again. But I firmly believe that the implementation can be better, less error prone and even easier with Nuxt 3.
## Why?
Trailing slash handling is crucial when it comes to SEO. Right now, the content shown for `/my-route` and `/my-route/` is already the same. But ideally, one of these versions should not exist (and instead redirect to the other). If that is not possible, a fitting `canonical` URL should be set to define the preferred URL.
Now it seems that it is rather easy, we could go and simply use the `pages:extend` hook and apply/remove the trailing slash and add some nitro page rules (or a middleware) for redirects.
But there is another important part: **the internal linking**. Often neglected, it **is key for a good on-page SEO**. Ideally, the implementation of this feature would cover correct internal linking too. Ideally, also working with any module, like the `i18n` module.
## Proposal
1. Have a global option to enforce a trailling slash `/route/` or *no* slash `/route` for every internal Nuxt route that exists, ideally including Nitro server-routes (API routes are not that important in this case)
2. The "disallowed" version should redirect to the correct version
3. `<NuxtLink>` should be aware of this choice and adapt linking correctly so the preferred version is the one that will be rendered.
### Additional information
- [X] Would you be willing to help implement this feature?
- [X] Could this feature be implemented as a module?
### Final checks
- [X] Read the [contribution guide](https://v3.nuxtjs.org/community/contribution).
- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).
amyegan
(Amy Egan)
October 24, 2024, 7:48pm
3
You might also need to configure the project to redirect trailing slashes using a vercel.json
file. The trailingSlash
option can be used to automatically redirect with a 308 status to your preferred path format.
I tried both setting the strict option to false and true, but no luck
I also tried toggling the trailingSlash in vercel.json, but no luck.
system
(system)
Closed
November 23, 2024, 8:16pm
6
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.