Nuxt.js static pages with relative URLs

I am currently working on developing static pages with Nuxt.js (MPA). After executing the generate command, I noticed that all the URLs in the <nuxt-link> tag start from the root directory, specifically /. For instance, my project structure looks like this:

pages
    |
     - index.vue
     - policy.vue

In my index.vue file, I linked the policy page using:

<nuxt-link to="policy.html"> Policy </nuxt-link>

However, this setup results in the URL displaying as /policy.html instead of just policy.html.

javascriptvue.jsnuxt.js

Answer №1

To correctly link to a page, you should replace policy.html with the actual path like this

Incorrect: 

<nuxt-link to="policy.html"> Policy </nuxt-link>

Correct: 

<nuxt-link to="/policy"> Policy </nuxt-link>

For more information, refer to the documentation at Nuxt Link

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

Issue encountered while importing dependency in Cypress Cucumber framework

Currently facing an issue with importing certain dependencies in Cucumber. The error message I received is as follows: Running: features\my_feature.feature... (1 of 1) Browserslist: caniuse-lite is outdated. P ...

javascriptnpmcucumbercypress

What could be the reason for ng-init failing to activate the $watch listener?

When I run the code in my application, there are instances where ng-init fails to trigger the $watch function. Any suggestions on how to fix this? HTML <div ng-controller="MyCtrl"> <p ng-init="stages = 'coco'">{{x}}</p> < ...

javascriptangularjswatchng-init

Exploring the concept of self in JavaScript

Exploring the concept of "self" magic, take a peek at this excerpt from nodejs (which is not complete). Socket.prototype.connect = function(options, cb) { ...... var self = this; var pipe = !!options.path; if (this.destroyed || !this._handle) { ...

javascriptnode.jsclosures

Enter information into the designated text field once you have selected the button

In my PHP/HTML form for user login, I have a password field where users can enter their password or click a button to generate a random one. Although I found some JavaScript code online for this feature, I'm having trouble getting it to work with my ...

javascript

Change PHP code to a JSON file format

I am currently learning Laravel and my current focus is on how to send a JSON file from the back end to the front-end. I intend to utilize this JSON data to generate a graph. Within my model, I have created a function that retrieves values and timestamps ...

javascriptphpjsonlaravel

Utilizing Vue.js and Webpack to Handle Requests for Multiple Incorrect Resource Links

After utilizing Vue.js single file components to construct a website and appreciating the modular approach, I've encountered an issue. The browser appears to be requesting multiple versions of resources instead of just one URL for each. HeaderBar.vue ...

javascriptcssvue.jsnpmwebpack

"Troubleshooting tip: encountering a SyntaxError message stating 'import declarations may only appear at top level of a module'? Here's

After downloading fetch-jsonp by running npm i fetch-jsonp and adding its dependency to my package.json, I attempted to import it using the following code at the top of my main.js: import fetchJsonp from 'fetch-jsonp'; However, I kept encounter ...

javascriptnpmjsonp

Having trouble obtaining the serialized Array from a Kendo UI Form

I am working on a basic form that consists of one input field and a button. Whenever the button is clicked, I attempt to retrieve the form data using the following code: var fData = $("#test").serializeArray(); Unfortunately, I am facing an issue where I ...

javascriptjqueryajaxkendo-ui

Is there a way to integrate Vue.js components into my static HTML code without any hassle?

I am a beginner with Vue.js and I'm looking to integrate it into one of the pages on my website. The page is currently built with Laravel, jQuery, and other technologies. Specifically, I want to incorporate the Vue.js draggable component into a specif ...

vue.jsvuejs2

Generate your own unique referral links today

Searching for ways to generate and monitor referral links like www.domain.com/?ref=switz What steps should I take to accomplish this? ...

phpjavascriptjquerymysql

HTTP request form

I'm currently working on a form that utilizes XMLHttpRequest, and I've encountered an issue: Upon form submission, if the response is 0 (string), the message displayed in the #output section is "Something went wrong..." (which is correct); Howe ...

javascripthtmlformsxmlhttprequest

A method for applying the "active" class to the parent element when a child button is clicked, and toggling the "active" class if the button is clicked again

This code is functioning properly with just one small request I have. HTML: <div class="item" ng-repeat="cell in [0,1,2]" data-ng-class="{active:index=='{{$index}}'}"> <button data-ng-click="activate('{{$index}}')">Act ...

javascriptangularjsangularjs-ng-click

Massive Memory Drain Due to XMLHttp POST Request

Is there a way to prevent XHR POST Memory leak in my web app? I have searched extensively for solutions but have not found any satisfactory answers. My issue is similar to the one described in this blog post that outlines the problem without offering any f ...

javascriptajaxmemory-leaks

How can I simulate an `Error` without it being displayed in the console or halting the entire file execution in JavaScript?

Is it possible to log an error and continue running the file without interruptions? I would like a way to achieve something similar to throwing an error but keep the file running smoothly like with console.log. Any suggestions on how to accomplish this? ...

javascriptnode.jsconsole.log

Obtaining a URL from a parameter

I have a unique situation with one of my parameters in the routing, as it involves an actual URL. router.get('/api/sitemap/:url', function(req, res) { var url = req.params.url; ... } How can I ensure t ...

javascriptnode.js

Dynamically setting properties in a Vue component using Angular

After browsing through this interesting discussion, I decided to create a web component: <my-vue-web-comp [userId]="1"></my-vue-web-comp> Initially, everything was working smoothly in Angular when I assigned a static property. Howeve ...

javascriptangulartypescriptvue.jsweb-component

The ng-route feature seems to be malfunctioning and I am unable to identify the error, as no information is being displayed in the console

Here is the code in my boot.php file where I have set up the links <ul class="nav nav-pills nav-stacked"> <li role="presentation"><a href="#/valley">Valley</a></li> <li role="presentation"><a href="#/beach"> ...

javascriptphphtmlangularjs

The problem with using the Transition group in Vue arises when trying to implement it within nested

<transition-group name="slide"> <section-tree v-for="(section,index) in form.sections" :key="section.random" :index = "index" :section = "section" @selectedSectionAndLesson="selectedSectionAndLesson" > ...

vue.jsvuejs2

What is the most effective method for transmitting data within your Vue3 application?

What is the best way to pass data between Vue components? I am looking for a method that allows me to fetch data from the backend once and share it across my project seamlessly, but I can't seem to find the right approach. sessionStorage: It works we ...

ajaxvue.jslocal-storagevuejs3session-storage

Leveraging the csv file functionality in the npm package of d3 version 5

Currently in my react project, I am utilizing d3 for data visualization. After installing the d3 module via npm, I found myself with version 5.9.2 of d3. The challenge arose when attempting to use a csv file within d3. Despite scouring various resources, I ...

javascriptreactjscsvd3.jsnpm