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.

Issue of delayed loading of CSS in Vue.js application

My vue PWA is experiencing slow loading of CSS when using Vue Bootstrap and Buefy. I attempted to use V cloak, but it only hides components milliseconds after the raw HTML is briefly displayed without any CSS applied. I am looking for a method to display ...

cssvue.js

Achieve the elimination of null values from text fields and text areas with the help of

One of the columns in my database table has null values. When I try to save the value using formData: formData.append('remark', this.form.remark); I encounter an issue where the textfield displays null when retrieving the data. <textarea v-m ...

vue.jsvuejs2

Adjusting the empty image source in Vue.js that was generated dynamically

Currently experimenting with Vue.js and integrating a 3rd party API. Successfully fetched the JSON data and displayed it on my html, but encountering issues with missing images. As some images are absent from the JSON file, I've saved them locally on my la ...

javascripthtmlvue.jsvuejs2vue-component

What is the best way to incorporate auto refresh in a client-side application using vue.js?

Disclaimer: I have separated my client application (Vue.js) from the server side (DjangoRest). I am utilizing JWT for validating each request sent from the client to the server. Here is how it works - The client forwards user credentials to the server, an ...

javascriptauthenticationvue.jsjwtrefresh-token

Tips for attaching event listeners to custom elements

Let's suppose I create a Vue component called Checkbox.vue that contains the following code. <template> <div class="checkbox"> <input id="checkbox" type="checkbox"> <label for="checkbox">Label</label> ...

javascriptvue.jsdom-events

The animation in Vue.js does not function properly with nested child elements

Here is the project I am working on: https://codesandbox.io/s/vue-template-c1rj1 I was expecting the image to smoothly appear from the bottom of the screen already centered, but instead it initially pops up at the bottom and then transitions to the center ...

vue.jsvuejs2vuejs-transition

Watch an Instagram video retrieved from a public API and enjoy the content!

I've been exploring solutions on SO for displaying Instagram videos using the public api ?__a=1 method. While I came across a helpful question that pointed me in the right direction, I still faced some challenges. Once I retrieve user media, I check in my ...

vue.jsvideoinstagram

Retrieve information and functions from one component in a separate component

I currently have two components: ContainerSidebar.vue <!-- Sidebar --> <div id="b-sidebar"> <div class="change-image"> <img :src="profile.avatar != null ? profile.avatar+'#'+Date.no ...

javascriptvue.js

Problem with vueJS List Transition not being triggered

Within my Vue JS App, I encountered a situation where I have a list of items that change order randomly when the user clicks a button. Despite successfully using Vue.set to dynamically reposition the list elements, I faced an issue with adding a transition ...

javascriptvue.jsvuejs2transition

Using Vue.js to handle asynchronous functions with undefined variables

My Vue.js application is facing a problem where an async function is passing a variable as undefined even though it's properly defined before the function call. The async function FETCH_DATA in my Vue.js application is defined like this: async [FETCH ...

javascriptvue.jsasync-await

Error occurred while trying to parse JSON due to an abrupt ending

While attempting to reinstall one of my old vue projects on my new computer (running Windows 10) using npm, I encountered the following error: npm ERR! Unexpected end of JSON input while parsing near '...n":"0.8.1","devDepend' npm ERR! ...

javascriptnode.jsvue.jsnpmvuejs2

Showing the number of times a button has been pressed

I have written some HTML code to create a button and now I am looking for guidance on how I can use Vue.js to track how many times the button has been clicked. Here is what I have so far: <div class="123"> <button id = "Abutton&q ...

javascripthtmlvue.jsbutton

Tips for efficiently displaying a computed property on a template using Vuetify?

I am attempting to display only the initials of a user who is logged in while inside a store. Here is my template: <v-menu v-if="this.$store.getters.getLoggedUser"> <template v-slot:activator="{ on, attrs, userInitials }&quo ...

javascriptvue.jsvuetify.jsvuex

