Questions tagged [vue.js]
Vue.js is an open-source JavaScript framework for building interactive web interfaces. It creates data-driven user interfaces with a simple and flexible API.
110
questions
0
votes
0
answers
37
views
injecting the laravel debugbar into a VueJS app served via vue-cli-service
My team develops an app with an API using the Laravel framework and the front-end is developed with VueJS. Locally vue-cli-service serve (a wrapper around Webpack) ...
- 28.1k
1
vote
1
answer
47
views
Listening to bootstrap 5 events in a vuejs application
Starting out with VueJS, making a small fun project. The project is a simple static portfolio website, with a navigation bar at the top and a bootstrap scrollspy, jumping to the different sections (I ...
- 199
1
vote
2
answers
180
views
Virtual scroller Vue component
Problem
The scrolling looks smooth on Windows, but very laggy on Linux (Webkit webview and Webkit browsers).
Any thoughts on what could be optimized or what's obviously broken?
Demo playground:
https:/...
2
votes
1
answer
58
views
JS animated string builder
Today, I tried to write a simple function that would display the characters of my string one by one by iterating over a string containing the letters of the alphabet and showing the steps on the ...
- 23
5
votes
1
answer
222
views
v-for loop generating list items that will get rearranged based on an associated value (ranking system)
A counter gets incremented by a custom value.
Each increment value gets stored with its refcount that tracks how many times it occurred.
An ordered list shows all increment values entered so far by ...
- 65
1
vote
0
answers
211
views
Tanstack vue-query reloading data when getting out of tab, and (possibly) not using cache
I am writing an app generator. I intend to use all of the best practices for everything. However, I have recently moved ro vue/tanstack and I am still working out what the best practices are -- this ...
- 557
1
vote
1
answer
351
views
Movies App with Vue 3 and TypeScript
I have made a Movies App with Vue 3, TypeScript and The Movie Database (TMDB) API. For aesthetics, I rely on Bootstrap 5.
In src\App.vue I have:
...
- 525
5
votes
2
answers
639
views
Display properties of a country, from online service
I'm currently learning Vue JS and I made a simple app that pulls information from API and displays facts about a country given a 2-letter country code. I'm looking for feedback on how to improve the ...
- 51
4
votes
2
answers
89
views
Vue.js - Sierpinski Triangle
Below is a Vue app I wrote to draw a Sierpinski Triangle given n iterations, which can be incremented/decremented via a HTML ...
- 509
2
votes
0
answers
33
views
"Github contribution"-clone made with VueJs. Any logic improvements?
I took a shoot at writing a Github contribution clone using Vuej, tippy.js and tailwindcss.
Githubs looks like this:
My working clone looks like this:
Its not an exact look-a-like but im getting ...
- 223
2
votes
2
answers
466
views
Infinite content loop carousel
I made this pretty simple content loop-carousel component, but
the code seems too "Iffy" but Im not sure how I could make it better.
I tried to use the Switch expression, which makes it a ...
- 123
0
votes
1
answer
56
views
How to refactor switch statement with convoluted if chain within vuex module
So this is my scenario. In my Websocket Vuex module I'm dealing with all the data coming from the server. I can get different kinds of notifications from the server and according to the type of ...
- 109
1
vote
1
answer
51
views
Navigating a javascript object (previous and next)
I am using Vue3 together with Collect.js. I have an object records that can have n number of items.
On my website, I display ...
- 287
1
vote
1
answer
294
views
Chaining backend calls from VueJS method using Axios
This is the first ever bit of front-end code I have ever written, I have tried to adapt the existing call that is there to the backend using axios, so I check on of the response object value using the ...
- 507
-4
votes
1
answer
94
views
Simple Vue calculator [closed]
I made conditional calculator in Vue js but I need help to make it more efficient.
https://jsfiddle.net/wbrx9cyp/1/
example of code:
...
- 1
1
vote
1
answer
133
views
Show progress bar for different states
I have this working code which shows the progress bar based on different states ("not-started", "progressing" and "done"). Each state will have its own class.
I notice it ...
- 925
4
votes
3
answers
135
views
Destructuring with map and assigning to a constant
I don't know exactly what to name this, but I was refactoring a code snippet and looking at this constant users I thought I'd do this destructuring:
Before:
...
- 401
1
vote
2
answers
1k
views
3
votes
2
answers
104
views
group computed properties in vue component
I have the following vue component which all works fine
...
- 641
0
votes
1
answer
89
views
Good approach to simple state management in vuejs for multiple instances [closed]
I am learning Vue.JS and I'm creating a simple todo app, where each list has a unique id. I am iterating through all of the list to create a Vue instance:
...
- 117
1
vote
1
answer
267
views
Vue and JSONPlaceholder application
I have put together this small application that uses the JSONPlaceholder API and Vue.js.
The application crosses users and posts and displays the posts by user (author):
...
- 525
2
votes
0
answers
44
views
Keyboard Tester Web Application in Vue 3 + TypeScript
I'm working on keyboard testing web application. As a mechanical keyboard enthusiast, I need to test that all the keys on my keyboard work whenever I build one, or change the firmware for one. ...
- 151
-2
votes
1
answer
64
views
JS - Same recurring statements in if-else
I have this watcher in my app.vue that makes sure the right theme attribute is set on the ...
- 107
1
vote
1
answer
823
views
Which of these two Vuetify Navigation Drawer prevent prop mutation workarounds seem better?
I am very new to Vue.js, I just stumbled on a very hard thing to do (at least for me) where Vue was complaining about mutating a prop (children shouldn't change parent props apparently). I was about ...
- 264
-1
votes
1
answer
21
views
How do I distinguish the difference in naming and file structure between components and mobile components in React? [closed]
Here is my example structure:
.
├── App.jsx
├── index.js
└── src
└── components
├── Button.jsx
└── Header
└── Header.jsx
Question:
...
- 25
6
votes
1
answer
107
views
Improving product configurator "algoritm"
I have created a product configurator in VueJS and the whole functionality of it runs on one single function. I've put the word algoritm in the title in quotes because I don't really know if it is ...
- 227
1
vote
1
answer
57
views
Draw shapes using the Html5 Canvas api
A while ago I decided to start working on a project that will keep me busy for a while and will help me sharpen my programming skills.
I do not underestimate the work behind apps like adobe xd, sketch....
- 76
2
votes
1
answer
320
views
To-do app front-end in Vue 3
I have put together a To-do Application with the Slim framework on the back-end (API) and a Vue 3 front-end. I added a demo on my YouTube channel.
In the main App.vue file I have:
...
- 525
4
votes
2
answers
983
views
1
vote
1
answer
165
views
Vue.js todo app
I am working on a small to-do app with Vue (v 2.x.x). I list 5 todos from jsonplaceholder initially.
I can add more todos, delete them or mark them as done.
...
- 525
2
votes
1
answer
63
views
Iterating through a list to generate calendars
I'm iterating through a list to generate calendars, the issue is each generator function has the same this.addToCalendar() function. I'd like to know how I could ...
- 153
3
votes
1
answer
979
views
Smooth sidebar toggle animation with vuejs and tailwind
I'm making a slide sidebar with vuejs and tailwind. It works but feels kind of sluggish. Is there a way to make it smoother ?
working example: https://codepen.io/tuturu1014/pen/oNzRXeW
...
- 31
2
votes
2
answers
213
views
Currency Convertor in VueJs
I have created this simple currency convertor to learn VueJs more. Any code review/comment on coding standard and best practice for Vue? Thanks in advance.
...
- 925
1
vote
0
answers
340
views
vuejs: best practices with vuex when you call multiple actions [closed]
I am working on a project in which I am using vue js 2 and electron ,
to manage the state I use vuex , I have at least 20 actions to call
...
- 11
2
votes
0
answers
397
views
Vue 3 composition API typescript using ref in Object
Hi I using Vue 3 with Typescript. In my code I have variable:
...
- 121
6
votes
1
answer
2k
views
Best way to do unknown number of nested v-for loops, or how to do while loops in VueJs (is there a "v-while"?)
I want to recursively use a Vue component for each item in a multidimensional array, which is a list of topics. For example, Topic 1 can have subtopics 1.1, 1.1.1 and 1.1.2, but topic 2 might have no ...
- 233
5
votes
2
answers
127
views
Very basic Vue todo list viewer
Problem
I keep trying to use various todo lists. But I keep coming back to the same situation; not having an active todo list. This can come in two forms:
I don't have a habit to open bespoke ...
- 43.4k
2
votes
1
answer
179
views
Multiple audio player - arrow keys & space
I am creating a VueJS component of an audio player.
I am having some difficulties in finding the ideal way to get the arrow keys and space bar to work.
I have found a solution, however I think it is ...
- 161
2
votes
2
answers
135
views
Structuring code logic for events on laravel controller
The code below will store a base64 image on another website and create an event to display the image on a Vue page in real time. It works fine and all.
My question is, is this a good way of doing it ...
- 21
6
votes
1
answer
85
views
Team scrambler VueJs
I wanted to do a very little project of a team scrambler. There are two teams of 5 players. Each player has a unique color (in his team) from a limited pool. You can use 2 actions :
Scramble the ...
5
votes
2
answers
1k
views
Implementing Laravel old data in Vuejs
Users input their pin-code which is checked against the database and returned with the locality, district and state associated with that pin-code. Multiple localities may be returned so the options ...
- 171
2
votes
1
answer
50
views
4
votes
1
answer
99
views
Client side authorization when retrieving from server
I have an endpoint to retrieve the user's authorization based on Joseph Silber's Bouncer.
I have a global can() function. It creates a unique key based on the ...
- 149
2
votes
0
answers
472
views
Vuejs Dynamic inputs and displaying data
I am accepting dynamic input from the user if they have any i.e - Children/Siblings/Previous Employement etc through Vue Components.
A form is created and they input their data which is validated and ...
- 171
2
votes
1
answer
199
views
Using setInterval() to make data reactive
I have a video component passing data from an async GET request to a child component:
...
- 207
-3
votes
1
answer
108
views
Is there a means to combine the similar chunks of Vuejs code shown below? [closed]
I am currently working on a project and very recently came across Vuejs. I used it to create a dynamic form on my frontend, however, the approach I took does not seem right to me. Could someone take a ...
13
votes
5
answers
3k
views
4
votes
1
answer
52
views
Protecting Vue page based on the API response
If the user/visitor has access to the API route, then the status code will 200, else 401.
I know that I can user Vue navigation guards, but I will need to use Vuex.
This way is much simpler and faster,...
- 91
2
votes
0
answers
23
views
Localization of multi style text element in Vue
After following up this question, I'm thinking if there's a better/shorter way to write this text element that has part with different style, while allowing localizations:
...
- 121
1
vote
1
answer
23
views
Loop Vue2 tag with keyup + modifier and click
I have following code but wonder if I can loop it instead of copy-pasting.
calculator.ts
...
- 123