Questions tagged [vuejs3]
This label is intended for inquiries that are focused on version 3 of Vue.js, a cutting-edge JavaScript framework designed to construct user interfaces in a progressive and open-source manner.
Issue with Map Focus Within my application, there are two main tabs - Home and Map. The map functionality is implemented using OpenLayers. When navigating from the Home tab to the Map tab, a specific feature on the map should be focused on. However, if th ...
Utilizing Vercel's AI SDK along with the useChat utility hook from Vercel in my Nuxt.js project, I'm developing a chat interface. Within this interface, I have multiple agents (such as General, Exercise, Cardiology) listed in a select dropdown menu. My goa ...
Just getting started with inertia.js and facing an issue. My CSS styles are being applied, but my JavaScript file isn't functioning as expected. I'm working on an admin dashboard using Laravel 9 and vue.js-3 with a custom HTML template. Interes ...
One issue I am encountering involves editing a table row. After clicking on the edit button, a form pops up with the data pre-filled for editing purposes. However, the radio button selected previously does not display as checked in the form; both options a ...
What is the best way to implement dynamic routes with multiple dynamic parameters in any order using Vue 3 and Vue Router? These parameters should be able to be passed in any order. In our web application, we have over 500 views which makes it impractic ...
Despite my struggles, including purchasing a course on testing Vitest in Vue 3 on Udemy, nothing seemed to work. However, I finally found a solution that might be helpful for others facing the same issue. ...
Here's the code snippet I used for the q-select element: <q-select square outlined fill-input standout="bg-grey-3 text-white" v-model="unit_selection" :options="units&qu ...
Is there a way to access and programmatically unmount a component instance loaded from Vue Route and persisted using <keep-alive> and <component>? I am working on a dynamic tab system where each tab renders a URL which displays its declared com ...
As a beginner, I am attempting to retrieve data from an API and display it using the v-for directive. However, this process is causing my app to lag. It freezes when new data is fetched or when I search within the list. The following code snippet shows whe ...
When working on the Vite-Vue application, I noticed that the styles I implemented for both index.html and Vue components/views are showing up as crossed out in the browser. Additionally, many of the styles I added to the components/views are also being cro ...
Working on a Vue 3 project, my setup includes a stuff.ts file with helpful functions that I need to utilize in my template. <script lang="ts"> import { defineComponent, onMounted } from 'vue' import { doSomething } from ' ...
I'm currently in the process of upgrading from Vuetify/Vue 2 to Vue 3. As someone who is not primarily a front-end developer, I have been tasked with updating some older code to ensure everything continues to work smoothly. However, I've run into ...
Encountering an error when utilizing @click in Nuxt3 with Typescript Issue: Type '($event: any) => void' is not compatible with type 'MouseEvent'.ts(2322) __VLS_types.ts(107, 56): The expected type is specified in the property 'click' declaration on typ ...
Trying to wrap my head around VueX and its potential here. Currently grappling with the concept of a state object array named currentRoom which ideally should only hold one object at a time. The issue is that instead of replacing the current room data when ...
I have a unique and specific inquiry regarding Vue3, slots, and the components I've developed for a reusable table setup. CustomTable.vue <template> <table> <thead> <slot renderAs="header"></slot> ...
Below is the code snippet: <ul> <li v-for="value in RandomTopic" :key="value.id">{{ value.title }}</li> </ul> export default { data() { return { RandomTopic: null } }, mounted() { ///so ...
When working with a dynamic component in Vue3, I am setting up the props using v-bind. However, I am now interested in implementing the provide/inject feature to pass properties to the dynamic component. My dynamic component expects values provided for its ...
Issue with Rendering Counter in Vite Project After setting up a new project using Vite on an Arch-based operating system, I encountered a problem when attempting to create the simple counter from the Vue documentation. The element does not render as expec ...
I am currently facing an issue with a component that is listening for an emit and then attempting to filter out a user with a specific userId from the users state. The challenge lies in the fact that assigning filteredUsers to users does not appear to be ...
I'm currently working on developing a component that allows me to dynamically import icons based on the provided icon name using unplugin-icons. However, I'm facing an issue where dynamic imports don't seem to work when the import path is dynamic. Interest ...
Hey there! I'm currently incorporating the Aos library into my Vue 3 project and encountering issues. import App from './App.vue' import AOS from 'aos' import 'aos/dist/aos.css' import { createApp } from "vue" const app = createApp({ render ...
When using the Vue 3 Composition API, it is necessary for each view to include the following: import { useRouter, useRoute } from 'vue-router' import { useStore } from 'vuex' export default { setup() { const router = useRo ...
In my template, I have one form element and one button element: <button type="submit" id="ms_sign_in_submit" ref="submitButton" class="btn btn-lg btn-primary w-100 mb-5"> </button> Wi ...
When selecting a city and area, the data should be filtered accordingly. However, I am facing an issue where the selected value does not appear. I have tried various solutions and searched for similar code, but I have yet to find a resolution. Below is a ...
I am facing an issue with displaying data in my template. When I try to do so, the screen remains blank. I am using Vue.js 3 with TypeScript and I am fairly new to this technology. <template> <div> <img :src="datas[0].imag ...
In my previous Vue 2 project, I had implemented a custom routing solution which sometimes required passing components as props. <template> <div> <component :is="component" :data="componentData"/> </ ...
I have a server.js file located in the "Server" directory, which is connected to Nuxt.js server.js const express = require('express'); const app = express(); app.get('/api/data', (req, res) => { res.json({ message: 'Hello fr ...
I'm having trouble setting up a basic button click feature in Vue 3 Composition API to play a sound effect. In my setup function, I have imported an mp3 sound effect from the assets folder and passed it into a ref method with an HTMLAudioElement type, wh ...
I am looking to incorporate tailwind-merge into my Vue component to avoid conflicts with tailwind classes. An issue I've encountered is that when using useAttrs and adding a parent class, the additional classes are being duplicated. The most straight ...
I am currently developing a Rails app that utilizes hypernova-vue to integrate Vue3 micro frontend apps/components across the site. I have created a small npm library containing components that are used by the Vue component micro frontends. However, after ...
Currently, I am in the process of developing a Vue application that incorporates a map feature. The main functionality involves determining whether a given position on the map is over water or land. If the position is over water, I want to iterate through ...
Unit testing is a new concept for me, especially when dealing with reactive state in components. I am looking to write unit tests for a component that contains reactive state. Below is an example of the test component: <script setup lang="ts" ...
I found an example on https://github.com/vuejs/vue-class-component that uses the new component syntax in vuejs3, but I'm trying to use TypeScript directly instead of babel. Here is what I attempted: <script lang="ts"> import Vue from "vue" import Co ...
I have a unique setup where custom objects are used to hold child objects full of data. The child objects start with null values for all properties, allowing them to be filled with data from remote sources when referenced. This results in a lazy-loading sy ...
Using an API, we are retrieving data: <script setup> import { onMounted, inject } from 'vue' let list = []; function initializeData() { axios .post("/some-link/here") .then((response) => { list = respons ...
I need to retrieve the width of an item in order to pass it as a CSS variable within a computed property. <div class="wrapper"> <fieldset> <legend :style="`--gap:${legendGap}px`"></legend> </fieldset&g ...
Whenever I try to call the lookUpItem function from ItemSearch.vue, I always get an undefined response. Code snippet from ItemSearch.vue: <script setup lang="ts"> import { lookUpItem } from '../systemApi' async function get ...
I tried following the instructions provided in this pinia persisted state plugin guide, but I am encountering an issue where my states reset on page refresh. Could there be a problem with my configuration? // nuxt.config modules: [ [ "@pinia/nux ...
Is there a way to navigate between pages on the client side in Laravel and InertiaJS without using inertia.visit()? I am curious about how to switch pages solely within the client, without having to communicate with the server. Can props be specified fro ...
I'm currently working on an ElectronJs project with Electron Forge, using the Webpack + Typescript template project In addition to that, I've integrated Vue and vue-loader for webpack in order to utilize Single File Component (SFC) files: { test: / ...
I recently made the leap from Vue2 to Vue3, but I'm encountering some challenges with the transition behavior. Here is the original Vue2 code: https://codesandbox.io/p/sandbox/silent-surf-yth66k?file=%2Fsrc%2FApp.vue <template> <div id="a ...
I am working on a component with multiple dropdown menus. <div v-for="(item, index) in items" :key="index"> <div class="dropdown"> <button @click="showInfo(index)"></button> <div ...
I have a Vue 3 application set up in the following structure: +---------------------+ | Component | | +-----------------+ | | | Child Component | | | +-----------------+ | +---------------------+ The components are structured as follows: my-com ...
While I understand that in Vue we can access template refs to use getBoundingClientRect() with the options API like this: const rect = this.$refs.image.$el.getBoundingClientRect(); I am now attempting to achieve the same using template refs within the com ...
I recently discovered a chart library called Chartkick for Vue projects. If you're interested, you can check it out here: In my project, I have data passed as props to a component. However, I encountered an issue where the prop couldn't be acces ...
Still fairly new to VUE, I'm excited to implement the best practices I've picked up from other frontend technologies, particularly the micro-frontend approach. While I have successfully been able to dynamically load my module, I've hit a roadblock when it ...
Is there a way to force Update in the setup function of vue3? In the Options API, I can simply use this.$forceUpdate() to achieve this. However, how can we accomplish the same thing in the setup function of vue3? ...
Utilizing <Suspense>, I am handling multiple requests in my child component using the await keyword: await store.dispatch("product/getProduct", route.params.id).then(res => productData.value = res); await store.dispatch("product/get ...
Within the code snippet below, there are two radio buttons present. Initially, both of them are unchecked. When the first radio button is checked, the log message in change_() function prints "male". On the other hand, when the second radio button is check ...
Today, I attempted to set up Vuetify with Vue3 for the first time. Most things seem to be working fine: components are being imported correctly, and classes like "text-center" are functioning as expected. However, I have noticed that props such as "dark" ...
In Vue, I'm curious about how to achieve the same functionality as declaring an object in React and passing it to multiple child components. const shared_props = { prop1: 'value1', prop2: 'value2', prop3: 'value3', }; Is there a way to pass this sha ...
Below is my Vue3 code snippet: <template> {{click}} <ol> <li v-for="item in items" :key="item" v-html="item"></li> </ol> </template> <script setup> const click = ref(); const items = ...
Currently in the process of upgrading a project to Vue3, we have multiple files within the project's boot directory that create global variables: src/boot/auth.js src/boot/axios.js src/boot/cranky.js .... Each of these files defines global variables used ...
Recently, I've built a collection of Vue2 components that I've been using across multiple projects through a private npm repository. Now, as I begin a new project in Vue3, I'm wondering if it's feasible to incorporate the old components into the new proj ...
Let's dive into a simplified version of the problem at hand: export default { data () { return { i_change_alot: 0, }; }, mounted() { setInterval(() => { this.i_change_alot = Math.random(); ...
I need help generating passwords reactively using an array object inside my instance. I am able to list this object with v-for and generate random passwords with characters in a passArry. However, I am struggling to send chars in data to the passArray wh ...
Our website is primarily built using Razor/MVC, but we have been incorporating Vue gradually over the past few years. Currently, we have multiple Vue apps integrated separately into different sections of our site - such as modals, forms, and widgets in the ...
Apologies if the title doesn't fully capture my query. In the brief Vue code snippet below, I have 2 input fields. One utilizes v-bind and the other uses v-model. I am puzzled as to why changing the second input resets the value of the first input. ...
I have a search feature that scans through Objects and displays results based on the chosen search parameter (ID, NAME). While searching by ID works perfectly, trying to search by name returns undefined. I'm puzzled as to why ID can be successfully s ...
The proposed API in the tc39/proposal-decorators repository is significantly different from the previous decorators API. Although TypeScript 5 doesn't fully support the new API yet, it's only a matter of time before the old API becomes deprecated, so I'll ...
Is there a way to utilize the h() function within the setup() method in Vue3 to render this template? <label v-for="service in services" :key="service"> <slot name="before" :service="service"></slo ...
I am currently working with vuejs3 and I am looking to implement a filter feature. When a user clicks on a specific link, I want to add the selected parameters to the URL and update the browser's address bar initially. Subsequently, I plan to make an ...
Situation In my monorepo (Using Turborepo), I have multiple Vue3 apps and packages. Each app is built with Vite and uses unplugin-vue-components for importing components automatically from the specific app. Additionally, I need to include components from ...
I am currently facing an issue with designing a navbar. I am aiming for Multi-Level Dropdowns, but whenever I click on More Services, it automatically closes the main dropdown menu. I have experimented with various approaches, but none of them seem to be ...
Currently, I am monitoring two props on a child component (basicSalaryMin and basicSalaryMax). Once the value changes, my next step is to update a reactive value on the parent component (data.companyModels, which is also passed to the child component as a ...
Currently facing an issue with a template I have The problem lies with location.drawnfeatures not updating within the template for unknown reasons. I've verified that the data is correct using console.log, and when I tested the code without 'v-f ...
After transitioning to Vue3 and embracing the Composition API style, I find myself missing a small convenience that I had when developing in the previous Options API pattern. In WebStorm/IntelliJ IDE, I used to be able to command-click (Mac) on the "export ...
In my chess application, I have a total of 3 components: 1 parent component and 2 child components. The first child component, called Board, is responsible for updating the move and FEN (chess notation). const emit = defineEmits(['fen', 'm ...
Currently, I am utilizing a Leaflet map without any VueJS specific wrapper libraries, just the basic leaflet. Additionally, I implement <script setup> for my VueJS components. My objective is to pass a Vue component as content for a Leaflet popup (t ...
While I am accustomed to using Codesandbox, I am facing an issue where the rendering is showing up twice for the first time, which has me puzzled about how to resolve it. Take for example the Contact component - the title and button are being displayed t ...
Using vue3 and vite2 Below is a simple code snippet. The expected behavior is that when the button is clicked, the reactive 'msg' variable should change. It works as expected in development using Vite, but after building for production (Vi ...
Within my application, there lies a form consisting of numerous input fields. These text input fields are displayed based on the selection made via radio buttons. I am currently validating these input fields by specifying the field name and its correspondi ...
Just recently diving into exploring Vue, I decided to kick off a project from the ground up. My current requirement is to incorporate vuetify. But it dawned on me that I lack both webpack.config.js and vue.config.js. Is it necessary for me to utilize npm ...
In my Vue CLI 3 project, I'm utilizing Bulma and have included the import in the 'index.js' file like so: import { createApp } from 'vue' import App from './App.vue' import router from './router' require('@ ...
Encountering a warning in the console stating "[intlify] Detected HTML in .....", yet unable to find a way to disable this specific warning for the mentioned line. Attempts were made to modify the eslintrc.js file to deactivate all v-html warnings, but unf ...