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,096
questions
0
votes
0
answers
6
views
Tabulator - How to copy/paste into newly added row
I have a Vue.js / Tabulator setup where you can add new rows to the bottom of the table, as well as do range selection and copy/paste. Problem is that currently it's not possible to paste into newly ...
- 1,371
0
votes
0
answers
5
views
Automatically prepend image URLs in Nuxt Content
With Nuxt Content v2, is there a reasonable way to provide front-matter data in markdown documents to components used inside the markdown without passing it as explicit props?
For example:
---
title: &...
- 9,833
0
votes
1
answer
19
views
How to initiate Vue v-checkbox as false instead of empty string on load?
Right now I have code like the following:
<v-checkbox
label="Consent?"
v-model="form[consent]" ></v-checkbox>
form is just an empty object on start
form:
{
...
- 1,477
0
votes
0
answers
12
views
Can't access Nuxt Studio data inside of Nuxt application
I have this nuxt.schema.ts it loads perfectly on https://nuxt.studio without any issues and I can alter the options, how do I access this object in my app? If I use const config = useAppConfig() it ...
- 49
0
votes
1
answer
18
views
How can i add validation between steps of a v-stepper?
Code
I have a Vue component using v-stepper that looks like this:
<template>
<v-stepper
v-model="step"
:items="items"
>
<template v-slot:item.1>
...
- 518
0
votes
0
answers
19
views
Attempting to deploy vue vite site and get an error with a module not resolving
I'm attempting to deploy my app to a server using vite(vue). I saw this was asked here, but it doesn't have an answer.
My vite.config.js is:
export default defineConfig({
base: "./",
...
- 3,243
1
vote
0
answers
14
views
Laravel 11 / Vue - 404 not found when force deleting a soft deleted model via route model binding and utilising destroy()
When I am trying to forceDelete() a soft deleted model through route model binding I am getting 404 not found. This only happens when force deleting a model and not when restoring or soft deleting. I ...
- 36
0
votes
1
answer
12
views
How to set proxy in Nuxt3?
I can't understand why setting proxy in nuxt 3 doesn't work
When im trying to get data i see incorrect url in development tools
Below is my code, what am i doing wrong?
nuxt.config.js
export default ...
- 11
0
votes
1
answer
21
views
Vue Router not finding query params
Vue 3, Vue Router 4, web hash history router
I have a url with a query param that gets inserted, but Vue seems to ignore it and it's causing weird redirect issue for my application.
For example:
Is: ...
- 683
0
votes
0
answers
12
views
Use a wrapper component to provide properties and methods down the tree vue2
I have a TranslatableInput component that has a complex logic for rendering different types of input fields. I would like to create a Wrapper component that @Provide some methods/properties which I ...
- 128
1
vote
2
answers
24
views
Tailwind - Apply Justify-Between if multiple children else Justify-End
I have a Vuejs component with a flex div containing a slot. As I do not know how many elements will be in the slot, I would like the content to be 'justify-between' if there is more than 1 element, ...
- 2,023
0
votes
1
answer
26
views
Return component with props from composable
In a Vue project, I have a composable that provides few useful refs to components using it.
In my application, it is very likely that whichever components use the composable, it will need to render ...
- 779
0
votes
1
answer
12
views
Hi, I have only basic knowledge on web dev and I need help on my project to start a new intern job, I need to know where to start and steps to follow
Food recipe site
The goal is to build attractive food recipe website that people can browse and can signup/login and share their recipe
any user visiting the site should be able to browse recipes ...
0
votes
1
answer
48
views
vuejs @input is getting called only after onfocusout, i want to call it when user is typing
i am trying to use @input on input field in vuejs, but the function assigned to it gets called only after user has stopped typing and the focus is out of the input field, that means it is getting ...
0
votes
0
answers
15
views
How to include highcharts in Nuxt 3.7.0?
How can I include this combination graph https://www.highcharts.com/demo/highcharts/combo-dual-axes chart in my nuxt vue application ?
I followed this https://www.npmjs.com/package/highcharts-vue docs,...
-1
votes
1
answer
41
views
Is it possible to optimize this pinia store
I am converting an existing app with a complex vuex store to pinia.
When a user logs in, we get a response with all of their access levels as a json string. There are actually many more access objects ...
- 7,317
0
votes
0
answers
28
views
How to create a standalone embeddable script from an internal Vue component?
I have a Vue application, and within, I have a component, which I reuse throughout the app. It's located in src/components.
I'd now like to make it so this component can be embedded into other ...
- 111
0
votes
0
answers
19
views
Implementing SwiperJs Thumb Gallery In Nuxt 3
I'm working on a Nuxt 3 project and trying to implement a SwiperJS thumbs gallery - https://swiperjs.com/demos#thumbs-gallery. I want the thumbnails to synchronize with the main slider so that ...
- 317
0
votes
2
answers
28
views
Docker not finding package.json when building Vue app container
I am trying to build a container image for a Vue app. The Dockerfile is very simple and contains a build, post checkout, and post build hook for the respective stages. post checkout runs successfully ...
- 373
0
votes
1
answer
27
views
Await dispatch does not seem to be working (VueX)
I have functions createSwipe, fetchUserSwipes, and fetchSwipedUserSwipes. I call fetchUserSwipes and fetchSwipedUserSwipes inside createSwipe using these:
await dispatch('fetchSwipedUserSwipes', ...
-1
votes
1
answer
40
views
Vuejs guard router failed with infinite loop
Hellop, I have a vue3 app consume laravel 11 api,
I want to develop a router guard to redirect unauthenticated users to the login page. When the Laravel server is not running, the code works and ...
- 184
0
votes
1
answer
30
views
Why is my ref-Element sometimes just NULL instead of being the actual Element in VueJS?
I want to assign a reference to my VueJS-Component:
<audio
ref="audioPlayer"
controls
controlsList="nodownload"
preload="metadata"
>
<source
:src=&...
- 12.2k
-4
votes
0
answers
32
views
How to deploy Laravel, Vue.js, Tailwind in online for free? [closed]
I created a project online chatting system using laravel, vue.js and tailwind. And I want it to deploy online but I don't have any money to do so. Can someone recommend or advise me how to do? Thank ...
0
votes
0
answers
25
views
What is the difference between "http://localhost:5000/book/" and "http://localhost:5000/book" in axios? [closed]
Sorry, I'm new to using Vue.
I have used Vue2 to make my pages and requests then I found that the next request is rejected by CORS
axios.post(`http://localhost:5000/book`, form).then(() => {})
but ...
-1
votes
1
answer
31
views
How to enable Drag and Drop in Vue/JS/HTML with an inventory system?
I want to recreate a inventory system like the one in minecraft as it is helping understand a lot of web dev stuff and just overall becoming a better developer, my code is not working and updating my ...
- 1
0
votes
1
answer
26
views
how to validate Form and Go to Next Page with vue Router
a form after validate must go to next author page with vue-Router using this code but not validate
<form @submit.prevent="validate">
<div class="row">
...
- 1
0
votes
0
answers
46
views
Javascript regex is working on desktop but not working on mobile
I am using regex in vuejs to manipulate input field data.
below is the code:
<input
v-model="inputValue"
type="text"
:placeholder="placeholder"
:class=&...
1
vote
1
answer
29
views
Update Vee Validate after successful submission but API returns bad request
This is my component: SignupButton.vue
<script setup>
import { Form, Field, ErrorMessage } from 'vee-validate';
import { toTypedSchema } from '@vee-validate/zod';
import { z } from 'zod';
...
- 135
1
vote
2
answers
31
views
Route params are not rendering inside Vue components when using Vue Router
I've got Vue router running with these routes:
const routes = [
{
path: '/',
name: 'home',
params: {
label: 'Home page'
},
component: Home
},
{
path: '/group1',
...
- 8,269
-1
votes
1
answer
80
views
Vite 'The following dependencies are imported but could not be resolved'
I'm trying to migrate from Symfony encore (that uses webpack under the hood) to vite and stuck with this issue
Error: The following dependencies are imported but could not be resolved:
vue (imported ...
- 1
0
votes
0
answers
33
views
My Vue API client is getting data OK, and I have the logic to turn it into .csv, but I can't seem to work out how to download the file
DiscogsCSV is intended to do the following:
Take as input a .csv file, the first column of which contains valid discogs release IDs
Look these release IDs up on discogs API https://api.discogs.com/
...
- 165
0
votes
0
answers
22
views
How to use PrimeVue File Upload component with Firebase?
I am trying to use the PrimeVue V3 File Upload component with Firebase.
I am also using VueFire to manage the Firebase upload. Only because it provides some convenient composables for managing ...
- 2,172
0
votes
1
answer
40
views
Getting net::ERR_ABORTED 404 (Not Found) at http://localhost:5173/@vite/client in vite project
I have set up a Vite project for vuejs, following the quick start guide to learn the workflow of application development. However, upon launching the app on chrome (or any other browser for that ...
- 83
0
votes
0
answers
35
views
Links not longer working when navigating to another view
So, when I used this code to go from the view to another with props.
this my first view :
<template>
<Spinner />
<Header />
<main class="main">
<...
- 33
0
votes
0
answers
20
views
Two inertia js vue builds with laravel and modules (Module with SSR build)
We have our main project which had no modules within. It is a crm which does not use SSR but is just a inertia vue js project that gets built for production and used accordingly.
A recent requirement ...
- 404
0
votes
2
answers
38
views
How to prevent tab changes in PrimeVue v3 TabView?
I am using PrimeVue V3 TabView with composition API.
Inside each tab I have a form and I want to trigger form validation before switching tabs. So I need to interrupt the tab change, do something (...
- 2,172
0
votes
0
answers
35
views
font-family is invalid in list
The font family of li in v-for is fine, but when I add an additional li element, the font family of the li element is using the font family of the system
I'm sure I've defined font-family correctly, ...
- 1
0
votes
0
answers
13
views
How should I use Nuxt Apollo outside of vue component or script setup to create repository for API calls?
I'm not a software engineer or nothing close to it and I'm in the process of learning to create a web app.
I'm playing with a NUXT app and Graphql, in which I'm trying to call a NESTjs API from ...
- 1
-2
votes
0
answers
24
views
Managing Repeated Data: Script Array vs External JSON [closed]
I'm working on a Nuxt project where I have a section with 8 <li> elements, each containing an image, alt text, class, and a link. I want to avoid repetitive code by using a loop to render these ...
- 317
0
votes
0
answers
14
views
Performance disadvantages of splitting every component into separate chunks in Nuxt?
So I'm working with Nuxt 2.15 (Vue 2.6). Usually if we have a component that is rendered using v-if (so it is not always needed) we import it like this:
components: {
SideCategory: () => ...
- 613
0
votes
0
answers
48k
views
Img-src doesnt resolve when url has more parameters after .../xxx.png/
My URL: https://static.wikia.nocookie.net/valorant/images/9/9c/Raze_icon.png/revision/latest?cb=20230523180834
When opening this link in my browser, I see a raw picture. When referencing it in my <...
- 1
0
votes
0
answers
35
views
TypeError: Cannot read properties of null (reading 'insertBefore') when adding vuetify to existing vue 3 app
I'm trying to add vuetify to an existing vue3 project but it triggers this error in some views:
TypeError: Cannot read properties of null (reading 'insertBefore')
Removing <v-app> and <v-...
- 313
0
votes
0
answers
16
views
vue/compiler-sfc Doesn't recognise Flow.js syntax
I am trying to migrate a Vue 2 application to Vue 3.
The application uses Flow.js and Webpack / Vue CLI for the build.
I am trying to follow the approach with the compatibility build.
So I:
Installed ...
-1
votes
0
answers
24
views
Best Practice for Broadcasting Dynamic (updating) Product Prices in Laravel 11 with Vue 3 Frontend [closed]
I am developing an e-commerce platform using Laravel 11 for the backend and Vue 3 for the frontend, which requires near real-time updates of product prices and stock levels in response to currency ...
- 3,371
0
votes
0
answers
34
views
+50
Is there an HTML5 API to control camera focus and zoom on iPhone?
I am currently working on a web application that requires the ability to control the camera's focus and zoom directly from the browser. The application is designed to be used on iPhones, and I am ...
- 1,311
1
vote
2
answers
39
views
How to pass slots through from Parent to Child Components with PrimeVue?
I am trying to wrap some PrimeVue components to make my own component library. But how do I handle all the slots?
Some PrimeVue components have a large number of slots so passing each one individually ...
- 2,172
0
votes
0
answers
17
views
Fullcalendar.getEvents() doesn't show the just added- or still show the removed- event?
I'm working on a application which is using the full calendar component.
Events can be add by a popup window, so that user can add some data like discription etc. On that popup window is a 'Save' ...
- 115
0
votes
0
answers
26
views
What causes Cannot find module '~/pages/index.vue' or its corresponding type declarations. ts(2307) error while using router.options.ts?
see sample image here
I have a nuxt 3 project and I would like to use custom routing with it. I followed nuxt documentation on custom routing and added a folder named 'app' and inside I created router....
0
votes
0
answers
30
views
Vite - Building efficiently different applications based on common source code
I am currently developing a web application with Vue.js and Vite.
I aim to produce two different versions of the same application using the same source code. For example, some components are common ...
- 55
0
votes
0
answers
15
views
Try to set false value using UseQuery Vue
I am learning Vue at the moment. I'm trying to create a loader from the front-end for a table. I set the value true first before getting results from the endpoint so that the loader can work in <...
- 301