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.

vue Error: Attempting to access properties of an undefined object (specifically, 'NormalModule')

Working on a small web app written in vue, I utilize two different machines for testing and development. Github serves as a convenient platform for me to seamlessly switch between the two. Previously, I encountered no issues while working on my macos mach ...

vue.js

Merge the capabilities of server-side exporting and client-side exporting within Highcharts for Vue

While working with Highcharts' export server to download charts as images, I encountered a challenge. I needed to implement the client-side (offline) exporting feature in a single chart due to the large number of data points. However, after enabling c ...

vue.jschartshighcharts

Encountering an issue with resolving the Vite html loader file error

During my project using Vite, I encountered an error when running npm run dev, displaying the message: Failed to scan for dependencies from entries: <path>/Learning/Vite-test/index.html [ERROR] No loader is configured for ".html" files: in ...

node.jsvue.jsnode-modulesvite

While running the npm build, I encountered a mistake

https://i.stack.imgur.com/05GhH.png I transferred my Nuxt project to a Linux server using Git, then ran 'npm upgrade nuxt' and 'npm run build'. However, I hit a snag during the building process. What steps should I take next? Below is the error code that ...

node.jsvue.jsnpmnuxt.js

How do I use Vue.js to capture keypress events and update the input value in real-time?

Here is the scenario I am facing: https://codepen.io/anon/pen/WYJopq I have implemented a functionality to track key presses and duplicate the input into another field with the following code snippet: [![methods: { clone: function() { this.m ...

vue.js

The child chart component in echart remains static and does not get refreshed by vue

I just completed creating a Vue component that displays a PIE chart using the echart library. The initial setup includes setting default values for the PIE chart. The file for the PIE chart component is named pieChart.vue <template> <div :class ...

vue.jsecharts

Ways to modify the data within a column for every row in a table without relying on props in Vue.js (specifically Element-ui)

I've been stuck on this issue for quite some time now. I've created a table with 3 columns, and for the first two columns, I can easily display the contents of each row using the prop property. However, for the third column, I need to display information f ...

htmlvue.jsvuejs2element-uivue-props

Having an issue with Vue Dev Tools where the "Open in Editor" button is not functioning properly. Any suggestions on how to resolve this?

I followed a tutorial to implement a new feature, using the instructions found here: https://github.com/vuejs/vue-devtools/blob/master/docs/open-in-editor.md However, I encountered an error: "C:\Users\User\AppData\Local\Programs& ...

vue.jsvue-cli-3vue-devtools

Exploring the functionality of publicRuntimeConfig in Nuxt plugins

