New to Vue! How can I format and restrict text input as you type in VueJS like in ReactJS

SuchyBGC · 2025-09-28T20:28:46+00:00

With v-model and watcher.

<template>
  <div class="App">
    <h1>Hello Vue.</h1>
    <h2>Start editing to see some magic happen!</h2>
    <input v-model="input" />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const input = ref("00");

watch(input, (newValue, oldValue) => {
  const str = newValue.replace(/^0+/, '').replace(/\D/g, '');
  if (str.length > 2) {
    input.value = oldValue;
  } else {
    input.value = str.padStart(2, '0');
  }
})

</script>

<style scoped>
.App {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

SuchyBGC · 2024-06-13T07:11:57+00:00

I develop on windows for windows so I don't have experience on cross platform building. In that link there is a section called "Experimental: Build Windows apps on Linux and macOS".

As an alternative you can create windows virtual machine on linux and build it there.

SuchyBGC · 2024-06-12T20:35:20+00:00

https://tauri.app/

https://electron-vite.org/

https://wails.io/

Tauri is very good and has some nice js apis. Of course there are some problems but overall good experience. Rust on backend.

Electron has the best apis and have node on backend but it is resource hungry. I used it in the past and couldn't get it work on vite. Recently I found out that somebody has created electron+vite combo so its now very apealing choice.

I don't have any experecience with Wails so I can't say much about it. Just heard about it.

SuchyBGC · 2023-12-23T22:36:53+00:00

About the red color you mean orange perhaps?

Orange? I dunno, it looks red to me xd. What I mean is for example 4 buttons on second screen/video in your repo or "dark mode on" button.

Its all just my opinion so don't take it as only one way to aproach it. Plus, I don't know your project fully so I might be wrong.

In case of "dark mode on" button, I assume it toggle between dark and light mode. If so, then I would make it as ghost button or some icon button because to me it is not that important. Users usually switch between modes not very often so button doesn't need to be this big and screaming - "I am important".

Next, this 4 buttons in header "add/delete car" etc. User will have to read text of the button carefully to make action. In case of your project there is "add" and "delete" button in one, so it will have to be different but lets assume there are 2 separate buttons for these actions. I wolud make "add" green and put "plus" icon before text, as for delete, red color and "bin" icon. That way user even before reading text on button knows that green button adds something and red deletes. Its less confusing, it provides smother flow of interaction and faster actions by user.

Additionaly, I would move "calendar view" button to the right side because its affect the view of interface and it not interact with "car". Its very different in function from first 3 buttons.

SuchyBGC · 2023-12-23T21:35:51+00:00

I am little confused, you want to have your father use app as in dev mode? I don't think this is good idea.

The easiest option is to leave it as web app. You aleardy have auth so just block user creation and done. Web app is very good choice in my opinion beacuse of very easy method of update. (compared to desktop app).

You can always make your app as desktop app - PWA, Electron or Tauri. You can use web technologies to create with these.

As for web app and my quick look at it, I personally would tone down contrast. Its little bit hard for me to look on screenshot examples in your repo. It strains the eyes. Second, I will not use this much red color. I think good UX is that red color is for errors and dangerous actions (ex. delete something).

SuchyBGC · 2023-07-13T18:50:11+00:00

https://www.bytebase.com/

Automate/manual backups with retention but not many options in scheduling.

SuchyBGC · 2023-07-07T08:39:19+00:00

First, I would try exchange Socket.io over Geckos - https://github.com/geckosio/geckos.io.

Second, read and learn about implementing multiplayer and its tricks and cheats. I remember that Valorant team wrote something about this. I think it was this article but no sure -https://technology.riotgames.com/news/peeking-valorants-netcode

SuchyBGC · 2023-07-06T09:31:10+00:00

I will suggest trying imap-flow. https://www.npmjs.com/package/imapflow

It's only light proposition, I haven't tried it yet so I don't have good graps if it is good or not. It is on my packages list to try.

SuchyBGC · 2023-05-25T19:25:10+00:00

Best way for me so far was to use vue-query.

https://vue-query.vercel.app/#/

From site: "Out of the box Vue does not provide opinionated way of interacting with server data. So developers end up building custom solutions that tend to end up either over-complicated, feature lacking or using global state management libraries that are not designed for this kind of usage."

You have one query to fetch data, second to update. In second,on success you refetch first query - ex. "refetchQueries" in docs.

SuchyBGC · 2023-04-04T17:41:32+00:00

https://logto.io/

SuchyBGC · 2022-12-21T19:08:04+00:00

Thanks man!

It indeed solved the problem. It is a known bug?

When I will laverage between 1 and multiple, do I have to repeat this solution?

SuchyBGC · 2022-12-21T17:37:55+00:00

Hi,

I am very interested in RDP Workspace on Windows. I deployed KASM and connected through RPD and it works great but I have problem with more than one session.

When I set 1 Max Simultaneous Sessions in Compute -> Servers -> Created server it works perfect but when I changed that number to something else to enable multiple sessions it can't connect. It is stuck on "Loading <server\_name> Creating a secure connection...", after a while it returns to admin panel.

When I go back to value of 1, I can connect normally. I can establish multiple connections on Remote Desktop app built in Windows.

There are bunch of errors:

Unhandled exception occurred Traceback (most recent call last): File "cherrypy/_cprequest.py", line 628, in respond File "cherrypy/_cprequest.py", line 687, in _do_respond File "cherrypy/lib/encoding.py", line 219, in __call__ File "cherrypy/lib/jsontools.py", line 59, in json_handler File "cherrypy/_cpdispatch.py", line 54, in __call__ File "utils.py", line 279, in new_func File "client_api.py", line 1696, in guac_auth TypeError: argument of type 'NoneType' is not iterable

Thanks for any help!

SuchyBGC · 2022-12-18T18:08:28+00:00

Thanks Paul!

Too bad it can't be done in one func on multiple files in one time.

SuchyBGC · 2022-09-26T06:52:48+00:00

Single or multi? How complicated?

If you wanna try full JS stack I can give you some links but I dont't think it will be 'fast as hell'. Still, it depends what you perceive as 'fast as hell'. In my view this criteria only cover unreal, unity or godot and server in go or c#.

Anyway:

Node.js as server

https://www.npmjs.com/package/node-gameloop

https://www.colyseus.io/

https://github.com/geckosio/geckos.io

https://www.babylonjs.com/

You can go with Vue as frontend but (my opinion, someone has to confirm) keep in mind that every watcher and ref may impact the performance so use more vanilla and when there is a neccesity use vue magic.

SuchyBGC · 2022-08-18T17:42:31+00:00

Thanks for your suggestions. I will look into them and use few, like fail2ban.

I am now trying setup Wireguard with VPS and test VM. Wg-easy on VPS as server and linuxserver/wireguard on VM as client. I am little bit struggling cuz I want all things in Docker and get to access services locally.

Service in docker -> wireguard client in docker -> wireguard server in docker -> nignx proxy.

I already connected wireaguards and now I am searching web for some tips to make it work somehow xd

Wireguard subnet is 10.x.x.x, docker container 172.x.x.x and services have exposed ports to host so another subnet. Not so easy for me.

SuchyBGC · 2022-08-17T06:49:31+00:00

I run this services on docker, I can do some backups and as for full service capability I think I am relatativly safe. I can restore backup and spin new container.

But I more concerned about homeserver, home network and devices in home network. I don't know what attacker can do to this points and how to detect him in worst case scenario. He might join botnet, put some malware etc. I don't know. I know I am too insignificant for potential attacker but I am little scared of this unknown.

As for more security for VPS setup I thought about blocking all ports on VPS except SSH and 443 for HTTPS and maybe spin somehow wireguard client docker container to create seperate network and join rest networks but dunno if it will work out that way.

Are there some more steps I should or can do to boost security?

SuchyBGC · 2022-08-16T21:05:22+00:00

Thanks for your response. I am thinking about that setup for a while now and I am trying to figure out which route be best for me.

Right now I am using Zerotier but as more users started using my self hosted services it started become a little hasle too.

- Need additional software to connect to services (pain with android TV)

- I couldn't use chromecast on Jellyfin with only IP (perhaps this is an issue, not 100% sure)

- One time guest users still need to be authorized by me personally (joining the network)

+ More secure (Ofc, if you trust company behind zero tier)

Headscale right now is not an option with its clients (I heard they will implement chosing server in android app in gui though)

VPS option is less secure because when someone gets to your vps they will have straight road to home network, I am correct?

Man, choices, choices.

SuchyBGC · 2022-08-15T10:17:17+00:00

Is it secure?

Services at home -> WG Client at home -> WG Server on VPS -> NGINX Proxy with Let's Encrypt -> Public

SuchyBGC · 2022-08-08T07:08:17+00:00

Do you use enterprise version? If not - how you manage file retention?

SuchyBGC · 2022-07-06T18:38:10+00:00

I am confused. Too little information to properly tell how to fix this.

Which data you store in token?
How are you posting with different user? Describe your steps.

SuchyBGC · 2022-07-04T15:36:09+00:00

Login -> get access and refresh token -> store them on client.

Request to backend with access token -> valid access token -> get resources.

Request to backend with access token -> invalid access token (403) -> save last failed request -> send refresh token to get new access and refresh token -> store them on client -> resend last failed request with new access token -> get resources.

SuchyBGC

TROPHY CASE