Questions tagged [vue.js]
Vue.js is an open-source, progressive JavaScript framework for building user interfaces that aims to be incrementally adoptable. Vue.js is mainly used for front-end development and requires an intermediate level of HTML and CSS. Vue.js questions are highly version specific and should always be tagged with [vuejs2] or [vuejs3] in addition to this tag.
vue.js
108,145
questions
0
votes
1
answer
14
views
How can I resolve `Property 'id' does not exist on type 'Record<never, never>'.`
I am trying to get the id off of a route param in Vuejs. I get the error below and cant find a way to solve it.
// how I am accessing the id
const route = useRoute()
const id = route.params.id
...
0
votes
0
answers
9
views
Algolia autocomplete field doesn't get populated after selection
I have built an app with VueJS 3 (Composition API) and the Quasar framework (2.14.5) and integrated Algolia (4.24.0) as my search engine (with vue-InstantSearch 4.8.4). It works as a charm.
In a next ...
-2
votes
0
answers
15
views
Create Vue/cli project fails to run
I'm trying to create a Vue project using the Vue CLI in Ubuntu but when I try to npm run serve I get the error shown below:
npm -v
8.5.1
node -v
v12.22.9
vue -V
@vue/cli 5.0.8
[![Output from Ubuntu ...
0
votes
0
answers
10
views
"Cannot read properties of undefined (reading 'defineComponent')" when i try to set up vue3-carousel on Nuxt3 App
I am geting the error "Cannot read properties of undefined (reading 'defineComponent')" when i try to use the "npm install vue3-carousel" library on my nuxt3 application
i get ...
0
votes
0
answers
5
views
Unable to make use of AnimateOnScroll from Primevue library in my Nuxt 3 composition API application
I have installed the PrimeVue library in my Nuxt 3 application with composition API and using it to create animateonscroll but for some reason it does not work at all. I tried using the Tree from ...
0
votes
0
answers
26
views
Using iframe to show pdf and open at a particular page by the given offset and also highlight any given text
I want to make a pdf viewer in which i want to open that pdf on a particular page by the given offset which will say on what text i want to show the pdf by default and also i need to highlight a ...
0
votes
0
answers
21
views
How to separate user changes to objects from changes to objects by my code?
What are the best practices for sending user changes to the server of an object received from the server? Now I don't understand how to separate the change when receiving data from the server and the ...
-1
votes
1
answer
36
views
HTML (vue template) . How make html table in one TH two TH ( check picture)
I want make table on html and want make in one th two "under" th .Check picture
Blue underline : person (like: Walter White) .
час. : hours
мин. : minutes
01 02 is like calendar. But me ...
0
votes
0
answers
17
views
Vite build not including css file with ?inline tag
I have this project (Project A), which has npm installed another package of mine (Project B). this package (Project B) has multiple inline CSS files which it imports as "import abc from "../....
0
votes
1
answer
3k
views
Vue.js Error while running task C:\xxxxx:build with message'spawn vite ENOENT'
I am having the error : Error while running task C:\xxxxx:build with message'spawn vite ENOENT'
I am using Vue 3, with Vue UI and my node version is v18.16.0
I installed this template for Vue with ...
0
votes
0
answers
15
views
Ziggy route is not found only in script
I have a problem with Ziggy using Inertia, Laravel and VueJS.
I did the next configuration:
Vite config:
alias: {
'ziggy-js': path.resolve('vendor/tightenco/ziggy'),
},
I used ...
-1
votes
0
answers
13
views
Access to XMLHttpRequest blocked by CORS policy in laravel 11 + vuejs 3
Bonjour à vous. Quelqu'un a t-il déjà pu résoudre ce problème avec laravel 11?
Access to XMLHttpRequest at 'http://localhost:8080/api/vente_par_page?page=1&cl=&dte=&tf=' from origin 'http:/...
2
votes
2
answers
33
views
Vue router gives a warning when adding dynamic route: No match found for location with path "/test"
I add a route dynamically and it works but I get the warning below.
"No match found for location with path "/test".
Code Sandbox demo url.
https://codesandbox.io/p/github/eguvenc/...
-1
votes
0
answers
31
views
Overlapping colours in chart.js not working
I was trying to achieve an overlapping line chart with filled colors by setting the alpha channel of the background colour to be 0.5 but it simply does not work.
The colours are yellow and grey and ...
0
votes
1
answer
22
views
Allow Users to Override Default Values in a Vue 3 Component Library
I'm developing a Vue 3 component library and want to allow users to override default values for components. Here's how users would install the library:
// Import styles and library
import { ...
0
votes
0
answers
24
views
How to keep the parent column value in data-field when I turn off the switch?
I wanted the value of the data-field of the parent column to be maintained without changing the column original order (because later I will use a v-for for several columns and only some will be ...
-3
votes
0
answers
28
views
How to make a vuejs/nuxt project work when javascript is disabled?
I hava a vuejs with nuxt project, I'm using SSR.
We have some client that needs to access the site without javascript enabled.
I tried using the noScript in nuxt.config.ts but it doesn't work (blank ...
0
votes
0
answers
25
views
Unknown file extension ".vue" error on Heroku
I'm facing a file extension error for a Vue3 app on Heroku
The build is complete but then i get this error :
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".vue" for /app/...
0
votes
1
answer
30
views
How to Prevent VueUse useStorage from Repopulating localStorage After Clearing localStorage?
I'm using Vue 3 along with VueUse's useStorage to synchronize some reactive state with localStorage. However, I'm encountering an issue where localStorage gets automatically repopulated with previous ...
0
votes
0
answers
22
views
Vue 3 with Transition and KeepAlive nested in RouterView
I am migrating my application from Vue 2 to Vue 3 but the KeepAlive does not seem to be working. I tried navigating to the previous page that is included in the KeepAlive but the state was not cached. ...
0
votes
0
answers
18
views
Issue with Firebase Hosting: Seeing Default Welcome Page Instead of Vue.js App
I'm trying to deploy my Vue.js website using Firebase Hosting, but I'm encountering an issue where the default Firebase Hosting welcome page is displayed instead of my actual website.
Steps I've Taken:...
0
votes
0
answers
16
views
How to show the specific item to indicator position in spin wheel roll method
I want to show the given index item after rotate animation at top center where the indicator was located .
this is the method to get the result but its still show wrong item. Here is my component ...
0
votes
0
answers
20
views
Iteration v-for over arrays defined on i18n(v9) with Vue3
I am starting to use the Vue i18n plugin and everything was going smoothly until I had to iterate over an array to render Vue components with a v-for directive.
The array with the objects (one per ...
1
vote
1
answer
18
views
overide plain styling on <v-card-actions>
I'm using Vuetify. This is the basic setup for a <v-card> component:
<template>
<v-card>
<v-card-title>MyCard</v-card-title>
<v-card-text></v-card-text&...
0
votes
0
answers
14
views
How to change Marker cluster count design in vue.js
I am using vue3-google-maps
import { GoogleMap, CustomMarker, MarkerCluster } from 'vue3-google-map';
Added markercluster which is coming with number count but I want to change background color of ...
0
votes
0
answers
22
views
How to Automatically Update Rows in a Vue.js Table with Real-Time Data?
Sure, here's the translation:
Hello, I have a question. I want to build a simple editor similar to Excel, which should function like Excel. Data should be automatically saved in the database whenever ...
2
votes
1
answer
51
views
Can't start Nuxt 3 dev server, cannot find module '@volar/typescript/lib/node/proxyCreateProgram
When I try to run npm run dev dev server tries to start but it shows the following error:
Cannot start nuxt: Cannot find module '@volar/typescript/lib/node/proxyCreateProgram
Require stack:
- ...
0
votes
1
answer
20
views
Syntax of vue svg inline path
I use vue-inline-svg to inline some svg's in my project.
It works fine when I call the svg like this:
<inline-svg src="/img/logo.svg" class="logo"></inline-svg>
But I ...
0
votes
0
answers
13
views
Nuxt content alternative for grouping the document/markdown files based on the Taxonomy terms such as Tags, Categories similar to the Docsy
Previously I was using the Docsy based documentation approach to display the contents from my .md files since I saw that Nuxt support this using the Nuxt content I started migrating the Documentation ...
2
votes
1
answer
44
views
Render slot with or without wrapper depending on the prop in Vue 2
I have a simple component that just adds styling to a slot. Styling part is not complicated: it just adds padding/margin/border/background color based on passed props, that's it.
Right now there's a ...
0
votes
0
answers
27
views
HTTP 405 Error for POST Requests on IIS with ASP.NET Web API
I'm facing an HTTP 405 error when making POST requests to my ASP.NET Web API hosted on IIS. The same setup works fine on my local development server but fails when deployed to IIS. I am using a proxy ...
0
votes
1
answer
18
views
What is missing from this vee-validate example in vue?
I'm trying to use yup and vee-validate with vue 3, but the validate function isn't working as I expect it to.
Here is a simple component I set up in my template
<PwInput :class="{'input-...
0
votes
0
answers
25
views
How to render new navigation based on admin/client Vue.js
I m currently working on a e-commerce website and i started to make the admin pages (dashboard , CRM , Products etc). I have a navigation set for the main page ( e.g. Home , About us , Shop , Profile ...
0
votes
3
answers
35
views
Vite build and Vue defineAsyncComponent problem
Here is a simple Vue component it will dynamically load separate .vue files based on which component is selected :
<script setup>
import {computed, defineAsyncComponent, ref, watch} from "...
1
vote
0
answers
16
views
Vcalendar css not importing properly
I'm having an issue with vCalendar. The date picking functions correctly, but the CSS doesn't seem to match what's shown on their website, plus some boxes look odd (the select has extra borders). I'm ...
-2
votes
0
answers
27
views
Marker custom does not work correctly on the static map of Google Maps [closed]
I'm trying to create a static image to replace the dynamic map in Google Maps. I'm having problems when creating the image because the icon I'm using does not recognize it to generate the marker ...
0
votes
0
answers
20
views
Testing router.push with vitest and testing-library for vue 3 project
im new in testing components and im trying to test a simple login function. Everything works and tests as it should expect for the push function. This is my login function, which executes whenever you ...
1
vote
1
answer
27
views
How to capture scroll position in vue 3 and nuxt3
I am trying to change the color of a scrollbar at a certain position but using window.scrollY seems to trigger errors:
const navBar = computed<NavigationBarData>(
() => {
if (window....
1
vote
0
answers
32
views
Slots don't work as nested conditional component
I'm working with Quasar/Vue 3. Imagine a scenerio.
IndexPage.vue - page subjected to routes
AwPage.vue - wrapper component, suppose to have slots, used in IndexPage
_sub/PageDesktop PageDesktop ...
-1
votes
0
answers
29
views
SPA Application become significantly slower when the route is changed repeatedly. The slowness happens only in Firefox, not in Google Chrome [closed]
SPA Application become significantly slower when the route is changed repeatedly. The slowness happens only in Firefox, not in Google Chrome.
Please find attached the Firefox performance and memory ...
0
votes
1
answer
35
views
How to change ref element when element isn't visible anymore?
In one of my components I've got a form that changes form depending on the value of a radio button.
My component looks like this:
<template>
<div>
<div>
<label>
...
0
votes
0
answers
20
views
Its possible to use q-timeline-entry inside q-intersection component?
I am trying to show a timeline using the timeline component, since the timeline is goint to be pretty big, I tried to use the intersection component so each timeline entry will only be in the DOM when ...
-1
votes
0
answers
20
views
How to use Tiptap to achieve multi person collaborative editing? [closed]
I used Vue 3 as the front-end and Django as the back-end to develop the Tiptap editor. Now I want to create a collaborative editing feature for multiple users. I have already registered different ...
1
vote
2
answers
35
views
What are the scss variables for modifying a Vuetify 3 v-text-field outline?
I have several v-text-field in a form. I want to modify the color of the outline that has been added through Vuetify's variant="outline" prop. I am trying to add the relevant scss variables ...
0
votes
1
answer
37
views
Using VueUse intersection observer for multiple elements of the same component
I need to apply an intersection observer from VueUse https://vueuse.org/core/useIntersectionObserver/#directive-usage to multiple elements. Instead of creating individual refs for each element, which ...
0
votes
0
answers
14
views
How to setup cucumber in vue to test the navigation function via BDD
I’m trying to test navigation in a Vue.js application using Cucumber.js. I want to simulate clicking a link on the home page and verify that it navigates to the about page. It seems that this brings ...
0
votes
1
answer
56
views
Module '"vue"' has no exported member 'computed'
<script setup lang="ts">
import { IonItem, IonCheckbox, IonItemSliding, IonItemOptions, IonItemOption, IonIcon } from "@ionic/vue";
import { ref, computed } from "vue&...
0
votes
1
answer
27
views
My Vue API client retrieves required data from the host and prepares an output .csv file with correct headers & IDs, but the retrieved data is missing
Here is my code: https://github.com/d0uble-happiness/discogsCSV
App.vue
<template>
<div>
<button @click="downloadSampleInputFile">Download basic sample file</...
1
vote
1
answer
21
views
v-data-table checkboxes select all checkboxes
I have a v-data-table implemented, but the show-select checkboxes have a problem. If I click on any one of them, they all select:
This is the result:
Also note, the box that should be in the header ...
1
vote
0
answers
45
views
[Vue warn]: Hydration node mismatch with v-if
I'm getting the error "[Vue warn]: Hydration node mismatch" when I use v-if on the Nuxt UI UButton.
Here's the technical stack and versioning used in my Nuxt app:
"@nuxt/ui": "...