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.
Not sure if this is standard behavior, I'm fairly new to Vue, but it's really frustrating. Hopefully someone here can shed some light on what's going on... Here's my code snippet: props: [ 'asset', //--- asset.price = 50 ], data() { return { ...
I am facing a situation where I have a component that is mounted as part of the DOM rendering process. The basic structure of the application looks like this: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...
I've been utilizing Realm SDK in Vue2 with the following syntax: // file scr/plugins/realm.js import Vue from 'vue'; import {App} from 'realm-web; Vue.prototype.realmApp = new App({id: 'artes-realm-vl12'}) //file scr/main.js import './plugins/realm'; Ho ...
I have set up a new vue3 router and configured different routes: const routes = [ { path: "/", name: "home", component: HomeView, }, { path: "/about", name: "about", component: () => ...
Recently, I embarked on a new project with Vue CLI and Vite, utilizing Vue version 3.3.4 alongside TypeScript. In the process, I attempted to incorporate the vue-concise-slider into one of my components. You can find it here: https://github.com/warpcgd/vu ...
Is there a way to determine when the document is in fullscreen mode? I attempted to monitor document.fullscreen with the following code, but it was not successful: watch(document.fullscreenElement, (newValue) => { fullScreenActivated.value = newValue ...
Hey there! I'm currently working on implementing dark mode into my project by following a tutorial. However, the tutorial is based on JavaScript and not Vue, so I'm having some trouble converting this particular section of code to work with Vue 3 ...
Currently, I am in the process of learning how to use Vue3 + Typescript. Previously, I have developed Vue2 applications using plain JavaScript. In my current project, I am attempting to define a reactive variable within the setup() function: setup() { ...
I'm looking for the best approach to update a reactive object with data after fetching it: setup(){ const formData = reactive({}) onMounted(() => { fetchData().then((data) => { if (data) { formData = data //is ...
Within the code snippet below, we can see that in the compPropsIsBtnDigitizePolygonDisabled function, it initially checks if the digitizePolygonInteractions variable is initialized. If it is not initialized, an error will be triggered. During execution, w ...
I am encountering an issue where I want to display data dynamically from a database using a v-for loop. However, when I attempt to push new data into the array, they show correctly in a console.log() but do not reflect any changes in the template. I have ...
There is a file for an app that imports ymaps.js where YmapsComponent.vue is declared. import '../js/ymaps.js'; import { createApp } from 'vue'; const app = createApp({}); import YmapsComponent from './components/YmapsComponent.vue'; app.component('ymaps-c ...
I am currently working on a VueJS 3 application that includes a router-link element. I am trying to implement a custom click-handler where instead of redirecting to the href URL, it will trigger a function in my pinia-store. <router-link ...
I am currently working on a project in Vue 3 that involves an image map with click events on certain areas. The challenge I'm facing is that the images scale according to the browser size, but the coordinates of the image map are fixed pixel sizes. I'm new ...
After upgrading my Vue 3 project to version 3.4, I encountered an issue with vs-code highlighting same-name shorthand as an error, even though it was functioning correctly in my code. I am using the volar extension. Is there a way to resolve this so that v ...
UPDATE: I recently discovered that I need to modify the body background-color, but I am unsure of how to accomplish this from within the style of this page based on the wrapper's class. The class is determined by the data values. I aim to change the ...
In my development project, I am creating a Vue 3 CRUD application for managing Users. The goal is to display the users in reverse order so that the newest additions appear at the top. To achieve this, I have implemented a custom filter as shown below: reve ...
Hello and thank you to those taking the time to read this. I am new to Vue, so I may be overlooking something obvious here, but after being stuck for several days, I am reaching out for help. In my SFC file, I have an onMounted function fetching data from ...
Currently, I am working with Vue3 using the options API. After reviewing this StackBlitz, my question is regarding how to correctly set the :max value for a date-picker. Even though I have assigned :max as new Date(), I am still able to select dates that ...
I am currently facing a challenge with utilizing dynamic refs in the Vue Composition API. According to the Vue documentation, it suggests using the following approach: <div v-for="item in list" :ref="setItemRef"></div> impor ...
I'm currently in the process of upgrading my app from Vue2 to Vue3, but I've hit a roadblock when it comes to dealing with forms. For my form elements, such as FormInput, FormTextArea, and FormCheckbox, I have been using Single File Components (SFCs) and ...
I'm completely baffled by this issue. It seems that Vue3 is able to apply the move animation class correctly for a <transition-group/> when there is a list of items, but this only happens if the list is moved forward. I've created a CodePen ...
I'm a newcomer to the world of Quasar Framework and Vue.js. I recently tried implementing the q-option-group component in my simple application but encountered an issue where the model-value and @update:model-value did not toggle between options as expecte ...
My app was developed using vitesse-nuxt3, and everything is working smoothly except for my attempt to use LocalStorage with the help of vueuse. Component: <script setup lang="ts"> const { test } = useTestStore() </script> <templa ...
I am currently in the process of updating some Vue 3 components to utilize the new Composition API. The code must be capable of functioning within the new environment. As I am still learning, I have not been able to find a suitable example on the web thu ...
I am currently developing a dropdown menu for selecting visit status options, which include "pending," "canceled," "rejected," and "approved." In the case of an approved visit status, I would like the dropdown selection to only display the options for "can ...
Incorporating VueQuill into my vue3 application is resulting in the following console error when attempting to display an HTML string - https://i.stack.imgur.com/KGQqD.png This is my code snippet: <template> <div class=""> & ...
I'm curious because I have trouble grasping the distinction between v-model and :model-value. According to the information in the documentation: v-model is used on a native element: <input v-model="searchText"/> However, when used on a com ...
I am currently troubleshooting a method in my Vue app that is designed to calculate the total value of all items sold. Despite seeing the correct values in both the database and console log, the calculation seems to be incorrect. Could there be an issue wi ...
Having an issue with arrays in vue3 that is puzzling me. Upon loading components, an initial array is passed. These values are then watched for changes within the components which works seamlessly. The scenario involves a little game where the user maneuv ...
The Vue documentation states the following: Unlike reactive objects, there is no unwrapping performed when the ref is accessed as an element of a reactive array or a native collection type like Map Here are some examples provided in the documentation: c ...
I currently have a display component called app-display, which contains a dynamic component inside (by default, it is set to app-empty): app.component('appDisplay', { template: `<component :is="currentComponent"></c ...
Details: Using Vue 3.3.6 in composition API script setup style Utilizing PrimeVue 3.37.0 and PrimeFlex 3.3.1 Implemented with Typescript Objective: To create a tree structure with checkboxes that are selectable, along with action buttons on each TreeNod ...
I am having trouble understanding why only the first image loads, while the others do not. 1. <img :src="require('../assets/batatas.jpg')" :alt="item.title" /> 2. <img :src="'../assets/batatas.jpg'" :alt="item.ti ...
I've been attempting to dynamically generate routes, but unfortunately I'm facing difficulties as it seems not feasible with Vuejs 3 import { createRouter, createWebHistory } from "vue-router"; import TopMenu from "../layouts/top-menu/Main.v ...
I am looking to take my project to the next level with vue3 This project is based on symfony and utilizes vue as separate components on the frontend Since I have never tackled a major upgrade before, I'm unsure of the best approach. Any suggestions? ...
Vuejs3 Composition API Route File: Below is the route configuration for SingleBoard.vue, which displays content based on passed props: const routes = [ { path: "/singleboard/:dbName/:dbMethod/:securityType/:alertType", name: & ...
I am attempting to set the first select option as the default, so it shows up immediately when the page loads. I initially thought I could use something simple like index === 0 with v-bind:selected since it is a boolean attribute to select the first option ...
I'm working on a Vue.js v3 project using the composition API. I have defined a variable in my setup like this: setup() { const showInvoiceItemForm = true; return { showInvoiceItemForm }; }, Now, I want to show a form when a button is click ...
Within my graphic chart, I have various dots that may be located in the same spot. I am looking for a way to handle clicks on two or more elements simultaneously in Vue 3. Do you know of any straightforward methods to achieve this? I attempted using refs ...
Struggling to shift focus from one input to another on Android/iOS keyboard using the next button? The setFocus method lacks examples, making it difficult to implement. Has anyone successfully achieved this before and can provide an example? Here's what ...
When I wrap useFetch() as a composable to customize the baseURL and automatically set an authentication token, I encounter reactivity issues when calling the composable within a component without using the await keyword. Typically, I would call const { dat ...
Exploring the Vue Composition API RFC Reference site, it's easy to find various uses of the watch module, but there is a lack of examples on how to watch component props. This crucial information is not highlighted on the main page of Vue Composition ...
Currently, I am in the process of migrating from vue2 to vue3 and using the "Class Style Component". I have been utilizing vue-i18n. Will I be able to continue using vue-i18n with Vue3? Here is a snippet from my package.json: "dependencies": ...
I'm facing an issue where I am attempting to assign a data URL of an image to a state in Vue.js, but it is not getting assigned properly. After converting a blob URL to a data URL, the state does not contain the correct data URL. While the imgSrc does dis ...
Hello, I am currently exploring Vue 3 and embarking on a new Vue 3 project venture. However, I seem to be encountering a challenge when it comes to displaying an error message if the button is clicked while the input field remains empty in my Vue 3 script ...
Having trouble looping through an array of objects in Vue3 <template> <div class="shadow-xl w-96 h-96 md:h-[600px] md:w-[600px] lg:my-12 lg:w-[700px] lg:h-[700px] rounded-md" > <button @click="getData">Get ...
Can anyone assist me with mounting a Vue component in an existing HTML page? I've been trying for hours and here's my latest attempt: In main.js: import Vue from 'vue' Vue.component('MyComponent', require('./MyComponent.vue')); In MyComponent.vue: <te ...
I am attempting to dynamically set a height in pixels for my container when its size changes. I have managed to display the size as text, which successfully updates when the container is resized. However, the height attribute on my container does not updat ...
The temporary object appears as: tmp : { k1: { k2 : { k3 : [abc, def] } } To access k3 in the setup, it should be: tmp.value.k1.k2.k3[0 or 1]. I am looking to change its name to something like - k3_arr = tmp.value.k1.k2.k3; Within my Vue single componen ...
I'm currently facing an issue while developing a Vue3 Perfect Scrollbar plugin. The problem arises when I try to initialize the object, resulting in the following error: Error: no element is specified to initialize PerfectScrollbar The code for the Scro ...
Extracting data from db.json in the Home.vue component and storing it in the jobs: [] array is a common practice. export default { name: 'Home', data() { return { jobs: [], } }, components: { }, mounted() { fetch("ht ...
My current approach involves utilizing a setup() method to bring in an external component that exclusively supports the Options API. Once I have imported this component, I need to set it up using the Options API data. The challenge I face is accessing the ...
Currently in my Vue project with TailwindCSS and Vite, I am trying to implement a dynamic width class based on the size of an array. const array = [1, 2, 3]; const width = computed(() => `w-1/${array.length}`); <div :class="width">Conte ...
Is there a way to effectively utilize global enums in Vue or declare them differently? My current setup is as follows: Within my types/auth.d.ts: export {}; declare global { enum MyEnum { some = "some", body = "body", o ...
Currently, I am at a beginner level and learning Vue. My main focus right now is to have the table in my application reload or re-render itself so that any changes made to the db.json file are reflected on the screen. I've implemented a modal that allows u ...
I am looking to incorporate the VueDraggable library into my project in order to create nested lists. I followed the documentation to create a component, and everything is working well except for one issue: I am unable to create new nested items. The onl ...
Storing the element's index in a global variable is causing issues when trying to individually edit each of them. Adding multiple elements with similar properties but being unable to edit them separately due to alterations affecting the rest is a chal ...
When the initial page loads, specific products are loaded. However, I am looking to load missing products partially based on a foreign key. To achieve this, my idea is to return two props from my Laravel controller. These props are 'products' and the lazy ...
Check out this straightforward Vue example: https://codesandbox.io/s/sleepy-haze-cstnc2?file=/src/App.vue https://i.stack.imgur.com/zboCb.png Whenever I click on the square, it not only changes color but also expands to 200% of its original size with a 3 ...
Is it possible to use Vue's v-html directive within a Vue 3 <script setup> setup without needing an additional wrapping tag? I am looking to achieve something similar to the following: <script setup> const html = ref(`<pre></pre>`) ...
I'm currently integrating SVG icons into my project using Quasar and I am facing an issue with the q-btn-toggle component. The documentation suggests providing a direct path to the SVG file, but in reality, the icon does not display. Below is a snippet of ...
I've been working on creating a function that can iterate through an array of objects with names and IDs, randomize the array, and then return one filtered item to slots.value. The current spin function successfully loops through the randomized objects. ...
While exploring the Pinia documentation, I came across a method to modify the state directly using ...mapWritableState or store.$patch(). However, I have always been taught to avoid direct state modification and instead use 'actions' in my code. ...
I'm trying to set up a double yAxis, and this is how I structured the code: const data = { labels: ['a', 'b', 'c', 'd', 'e'], datasets: [ { type: 'bar', label: this.$t('numberOfBuilding'), data: ...
Issue: I am facing a challenge in transferring data between two separate components - the main component and another component. Despite attempting to implement reactive State Management based on Vue documentation, the object's value remains unchanged ...
When including images from the assets folder (located in src besides App.vue), it builds and runs successfully. However, when attempting to change the image using JavaScript, it doesn't work as expected. For instance: background-image: url('../assets/img/b ...
I have a frontend built with vue3 and using pinia as the store. I am setting it up as shown below: export const useShopStore = defineStore( "shop", () => { const state = reactive({ data: { fruits: [], owners: [] ...
I am fetching this information using axios { "qtp1459016715-18382027": { "name": "qtp1459016715-18382027", "status": "5", "priority": 5, "thread-id": 18382027, &quo ...
Currently facing a dilemma with Vue 3 (alpha 4): Within the setup() function, I am attempting to access the parent component. According to the guidance provided on , the parent should be accessible via the context argument, either as a property of context ...
Currently, our project is utilizing Vue 2.x and our components are structured as follows: @Component({ template: ` <div> some code .... <div> ` }) export default class class1 extends Vue { @Prop() data: IsomeData; } Vue-class ...
I am currently working on a new project using Nuxt 3, and I have encountered an issue with a contact form where the input values from a child component are not being received by the parent element. Let's dive into the code breakdown: Parent Component ...
Is there a way to dynamically import a vue component based on a path provided in the URL parameters? For example, if <host>/<path> is entered into the browser, I would like to load a vue component located at <path>.vue. In my routes.js f ...
There is an example discussed in this particular article. It mentions that a normal object is not 'reactive'. Upon testing in this codesandbox environment, it was observed that changes made to the normal object, including a plain string, can automatically ...
Could someone assist me with the dynamic routing while organizing pages in folders within Storyblok? Currently, I am facing an issue where the slug folder name is being appended to all the links displayed in the header. So, when a user clicks on a blog po ...