Nuxt•2w ago

Nuxt Devtools

Hi guys, I’ve found an issue and I’m not sure how to debug it. If I open the website in the Telegram webview, it renders properly. However, when I click a link with target="_blank", it opens a new tab displaying the source code of the page. When I refresh the page, it then renders normally. I’ve even created a test site to confirm the issue: https://testlinkssite.netlify.app/ Any ideas on how to fix this?

6 Replies

kapa.ai•2w ago

Hi @realbuddy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand you're experiencing an issue with links opening in Telegram's webview. This appears to be related to how Nuxt handles links and navigation, particularly when opening links in new tabs. Based on the knowledge sources provided, I can offer some insights about handling links in Nuxt: When using <NuxtLink> or <router-link> components with links that should open in new tabs, there are some specific considerations. The issue you're experiencing might be related to how Nuxt handles client-side navigation versus server requests. For links that need to open in new tabs, you might need to modify how you're implementing them. From the Stack Overflow posts in the knowledge sources, there are a few approaches: 1. When using target="_blank", the browser treats it as an external link and sends a GET request for the specified route, which might explain why you're seeing source code initially. 2. You could try using a regular <a> tag instead of <NuxtLink> for links that need to open in new tabs, as suggested in one of the Stack Overflow answers:

<a href="the-location-of-the-page">Link text</a>

<a href="the-location-of-the-page">Link text</a>

instead of:

<NuxtLink to="the-location-of-the-page">Link text</NuxtLink>

<NuxtLink to="the-location-of-the-page">Link text</NuxtLink>

3. If you need to use <NuxtLink> or <router-link> with custom handling, you might need to add event handling:

<router-link v-slot="routerProps" :to="item.route" custom>
    <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
        <span v-bind="props.icon" />
        <span v-bind="props.label">{{ label }}</span>
    </a>
</router-link>

<router-link v-slot="routerProps" :to="item.route" custom>
    <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
        <span v-bind="props.icon" />
        <span v-bind="props.label">{{ label }}</span>
    </a>
</router-link>

The key part here is adding @click="routerProps.navigate" to the <a> tag, which ensures proper routing behavior. The knowledge sources don't contain specific information about Telegram webview interactions with Nuxt, so I can't provide a definitive solution for that specific environment. You might need to test different approaches to see which works best in the Telegram webview context. I hope these suggestions help you troubleshoot the issue. If you need more specific guidance, you might want to check the Nuxt documentation or community forums for information about handling links in webview environments. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@974403688967852064> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

realbuddyOP•2w ago

@kapa.ai Actually, I’ve tried that, and the issue is still there. 😦 If I build a static website, everything works just fine — so I assume the problem is with nitro or h3. I’m guessing it’s sending the wrong headers.

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand your frustration with this issue. Since you've tried using regular <a> tags without success and the problem only occurs in the Telegram webview with target="_blank" links, it does sound like it could be related to Nitro or H3 server behavior. Looking at the knowledge sources, there are a few relevant insights about Nitro that might help: 1. There have been some issues with Nitro's handling of headers and content types. For example, one issue mentioned in the sources relates to compression with h3-compression dependency that caused content transformation problems: Stack Overflow Post mentions: "After some research and tests I did a conclusion that problem may be with h3-compression dependency on ^0.3.2 version (at least after it's removal everything if fine again). Somehow it worked not well on a long distance." 2. Recent updates to Nitro and H3 have been implemented in Nuxt: Several pull requests (PR #30644, PR #27702) show that Nuxt has been updating to newer versions of Nitro and H3, which might affect how content is served. You could try a few approaches to troubleshoot: 1. Check if disabling compression helps by modifying your Nitro config:

   export default defineNuxtConfig({
     nitro: {
       compressPublicAssets: false
     }
   })

   export default defineNuxtConfig({
     nitro: {
       compressPublicAssets: false
     }
   })

2. If you're using static site generation, you could try the browser preset for Nitro which might handle headers differently:

   export default defineNuxtConfig({
     nitro: {
       preset: 'browser'
     }
   })

   export default defineNuxtConfig({
     nitro: {
       preset: 'browser'
     }
   })

As mentioned in Stack Overflow. 3. Make sure your content type headers are being set correctly. The issue might be that when opening in a new tab, the content is being served with incorrect MIME types. If these approaches don't work, you might need to create a minimal reproduction of the issue and report it to the Nitro repository as suggested in several of the GitHub issues. The Nuxt team often recommends using this reproduction sandbox to test if the issue is specifically with Nitro. Let me know if any of these approaches help with your Telegram webview issue! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@974403688967852064> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

realbuddyOP•6d ago

The issue remains what kind of the help is this? 🙂 no help at all.... 😥

Gaming

Programming

Nuxt Devtools

Did you find this page helpful?