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.

Guidelines for launching a Vue.js application in a production environment using the package-lock.json file

Looking to create a vue.js app for production using npm ci. Should the @vue/cli-service be placed in the devDependencies section of package.json before running npm ci vue-cli-service --mode production Or should the @vue/cli-service be added to the depende ...

vue.jsnpm

When dealing with dynamic components, vue-meta fails to consistently show the title, content, or schema upon page refresh or when clicking on an

After navigating to my dynamic components via the navigation bar, I noticed that the Vue-meta title, content, and schema are displayed correctly. However, upon refreshing the page or clicking on an external link, I encountered the issue of receiving a valu ...

vue.jsvuejs2vue-meta

Challenges in navigating routes with vue.js

Having some issues with my pages not displaying properly. I suspect it could be due to my routing setup. I am fairly new to this so any help would be appreciated. Here is a link to my project on GitHub: https://github.com/PietroSerra/order-login-master2 ...

vue.jsvue-routerrouter

Calculate the overall cost from an array of information using Vue.js and Laravel

In a view, I have fields for selecting from and to dates along with branch and spare parts as dropdown options. When I select the date range, it will retrieve data including the branch name, grand total, etc. What I am trying to achieve is getting the tota ...

laravelvue.jsvuejs3

Implementing user session management with VueJS

I'm currently working on finding a way to preserve user sessions even after they log out. This includes storing multiple shopping carts, transactions, and past searches. As someone who is new to backend languages, I could really use some guidance on this t ...

node.jsvue.js

Combining dynamic classes within a v-for loop

Here's my custom for loop: <div v-for="document in documents"> <span></span> <span><a href="javascript:void(0)" @click="displayChildDocs(document.id)" :title="document.type"><i class="fas fa-{{ docume ...

for-loopvue.js

Trigger event upon model value update in Vue JS

I am currently using a basic dropdown setup like this: <select v-model="selected.applicationType" v-on:change="applicationTypeChanged" class="form-control"> <option v-for="item in applicationTypes" v-html="item.tex ...

vue.jsvuejs2vue-component

Blocking negative values when a button is clicked in Vue.js using v-on:click

