The <NuxtLink /> element does not function the same as an anchor tag for creating internal links

I have a link defined in my Nuxt pages like this:

<NuxtLink to="/#section-x">Section X</NuxtLink>

The link is included in the menu on my global layout file. When I try to click the link from a page that is not the root page (/any-path), it takes me back to the landing page and displays the section as expected. However, when I try to click the link from the root page (/), it does not perform any navigation.

I also tried using an anchor tag in the same way: 

<a href="/#section-x">Section X</a>

The anchor tag works fine for internal navigation on the root page, but when clicked from another page, it navigates back to the root page without scrolling to the internal link (e.g. #section-x).

Is there a way to use either the NuxtLink or a tag and still enable internal HTML navigation from any page as intended?

vue.jsnuxt.js

Answer №1

As mentioned in this source, the installation of the vue-scroll-to package is recommended.

You can try implementing the following:

<nuxt-link
   :to="{path: '/', hash: 'section-x'}" 
   v-scroll-to="{el: '#section-x'}
">
  Section X
</nuxt-link>

If you are unsure about proceeding without adding more dependencies, give this method a try and see if it helps.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

While making a promise, an error occurred: TypeError - Unable to access the property '0' of null

I encountered an issue when trying to assign data from a function. The error appears in the console ((in promise) TypeError: Cannot read property '0'), but the data still shows on my application. Here is the code: <template> ...

javascriptvue.jsasynchronousasync-awaitpromise

Tips for smoothly animating and showing content as the user scrolls to a specific element on the page

Here is a sample template: <template> <div id="Test"> <transition name="fade"> <div class="row" id="RowOne"> <p>Lorem ipsum dolor odit qui sit?</p> </div> ...

javascriptvue.jsvuejs2

Display a modal when a user is not authorized in vue-router

After stumbling upon this post on Medium, I decided to implement its concepts into my project. My goal was to verify a user's authorization to access a particular route, and if unauthorized, display a modal pop-up. In order to achieve this, I made s ...

javascriptvue.jsvue-router

Component fails to trigger @click handler

.vue component <template> <div class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> Loading Files </div> < ...

javascriptvue.jsvuejs2

Utilizing Vue to send information to the POST function

I am encountering an issue with passing data to the Vue.js post method. I am using vue-resource and according to the documentation, it should be structured like this: this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCall ...

javascriptvue.js

Navigating through a nested array within a JSON object using Vue.js - a guide

I have a JSON data array that includes outer and inner subarrays. My goal is to loop through both levels and create a table. Below you'll find a snippet of the sample array: { class:'I', subDdiv:[ { ...

javascriptloopsvue.jsvuejs2element-ui

Exploring the dynamic loading of components within routes

Just starting out with Vue and experimenting with vue-router, I'm trying my hand at dynamically loading components without relying on additional libraries like webpack. So far, I've set up an index page and a router. Upon initial page load, I not ...

javascriptvue.jsvue-componentvue-router

Multiplying array elements within the Vuex state with the assistance of Socket.io

I have developed an application using Vue and Vuex that connects to a Node/Express backend with Socket.IO to instantly push data from the server to the client when necessary. The data sent to the clients is in the form of objects, which are then stored in ...

javascriptarraysvue.jssocket.iovuex

Exploring the World of Vue.js Object Imports

I am currently encountering an issue involving the importing of Objects from App.vue into a component. To provide context, this project consists of a Navigation Drawer component and an App.vue file. The Navigation Drawer contains Vue props that can be dyna ...

javascriptarraysvue.jsobjectvue-cli

"Looking to display an image object retrieved from AWS S3 using a signed URL in Vue.js? Here's how you

<div v-for="(data, key) in imgURL" :key="key"> <img :src= "getLink(data)" /> </div> imgURL here is an array that contains file names. methods: { async getLink(url){ let response = await PostsService.downloadURL({ i ...

javascriptamazon-s3vue.jsvuejs2base64

Cross-Origin Resource Sharing (CORS): The preflight request response does not satisfy the access control check

I've been facing an issue with a simple POST method to my API through the browser. The request fails, but when I try the same on Postman, it works fine. The response includes a JSON string and two cookies. In an attempt to resolve this, I set the hea ...

javascriptexpressvue.js

"Patience is key when it comes to waiting for components to render

Short Overview of the Issue I'm currently exploring methods to access an onRendered lifecycle hook. Finding on the Topic A similar query was posted here: Vue $nextTick in mounted() hook doesn't work as expected The explanation provided suggests ...

javascriptvue.jsvuejs3vue-component

Exploring the integration of methods in Vue.js components

Within my Vuejs project, I developed a new form component and integrated it into the main index component. This new component needs to validate certain fields, with validation methods already created in the parent component. However, I am facing difficulti ...

javascriptvue.jsmethodsvue-component

What factors cause variations in script behavior related to the DOM across different browsers?

When looking at the code below, it's evident that its behavior can vary depending on the browser being used. It appears that there are instances where the DOM is not fully loaded despite using $(document).ready or similar checks. In Firefox, the "els ...

javascriptlaravelvue.jsdomcross-browser

How can Vue define the relationship on the client-side when submitting a post belonging to the current user?

Currently, I am developing an application using Node.js, specifically Express server-side and Vue client-side, with SQLite + Sequelize for managing the database. One of the features of this app is that a user can create a post. While this functionality ex ...

javascriptexpressvue.jssequelize.jsvuex

Navigating Vue 3's slot attributes: A step-by-step guide

Currently, I am facing an issue with a Vue component named MediaVisual. This component contains a slot. The problem arises when attempting to retrieve the src attribute of the slot element that is passed in. Surprisingly, this.$slots.default shows up as u ...

javascriptvue.js

The data is not appearing in the Vuetify data table

I have encountered an issue with the Vuetify data table where it is not displaying any data. Even though it shows that there is 1 row out of 1 displayed, the table body remains empty. Below is my component code: <template> <v-data-table :hea ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Error message received when calling a function within a Vue watcher states "function is not defined"

My goal is to trigger a function in a Vue component when a prop changes using a watcher: props: [ 'mediaUrl' ], watch: { mediaUrl: function() { this.attemptToLoadImage(); } }, medthods: { attemptToLoadImage: function() { console ...

javascriptvue.jsvuejs2

Get a reference to pass as an injection into a child component using Vue js

Is there a way to pass a reference to child components? For example: The Parent component provides the ref: <template> <div ref="myRef" /> </template> <script> export default { name: 'SearchContainer', pr ...

javascriptvue.jsvuejs2

Exploring the depths of Vue.js: Maximizing potential with nested

In my Grid component, I retrieve JSON data from a server and render it. The data mainly consists of strings and integers, but sometimes includes HTML elements like <strong>myvalue</stong>. In order to properly display the data, I use triple bra ...

javascriptvue.js