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.

Can you explain the process of variable allocation?

I have a query regarding the following JavaScript code snippet. It might be a basic question, but I'm seeking clarification. // 'response' contains JSON data received from the backend: ....then(response => { this.myVar = response.data; ...

javascriptvue.js

Every time I alter the pathway, the music suddenly ceases. How can I create a constantly changing audio experience?

I'm facing an issue with a dynamic audio player on my website. On a page featuring music, when I click 'play' on any song, it triggers a function: playSong (song) { var payload = { name: song, audio: new Audio(require(` ...

vue.jsvuex

What is the best way to manage URL data between a domain and hashtag using Vue Router?

I am currently developing a project using vue-cli, vue router, and node.js. The routing in Vue is set to hash mode so that users can easily navigate to specific pages by copying and pasting URLs or typing from memory without encountering any errors. Howeve ...

node.jsexpressvue.jsroutesvue-router

"Implementing a loading function on a particular div element within a loop using

Hey everyone! I'm new to this forum and have recently made the switch from jQuery to Vue.js - what a game-changer! However, I've hit a little snag. I need to set v-loading on multiple buttons in a loop and have it start showing when clicked. Here's how I' ...

javascriptvue.jsvuejs2vue-component

Step-by-step guide to generating a Paypal Button using Vue 3 script setup

After going through the PayPal Developer Docs, I'm still struggling to understand how to integrate the PayPal Button into Vue.js. The code examples provided are unclear, and I can't determine if it's related to Vue 2, Vue 3, or even Angular. ...

javascriptvue.jspaypalvuejs3payment

Looking for assistance with a Vue.js BMI Calculator project

Currently, I am delving into Web Development using Vue. As part of my project, I have constructed a component that calculates the BMI (Body Mass Index) of an individual. To collect the necessary data, I have implemented a form utilizing bootstrap-vue. Howe ...

javascriptvue.jsbootstrap-vue

Tips for simultaneously updating a value in multiple collections on firestore?

Currently, I am in the process of developing a forum application using Vue, which is essentially a replica of this platform. In this app, users can post questions, receive answers to those questions, and leave comments on those answers. Each question, answ ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Is it possible to retrieve the parent object?

My code snippet is as follows, and I'm struggling to access the data object from within the innerFn function. Is there a way to accomplish this? export default { data: { a: "a", b: "b" }, fn: { innerFn: () => conso ...

javascriptnode.jsvue.jsnuxt.js

Vue.js - computed property not rendering in repeated list

It seems like the issue lies in the timing rather than being related to asynchronous operations. I'm currently iterating through an object and displaying a list of items. One of the values requires calculation using a method. While the direct values on th ...

javascriptvue.jsvuejs2vue-componentv-for

When working with TypeScript, it's important to note that an implicit 'any' type may occur when trying to use an expression of type 'string' to index a specific type

Currently, I'm attempting to transfer a custom hook used in Vue for handling i18n from JavaScript to TypeScript. However, I am encountering a persistent error message: An element is implicitly assigned the type 'any' due to an expression of type 'string' ...

typescriptvue.js

Tips for incorporating auth0 into a vue application with typescript

Being a beginner in TypeScript, I've successfully integrated Auth0 with JavaScript thanks to their provided sample code. However, I'm struggling to find any sample applications for using Vue with TypeScript. Any recommendations or resources would be grea ...

typescriptvue.jsauthenticationauth0

Vue.js $scopedSlots do not function with Vue object

In the process of developing a Vue component that will be released once completed, I am wrapping Clusterize.js (note that the vue-clusterize component is only compatible with v1.x). The goal is to efficiently render a large list of items using Vue, particu ...

javascriptvue.jsvuejs2clusterize

Personalized design created using v-for

I have an array being passed through v-for and I want to use the values within the "style" attribute. Essentially, I need to append the value from v-for to style:"left"+EachValue+"px", but I'm having trouble with the syntax. I'm unsure if this ap ...

javascripthtmlcssvue.js

What is the best way to add a border around an image along with a button using VueJS?

