Questions tagged [vue.js]

Vue.js is a forward-thinking and versatile JavaScript framework designed to facilitate the creation of visually appealing user interfaces. With its open-source nature, Vue.js allows for seamless integration and provides developers with the flexibility to gradually incorporate it into their projects. Primarily utilized in front-end development, proficiency in HTML and CSS at an intermediate level is essential when working with Vue.js. Given the dynamic updates and enhancements introduced in different versions, categorizing Vue.js queries based on specific versions becomes crucial. Therefore, along with this tag, it is highly recommended to include [vuejs2] or [vuejs3] tags while addressing Vue.js related issues.

Avoid having Vue CLI delete all files in the dist folder

As I work on my Vue project, I am facing a challenge in syncing the dist folder with Git. Previously, this process ran smoothly when using webpack. However, after transitioning to @vue/cli and creating my project with vue create myProject instead of vue in ...

javascriptnode.jsvue.jsgithubvue-cli-3

Encountering the "Module not found" error message stating "Error: Unable to locate '@uidu/ckeditor5-tokenizr' when trying to import an npm package that I have just installed."

Recently, I added the package @uidu/ckeditor5-tokenizr to my project. It is located in node_modules/@uidu/ckeditor5-tokenizr. However, when trying to import it using import tokenizr from '@uidu/ckeditor5-tokenizr'; within my Vue Components secti ...

vue.jsnpmckeditor5

Which symbol is preferable to use in JS imports for Vue.js/Nuxt.js - the @ symbol or the ~ symbol?

I am seeking guidance on a matter that I have not been able to find a clear answer to. Webapck typically uses the ~ symbol as an alias for the root directory. However, I have noticed that some developers use the @ symbol when importing modules using ES6 s ...

javascriptvue.jswebpacknuxt.js

Revolutionizing messaging with Vue JS and Firebase

My web application is designed to check if a user has messages in the Firebase database. If messages are found, it retrieves the data from the users who sent those messages from my local database and displays them in a list using a v-for loop. The display ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Navigating through the layout in Vue.js2: routing behavior

