Alexandre Nédélec Posts - Answer Overflow

Alexandre Nédélec

•Created by Alexandre Nédélec on 5/24/2024 in #❓・help

Redirect from netlify not working (404 not found) with Nuxt Content in SSG

I migrated a blog to Nuxt 3 (with Nuxt Content) and have some content whose URL has changed : for instance /gitcheatsheet to /goodies/gitcheatsheet My site is hosted on Netlify, I use static site generation, so I wanted to let Netlify handle the redirection using the configuration or a redirects file. However it does not seem to be working, it is displaying a 404 not found page instead. My guess is that it's because Nuxt is handling the routing and redirecting to the 404 page. See the code below

<script setup lang="ts">
const {data: page} = await useAsyncData('index', () => queryContent('/').findOne())
if (!page.value) {
  throw createError({statusCode: 404, statusMessage: 'Page not found', fatal: true})
}
</script>

<script setup lang="ts">
const {data: page} = await useAsyncData('index', () => queryContent('/').findOne())
if (!page.value) {
  throw createError({statusCode: 404, statusMessage: 'Page not found', fatal: true})
}
</script>

Here is my netlify.toml file content :

[build]
  command = "pnpm run generate"

[[headers]]
  for = "/*"
  [headers.values]
    X-Robots-Tag = "noindex"

[[redirects]]
  from = "/gitcheatsheet"
  to = "/goodies/gitcheatsheet"
  status = 301
  force = true

[build]
  command = "pnpm run generate"

[[headers]]
  for = "/*"
  [headers.values]
    X-Robots-Tag = "noindex"

[[redirects]]
  from = "/gitcheatsheet"
  to = "/goodies/gitcheatsheet"
  status = 301
  force = true

I have also tried with a _redirects file containing /gitcheatsheet /goodies/gitcheatsheet Does anyone has a cue on how I can make the redirection work?

5 replies

NNuxt

•Created by Alexandre Nédélec on 5/5/2024 in #❓・help

Nuxt UI - pass function to LandingCTA link

When using ULandingCTA you can pass an array of links that will generate buttons for each of your link. Each link can have a function that is triggered when the button is clicked. I only have one link and I don't know how I can pass that function to my component. I am using Nuxt Content and the ULandingCTA props come from a YAML document retrieved by Nuxt Content : <ULandingCTA v-bind="page.cta" /> Has anyone done something like that or would know how to pass a function.

1 replies

NNuxt

•Created by Alexandre Nédélec on 4/22/2024 in #❓・help

Pass extra dynamic data when routing to a page

I need to pass some extra data to my page in addition to the route and query parameters. The problem: I'm migrating my blog to Nuxt Content and I have a page /tags/{tag} that display articles concerning a specific tag. Some articles contain tags like "GitHub Actions" or "CI/CD" that give the following URLs /tags/github-actions or tags/cicd . I need to have the same URLs to avoid redirections but with these URLs with a modified tag (github-actions instead of github%20actions for example) I won't be able to retrieve the original tag to display it on my page and retrieve related articles. If the modified tag ( github-actions ) is passed as a route parameter I need a way to pass the original tag (GitHub Actions) as well. What solutions I have considered: - Pass the original as query parameter => my existing tags URL will still break without the additional query parameter - Use navigation guards to make some sort of redirection => not exactly sure how it could work and it seems complex - once on the tag page, retrieve all blog posts, map their tags to the modified tags version to get the original tags and the corresponding articles => it seems to be a complicated workaround

15 replies

NNuxt

•Created by Alexandre Nédélec on 4/7/2024 in #❓・help

Customize links font size in Header component of Nuxt UI Pro

I am using the Header component of Nuxt UI Pro (in the Nuxt UI Pro SaaS template) . The default font sizes are too small so I am using the "ui" property on the component to customize the component. It works fine for the logo but I can't make it work for for the center (which is where Header links are used if I understood correctly). <UHeader :links="links" :ui="{ logo: 'text-2xl items-center', center: 'text-2xl' }"> Does anyone know how to customize the header links size font?

9 replies

NNuxt

•Created by Alexandre Nédélec on 3/30/2024 in #❓・help

Get related articles with Nuxt Content

Hi. I'm migrating my blog to Nuxt Content and I'm using the Nuxt UI Pro Saas template for my blog. I added tags in the front matter of my blog posts and I would like to use these to display a list of related articles at the end of a blog post. I have seen there is the concept of "surround" content in Nuxt, but that's to navigate to previous and next articles (and that depends on the path which in my case does not matter as all my articles are in the same folder), so not really what I want. In chirpy (a famous theme for jekyll) they have some logic that score articles depending on the tags and categories (https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/_includes/related-posts.html). I guess I will have to implement something like that but I wanted to know how to do that propertly with Nuxt Content and ensure there was nothing built-in. Do you have some tips on how to implement retrieving related content based on metatada (tags) in the pages? Is there somehting do do that easily with Nuxt Content?

1 replies

Gaming

Programming