I would like to integrate stripe to charge a user a one-time 20$ payment after successfully completing a form in my Vue3 application. I've integrated vue-stripe-js and have been able to obtain a token from stripe using the card element…
Background: I was trying to do some custom styling for my select element by changing the color and arrow example: <select :id="'select' + index" class="w-full px-4 py-2 pr-8 bg-theme text-white rounded-md hover:bg-theme/50 appearance-none" @focus="dropdownOpen = true" @blur="dropdownOpen = false"> <option…
enter image description here How I can create blocks like this? Of course I should use directive v-for to render items. But I have no idea how. And any masonry libs cant help me with that I used "@yeger/vue-masonry-wall" but…
I have a process which have many steps. Each one is implemented in a different component. Initially I had this code: <template> <template v-if="process.currentStep === 0"> <Step0 /> </template> <template v-else-if="process.currentStep === 1"> <Step1 /> </template> <template v-else-if="process.currentStep === 2">…
I'm using Laravel and Vue, in the blade template I'm calling a Vue component which I'm passing some props too, to try and be able to update the background image depending on window width: Blade Template: <component bg="{{ asset('/images/desktopBG.webp') }}"…
I've got a problem where I want a child component to call a function given to it as a prop from the parent. I have done it before with other components, but with this it just doesn't work. Here are…
This drove me insane, and I figured out a workaround. But I want to understand why it does not work in a straight forward way. Essentially, I have my main vue view, and a custom function I want to import.…
I have following v-text-field which has following defaults // defaults.ts (used by Vuetify) const INPUT_DEFAULTS = { color: '#8AB8E5', baseColor: '#8AB8E5', bgColor: '#E8F1FA', rounded: 't-lg', persistentHint: true } const defaults = { VTextField: INPUT_DEFAULTS } and these are the CSS…
I am trying to watch a computed value that gets filled up with messages from a store. This is it (code reduced for brevity): <div ref="RefWindow"> <ul v-for="Message in Feed"> <li>Message</li> </ul> </div> const Feed = computed(() => MyStore.Messages) const…
I am new to vue 3 and I am following some online vue 3 training:) so I get records back from the supabase database, the table the table gets populated with the exepected data. The last column has an action…