brianb Posts - Answer Overflow

brianb

•Created by brianb on 9/14/2024 in #❓・help

Issues with scrolling to hash

So I'm trying to have scroll on the same page to a hash / id similar to this:

<template>
  <div>
    <Nabar />
    <SectionOne />
    <div id="section-two">
      <p class="text-2xl">Test</p>
    </div>
  </div>
</template>

<template>
  <div>
    <Nabar />
    <SectionOne />
    <div id="section-two">
      <p class="text-2xl">Test</p>
    </div>
  </div>
</template>

In navbar I would have:

      <div
        class="hidden flex-row items-center justify-center gap-[40px] transition-colors duration-300 md:flex"
      >
        <NuxtLink
          v-for="link in links"
          :key="link.name"
          :to="{ path: link.path, hash: link.hash }"
        >
          {{ link.name }}
        </NuxtLink>
      </div>

      <div
        class="hidden flex-row items-center justify-center gap-[40px] transition-colors duration-300 md:flex"
      >
        <NuxtLink
          v-for="link in links"
          :key="link.name"
          :to="{ path: link.path, hash: link.hash }"
        >
          {{ link.name }}
        </NuxtLink>
      </div>

I have also tried:

        <NuxtLink
          v-for="link in links"
          :key="link.name"
          :to="link.path + link.hash"
        >
          {{ link.name }}
        </NuxtLink>

        <NuxtLink
          v-for="link in links"
          :key="link.name"
          :to="link.path + link.hash"
        >
          {{ link.name }}
        </NuxtLink>

And many other ways.. The actual link is there, but when clicked. it does not scroll at all nor change the view to the div with the id set. However, when I refresh it does scroll there and smoothly (I have already set router options to scroll smoothly If I do it with <a> the view is changed, but no smooth scroll and I'd also prefer to use NuxtLink. What could be the issue?

3 replies

NNuxt

•Created by brianb on 6/22/2024 in #❓・help

WebSocket connection to 'ws://localhost:24678/_nuxt/' failed

Hey, I've just restarted working on my side project. Started a project from scratch, didn't change anything, and as soon as I visit localhost:3000 I just get the same error over and over. I did it from scratch as I was having the same issue on an already existing project that I tried to upgrade to Nuxt latest version. Starting a new Nuxt 3 project in Stackblitz is also not working and I am wondering if these are related to each other (https://stackblitz.com/github/nuxt/starter/tree/v3) The errors I am getting in the browser console:

WebSocket connection to 'ws://localhost:24678/_nuxt/' failed: Could not connect to the server.

WebSocket connection to 'ws://localhost:24678/_nuxt/' failed: Could not connect to the server.

        
GET http://localhost:24678/_nuxt/ net::ERR_CONNECTION_REFUSED client.ts:339

        
GET http://localhost:24678/_nuxt/ net::ERR_CONNECTION_REFUSED client.ts:339

The piece of code in client.ts is:

  const ping = async () => {
    // A fetch on a websocket URL will return a successful promise with status 400,
    // but will reject a networking error.
    // When running on middleware mode, it returns status 426, and an cors error happens if mode is not no-cors
    try {
      await fetch(`${pingHostProtocol}://${hostAndPath}`, {
        mode: 'no-cors',
        headers: {
          // Custom headers won't be included in a request with no-cors so (ab)use one of the
          // safelisted headers to identify the ping request
          Accept: 'text/x-vite-ping',
        },
      })

  const ping = async () => {
    // A fetch on a websocket URL will return a successful promise with status 400,
    // but will reject a networking error.
    // When running on middleware mode, it returns status 426, and an cors error happens if mode is not no-cors
    try {
      await fetch(`${pingHostProtocol}://${hostAndPath}`, {
        mode: 'no-cors',
        headers: {
          // Custom headers won't be included in a request with no-cors so (ab)use one of the
          // safelisted headers to identify the ping request
          Accept: 'text/x-vite-ping',
        },
      })

10 replies

Gaming

Programming