Is there a way to access window.location.href in Nuxtjs V3?

My goal is to enable players to join a game using a QR Code. Since the game will be hosted on multiple IP addresses, I need to dynamically generate the URL.

Below is my current workaround in my NuxtJS Vue Component:

<template>
  <input placeholder="copy browser window url into this field" v-model="fullPath" @change="generateQR">
</template>

<script setup>
  const fullPath = ref(null)
  QRCode.toDataURL(fullPath.value + ...
</script>

My desired approach would be something like this:

<script setup>
  // pseudo code (not functional)
  QRCode.toDataURL(window.location.href + ...
</script>

Even when using the useRouter() and useRoute()'s .fullPath attribute, I am still only getting the relative path / instead of http://10.16.1.173:3000/.

View the full code on GitLab: pages/index.vue

javascriptvue.jsnuxt3.js

Answer №1

Always remember to verify if you are on the client side before interacting with the 'window' object. You can do so by using this code snippet:

if (process.client) {
      console.log(window.location.href)
}

Answer №2

Consider using the following:

this.$route.query

Answer №3

In Nuxt 3, you have the ability to access the current URL on both the server and client using the composable function useRequestURL() (please note that it may not work with hybrid rendering):

const currentPageURL = useRequestURL();
console.log(currentPageURL.href);

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

Having trouble displaying options in VueJS Component using datalist

Currently, I am harnessing the power of VueJS and its components to create an extensive array of datalists and selectors, each equipped with a submit button for validation upon form submission. Initially, I successfully implemented a datalist within a com ...

javascriptvue.jshtml-datalist

What is the best way to include and delete several images on a canvas?

Recently, I've started working with canvas in HTML5 and I'm tasked with creating a paint application. One of the features I need to implement is the ability to dynamically add selected images to the canvas as the mouse moves, and then have the fu ...

javascripthtmlcanvas

What is the best way to partially change a CSS class name in Vue?

Imagine you have this HTML snippet <div class="progress-bar w-90"></div> and now you want to replace the value 90 with an object from Vue. Below is the attempt, but the syntax seems off: <div :class="progress-bar w-{{ progres ...

vue.js

How can I use Grid List and Icon Button in Material UI as individual buttons with onClick functionality?

I've been experimenting with the grid list feature from the Material UI framework, found here: https://material-ui.com/components/grid-list/#grid-list-with-titlebars My current challenge involves adding onClick actions to both the GridListTile compon ...

javascriptreactjsmaterial-ui

Having trouble accessing JavaScript Form Elements through Form Variable

For username validation in a form using JavaScript, I'm attempting to access the Label tag within the Form tag. If the Regex matches, then display an error in the Label; otherwise, hide it. However, when I try to modify the text in the text field, I e ...

javascripthtmlcssforms

Array containing two objects in a two-dimensional format

In the example provided, I am working with a 2D array. Link to the example: https://codesandbox.io/s/v0019po127 I am noticing different results depending on whether I use the browser console or Codesandbox's console. I have attempted using JSON.str ...

javascriptarraysreactjsreact-redux

Bring in SASS variables to enhance Material UI theme in NextJS

Within my project, I currently have the following two files: materialTheme.ts import { createMuiTheme, Theme } from "@material-ui/core/styles"; const theme: Theme = createMuiTheme({ palette: { primary: { main: "#209dd2", contras ...

javascriptreactjssassmaterial-uinext.js

Tips for Retrieving and Modifying Bounds in Google Maps to Add or Remove Markers from a List

I'm currently facing a challenge where I need to retrieve the Bounds and Change Bounds in order to add and remove Marker information on my Added List below my Google Map. Similarly, with the Zoom change, I need to make adjustments because I am utiliz ...

javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3

Unable to view images on Wordpress theme

I am currently facing an issue where some images in my asset folder are not displaying properly when I convert my HTML/CSS/JS template to Wordpress. The main problem is with the image that should show up when you first visit the website. Below is the CSS c ...

javascriptphphtmlcsswordpress

Changing the li tag by clicking on it is a simple task that can be easily

Whenever I click on a tag, I want the li class to change to "active" and open a new page with the corresponding tag as active. For example, if I click on the Overview tag, the new page should open with the li tag as active. I have attempted to write some c ...

javascriptbootstrap-4html-lists

What is the best method for snapshot testing a component that includes nested components?

I am currently testing a component that contains a nested component using Redux. To test this, I am utilizing shallow rendering. Below is the code for my test: describe("Header", () => void it("renders correctly", () => { const renderer = new ...

javascriptreactjsreduxjacksonjestjs

Creating an extensive amount of HTML content through the use of JSON

When I request data from my API, it returns JSON objects which then populate numerous divs with content. However, I find myself continuously using concatenation to insert object properties. Is there a more efficient method for achieving this? $.each(JSO ...

javascripttemplates

Why isn't P5.JS's .display() working like it should?

I'm having trouble figuring out the scope of this code. I moved the function around, but I keep getting a "not a function" error. let bubbles = []; function setup() { createCanvas(400, 400); for (let i = 0; i < 10; i++){ bubbles[i] = new Bubbl ...

javascriptp5.js

Troubleshooting: Clicking the Ajax button yields no response

I’ve looked through all the similar questions and tried multiple solutions, but nothing seems to be working. My goal is to retrieve job postings from my database related to careers. When a user wants to apply for a job, they should click a button which w ...

javascriptphpjqueryajax

How can I limit the displayed content of a div to just the initial lines (clamping)?

I have a collection of divs that showcase previews of lengthy documents. These documents utilize various font styles, resulting in inconsistent line heights. An example can be seen here: http://jsfiddle.net/z56vn/ My goal is to display only the initial fe ...

javascriptjqueryhtmlcss

Unable to deploy the Firebase function to Firebase functions platform

I've been watching Doug's video on YouTube for guidance on changing a message with functions in JavaScript. To resolve the error message 'types can only be applied to ts files,' I installed the Flow language script. Thankfully, that err ...

javascriptnode.jsfirebasefunctiongoogle-cloud-functions

Testing the screen size automatically using Javascript

Hello everyone, I've implemented a JavaScript code that triggers an image to slowly appear and darken the background when a link is clicked. However, on an iPad, the background doesn't completely turn black as intended. The CSS specifies that the ...

javascriptcssipadhtml

Content within the Iframe is in the process of loading, followed by

Exploring the code below: <iframe id="myframe" src="..."></iframe> <script> document.getElementById('myframe').onload = function() { alert('myframe is loaded'); }; </script> Is it a possibility that the ifra ...

javascripthtmliframeonload

Scrolling to a specific anchor in a React webpage when the URL is opened in

Imagine having a component "Post" that contains multiple components "Comment". How can we make the application automatically scroll down to a specific comment when entering a URL like this: /post/:postId/#commentId The route for postId /post/:postId is a ...

javascripthtmlreactjs

Unpack an array with entries and an iterator

I am working with an array of objects, each containing the same properties. My goal is to create a function that will return an array of arrays, where each inner array holds values based on the property names of the objects. Here is an example input: inp ...

javascriptarrays