How can I prevent the counter from going below 0 when clicked in this Vue component? Do I need to create a separate method to block it? Thank you for your assistance. <button v-on:click="counter.document -= 1">-</button> <h3>{{coun ...

javascriptvue.js

Tracing a path with a snapping motion using my thumb

Before we begin, let's take a look at the example below. The functionality of this component should mimic that of an input type range. However, I am facing some challenges in calculating the step value and snapping the thumb onto the trail based on t ...

javascripthtmlreactjsvue.jsdom-events

Creating a dynamic MPTT structure with expand/collapse functionality in a Django template

I am looking for a way to display my MPTT model as a tree with dropdown capability (open/close nodes with children) and buttons that can expand/collapse all nodes in the tree with just one click. I have searched for examples, but the best I could find is ...

pythoncssdjangovue.jsdjango-templates

Using Firebase with Arrays in Javascript

Currently, my team and I are working on a project using Firebase with Vue.js as the framework. We've come across a challenge regarding creating, updating, and deleting elements in a Firebase cloud document. For instance, within our 'people&apos ...

javascriptfirebasevue.jsgoogle-cloud-platformgoogle-cloud-firestore

Vue - Troubleshooting why components are not re-rendering after data updates with a method

Check out this simple vue component I created: <template> <div class="incrementor"> <p v-text="counter"></p> <button v-on:click="increment()">Increment</button> </div> </template> <script lan ...

typescriptvue.jsmethodscomponentsrender

Display Vue component based on a condition

I am currently working on rendering different components in the navbar based on the email/account that is signed in. There is a function called "getUser()" which retrieves the user's email. The items in the navbar include: Home, Procurement Site, Monitorin ...

vue.js

Remove input fields that were generated upon clicking a button

I'm facing an issue with my code that allows me to add inputs using @click="addInput()". However, I am struggling to delete specific inputs using @click="deleteInput(). When I try to delete an input with this.inputs.splice(index, 1), on ...

javascriptvue.jsvuejs2bootstrap-vue

The scrolling event on the div is not triggering

I'm struggling with this piece of code: const listElm = document.querySelector('#infinite-list'); listElm.addEventListener('scroll', e => { if(listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) { th ...

javascriptjqueryvue.jsvuejs2

What is the best way to add Vue dependency using CDN?

For my project which is built using Kendo, Vue, .Net, Angular and jQuery, I need to incorporate https://www.npmjs.com/package/vue2-daterange-picker. <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-c ...

javascriptjqueryvue.jskendo-asp.net-mvcscriptbundle

What is the best way to customize the look of the v-calendar component in Vue.js?

I've recently started a project that involves Vue.js, and I needed to create a datepicker for it. After some research, I opted to utilize the v-calendar package. The implementation of the component went smoothly and functioned as expected right out of the ...

cssvue.jsdatepickervcalendar

Creating a "Container" component in Vue.js step by step

As a newcomer to Vue, I am facing a challenge in implementing a wrapper component similar to React's 'Wrapper' component. Specifically, I want to create a reusable datagrid component using a 3rd-party some-table component and a pagination co ...

javascriptvue.js

Tips for altering the color of an image using CSS attributes

I am looking to create a male Head component in this design draft and modify the CSS according to the skin prop. I have attempted to use filter and mix-blend-mode properties, but have not found a solution yet. Any guidance on how to achieve this would be ...

cssvue.jsfilterfigmamix-blend-mode

The correct way to integrate CSS-Modules into your Nuxt project

Currently, I am utilizing CSS Modules with Nuxt and have encountered some challenges while attempting to import a stylesheet into my JavaScript. Importing the stylesheet directly within the... <style module> @import './index.css'; </style> ...

vue.jscss-loadercss-modulesnuxt.js

Utilizing Vue's data variables to effectively link with methods and offer seamless functionality

I am encountering difficulty retrieving values from methods and parsing them to provide. How can I address this issue? methods: { onClickCategory: (value) => { return (this.catId = value); }, }, provide() { return { categor ...

javascriptvue.jsecmascript-6apollo

Tips for utilizing the /foo-:bar pathway in Nuxt.js?

I am trying to utilize the router /foo-:bar in Nuxt. Do you have any suggestions on how I could make this work? I attempted using pages/foo-_bar.vue but it did not yield the desired results. ...

javascriptvue.jsnuxt.jsnuxtjs

What are the steps to executing a function that instantiates an object?

Here is an object with filter values: const filters = ref<filterType>({ date: { value: '', }, user: { value: '', }, userId: { value: '', }, ... There is a data sending function that takes an object based on the filters's ref ...

typescriptvue.js

Animating transitions in a Vuetify data table

I am in the process of animating the data on a Vuetify data table. My objective is to make the current data slide out to the right when Next is clicked, and then have the new data slide in from the left. The current result I am getting can be viewed here: ...

cssvue.jsvuetify.js

Hovering over an option in Vue-Bootstrap b-select

I'm working with the Vue-Bootstrap framework and I need to update the CSS rule for the 'option' tag when it is being hovered over. Here is my code snippet: jsfiddle option:hover { background-color: red; } Can someone please explain why ...

cssvue.jshoverbootstrap-vueselect-options

Ways to verify the authenticity of a JWT token

I recently came across a tutorial on creating user authentication with Vue.js and Lumen. The tutorial utilizes the tymon/jwt-auth library to handle authentication. So far, everything is working smoothly. The API manages all my data and provides a token to ...

javascriptlaravelvue.jslumen

What could be causing my Vuetify Stepper Component to be hidden?

I am utilizing Vue and Axios to display data using the Stepper Component from Vuetify. However, after adding the API data, it seems that the CSS class is somehow being set to display: none;. I am confused as to why this is happening, so any help would be g ...

vue.jsvuetify.js

Display a 404 page on Vue router when the ID does not match

When it comes to displaying a 404 page if a parameter doesn't match, I'm a bit puzzled. For instance, if the user name is “joe” and someone tries to access “/joe/categories”, then the categories component should be displayed. Now, I want ...

vue.jsvue-routervuejs3

How to extract component prop types in Vue 3 with typescript for reusability in other parts of your application

When you specify the props under the "props:" key of a Vue component, Vue can already automatically determine their types, which is quite convenient. However, I am wondering if there is an utility type in Vue that can be used to extract the props' types f ...

typescriptvue.jsvuejs3

Enabling the value to be set as true for radio buttons generated using v-for

Utilizing a v-for loop over an array of objects in graphicState, the rows of a table are dynamically generated. My goal is to implement a column of radio buttons that, when checked, will set graphicState[index].selected to true. I came across this insight ...

vue.jsvuejs2radio-buttonv-for

TokenMismatchException is encountered while making an Ajax POST request in Vue-Resource

Just a heads up, I'm working with the Laravel framework. I've already checked similar questions on SO, but couldn't find a solution that worked for me... Even though I believe I've set my CSRF token correctly, it's still not functioning as expected. Upon ...

ajaxlaravellaravel-5vue.jsvue-resource

Tips for aligning a cluster of floating buttons at the center in Vuetify:

This is the code I am currently working with: <v-container height="0"> <v-row align="center" justify="center"> <v-hover v-slot:default="{ hover }" v-for="(option, index) in options" ...

htmlcssvue.jsvuetify.js

Using Vuetify to highlight selected radio buttons in an edit form

One issue I am encountering involves editing a table row. After clicking on the edit button, a form pops up with the data pre-filled for editing purposes. However, the radio button selected previously does not display as checked in the form; both options a ...

vue.jsvuejs2vue-componentvuetify.jsvuejs3

apply background color to Vue list

Can anyone assist me with changing the background color of an active list item? I would greatly appreciate any help. I am currently utilizing the v-for directive in an HTML tag to display a list generated from a data function. However, I am puzzled on how ...

vue.js

Unable to Toggle Bootstrap 5 Dropdown

Take a look at my code below. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor ...

javascripthtmlcssvue.js

Is it possible to assign a Component a name based on data?

In my project, I have three component icons named <DiscoverIcon>, <FeedIcon>, and <ProfileIcon>. In a tab loop, I want to display a different icon for each respective title. I experimented with using a list element like this: { key: 1, ...

vue.jsvue-componentvue-routervuetify.js

Enhancing Your Vue Experience: A Guide to Highlighting and Selecting HTML Elements on Mouse Hover

Incorporating a navigation header using Vue, I utilize v-html to display it seamlessly. Check out the demo - here <section class="text-gray-700 font-heading font-medium relative bg-gray-50 bg-opacity-50"> <nav class="flex justify ...

htmlvue.js

Manipulating deeply nested state data in Vuex actions can be a challenge

When working in the store, I have an action that updates certain data. The action is structured like this: setRoomImage({ state }, { room, index, subIndex, image }) { state.fullReport.rooms[room].items[index].items[subIndex].image = image; co ...

javascriptvue.jsvuex

Vuetify - Implementing a search feature in a table that automatically navigates to the matching row

Currently, I am working with 2 Vuetify data tables that do not have pagination enabled. Each row in the second table corresponds to exactly one parent in the first table. My goal is to be able to click on an entry in the second table and have it automati ...

javascriptvue.jsvuetify.js

Hey there, I'm having some trouble getting the mounted function to work properly in vue.js

My goal is to automatically fetch all products when the specified URL is loaded: '/Admin/ProductsAdmin' Unfortunately, the mounted function is not functioning properly as it fails to load anything upon URL loading. Below is the main.js code snip ...

vue.jsvue-componentvuetify.jsvue-composition-api

How can you replace the global event handler within a nested Vue component, and then access the original handler later on?

I am currently developing with Vue and using VueRouter, Vuex, and VueWebsocket in my application. The main component of the app is called App, which contains all other components. I have a websocket event that is globally set up like this: this.$options ...

eventsvue.jsextending

Utilizing jsPDF and html2canvas in a Vue.js application (no webpack involved)

I've been working on a feature within a Vuejs project that allows users to export a PDF containing specific Vuejs components by clicking a button. Everything was going smoothly until I encountered an issue. After npm installing the jsPDF and html2canvas pa ...

javascriptvue.jsjspdfhtml2canvas

Dynamic routing with Vue

Currently in the process of developing an application and encountering an issue with my code pertaining to dynamic routing. Utilizing Firebase to fetch data for the app, each department in the database should generate a navbar. Upon clicking on a specific ...

firebasevue.jsrouterdynamic-routing

Ensure the buttons within v-card-actions are responsive to different screen sizes

I am facing an issue with a v-card that contains three buttons (v-btn) within v-card-actions. Each button has long text on it, which is causing alignment problems on small screens. The buttons are not responsive and are still aligned horizontally from left ...

vue.jsvuetify.js

Tips for utilizing a primary template within a secondary container

In my code snippet below, I have outlined two steps: "step===1" and "step===2". My goal is to reuse the step 1 template for step 2. This means that after completing step 1 and clicking on the next button, I want to show the same template again for reusabil ...

vue.js

Vue.js | Web scrapers struggle to track v-for generated URLs

I am currently managing a small website that utilizes Laravel and Vue.js to display a list of items. You can check it out here. It seems like the Google crawler is having trouble following the links generated by the v-for function. In my Google Search Con ...

laravelweb-crawlervue.jsgoogle-crawlers

Discovering Geo Coordinates with Vue.js

To ensure accuracy, I am setting a 10,000 millisecond timeout to retrieve the client's current geolocation. var options = { timeout: 10000 }; This function is written in JavaScript: function getCoordinates() { return new Promise(functi ...

vue.jsgeolocationlexvuex

Vue js and axios make it easy to upload multiple files at once

I am encountering an issue where I am attempting to upload multiple images using vuejs and axios, but the server side is receiving an empty object. Despite adding multipart/form-data in the header, the object remains empty. submitFiles() { /* In ...

laravelvue.jsaxios

When typing at least 3 characters, a dropdown menu will be populated with options based on the user

Is there a way to implement a select element (preferably using v-select) that initially has no options, but will fetch the options only after at least 3 characters are typed in? Unlike most standard select elements where options are filtered as you type, I ...

vue.jsvuetify.jsvuex

Tips for making axios unique with @nuxtjs/auth-nextTips for modifying axios with @

I've been grappling with this issue for the past three days without any luck in finding a solution. My Nuxt.js frontend relies on the auth module to acquire a JWT token from a DRF backend. Upon logging in, the server returns the following message: Forbidd ...

djangovue.jsdjango-rest-frameworkjwtnuxt.js

A warning message from Laravel: "Template compilation error in Vue"

I'm experiencing an error when compiling Vue. I've added the following code snippet at the bottom of the page: <script src="{{ asset('js/app.js') }}"></script> <script type="text/javascript"> @yield('script') </sc ...

laravelvue.js

Implementing Multiselect Filter Functionality in Vue.js

Can someone help me with adding my selected locations and types to the filteredHotels() method in order to filter the results based on user selections? For instance, I need to filter Sydney Hotels, Sydney Backpackers, Sydney or Melbourne hotels, or all hot ...

vue.js

Tips for displaying an associative object array as td elements within a tbody in Nuxt

I'm having trouble displaying the property of an associative object array in my code. I attempted to utilize a v-for loop and wanted to showcase the property information within the td elements of a tbody. I am aware that v-data-table components have a ...

typescriptvue.jsvuetify.jsnuxt.js

Expanding text area size dynamically in Nuxt3 using Tailwind CSS

Is there a way to expand the chat input field as more lines are entered? I want the textarea height to automatically increase up to a maximum of 500px, and adjust the height of .chat-footer accordingly. Below is a snippet of my code. <div v-if="ac ...

cssvue.jstailwind-cssnuxtjs3tailwind-ui

Encountering: ERR_SSL_PROTOCOL_ERROR nginx with vue.js

When I check the console log in Google Chrome, I am encountering these errors: GET https://192.168.1.7:8081/sockjs-node/info?t=1579798623564 net::ERR_SSL_PROTOCOL_ERROR GET https://192.168.1.7/sockjs-node/info?t=1579798623562 net::ERR_CERT_COMMON_NAME_I ...

vue.jssslnginxwebpackubuntu-18.04

Using Vue.js to dynamically populate all dropdown menus with a v-for loop

Getting started with vue.js, I have a task where I need to loop through user data and display it in bootstrap cols. The number of cols grows based on the number of registered users. Each col contains user data along with a select element. These select ele ...

javascripthtmlvue.js

Using the dot operator to load an image

Is it possible to using the dot operator to load an image? Let's talk about this as a sample image URL <img src={{GET_PROFILE_DATA.googleProfileData.fullName}} alt="profile" class="home-screen-profile-image"> Take note of the unusual looking ...

javascriptvue.js

Load Vue 3 components dynamically using a string-based approach

Exploring ways to dynamically load components based on a string input. Here is an attempt at achieving this: <component v-for="component in components" :is="eval(component)" /> However, this approach does not yield the desired r ...

javascriptvue.jsvuejs3

Using v-model to dynamically update the router based on certain conditions

Check out this demo showcasing a navigation menu with nested items. Clicking "more" reveals the expanded list, which can be set to always open using v-model="item.model" with model = true. My goal is to have the submenu stay open only when the user is on ...

javascriptvue.jsvuetify.js

Setting up a Laravel 9 project with Vuetify and Vite: A step-by-step guide

Question: I'm currently trying to incorporate Vuetify into my Laravel 9 project with Vite. Despite following the guidelines provided in the Vuetify documentation, I am facing issues with the styles not being applied. app.js import App from "./A ...

laravelvue.jsvuetify.jsvite

Utilizing Vue.js to dynamically load JavaScript files depending on the environment

I have a JavaScript file that is generated by AWS Cognito, and its content varies depending on the environment. As I am not supposed to manually modify it, using Vue's environment variables may not be a feasible solution for me. How can I dynamical ...

vue.js

"Utilize Vue i18n to properly display currency amounts in USD

Whenever I present my currency as USD, it always shows up like this: USD$500.00. I am attempting to eliminate the USD prefix from the beginning. Below is my numberFormats configuration: numberFormats: { 'en': { currency: { style: ...

javascriptvue.jsvuejs2vue-i18n

Do these exports serve the same purpose?

Can someone help me understand why one export works while the other doesn't? I've tried to figure it out on my own but I'm stuck. Functioning Example const dataStore = new Vapi({ baseURL: 'http://domain.test/api', state: { data: [], } ...

javascriptvue.jsecmascript-6

Tips on building a carousel with slot elements

Many people have shown me the traditional way of creating a carousel using an array of images. However, I find this method to be limiting because I want each slide of my carousel to include a lightbox component. Instead of having to rewrite the lightbox fu ...

vue.jsvue-componentvuejs3vuejs-slots

Vue component does not display FabricJS image

Currently, I am facing an issue where I want to manipulate images on a canvas using FabricJS inside a VueJS app. In the view component, there is a prop called background which I pass in and then use fabric.Image.fromURL() to load it onto the canvas. Howeve ...

javascriptvue.jsfabricjs

Clicking on the v-progress-linear component causes the value to update

Whenever I clicked on my <v-progress-linear>, it would change, and I was looking for a way to prevent that. <v-progress-linear v-model="progress" color="primary" height="20" > Solution: Instead of using ...

vue.js

Using the 'type' field as a parameter in a Vue2 component object

I need help with passing an object into my component. Here is a snippet of the object's properties: { title: "myTitle", type: "myType" } However, when I define the prop in my component like this, I get a Vue runtime warning st ...

javascriptvue.jsvuejs2

Version 1 of Vue.js is not compatible with Ajax-loaded HTML files

Currently, I am encountering a minor issue with loading content through ajax requests. I am in the process of developing a web application where everything is located on one page without any reloading. To achieve this, I have split the content into separa ...

javascripthtmlajaxvue.jsaxios

Is there a way to programmatically generate a component instance in Vue 3?

I am facing an issue with creating a vue 3 component instance programmatically within a directive. The error message 'tooltip is not a constructor' keeps popping up. Below is the relevant segment of my directive code: import tooltip from ' ...

vue.js

When attempting to define a route as a lambda function in vue-cli, the default lazy load code does not function

After using vue-cli to set up a new Typescript project with vue-router included, I noticed that the generated router/index.ts configuration looked like this: const routes: Array<RouteConfig> = [ { path: '/', name: 'Home' ...

vue.jsvue-routervue-cli

An effective way to simulate an axios call within a method

I'm attempting to simulate an axios call inside a vuejs method. Can this be achieved? Below is my vue component (SomeObj): methods:{ callAxiosMethod() { const callApi= axios.create(); callApi.defaults.timeout = 10000; ...

vue.jsjestjs

Why does Vue 3 template display 101 instead of 1 when incrementing the number from 0?

Vue.createApp({ data() { return { counter: 0 } }, template: '<div>{{counter++}}</div>' }).mount('#root') Ultimately, the code above displays the number 101 on the page. Any insights into why this is happening? ...

vue.js

Struggling to properly send props to the child component in Vue 3

Is there a way to pass data from the request through axios in the root component to the child using Vue? Currently, only the "title" field is displayed correctly, but I also need to output the "body". Note: This is my first time working with Vue and I&apo ...

javascriptvue.jsvue-componentvuejs3

Is there a way to assign the chosen option from a dropdown list to an input field in Vue 3?

I am working with a list that is returned from an API request. I have a text input field where I can search for items in the list, and the results are displayed dynamically as I type. My goal is to be able to select an option from the list and display the ...

javascriptvue.jsvuejs3

Flask Blueprints cannot overwrite the static path

I am attempting to utilize Flask Blueprints for serving a multipage web application. Webapp structure: Landing page html->login->Vuejs SPA Flask structure: app/ client/ dist/ static/ js/ css/ ...

pythonvue.jsflask