I am struggling to link a button and an image in VueJS to display a border around the picture. While I can successfully display the border on the button, I am unsure how to extend it to the image as well. Vue.component('my-button', 'my-img' { template ...

javascripthtmlcssvue.jsvuejs2

What is the best way to connect v-model with a select element when dealing with nested foreach loops?

Whenever I use alert(this.property_credentials.district) in vue.js, it returns empty <select v-model="property_credentials.district" name="district" class="country selectpicker" id="selectCountry" data-size="10" data-show-subtext="true" data-live-searc ...

vue.js

Error occurred in custom directive library due to unhandled TypeError

I have developed a personalized directory for tooltips and I am looking to turn it into a reusable library that can be imported and utilized in various projects. I have successfully created the library and imported it into different projects. However, upon ...

vue.js

Refreshing a Vue JS component

As a beginner in VueJs, I am facing an issue with reloading a component and table when a refresh button is clicked. I have tried using the forceUpdate method and changing keys, but it has not been successful so far. If anyone has any suggestions on how to ...

javascriptvue.jsvue-componentreload

What is the best way to trigger a particular function only when a Vue component is called by a specific component, and not by any other components?

I've created a component called select-diagnosis that is utilized by various components. When select-diagnosis is invoked by a specific component known as PtdTreatment, it should execute a particular function within the fetchDiagnosis function. However, w ...

vue.js

Ensuring the Security of Your Vue.js Login Component for Authenticated Users

Currently, I'm working on an application that utilizes firebase-auth for authentication. In my design, I've successfully secured the user component to only allow authenticated users. However, I now face the challenge of safeguarding the login com ...

firebasevue.jsfirebase-authenticationvue-router

Creating a Copy of an Object in JavaScript that Automatically Updates When the Original is Changed

I am in the process of developing a planner/calendar website with a repeat feature. var chain = _.chain(state.items).filter({'id': 1}).head().value(); console.log(chain); After filtering one object, I am wondering how to create a duplicate of c ...

javascriptvue.js

Setting the main color in Vue based on certain conditions

After developing a Vue app as a reusable library and setting the global $brand-color variable in the SCSS file to define the main color theme of the app, I encountered an issue when trying to integrate it for a new client who required a different brand col ...

vue.jssassvuejs2vue-component

Exploring VUE and Firebase: Uncovering the Process of Retrieving User Profiles from Real-Time Database

After retrieving the user profile from the Realtime database, I noticed that when there are multiple accounts, it also fetches the profile of the second user. Below, you can see data from two users. However, my objective is to extract the details of the u ...

firebasevue.jsfirebase-realtime-database

Make multiple axios.get requests to retrieve and show data from the specified endpoint repeatedly

I am currently working on a backend built in Flask that provides a REST API for various tasks, one of which involves requesting deployment. Once the request is made, logs are stored in the database. To address this, I have created another REST API endpoint ...

vue.jsvuejs2axios

Delivering resources through the Nuxt configuration file

https://i.stack.imgur.com/2OWdE.png I came across a bootstrap template online that I want to customize for my Nuxt project. I have stored all the bootstrap files in the static folder. Within the nuxt.config.js file: module.exports = { /* ** Headers ...

javascriptvue.jsnuxt.js

Receiving information from a promise within an if statement in Vue

Recently, I encountered an issue with my login function. I needed to store some data in my session for future use but faced a problem where the data was being pushed into the session before I could retrieve the result from a promise. Here's the snipp ...

javascriptvue.jspromisevue-component

Developing a custom feature with a ListView in nativescript-vue

Currently, I am immersing myself in the world of nativescript-vue and exploring ways to utilize single file components for enhancing the cleanliness of my code. To kickstart this endeavor, I initiated with a straightforward example that showcases beautiful ...

vue.jsnativescript-vue

Different file paths in the 'public' directory using VUE CLI

My current application architecture is structured as follows: Within the 'frontend' folder, I have my applications. The 'html' folder contains the single page application (spa) that was constructed. Inside the 'spa' directory, ...

vue.jswebpackvue-clivue-cli-4

Is there a way to include a vertical scrollbar within the modal dialog using Vuetify components?

Here is an example of my code: <div id="app"> <v-app> <v-content> <v-container> <v-dialog v-for='foo, k in foos' :key='foo.id' :close-on-content-click="false" ...

vue.jsdatepickermodal-dialogvue-componentvuetify.js

Having trouble executing 'vue ui' in npm with nodejs vue/cli

Trying to set up Vue tool chain on a fresh Win10pro system has been quite challenging, as I kept encountering various errors that seem to stem from the same source. Upon running vue ui, the following error message pops up: @vue/cli 4.5.15 PS C:Users ...

node.jsvue.jsnpm

Clicking a button in VueJs will trigger the clearing of the displayed text and the subsequent execution of

Hello, I am new to the world of web development and I'm currently learning vue.js. I am working on an app where I input an ID and upon clicking the search button, a method is called. This method utilizes axios to make a request to the controller and fetch ...

htmlvue.jsweb-applicationsvuejs2vue-component

Working with content that includes Laravel Blade code in Vue.js

#SeekingHelp I need assistance with an issue I'm facing. My blog content includes syntax examples like {{ $title }} as it describes Laravel Blade. The Issue: When rendering my blog content on Vue.js, everything goes haywire due to the Blade syntax { ...

laravelvue.jslaravel-blade

Combining VeeValidate and BootstrapVue to create an interactive editable table row

I'm facing an issue with creating editable rows on a bootstrap b-table and veevalidate. Is it possible to have multiple ValidationObservers and then validate them by calling a single method? <b-table :items="items"> <template v-slot:cell(fo ...

vue.jsbootstrap-vuevee-validate

Utilizing Vuex to implement a search functionality in a list

I've encountered an issue with my vueJs application. I have a list of uploaders and a search bar, but after incorporating vuex, the list is no longer rendered. Following the guidance provided in this question, I implemented the following: <template> ...

vue.jsfiltervuexsearchbar

Using Vanilla JavaScript and VueJS to smoothly scroll back to the top of a div when a button is clicked

I have a VueJS-based app that features a multistep form with a next button. You can check out the functioning of the app here: My current challenge is ensuring that once the user clicks the next button, the top of the following question becomes visible. I ...

javascriptvue.js

Unable to define API method within the data() function of Vue

I am trying to fetch USD data from an API using the `changeCurrency` method in the `methods`. How should I go about implementing it? data(){ return { posts: 1, USD:changeCurrency() } }, methods: { changeCurrency: fu ...

vue.jsaxios

Do I need to open Chrome if I want to switch web notifications to Android TWA?

Through the use of TWA technology, we were able to create an Android app that can open a PWA page without displaying an Address bar. Unfortunately, this setup presented a challenge. The absence of the Address bar made it difficult to switch web Push Noti ...

androidvue.jssingle-page-applicationprogressive-web-appstwa

how to uncheck a checkbox using Vue.js

When the next button is clicked, I want to remove the checked status of the checkbox without using Vue. Here is a demo code snippet: new Vue({ el: "#app", data: { id:0, items: [ {'id':1,'name':'chk-a','options':['a1','b1','c1','d1']}, ...

checkboxvue.jschecked

Explaining Vue.js actions and mutations in detail

Can someone help clarify the relationship between these functions for me? I'm currently learning about Vue.js and came across an action that commits a mutation. The Action: updateUser({commit}, user) { commit('setUser', {userId: user['.key'], user}) } ...

javascriptvue.js

Enhance your Vuex action types in Typescript by adding new actions or extending existing

I'm new to Typescript and I'm exploring ways to add specific type structure to all Actions declared in Vue store without repeating them in every Vuex module file. For instance, instead of manually defining types for each action in every store fi ...

typescriptvue.jsvuex

Error: Failed to load chunk (VueJS + Webpack) - Please try again

Currently, I am working on a project that involves Wordpress and VueJS 3 with a Webpack 5.43 build. Whenever a new version is deployed on the production environment and a visitor already has a tab open on the website, I encounter the following error messag ...

vue.jswebpacksingle-page-application

The combination of VueJS and Webpack Dev Server is having trouble hot reloading URL subpaths

My application operates within the subdirectory http://localhost:8080/admin_suffix The variable suffix is an ENV variable that I can modify and define in a .env file. After starting the webpack dev server, accessing http://localhost:8080/admin_suffix fun ...

vue.jswebpackwebpack-dev-server

The issue with combining Laravel 5.4 event broadcasting and Vue.js has been a challenging obstacle to

Looking to set up a chat system using Laravel 5.4, Vue.js, and Pusher API with Echo. I have tried twice to establish communication with Pusher, but I haven't received any callbacks in my Vue component. I am working locally with MAPM. I have installed the ...

phplaravelvue.jspusher

"Enhance Your Vue Experience with CKEditor's External Link

I am currently engaged in a Vue project that employs ckeditor within one of its components. My goal is to configure hyperlinks so that they open in a new tab whenever an external link is detected. Based on the documentation, I understand that achieving th ...

vue.jsckeditor5

What is the definition of reusable components within the context of Angular, React, and Vue?

I've been hearing a lot about reusable components. What does this actually mean? For instance, if I want to showcase basic user information like ID, name, age, etc. Does it imply that the component is "plug and play," where you simply write the sele ...

angularreactjsvue.js

Error in Laraval Breeze: Vue component is missing page or props definition

Hey there, I'm currently working on developing a web application using the Laravel Breeze framework which incorporates Laravel, Vue.js, and Inertia.js. I've made significant progress so far, but I'm encountering an issue with utilizing the data passed fr ...

laravelvue.jsinertiajs

Sending router data as a prop

When passing data for the route, I am doing it like this: /route { path: '/name/:nameSlug', name: 'NameItem', props: true, components: { home: Name } }, To link to the component in the router: <router-link :to=" ...

vue.jsvue-router

Exploring the functionalities of quill modules in conjunction with vue2-editor and webpack mix

I am encountering an issue while using vue2-editor and importing Quill modules, despite registering them as instructed. The error message states that window.Quill is undefined. Even after attempting to include window.Quill and Quill with webpack plugin mi ...

vue.jslaravel-5webpackquill

Enhance vue.js by adding your own custom filters

I am currently working with Vue.js integrated with Laravel using Elixir and Browserify. I am trying to create custom global filters, each in their own separate file. Despite following the documentation, I am encountering an issue where I receive the follow ...

javascriptbrowserifyjavascript-frameworkvue.jslaravel-elixir

What causes Node.js to be unable to handle requests from Vue.js?

I'm encountering a strange error where Node.js is unable to see the URL address and consistently returns a 404 error. In my Vue.js application, I am making a post request using the axios package when the user clicks a button. The code snippet shows that I ...

javascriptnode.jsexpressvue.js

Using Vue with Firebase to fetch a specific range of data starting from a particular record and ending at the

I am looking to retrieve all records from a certain record to the very last one in my database. ref.orderByChild("date").equalTo("19/11/2020 @ 19:50:29").on("child_added", (snapshot) => { console.log(snapshot.va ...

javascriptvue.jsfirebase-realtime-database

Tips for integrating google's api.js file into my vue application

Currently, I am in the process of integrating Google Calendar into my Vue project. The steps I am following can be found at this link. Additionally, I came across an example code snippet at this URL. This is how my Vue file looks: <template> <d ...

javascriptvue.jsgoogle-calendar-api

The functionality of Vue.js checkboxes is not compatible with a model that utilizes Laravel SparkForm

I've configured the checkboxes as shown below: <label v-for="service in team.services"> <input type="checkbox" v-model="form.services" :id="service.name" :value="service.id"/> </label> Although they are displayed correctly, there se ...

javascriptvue.jsvuejs2laravel-spark

The Vue.js input for checkboxes and radios fails to toggle when both :checked and @input or @click are used simultaneously

Check out this example on JSFiddle! <script src="https://unpkg.com/vue"></script> <div id="app"> <label> <input type="checkbox" name="demo" :checked="isChecked" @input=" ...

javascriptvue.jsfrontend

Using media queries in VueJS style tags may not have the desired effect

I've encountered an issue with using @media in the style tags of a VueJS component. Surprisingly, styling within the @media query works consistently, while applying styles based on width rules does not seem to have any effect. <template> <hea ...

cssvue.jsmedia-queries

Leveraging vuex in conjunction with typescript allows for efficient management of state in namespace modules,

I am currently integrating vuex with typescript and namespaces module in my project. Within this setup, I have two distinct modules: "UserProfile" and "Trips". So far, everything is functioning smoothly within the confines of each module. However, I have ...

typescriptvue.jsvuex

Encountered a problem while trying to deploy my application on Heroku

Hey everyone, I'm facing a tricky error even though I followed all the correct steps. My deployment keeps failing and I can't figure out why. I really need to get my app deployed for a demo, so any help would be greatly appreciated. I've even tried reinsta ...

vue.jsherokudeployment

Switching between links while using Vue Router may cause jQuery to become disabled

I am currently utilizing vue router to facilitate navigation on my website. Within this setup, I have various pages such as a home page and an about us page. The issue I am facing pertains to some jQuery functionality that is implemented in a separate JS f ...

jqueryvue.js

Selecting the appropriate v-model for Vue.js draggable in the case of a nested list

My Vue Component <div id="main"> <h1>Vue Dragable For</h1> <div class="drag"> <ul> <li v-for="category in data"> <draggable id="category" v-model="category" :move="checkMo ...

vue.js

What is the best way to bust the cache for my Vue applications that are deployed on Ngin

Greetings! I am facing an issue with my Vue apps deployed on an nginx server. Sometimes, updates do not reflect for users due to cached versions. Is there a way to clear the cache without renaming all files and components in the apps? Are there any user-f ...

vue.jsnginxcachingnpm

I need to generate table rows using v-for and include a unique value in the 'id' attribute of each row

I am creating table rows dynamically in a view using Flask data. <tr id="<% file.id %>" v-for="file in fileList"> <td><img class="thumbnail_preview" src=""></td> <td><% file.filename %></td> <td> ...

htmlvue.js

Guide to generating customized CSS styles on-the-fly in Vue (similar to Angular's dynamic styling capabilities)

When working with Angular, we have the capability to dynamically set CSS properties. For example: <style ng-if="color"> .theme-color { color: {{color}}; } .theme-background-color { background-color: {{color}}; } .theme-border-color { border-color: { ...

javascriptcssvue.jsvuex

Checking authentication globally using Vue.js

In the main blade file, I have the following code snippet: <script> window.App = {!! json_encode([ 'csrfToken' => csrf_token(), 'user' => Auth::user(), 'signedIn' => Auth::check() ]) !!}; </script> How ...

javascriptphplaravelvue.js

The feature of Nuxt 3's tsconfig path seems to be malfunctioning when accessed from the

Take a look at my file structure below -shared --foo.ts -web-ui (nuxt project) --pages --index.vue --index.ts --tsconfig.json This is the tsconfig for my nuxt setup. { // https://v3.nuxtjs.org/concepts/typescript "exte ...

typescriptvue.jsvitetsconfignuxtjs3

VueJS and Vite: Encountering an unexpected character '�' while attempting to import files that are not JavaScript. Keep in mind that plugins are required for importing such files

I'm puzzled by the error message I'm receiving: [commonjs--resolver] Unexpected character '�' (Note that you need plugins to import files that are not JavaScript) file: /..../..../WebProjects/..../ProjectName/node_modules/fsevents/fse ...

javascriptvue.jsfsevents

Steer clear of duplicating patterns in vue templates

I have a significant issue with a component that needs to be repeated multiple times in the parent template due to the usage of v-if. The component code is as follows: <SelectCard v-for="(channel, index) in category.visibleChannels" :key="index + & ...

javascriptvue.jsvue-component

Problem with Vue.js dropdown functionality in Internet Explorer

After developing a form using Vue.js to allow users to save and return to their answers, I encountered an issue in Internet Explorer. When the page loads, the dropdown menu tied to a computed property does not display the previously selected answer as expe ...

javascriptvue.jsinternet-explorer

What is the best way to trigger an event using vue-chartjs?

I am using vue js to display a graph with chartjs. I have implemented an onClick function on the graph to emit an event in the parent component and retrieve data. However, the event is not working as expected. Can you help me identify the issue? Component ...

javascriptvue.jsvuejs2chart.jsvue-chartjs

The value of data in Vue.js remains stagnant even after reassignment

In my data setup, I have defined the following: data() { return { mdrender: '', markdown: '' }; }, Additionally, I am working with this function: methods: { interpretVars: function(markdown) { $.getJSON("/api/v1/getdo ...

vue.jsvuejs2

Transmitting document through HTML form using Laravel integration with Mailgun API

I'm currently working on a feature where users can select a file via an HTML form and have it sent as an email attachment using Mailgun. I want to avoid storing the file on my server. The goal is to allow for uploading various file types such as PNG, PDF, ...

phplaravelvue.jsmailgun

What is the best method for transmitting pagination information and an array from a Laravel controller to a Vue component?

Here is an example of my controller code: public function index() { $products = $this->product->list(); dd($products); return view('admin.product.index',compact('products')); } After running dd($products);, you can see the result l ...

laravelvue.jsvuejs2vue-componentlaravel-5.6

Can you explain the significance of the symbol '#' in a Vue Router URL?

I am wondering about the significance of the hash in Vue Router URL. I have noticed that by using mode: 'history', I can eliminate it from the URL. What are the practical differences between having the hash and not having it? ...

vue.jsvue-router

When Vue 3 is paired with Vite, it may result in a blank page being rendered if the

Issue with Rendering Counter in Vite Project After setting up a new project using Vite on an Arch-based operating system, I encountered a problem when attempting to create the simple counter from the Vue documentation. The element does not render as expec ...

javascripthtmlvue.jsvuejs3vite

What could be causing my router link tag to malfunction within the bootstrap framework?

In my project, I am using vue.js in combination with bootstrap to develop a navigation task bar for the frontend. To set up the routing functionality, I have created a separate file called router.js. router.js import Vue from 'vue' import Router from 'vue ...

vue.jsvuejs2vue-router

When trying to locate an item in an array within a VUE application, it may result in

I've got this code snippet that successfully finds the item details in an array: var findGroupId = medias.find(medias => medias.group_name === this.groupName) The medias variable is an array. When I run console.log(findGroupId), I get this result ...

javascriptarraysvue.js

Filtering a list with Vue.js using an array of checkboxes

Currently, I am exploring ways to filter a v-for list using a checkbox model array with multiple checkboxes selected. Most examples I have come across only demonstrate filtering one checkbox at a time. In the demo here, you can see checkboxes 1-3 and a lis ...

javascriptcheckboxfiltervue.js