Is it better to Vuex - manipulate store item twice, trigger new items, or perform transformations within components each time they are mounted?

I am considering performing two separate transformations on a single, large store item and then saving the results as two new store items. For instance: setEventsData: (state, data) => {...} // main huge master object // perform transformations on it an ...

javascriptvue.jsvuex

Having trouble with parsing the .mjs module from Iconify in Vue 3 CLI project that utilizes the Composition API and TypeScript

Issue Update: After modifying the code from if(data.aliases?.[name2] !== void 0) to: if(data.aliases != null && data.aliases[name2] !== void 0) in the iconify .mjs file, I was able to resolve the error. However, this fix needs to be implemented in ...

vue.jsnpmwebpackbabel-loaderwebpack-loader

The VueJS Store concept featuring data access with get and set functions

I run a small boutique using the state pattern in VueJS (not VUEX). Here's how it looks: export default { get selectedPartner() { return localStorage.getItem('selectedPartner'); }, set selectedPartner(item) { localStorage.se ...

vue.jsstate

What is the reason for the sharing of component data between two separate components using vue-apollo?

Currently, I am engaged in a fresh project utilizing vue along with vue-apollo. There is one component dedicated to displaying the user's name (UserShow.vue): <template> <div v-if="!this.$apollo.queries.user.loading"> Your name is ...

vue.jsvuejs2graphqlapollo-clientvue-apollo

Using TypeScript to import a Vue 2 component into a Vue 3 application

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

typescriptvue.jsimportvuejs3vue-component

Exploring the option of integrating Vuetify snackbar as a universal custom component in Vue.js

I recently implemented a Snackbar to display success messages in Vue.js and now I want to create a global custom Snackbar component. <template> <div name="snackbars"> <v-snackbar v-model="snackbar" :colo ...

vue.jsvuetify.js

NuxtJs: Oops! It looks like NuxtError is not defined in this context

Exploring NuxtJs is new to me. I decided to experiment with how nuxt-link functions by purposely setting up a nuxt-link to a non-existent route in order to trigger the default 404 page. Here's the line of code I added to the pages/index.vue file: <nuxt- ...

javascriptvue.jsnuxt.js

The Veux Store is throwing an error message that says "Array is

When retrieving data from the Vuex Store, I start by checking if the array is present. Following that, my next step is to verify whether the noProducts object at index 0 exists. This validation process is important because the tweakwiseSortedProducts vari ...

javascriptvue.jsvuexundefined

Retrieve the highlighted portion of a selected option within a Vue select element