I am in the process of designing a layout that includes: +-------------------------------------------------+ | HEADER (STATIC) | +-------------------------------------------------+ | FOREWORD (just homepage; dynamic ...

vue.jsvuejs2vue-router

To effectively manage this file type with Vue and vue-chartjs, it is essential to utilize a suitable loader

I have been working on an application that has multiple pages functioning properly. I am now trying to incorporate a new page with a chart feature. In order to test it out, I made modifications to include the necessary packages. "dependencies": { ...

vue.jsvue-chartjs

Leveraging data from a scoped slot in Vue.js within the <script> tag

Is it possible to reuse data from a scoped slot inside a script tag? I have two components: Component A <slot :data="data"> Component B <template v-slot="{ data }"> Using data within the template works. However, I need to use the data with ...

vue.js

Can fetch be used to retrieve multiple sets of data at once?

Can fetch retrieve multiple data at once? In this scenario, I am fetching the value of 'inputDest' (email) and 'a' (name). My objective is to obtain both values and send them via email. const inputDest = document.querySelector('input[name=dest]'); con ...

javascriptfirebasevue.jsgoogle-cloud-functions

In Vue, we can parse JSON data and then assign the latitude and longitude values to markers for our

I am having trouble parsing the JSON data retrieved from the API upon return, and I can't seem to find a solution. return { mapName: this.name + "-map", markerCoordinates: [{ latitude: 21.423229, lo ...

vue.jsmaps

Guide to tallying the occurrences of a specific key within an object array and attaching the count to each key's current value

Is there a way to determine the number of occurrences of the 'value' key within an object that is part of an array, and then add the count to each value if applicable? In this case, 'a' represents the original data var a = [ { id: 1, value: "1000 ...

javascriptreactjsvue.jslodashunderscore.js

The function this.$set is failing to update an array in VueJS

I am facing an issue where the console log shows me the updated array xyz, but when I try to print it in the DOM using {{xyz}}, it does not update. Can anyone shed some light on why this might be happening? data() { return { xyz: [] } }, met ...

javascriptarraysvue.jsvuejs2

Tips for adjusting the font weight and size of the label within a Quasar Tab

I've been working on my project using Q-Tab, and I've been trying to adjust the font size and weight of the tab labels without success. I've experimented with the typography options in Quasar, but nothing seems to work. <q-tabs v-model="tab" ...

vue.jssasstabsquasar-frameworkquasar

Vue.js is experiencing difficulties in rendering the project

After trying to install a Vue.js package, I encountered errors which prompted me to remove it. However, even after removal, I am still facing difficulties serving my project. Here is the log for reference: Click here ...

vue.jsnpmserve

Increase the detection range in empty lists for Vue-draggable-next

I am currently utilizing Vue-draggable-next in conjunction with Vue 3 to enable draggable lists within my application. In certain scenarios, users need to drag items from other lists into lists that are initially empty. I have noticed that the area for det ...

javascriptvue.jsvue-componentvuejs3vuedraggable

Issue with posting data to a JSON file using Vue and axios

I am encountering an issue with axis posting to a local .json file. The error I am receiving is: POST http://localhost:8080/todolist.json 404 (Not Found) TodoListEditor.vue?b9d6:110 Error: Request failed with status code 404 at createError (createErr ...

jsonvue.jslocalhosthttp-status-code-404axios

Passing components through props in Vue 3

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"/> </ ...

vue.jsvuejs3

Guide on inserting a new column into an array of objects in Vue

Below is the fetch method I have defined to retrieve recordings from the database. However, I need assistance in adding a new column to each record specifically for frontend purposes. Can someone help me with this problem? <script> export default { ...

javascriptarraysvue.jsdictionary

Using boolean .env variables in combination with v-if conditionals

I'm currently in the process of migrating an old vue2 project to vue3. I've initiated a vite project for this purpose. Within my component, there's a div with a v-if condition that controls the display of certain buttons based on the environ ...

vue.jsvuejs3vuetify.jsvite

I Tried Adding Up All the Numbers, but It Doesn't Seem to Work for Every Dynamic Total Field

In my project, I am utilizing Laravel 5.7 and VueJs 2.5.*. The issue I am facing is that when I input values, the Total field calculates correctly. However, when I dynamically add rows for items, the calculation only works for the first row and not for the ...

javascripthtmllaravelvue.jslaravel-5.7

Switching between Login Form and Register Form in VueJS template

Recently, I attempted to switch between the 'Login Form' and 'Register Form' using code that I found on codepen Flat HTML5/CSS3 Login Form. While the code functioned properly on its own, when integrated into a Vue Template, the form fai ...

javascriptjqueryhtmlcssvue.js

What could be causing Nuxt-link to trigger a page refresh when paired with Bootstrap-vue?

Currently utilizing nuxt and bootstrap to construct a custom hover dropdown menu for navigation. Encountering an issue where my navigation submenu NuxtLinks are triggering a full page refresh instead of smoothly transitioning the app content within my Nuxt ...

vue.jsbootstrap-4nuxt.jsbootstrap-vue

Having trouble configuring the drizzle vue plugin to work with vuejs 2

After following the official documentation for setting up drizzle with vuejs 2 located here, I attempted to run my project using yarn serve. However, during this process, I encountered several errors as shown in the image https://i.stack.imgur.com/hvmnm.jp ...

vue.jstruffledrizzle

Clearing form data after submitting in Laravel using axiosIn Laravel, utilizing

When working on my Laravel app, I encountered an issue while submitting a form using Vue and Axios. Despite my attempts to clear the input field after submission, it doesn't seem to work. HTML: <form method="post" enctype="multipart/form-data" v-on:su ...

javascriptajaxvue.jslaravel-5.4axios

Hovering over the Laravel Breeze dropdown will activate a dropdown feature

Recently, I've been working on a project with Laravel Breeze and have been utilizing some default components. The dropdown component used in the navigation bar caught my attention. By default, it requires a click for the menu to drop down below. Howev ...

htmllaravelvue.jstailwind-csslaravel-breeze

The information provided has been cut off: 1406 The content exceeds the permitted length for the 'image' column in row 1

Whenever I select a random image, the name turns out to be very long despite being a varchar data type. Here is my migration file: $table->id(); $table->string('image'); $table->timestamps(); This code snippet shows my image ...

laravelvue.js

Using Vue to alter data through mutations

Greetings! I am currently in the process of developing a website for storing recipes, but as this is my first project, I am facing a challenge with modifying user input data. My goal is to create a system where each new recipe added by a user generates a u ...

javascripthtmlcssvue.jsvuex

What is the best way to trigger a function when a chart changes in Nuxt using Vue JS?

How can I trigger a function whenever a chart is loaded or changed in Vue Nuxt JS? I've tried using created, mounted, updated, and beforeMount but none of them seem to work. Can anyone offer any guidance? Edit 1: Here's the code snippet: upd ...

vue.jsnuxt.js

Improve the translation animation on an element containing numerous child nodes

Looking for ways to enhance the smoothness of the transition in the "infinity list" animation. While it's just a demo at the moment, the real app will have various elements emerging from each "pin". The main performance bottleneck seems to stem from the tr ...

javascriptvue.jsgsap

What is the best way to access a variable from a .js file?

Is there a way to access a variable defined in a JavaScript file from a Vue file and pass it to the Vue file? In the following code snippet, there is a template.js file and a contact.vue file. The template file converts MJML to HTML and saves the output to ...

javascriptvue.js

Displaying Vue.js tooltips in a table when the text gets clipped

I'm currently facing an issue with creating a tooltip in my vue.js document. I attempted to follow this guide from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_tooltip in order to create one, but it's not working as expected. Her ...

javascripthtmlcssvue.js

Animating computed values with VueJS transitions

I am looking to create an animated block of posts that can be filtered. When certain filters are applied, a computed method filteredPosts is triggered and assigned to a component like this: <block-article :posts="filteredPosts" /> Within my <blo ...

vue.jstransition

Vue 3 Single Page Application. When selecting, it emits the language and the contentStore does not update the content exclusively on mobile devices

My Vue 3 Single Page Application is built on Vite 4.2 and TypeScript 5.02. When I click to select a language, it emits lang.value and in the parent component App.vue, contentStore should update the content. It works flawlessly on my Linux Ubuntu desktop i ...

typescriptvue.jsvuejs3html-selectpinia

Combining the power of Vue.js and .NET Core for a powerful M

I'm currently working on developing an application using .Net Core and Vue.js. My goal is to utilize Vue.js for data loading and binding without creating a Single Page Application (SPA). In my _layout.cshtml file, I have the following: <script&g ...

vue.js.net-core

Creating a map-like scrolling feature for a full-sized image, allowing both horizontal and vertical movement

My goal is to create an infographic image that can be scrolled horizontally and vertically, zoomed in or out, and where I can add markers just like Google Maps. I attempted the solution of using two scroll views as suggested here: https://github.com/faceb ...

reactjsvue.jsnativescriptnativescript-vue

What is the best way to conceal a set of buttons on the main page using vue.js?

I'm having trouble hiding a button-group on the main page. It should disappear when either the button moveTo(0) is clicked or when scrolling to the top of the page. show: function() { this.scrollTop = (window.pageYOffset !== undefined) ? windo ...

javascriptvue.jsvuejs2

Prevent Vue.js from allowing new lines to be added in a contenteditable element

Is there a way to stop the Enter key from creating a new line in a contenteditable div? I attempted using @keyup.enter.prevent, but it did not work. I also tried @keyup.enter.prevent & @keyup.enter.stop.prevent with no success. ...

vue.jsvuejs2

Exploring the power of V-for with checkboxes in VueJS

One issue I am facing is related to triggering my save method only when a checkbox is selected or true in Vue JS. I have no problem listing values and saving them to the database using axios, Vue JS, and Spring Boot. However, every time I click the checkbo ...

javascriptvue.jsaxios

Error message: Insufficient credentials to access DRF system

For some reason, my app is no longer allowing users to log in after making changes to their profile. I have a nested User serializer with the profile serializer fields (one-to-one relationship) using Djoser for the urls. When attempting to update the user ...

djangovue.jsdjango-rest-frameworkdjoser

Display a button for either submitting or updating in Vue

I need to display the update button if the userId matches with one of the previous users. If the userId does not match with any of the previous users, then the submit button should be displayed. This is my attempt--- new Vue({ el: '#app&apos ...

vue.js

Vue.js is experiencing issues with updating attributes within nested v-for loops

Exploring the realm of vue.js and react, I am currently in the process of adapting a basic editable HTML table example found in a React book to further my understanding of Vue. Here is a breakdown of what occurs within the code: User clicks on a td elem ...

javascriptvue.js

Blend the power of Dynamic classes with data binders in Vue.js

Recently, I've been working on a v-for loop in HTML that looks like this: <ul v-for="(item, index) in openweathermap.list"> <li>{{item.dt_txt}}</li> <li>{{item.weather[0].description}}</li> <li>{{item.w ...

javascriptvue.jsopenweathermap

Vue - Utilizing child slots in the render method

Within my component, I am working with a default slot and attempting to enhance the layout by wrapping each item in the slot within a div. However, I am facing an issue where I need to retrieve the classes of one of the slot elements, but the VNode element ...

javascriptvue.jsjsx

Vue Js: Creating an array of checkboxes

I have a collection of checkboxes sourced from the main system object where I store all system settings (referred to as getSystem{}). Within this form, I am retrieving information about a User, who possesses an array of roles []. How can I cross-reference ...

javascriptvue.jsvuejs2

In VueJS, the v-for directive allows you to access both parameters and the event object within

Imagine having nested elements that repeat using v-for in the following structure: <div id="container"> <div v-for="i in 3"> <div v-for="j in 3" v-on:click="clicked(i,j)"> {{i+', ...

javascriptvue.jsdom-events

Exploring the depths of Vue.js: Maximizing potential with nested

In my Grid component, I retrieve JSON data from a server and render it. The data mainly consists of strings and integers, but sometimes includes HTML elements like <strong>myvalue</stong>. In order to properly display the data, I use triple bra ...

javascriptvue.js

Navigating to a particular value in Vue: A step-by-step guide

In my Vue application, I have a basic table structure: <tbody> <tr v-for="(item, index) in items"> <td> ... </td> </tr> </tbody> The items are dynamically added using the unsh ...

javascriptjqueryscrollvue.jsvuejs2

What is the best way to eliminate additional values depending on the one I have chosen?

When utilizing the Vuetify v-autocomplete component with the multiple prop, we are able to select multiple values. How can I deselect other values based on the value I have selected? For instance: If I choose the main value, all others will be deselecte ...

javascriptvue.jsvuetify.js

Unable to import createBatchingNetworkInterface from apollo-client

Currently, I am in the process of integrating graphql into my Vue project by following the guidance provided at https://github.com/Akryum/vue-apollo Although I have successfully installed 'apollo-client' via npm as per the requirements, I am encountering ...

node.jsvue.jsgraphqlapolloapollo-client

Guide on integrating buefy (a vue.js component library) into your Laravel blade template

I'm currently integrating buefy into my project, but I'm encountering issues with using vue.js on Laravel 5.8. Can anyone offer assistance? Here is the code snippet from my app.js: require('./bootstrap'); window.Vue = require('vue'); import Buefy from ' ...

javascriptphpvue.jslaravel-5

Generate a responsive list with a pop-up feature under each item (using Vue.js)

Currently, I believe that Vue may not be necessary since most tasks can be done using JavaScript and CSS. I am attempting to design a list layout as follows: [A] [B] [C] [D] When an item is clicked, the information about that specific item should ...

javascripthtmlcssvue.js

What methods can be used in VueJS to restrict users from entering numeric values?

I am struggling to create a validation that prevents users from inputting numeric values into a textbox. I have tried using a native JavaScript solution, but it does not seem to be working on my end. In my textbox, I have set up this trigger v-on:keyup=" ...

javascriptvue.jsvuejs2

Looking for precise information within a Vue b-table by fetching data from an Axios API

My b-table is filled with data from an API hit through Swagger UI, and since there's a large amount of data, I need the search button at the center top of the page to work properly when inputting store code or branch. https://i.stack.imgur.com/l90Zx.p ...

javascriptvue.jsaxiosnuxt.jsbootstrap-vue

Updating Object Properties in Vue.js 2.0 using Methods

I am facing an issue where I have an object with blank properties in my component's data. I want to update these properties using a method that is triggered by a click event on one of the listed elements. However, when I check the click event in the consol ...

javascriptobjectvue.jsmethods

Exploring the Methods to Monitor Variables in Framework7 Store

Currently, I am in the process of developing my app and have opted to utilize the new built-in store system instead of relying on Vuex. I have a variable that undergoes frequent changes and previously used the following code when working with Vuex: store.w ...

javascriptvue.jsstorehtml-framework-7

Attempting to use vue-test-utils-getting-started with the standard configuration results in a "Preset Not Found" error during

Currently, I am in the process of conducting a unit test by referring to the official guide provided. To do so, I have cloned the demonstration repository named vue-test-utils-getting-started. To replicate the issue, follow these steps: After cloning vu ...

javascriptunit-testingvue.jsjestjspreset

Troubleshooting missing images in Vue.js/Laravel application when using Laravel storage directory

Having trouble displaying images dynamically from the Laravel storage folder. Despite seeing the pictures adding up in the folder, it keeps saying images not found. I've even tried using `php artisan link` but no luck. <v-btn flat v-on="on"> ...

laravelvue.jsvuexvuetify.js

Do not initiate a Vue/Quasar method by using @submit

DISCLAIMER: Please refer to the answers for the correct solution based on my code. ISSUE IDENTIFIED: The latest version of Quasar (1.2.4) is causing a bug where q-btn components within the v-slot:after slot of a q-input component fail to submit the q-form ...

vue.jsvuexquasar

The axios requests are sent to the backend API, but the webpage remains empty without

I am trying to retrieve a base64 encoded image from my local backend by making a local API call. The logging on the backend confirms that axios is successfully calling the API, however, the frontend displays an empty page with no data. What could be caus ...

javascriptvue.jsaxios

Quasar Expansion Tip: What is the best way to customize the color of the selected submenu?

Can the selected item of an Expansion Item have a highlighted color? <q-expansion-item expand-separator v-for="(menu, index) in menus" :style="index === 0 && 'margin-top: 20px&apo ...

vue.jsquasar

Creating a Vue JS project that utilizes both HTTP and HTTPS URLs for improved security

I'm currently utilizing Vue JS with the webpack template and dev mode. I have a question regarding how to configure my server to allow for both HTTPS and HTTP protocols simultaneously. I understand that enabling HTTPS can be done by simply adding "ht ...

vue.jshttpsvuejs2webpack-dev-server

What is the process for deducting the ordered quantity from the available quantity once an order is confirmed

Although I'm not a fan of hard coding, I've been struggling to find a solution to my problem and some explanations are just not clicking for me. The issue at hand involves three data products in the cart, product details, and placed order data from firest ...

javascriptfirebasevue.jsgoogle-cloud-firestore

What is the best way to showcase the data retrieved from axios in a Vuejs table?

I am new to Vuejs and encountered an issue while trying to display user information retrieved from API endpoints using axios. Below is the code snippet for fetching data: import axios from 'axios'; export default { data(){ return{ ...

vue.jsaxioselement-ui

What is the process for creating a custom Vue 3 element with incorporating styles for child components?

After experimenting with Vue's defineCustomElement() to develop a custom element, I encountered an issue where the child component styles were not being included in the shadow root for some unknown reason. To address this problem, I took a different ...

javascriptvue.jswebpackvuejs3shadow-dom

Does Vuejs have a counterpart to LINQ?

As a newcomer to javascript, I am wondering if Vue has an equivalent to LinQ. My objective is to perform the following operation: this.selection = this.clientsComplete.Where( c => c.id == eventArgs.sender.id); This action would be on a collect ...

javascriptlinqvue.js

What is the best way to create a redirect in Nuxt.js using a component method instead of the fetch method?

I'm currently working with nuxtjs and I am trying to figure out how to redirect the user after they have logged in. I've been having trouble getting the redirect() method to work within my function: loginUser: function () { if (this.isValid) { ...

node.jsvue.jsvuejs2nuxt.js

Just initiate an API request when the data in the Vuex store is outdated or missing

Currently, I am utilizing Vuex for state management within my VueJS 2 application. Within the mounted property of a specific component, I trigger an action... mounted: function () { this.$store.dispatch({ type: 'LOAD_LOCATION', id: thi ...

javascriptvue.jsvuejs2vuex

Establishing global credentials in VueJS using Axios

When working in main.js, I included the following code: axios.defaults.withCredentials = true; Although this should make it work, I found that the cookies were not being sent to the back end. I inspected the request header and noticed something strange: ...

vue.jscookiesaxios

Error in RatingBar component: Vue.js 3 and Tailwind CSS not displaying dynamic width correctly

I have a component called RatingBar in Vue.js 3 with Tailwind CSS. My goal is to dynamically adjust the width of the parent element's class based on a value, but even though I see the desired width in DevTools, it always renders as 100%. Below is the code ...

cssvue.jsvuejs3tailwind-css

Is there a way to call a Vue function from an onclick event in JavaScript?

Creating a vue component and trying to call a function defined in Vue methods using the onClick attribute when modifying innerHTML is resulting in an error message stating "showModal is not defined". Here is the showModal function where I'm simply try ...

javascriptfunctionvue.jsonclick

Utilizing a checkbox within a select dropdown component in Vue

Has anyone come across a checkbox dropdown feature in Vue? I have been searching online but couldn't find any examples or resources related to this. If someone has a working skeleton for it, please share! ...

javascriptvue.js

Vue3 reactivity in regards to an array that is considered "external"

During the process of migrating a Vue2 app to Vue3, I encountered an unexpected issue. How can I teach Vue3 to monitor changes in an "external" array? Everything worked perfectly fine in Vue2, but not in Vue3: <ul id="list"> <li v- ...

vue.jsvuejs3

Tips for managing Vue component content prior to data being fully loaded

I'm currently integrating product category data from Prismic into my Nuxt project and seeking guidance on best practices. Specifically, I need clarity on managing the state when data is still being fetched and there's no content to display in the sidebar. ...

typescriptvue.jsvuexnuxtjs

Is it possible to make changes to Vue data within a function while in the process

Recently delving into the world of VueJs, I find myself navigating through laravel 6.0. While grappling with the concept of variable scopes in javascript, I sense there might be a missing piece in this puzzle. It's interesting to note that when I pla ...

laravelvue.js

What is the best way to integrate vue-i18n into my Vue router?

Here is a snippet from my main app.js: import Vue from 'vue' import language from './language' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'en', messages: language.messag ...

vue.jsvue-routervue-i18n

Encountering an issue with vite due to vue-i18n installation

Encountering issues while attempting to install vue-i18n, unfortunately, I am facing an error as shown below npm install vue-i18n npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: MPS@undefined n ...

node.jsvue.jsnpmvite