I have developed a new Vue socket.io plugin called @/plugins/socket-io.js import Vue from 'vue' import VueSocketIO from 'vue-socket.io' Vue.use( new VueSocketIO({ debug: true, connection: process.env.SOCKET_IO_CONNECTION, } ...

vue.jsnuxt.js

Adding code snippets to VueJS components

Is it possible to manually pull scripts and insert them into VueJS components, such as pulling Bootstrap CDN or other external JS scripts and inserting them directly? Thank you for your help! ...

vue.jsscripting

Obtain or save the created QR code using VueJs and the vue-qrcode plugin

I am utilizing the "vue-qrcode" plugin to create a QR code for my users linking to their public profile, which they can then easily share on platforms such as business cards. My goal is to provide users with the option to download the QR code with one but ...

imagevue.jsdownloadcopyqr-code

Exploring Vue Router: Navigating with Different Components on the Same Path

When using Vue 3 Composition API, if the components for paths "/users" and "/users/user-reference" are completely different and unrelated, how should I structure the router configuration? Possible Solutions: const routes = [ { path: '/users', component: ...

vue.jsvue-router

Calculating the sum in a VueJS pivot table

Currently, I am delving into VueJS and working on migrating a basic application from Laravel with the blade template engine. The backend remains unchanged, consisting of a straightforward RESTful API with 3 tables: Books, Places, and a pivot table named B ...

javascriptlaravelvue.js

Vue: JSON input ended abruptly while parsing near "...version":"0.5.0","dev"

Currently, I am diving into learning Vue JS with the intention of developing applications using it. To begin with, I went ahead and installed Vue by running the command: npm install vue-cli -g However, a close friend brought to my attention that this met ...

vue.jsnpm

"Building your own utilities in Nuxtjs: A step-by-step guide

Currently, I am using Nuxtjs version 2.15.4 and I am looking to update my Utils functionality. Currently, I am using a mixin for my utils but I would like to implement something similar to the following code snippet: import {func1 , func3} from '~/plu ...

vue.jsvuejs2nuxt.js

Tips for overcoming indentation issues using ESLint?

Ever since I started using Vue 3 with ESlint, I've been encountering a new problem. Whenever I try to run my code, I am bombarded with numerous errors like: --fix option.

I'm looking for ways to disable this troublesome feature of ESlint. How can I m ...

javascriptvue.jseslint

How can the button effect be disabled in Vue Material for md-button?

Is there any documentation available for disabling the effect from md-button in Vue Material? Thank you ...

angularjsvue.jsvuejs2vue-material

CORS blocked the HTTP request due to the absence of the Access-Control-Allow-Origin header, although the header is actually present

Recently, I encountered an issue while working on a project using Python with Flask. I had created a REST API and needed my Vue app to interact with it and fetch data. However, I kept receiving an error message stating "No 'Access-Control-Allow-Origin' hea ...

pythonnginxvue.jsflaskvue-resource

Setting up Jest configuration for integrating supertest with Vue framework

I have a unique application that utilizes both vue and express. I have separate tests for each, allowing me to run either a vue test or an express test independently. Below is the customized jest config file. This configuration works perfectly for Vue tes ...

javascriptvue.jsunit-testingjestjssupertest

Using Vue to access and retrieve the file stored in a local folder

Just a few hours ago, I came across an issue where <a href='path' download></a> was not functioning properly in my Vue project right when I was about to wrap up. After spending almost 4 hours searching for a solution, I couldn't find anything, ...

djangovue.jsdownload

Can you point me to the source of definition for Vue 2's ComponentDefinition and ComponentConstructor types?

I am struggling to add a dynamic Vue 2 component with correct typing in TypeScript. The documentation clearly mentions that the is attribute accepts values of type string | ComponentDefinition | ComponentConstructor, but I cannot locate these custom types ...

typescriptvue.js

Using Vue 3 to dynamically render a component from a string

I have a question about the ValidateCheckboxes component I am working with. ValidateCheckboxes is a specialized list of checkboxes that I pass to the component as props. Here's how it typically looks: view image here view image here I use v-for to dis ...

vue.jsvue-componentvue-composition-apivue-propsvuejs-slots

Repeated keys found within a component's v-for loop

Dealing with v-for Duplicate Keys Error Even though the list is returned successfully, there seems to be a problem when I update a user in the array by changing their role. An error about duplicate keys is triggered. The key is assigned using the user&apo ...

arraysvue.jsvue-componentv-for

The functionality of the combobox in Vuetify differs from that of an input field

I have implemented Vuetify and am using its combobox component for search functionality on my website. However, I have noticed that the text value in the combobox only gets added to the watcher when the mouse exits the field. This behavior is not ideal f ...

javascripthtmlcssvue.jsvuetify.js

Nativescript-vue Not Providing Real-Time Updates

Previously, I would run the command: tns run android --bundle, and any changes I made would automatically reflect in both physical and virtual Android emulators. However, now when I save my changes, nothing happens, and I have to rerun the command to see ...

vue.jsnativescriptnativescript-vue

Is it possible to transmit multiple values that are not contained within a component in the DOM?

I recently started using Vue and attempted to replicate the behavior in the following link: https://jsfiddle.net/kyncgL7w/9/ In my code, I have a simple HTML select tag that displays values from an object called banks. I am using the v-on:change directiv ...

vue.js

The function Event.preventDefault seems ineffective when attempting to block input of CJK (Korean) characters in a v-text-field of type

Currently, I am tackling an issue in a Vue project where I need to fix a small bug. However, the solution seems quite challenging. I have managed to make the v-text-field accept only numerical input, which is functioning well. <v-text-field type=" ...

javascripthtmlvue.jsvuetify.js

Understanding how to handle errors in Javascript using promises and try/catch statements

Seeking assistance because I'm having trouble grasping a concept... Here's the code snippet: // AuthService.js login(user) { return Api.post('/login', user); }, // store/user.js async login(context, user) { try { let response = await Au ...

javascriptvue.jsaxiostry-catches6-promise

Identifying separator when v-carousel is selected

How can I detect when a delimiter is clicked on a v-carousel? https://i.stack.imgur.com/9M1XL.jpg ...

vue.jsv-carousel

Retrieve the value when clicking on a tab panel using Vue.js

<div class="col-lg-6"> <a-tabs tabPosition="right"> <a-tab-pane v-for="config in listData" :tab="config.name" :key="config._id"> < ...

vue.js

The method for triggering an event upon mounting in Vuejs

I have a sidebar displayed below: <template> <section> <div class="sidebar"> <router-link v-for="(element, index) in sidebar" :key="index" :to="{ name: routes[index ...

vue.jsvuejs2vue-componentvue-routervue-router4

When the Nuxt.js middleware is refreshed, the store becomes undefined

I'm currently utilizing nuxt js for my web application and I am seeking a method to retain the store data even after refreshing the page, whether it be in middleware or on the page itself. To achieve this, I am making use of vuex-persistedstate; impor ...

vue.jsvuejs2nuxt.jsvuex

Display index.html in Vue.js without the need for a server

As I develop an app using vue.js, my goal is for it to be able to run offline on a terminal without the need for internet connection or a running server. Ideally, I want my client to simply open the index.html file to access the app. Is this achievable, an ...

vue.js

Display the content of a Vue file directly on the webpage

I am currently developing a website to showcase UI components using plain CSS. The project is built with Vue, utilizing standard HTML and CSS. One of the key features I am working on is providing users with two views for each component: 'Preview' to see th ...

javascriptvue.js

Getting props value in parent component using Vue JS

In my development project, I am working with three key components: component-1, component-2, and an App component. Initially, I pass a Boolean prop from component-1 to component-2. Through the use of a @click event, I am able to toggle this prop value betw ...

javascriptvue.jsvuejs2vue-props

Update the component to display the latest information from the Bryntum grid table

In the Vue component, I have integrated a Bryntum grid table along with a bar chart. Clicking on one of the bars in the chart should update the data displayed in the Bryntum grid table. However, I've encountered difficulty in reloading the entire Bryn ...

typescriptvue.jsvue-componentbryntum-grid

Implementing dynamic loading with a Vue component loader

Is it possible to dynamically import a component using a default Loader if it's not loaded? Currently, we are using the following approach: import Dashboard from '../components/dashboard'; Vue.component('dashboard', Dashboard); ...

javascriptvue.js

Resetting Zoom in Vue Chart.js

I'm currently working on implementing zoom functionality on a chart using vue-chartjs and the chartjs-plugin-zoom. The code I have written is giving me an error saying "this.$refs.myChart.resetZoom is not a function". How can I properly reference the ...

vue.jschart.jsvue-chartjschartjs-plugin-zoom

Replicate form element

I am having trouble duplicating form items Greetings to all. I have a form and I'm looking to add a button that allows users to duplicate fields each time they click on it. Here is my form: <v-layout v-for="(phone, index) in people.phones" :key=" ...

vue.jsvuetify.js

Learn how to retrieve an array within an object by clicking on a specific button

Currently, I am in the process of creating a filter and its corresponding labels. The objective is to allow users to select from various options when they click on the first row. While I have successfully implemented the functionality to display choices fo ...

vue.js

Without specifying an element, the Vue3 Composition API PerfectScrollbar Plugin cannot be initialized

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

vue.jsvuejs3vue-composition-apiperfect-scrollbar

VueJS: Obtaining parent prop in child component when accessing the child component directly via vue-router without utilizing a centralized store like vuex or eventBus

In this codesandbox demo, the main component called home has a subcomponent called addItem. The parent component passes an array (as a prop) to the child component, allowing the child to add items to the parent's list. This is the typical way of passing da ...

vue.jsvuejs2vue-router

Changing the URL within a Vue.js component without navigating away from the component

Just starting out with VueJs and working with wizaplace. I currently have a route set up as /breweries/:id, which uses the company's ID to fetch information from the wizaplace API. Within this data, there is a slug that I would like to display in the URL ...

vue.jsnuxt.jsvue-i18nnuxt-i18n

Error: Unexpected token '<' encountered in Vue causing SyntaxErrorParsed: the parser expected an expression but found '<' instead

While working on my Vue project in my local environment (running the npm run dev command), I encountered an issue. When the first page loads, there are no errors. However, upon hitting the refresh button, the console displays a "SyntaxError: expected expre ...

webpackvue.jswebpack-dev-servervue-cli

Is it possible to implement navigation guards with file boot in Quasar framework?

Recently, I created a registration app to test login, register, and navigation guards. However, I am facing an issue where I can always open the link. Below are the codes that I have used: const routes = [ { path: '/', component: () ...

vue.js

Experiencing problems with the response from the Netlify Lambda function.. consistently receiving undefined results

I've been working on setting up a lambda function to handle authentication, validation, and sending of a contact form. As I'm new to lambda functions, my code might have some flaws. However, despite my efforts, I am struggling to modify the response sent ...

javascriptnode.jsvue.jsaws-lambdanetlify

When the button is clicked, the form will be submitted regardless of the button type

When submitting a form with ajax using vuejs, everything works fine except for the issue where pressing enter in the input field submits the form to itself. Despite using `form role=form` and `button type=button`, even when the button is outside the form, ...

ajaxformsvue.js

The process of downloading an image from Spring Boot using VueJs and displaying it within an <img> tag

I have created a Spring Boot backend with a Vue frontend. I am having issues when trying to download and display an image from Google Cloud Storage in my application. Sometimes the downloaded image appears to be cut off, as if not all bytes were sent. Howe ...

springimagespring-bootvue.jsaxios

Unable to retrieve the Date Range Picker value in Vuejs

I am new to VueJS and I am having trouble retrieving the value of the selected date range. When I click the button, the console prints out a value of null. Can someone please assist me with this issue? Below is the code snippet: App.vue <template> ...

vue.jsvuejs2vuejs-datepicker

Troubleshooting Problem with QRCode Scanner in the Ionic Vue Framework with Capacitor

While working on my Vue.js project with Ionic and Capacitor, I encountered a challenge in reading QR Codes from the camera. Despite searching extensively, I couldn't find any specific solutions for Ionic Vue.js. However, I stumbled upon a small package cal ...

vue.jsionic-frameworkmobileqr-codecapacitor

eliminating the __typename field from the urql query response prior to performing a mutation

When retrieving data from a GraphQL Server using urql, an additional _typename field is automatically included by urql to track the cache: { __typename "Book" name "test" description "the book" id "hPl3 ...

vue.jsgraphqlurql

Utilizing Dexie-Query for Real-Time Data Updates in Vue

I am currently utilizing Dexie within my Vue 3 frontend and aiming to seamlessly integrate it. Within the mount() method, I execute a database query similar to the example below, storing the result in a local variable within the Vue template for rendering ...

vue.jsvuexdexie

Which type of comparator does Vuetify utilize for sorting string columns in a data table?

If I modify the standard Vuetify example to have Calorie values as Strings instead of numbers, and now the data is not entirely numeric: https://codepen.io/hobbeschild/pen/WNQWmrJ What sorting method does Vuetify use internally for ordering these Strings? ...

sortingvue.jsecmascript-6vuetify.jsv-data-table

The TypeScript rule in the project-specific .eslintrc.js file is not being applied as expected

Currently, I am following a tutorial on Ionic/Vue 3 which can be found here. However, when I try to serve the project, I encounter the following error: https://i.stack.imgur.com/k4juO.png It appears that my project-level .eslintrc.js file is not being ap ...

typescriptvue.jsionic-frameworkeslint

Understanding eventBus value listening in Vue.jsWould you like to learn how to

I've encountered an issue while trying to retrieve the search input value. Below is how I'm sending values using the event bus: import eventBus from "../../../services/eventBus"; export default { name: "Navbar", data() { return ...

vue.jsvuejs2event-bus

Utilizing Props in Data and Methods in Vue.js

As a newcomer to Vue.js, I am encountering an issue when passing data from a parent component to a child component using props. While I can access the data in the child component, I'm facing difficulties when trying to use it within the child component's d ...

vue.js

How can I access the value of an HTML attribute using a v-on:click event within an anchor tag in Vue.js?

In my Vue.js and Laravel app, I am trying to access the value of the 'h5' attribute which is {{$subcategory->name}}. This will allow me to perform additional actions within my application. <div class="container" id = "showProd"> <div cla ...

laravelvue.jsbootstrap-4

Enhance your PrimeVue experience with the power of Tailwind CSS

After installing PrimeVue, I encountered an issue where the component style was not working, but Tailwind CSS was functioning correctly. It seems that when I install Tailwind first, it works fine until I add Primevue's button component, which then causes t ...

htmlcssvue.jstailwind-cssprimevue

Issue with V-checkbox input-value not triggering correctly on change

Query Example: <query #[`${instanceItemIdKey}`]="{ item }"> <v-checkbox :input="item.content" @modify="$notify('onPermissionUpdate', item)" ></v-checkbox> </query> The information that influences item ...

javascriptvue.jsvuetify.jsvuex

Learn how to render list items individually in Vue.js using the 'track-by $index' directive

Recently, I switched from using v-show to display elements in an array one at a time in my Vue instance. In my HTML, I had this line: <li v-for="tweet in tweets" v-show="showing == $index">{{{ tweet }}}</li>". The root Vue instance was set up l ...

javascriptvue.js

Vuetify displays elements using tags rather than class names

After using the v-card component from Vuetify, I noticed that my "v-list-item" renders differently than the sample in CodePen. Some CSS styles are also not being applied as expected. Has anyone else encountered this issue? <v-card class="mx-auto" m ...

vue.jsvuetify.js

Google Cloud's implementation of the "Vue+S3+Lambda" architecture

My VueJs single page website currently has very few transactions, prompting me to explore implementing it with a serverless architecture. One recommended approach for a basic Web Application on AWS includes: Vue App uploaded on AWS S3 Backend connection ...

amazon-web-servicesvue.jsgoogle-cloud-platformserverless-architecture

Interactively retrieving objects from a JavaScript array based on their keys

let arr = [{id:'one',val:1},{id:'two',val:2}] for( let ii of arr ) { if( ii.hasOwnProperty('id') ) arr[ii.id] = ii } This code snippet allows for accessing the elements in the array by their 'id' key. For exampl ...

arraysvue.jskey

Send JSON information to a Spring Boot server application

I am brand new to working with Spring Boot. Currently, I am attempting to send registration form data (in JSON format) from a Vue frontend to a Spring Boot backend. However, the backend always indicates that the received data is null. How can I properly re ...

javaspring-bootvue.jsaxios

Can we import a CSS file selectively in Vue.js?

Can specific css-files be applied only when the current route has a "forAdmin" meta in my Vue.js project that includes both an admin-panel and client pages? ...

javascriptvue.jswebpack

Ways to Update/Overwrite Current Information in HTML Using Vue

I have experience creating templates for Vue components using JavaScript. Imagine I have HTML that is generated on the server side with a language called UTL: <table> <tr> <td>[% example_var; %]</td> <t ...

htmlvue.js

How to bind array elements in Vue.js

I am currently working with an array that contains various arrays and properties within it. My goal is to iterate through the array and generate new rows for each item in it. Here is a snippet of what I have been working on: var orderDetails = [ ...

javascriptvue.jsdata-binding

Ways to access information from doc.data()

<template> <div> {{ id }} {{ title }} </div> </template> <script> import { useRoute } from 'vue-router' import 'firebase/firebase-firestore' import { db } from '@/fdb' export default { props: ['id'], data () { ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Vue router is unable to render or mount the component at the root path

I am currently working on a webpage using vue, vue-router, and laravel. I have encountered an issue where the Home component is not being rendered in the router-view when I access localhost/myproject/public_html/. However, if I click on the router link to ...

javascriptvue.jsvue-router

Show an item in a visual format of a list

Need help displaying a specific object: cars: { number': 1, 'overload': 1,'brand': {'0': {'porsche': [{'price': 10, 'id': 0}],'vw': [{'price': 20, 'id': 1}]}}}, I am looking to convert it into a list format (see example for the first key): Number : ...

javascriptvue.js

Instance of a Component Available Worldwide

When working with Vue 2.x in our production applications, we utilize a toast component. This toast component is mounted once through a plugin (code provided below) and then added to the Vue prototype for easy access in every component instance. This setup ...

vue.jsvuejs3vue-composition-api

The pagination functionality in Vue.js does not behave as described in the documentation

I've been working on implementing this paginator in vue and come across an issue with the layout. Here is what my current paginator setup looks like: https://i.stack.imgur.com/6ovhU.png I followed the instructions to import and use it as shown below: im ...

vue.js

Is it possible to iterate over nested arrays in Vue?

Seeking advice on how to effectively loop through a JSON object like the one provided below using v-for. My goal is to iterate over all ID's/Numbers and the items within each number, then display them in a list format... I'm aware that I can easi ...

vue.jsvuejs2

What is the best way to translate my Vue components library for different languages?

Creating my own Vue components library has been rewarding, but I face the challenge of localizing a lot of text within these components. The usual translation tool, vue-i18n, requires being attached to Vue (e.g. Vue.use(VueI18n)), which can create conflict ...

vue.jslocalizationvue-componentvue-i18n

Vue.nextTick incorrect detection

scenario: const Constructor = Vue.extend(MyComponent); function createComponent() { vm = new Constructor({ props, }).$mount(); return vm; } Query: In my testing process, I notice vm.$nextTick().then(() => { expect(result).to.eq ...

vue.jsmocha.jssinon-chai