Currently, I am attempting to retrieve the selected text (not value) of a select element using Vue: var App = window.App = new Vue({ el: '#app', data: { style: '5' }, computed: { calctitle: function() { return this.otype.text; } ...

vue.jsvuejs2

How does Vue handle the situation when the value of an input field does not match the bound "data"?

Before diving into the intricacies of v-model, I want to take a closer look at how v-bind behaves. Let's analyze the example below: <div id="app"> <input type="text" :value="inputtedValue" @input ...

javascriptvue.js

Why is Vue JS throwing an error stating "undefined is not an object"?

After creating a Vue app on a single page .html file served by django, which consists of multiple components, I decided to transition this project into a full-fledged Vue.js project using the Vue CLI. Initially, I thought it would be a simple task to trans ...

javascriptvue.js

Vue-Router implementation utilizing the onReady() method

As a newcomer to Vue, I'm eager to learn about when the onReady() function will be triggered. The explanation in the Vue Router documentation states: This method queues a callback to be called when the router has completed the initial navigation, which ...

vue.jsvuejs2vue-router

The constant issue persists with the NuxtJS store state variables continuously coming back as

I am facing an issue with the NuxtJs store where it keeps returning undefined. Even after looking at multiple similar questions, I haven't been able to find a solution. Here is my code snippet: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) ...

vue.jsvuexnuxtjs

Encountering a "Cannot GET /PATH" error while developing a NUXT application due to a DOT present in

In my nuxt application, I encountered a peculiar issue. When I execute npm run dev, everything functions properly. However, after running npm run build and then npm run start, I face the error message stating cannot GET [path of the page here] I noticed t ...

javascriptnode.jsreactjsvue.jsnuxt.js

The alignment of the Slick slider item appears off-center when viewed on a mobile device

https://i.stack.imgur.com/kwxaX.png When viewing the items on a mobile device, they are not centered as desired. The issue lies with the first item not being displayed in the center. How can this problem be addressed? Here is the code snippet: slickOptio ...

javascriptvue.jsslick.js

Developing a dynamic web application using the Django framework along with the Vue.js library and Highcharts for

I am currently working on a data visualization web app using Django, Highcharts, and JQuery. I have recently transitioned from JQuery to Vue JS and I am struggling with fetching JSON data from a specific URL. Below is the code snippet: Template <!doc ...

javascriptpythondjangovue.jshighcharts

The Typescript decorator is unable to access the property type within its own scope

I am currently in the process of developing a dependency injector for use in my VUE js project. Recently, I created an Inject decorator with the intention of accessing a property type. It was functioning perfectly fine yesterday, but now it seems that som ...

typescriptvue.jstypescript-decoratorreflect-metadata

Error message appears: "Unable to access 'upgrade' property of undefined" upon launching Vue application

Everything was running smoothly with my project for a few months. I could easily execute npm run serve without any issues, even when switching networks. But now, no matter what I do, I can't seem to get the server to start again. The error message I'm rece ...

vue.jsnpmvuejs2webpack-dev-servervue-cli-3

The program encountered an error because it was unable to access the overview property since it was undefined

I encountered the error below Cannot read property 'overview' of undefined I am struggling to understand what is causing this issue. <template> <tr v-for="(row, fold) of perFold" :key="fold"> <td>{{ fold + 2 } ...

vue.jsnuxt.jsk-fold

Is the Vue router preloading each view before displaying it, or does it load the view server only upon request?

When I refer to preloading, I am questioning whether the browser loads all views at once or only loads the desired views from the server upon request. ...

vue.jsvue-router

Tips for retrieving the state value and using it as a parameter in methods

Is there a way to utilize Vuex state and access it in the methods property of components? I have a state called "currentThreadId" that I would like to use within my methods. The issue I am facing is being able to retrieve the "currentThreadId" from the Vu ...

vue.jsvuex

Despite being present in the node_modules folder, the ag-grid-vue module appears to be missing

Currently, I am diligently following the Vue.js AgGrid getting started tutorial step by step: However, upon adding the <script> section and saving my progress, an error promptly appears: ERROR Failed to compile with 1 errors ...

javascriptnode.jsvue.jsag-gridag-grid-vue

Testing vue.js components through vue-loader with dependency injection

I am currently experimenting with testing my Vue.js component using vue-loader, a webpack loader. I tried following the tutorial provided by vue-loader but encountered unexpected issues. Below is the code snippet for my component: <template> <h ...

testingwebpackkarma-runnervue.jsvue-loader

"Customize the bar colors in Vuetify sparkline to create a unique and

In my vue/vuetify project, I have a sparkline component that displays bars representing values. I am looking to change the color of bars with values less than 0 to red. Here is a snapshot of what I have: https://i.stack.imgur.com/YvpFB.png Below is a simp ...

vue.jschartsvuetify.jsnuxt.js

What is the best method for transferring updated data from the frontend to the backend without needing to store any unchanged values?

After importing a list from a database using axios and storing it in a variable called tasks, each object may resemble the following structure: tasks: [ { title: 'some text here' }, { completed: false }, ] If there are 2000 or 3000 of ...

javaspring-bootvue.jsvuejs2

Issues with aligning center vertically and horizontally using flexbox are causing unexpected behavior

Understanding the basic concepts of centering a flex container using justify-content:center and align-items: center, I am facing an alignment issue with my box. Can anyone help me with this? This is what I have attempted so far: <template> <di ...

javascripthtmlcssvue.jsflexbox

Setting a property with a generic type array: Tips and tricks

Currently, I am working on implementing a select component that can accept an array of any type. However, I am facing some challenges in defining the generic and where to specify it. My project involves using <script setup> with TypeScript. Here is ...

typescriptvue.jsvue-composition-api

Is there a way to display images in Vuetify similar to the linked image below?

I am looking to measure my v-img like the one shown in the image below. https://i.stack.imgur.com/edMKr.jpg Does anyone know how I can achieve something similar to the image shown using vuetify's v-img. <div class="row"> <v-img ...

cssvue.jsnuxt.jsvuetify.js

What is preventing my data from generating a table in BootsrapVue?

My Vue script looks like this: export default { name: 'app', components: { }, data(){ return{ image: null, isLoaded: false, items: [] } }, created(){ this.divtest() this.getTimeTable() }, methods ...

firebasevue.jsgoogle-cloud-firestorebootstrap-vue

Allowing HTML attributes in reusable components with Vue TSX: A guide on informing Typescript

Imagine I have a custom input component: import { defineComponent } from "@vue/runtime-core" export default defineComponent({ inheritAttrs: false, setup(props, { attrs }) { return () => ( <div> ...

typescriptvue.jsjsxtsx

Developing a Vue.js application with a universal variable

In the previous version of Vue.js, 0.12, passing a variable from the root component to its children was as simple as using inherit: true on any component that needed access to the parent's data. However, in Vue.js 1.0, the inherit: true feature was remove ...

javascriptvue.js

The attribute 'use' is not found within the data type 'typeof...', and the property 'extend' is not present within the data type 'typeof'

As I embark on building my very first Vue app using TypeScript, I find myself facing a frustrating issue: Property 'xxx' does not exist on type 'typeof. Despite my efforts to research similar problems, none of the suggested solutions have proven effective ...

typescriptvue.js

Using InfiniteLoading in vuex for solving errors

As a newcomer to using vuex and vue, I am trying to implement an infinite-loading feature in my vuex project. However, it seems to be facing some issues, and I could really use the expertise of some professionals in this field. Below are the details of my ...

vue.jsvuexinfinite-scrollvue-infinite-loading

Having issues with an Android app crashing on Android 12+ devices when receiving push notifications in the background. This problem is occurring with an

An error occurred with the Firebase-FCMService while running the app. The specific process and PID are as follows: com.petbacker.android, 4405. This issue is related to an IllegalArgumentException stating that targeting S+ (version 31 and above) requires e ...

androidvue.jscordovapush-notificationfirebase-cloud-messaging

I am encountering issues with Axios when bundled with electron - what steps can I take to troubleshoot a compiled exe with electron?

I recently developed a VUE JS application that consumes data from a News API endpoint. To achieve this, I utilized Axios for fetching the data as shown below: import axios from "axios"; let baseURL = `https://newsapi.org/v2`; let apiKey = process ...

vue.jsvuejs2electronvue-cli

Explore vue3 components using vue-test-library and universal components

I started creating unit tests for a production app using jest, @testing-library/vue, and supporting libraries. The first test I created is as follows: import vue from "vue"; import { render } from "@testing-library/vue"; import LibBtn f ...

javascriptvue.jsjestjsdtsvue-testing-library

Navigating the entire Oauth2 Authentication Process with Vue.js Client and Express.js Server Leveraging Passport.js

I am struggling to comprehend how to effectively utilize the Bearer Access Token obtained from an OAuth2 authentication process. In my situation, the client is Vue.js, the server is Express.js, and Passport.js serves as the middleware for authentication. ...

node.jsexpressauthenticationvue.jspassport.js

Struggling to set up Tailwind in NuxtJS configuration

Using the "@nuxtjs/tailwindcss": "^2.0.0" for my Nuxt App has been quite helpful. Upon installation, it generated a tailwind.config.js file. I made some modifications to the code below: module.exports = { theme: {}, variants: {}, plug ...

vue.jsnuxt.jstailwind-css

Dynamically load components based on the URL parameters in NuxtJS

In my Nuxt page, I have split it into two sections. The first section is a regular template structure that displays dynamic content based on the URL parameter. The second section consists of a component that needs to load based on this data. I've attempted ...

vue.jsvue-componentnuxt.js

Tips for accessing elements other than the root element using this.$el

Within my template, the structure is as follows: <div v-show="showContent" class="content-block-body"> <div class="slider-pro"> <div class="sp-slides"> <slide v-for="block in subItems" ...

javascriptvue.jsvuejs2

Having difficulty assigning a value to the initial input field using the field's ID in a Vue.js environment

My dilemma involves an input field and a button that, when clicked, displays a dropdown with multiple items. The goal is to show the selected item in the corresponding input field upon selection. This process is repeated in a loop, causing complications. & ...

vue.js

The iframe is displaying a MIME warning for pdfmake: Resource being interpreted as a Document but transferred with MIME type application/pdf

We are developing a single-page application using Vue.js. Our goal is to generate a PDF on the client side, and we have chosen pdfMake from npm for this purpose. As per the documentation, to display the generated PDF within an <iframe>, you can simp ...

javascriptpdfiframevue.jspdfmake

"Configuration files for webpack and Vue: webpack.config.js and vue.config

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

vue.jsvuetify.jsvuejs3

Dynamically add index to attribute as it updates

Having an issue with my dynamic button element: <button v-on:click="changeRecord(element)" v-b-modal.modal-5>Aendern</button> This button is generated dynamically within a v-for loop. Instead of manually including the attribute name like v-b- ...

javascriptvue.jsbootstrap-modalbootstrap-vue

Tips for postponing the first button event in Vue 3 and JavaScript

My current task involves setting up a button event in Vue 3 that triggers a setTimeout countdown on the button before redirecting to another page. The event function has a conditional statement that initiates a countdown from 5 to 0 as long as the countVal ...

javascriptvue.jsvuejs3settimeoutcounter

Dependency tree resolution failed during VUE installation

After pulling my project from another computer where it worked fine, I encountered an error when trying to npm install on this machine. Can someone please provide some guidance on how to resolve this issue and prevent similar problems in the future? npm ER ...

javascriptvue.jsnpm

Tips for setting up a queue system for alert messages in Vue.js with Vuetify

Seeking assistance with modifying my code to handle multiple alerts and implement a customizable timeout duration. Any advice on how to approach this would be greatly appreciated. ~/store/toast-messages.js export const state = () => ({ color: '&a ...

vue.jsvuejs2nuxt.jsvuetify.js

Leveraging External Scripts with Vue.js and Laravel: A Comprehensive Guide

I am new to using vue js and laravel mix, and I am facing some confusion. Previously, I manually loaded scripts without compiling them. However, now that I want to integrate vue js into my project, adding the app.js script at the end of my blade template c ...

laravelvue.jsmaterialize

Load VueSimpleSuggest with values from URL parameter upon page initialization

In my Vue JS application, I have integrated the VueSimpleSuggest component like this: <vue-simple-suggest class="input-elements" v-model="chosen" :max-suggestions="0" :list="getList" :filter-by-query=&qu ...

vue.jsvuejs2getparametervue-simple-suggest

Adjusting the size of a Vue component on the fly

I'm struggling to find a way to dynamically adjust the width of a component. The component I am working with is called 'vue-burger-menu' -> https://github.com/mbj36/vue-burger-menu. To set the width, you need to assign a number to the prop width, like in ...

javascriptvue.jsvuejs2vue-component

I'm encountering an issue with enabling Node.js support on PhpStorm as it keeps freezing at the dialog box. Does anyone have a solution for this problem?

Seeking assistance with configuring code support for Vue files in PhpStorm v10.0. Despite having Node and Vue plugins installed, my laptop also has Node(v10.16.3) downloaded. Encountering an issue where PhpStorm freezes at a dialog box, as shown in the sc ...

node.jsvue.jsphpstorm

Importing Global Sass Styles in Nuxt 3 for Static Assets

I'm currently attempting to import a global Sass stylesheet from the /assets directory in order to utilize variables and mixins defined there throughout the components. My current configuration in nuxt.config.ts is as follows: import { defineNuxtConfig } f ...

vue.jsnuxt.jsvuejs3vitenuxtjs3

Is it possible that the v-if directive is not functioning properly with the script setup in vue2.7? Have the syntax requirements changed in vue2

<template> <div> <button @click="handleClick">toggle</button> <span v-if="isToggled()"> hidden message </span> </div> </template> <script setup lang="ts" ...

vue.jsvuejs2vuejs3vue-composition-apivue-script-setup

Seeking guidance on designating an additional disk for fs.readdir(path) within an Electron-vue application?

Issue: I am facing a problem with the breadcrumbs component in my project, which is utilizing file explorer functionality from this specific project. The issue at hand is related to changing the disk being displayed by the component. Upon clicking on any ...

node.jsvue.jselectron

Vue Eslint Extension

My current project utilizes the eslint vue plugin with specific rules set in place. "rules": { "vue/html-closing-bracket-newline": ["error", { "singleline": "never", "multiline": "always" }], "vue/html-closi ...

javascriptvue.jseslint

Verify the login status, display a prompt if the user is not logged in, and proceed with the process upon successful

Utilizing Vuejs along with Vuetify and Vuex, I aim to develop a basic app such as a small todo list. My backend is supported by an Express REST api and for handling HTTP methods, I rely on Axios. In dealing with session management, I have come across two ...

vue.jsvuexvuetify.js

Vuetify: Dynamic v-select options based on user selection

Here's a codepen I created as an example: https://codepen.io/rasenkantenstein/pen/qBdZepM In this code, the user is required to select a country and then choose cities only from that selected country. The data of people is stored in an array behind the sc ...

javascriptvue.jsvuetify.js

Update tailwindcss color dynamically according to user input within Vue3/Nuxt3

I am currently exploring a method to allow users to specify the primary color of a website. When defining my Tailwind classes, I aim to utilize something like bg-primary-600 instead of directly inputting a color. This way, if the value for primary changes, ...

vue.jsnuxt.jsvuejs3tailwind-cssnuxtjs3

Vue.js - The prop "src" is invalid as the type check has failed. The expected type should be either a string or an object, but a

I am currently working on integrating an image into my Firebase's Firestore and Storage, and then displaying it on a v-card component. Here is the code for my v-card: <v-row> <v-col cols="3" v-for="massage in massages" ...

firebasevue.jsgoogle-cloud-firestorevuetify.jsfirebase-storage

How can one create a constant in VueJs that can be easily accessed throughout the entire application?

In my Vue.js application, I am able to create a constant through a store, but I have reservations about this practice. Can anyone suggest alternative methods to achieve the same outcome? ...

vue.jsvuex

Tips for loading and updating data simultaneously in VUEJS from a single input

Currently, the data is displayed in a span tag with an input for updating it Is it possible to fetch data from an API, load it into an input field, update the input with new information, and send it back? What are the best approaches for achieving this? ...

javascripthtmlcssvue.jsvuejs2

updating the v-model in Vue.js datepicker retains the previously set value while setting a new date

When using the template, the endDate updates as expected. However, there seems to be an issue when the filtersChanged method is called with the @selected attribute - the updated value is not the new one but rather the previously set value. <template&g ...

javascriptvue.jsvue-component