News Articles vuejs3

How to solve the problem that the message cannot be used when the element-plus is introduced locally?

Recently I am trying to write element-plus casually, so I did not configure the Node environment and build the vue scaffolding. It was referenced locally through the way of cdn file download. All aspects of the components can be used normally, but I am trying to write the message prompt box js The components don’t […]

"Failed to parse source for import analysis" error occurred

I m VUE Beginner. So I want to create simple vue single file component. I added following code snippets and run my server using yarn vite Then I got following error. Could anyone help me to resolve this issue ? App.vue <template> <h1>Hello world</h1> </template> <script> export default{ } </script> <style scoped> </style> index.html <!DOCTYPE […]

Logged user dissapear in browser refresh

I’m working on a project using Vue 3 and Composition API, and I’m developing login function, and it works fine, but when I refresh the page, the logged user dissapear from it and I don´t know why it’s happening it. Here´s my userModule file, where I create the ref of the users and some others […]

How to select text inside input when the input get mounted (Vue3 )

I have this form that I created, basically what its doing is creating a new input with a random value each time I click on ADD_INPUT button. the thing I want is each time I create a new INPUT with random value the value get selected. Sorry for my very bad English. [![enter image description […]

How to prevent white space when parallax scrolling background?

I have an SPA of which I like to parallax-scroll the background, which is a colored grid .png attached to the app element: The background is set like so: .app { background: url("../images/grid.png"), linear-gradient(to bottom right, #0000e7 13%, #040d21 29%, #040d21 72%, purple 87%) no-repeat bottom; position: relative; } When I apply parallax scroll (rellax.js) […]

contenteditable inputer detect input special character and replace it when inputing

how do I detect user input a url-like string in a contenteditable component and wrap it with a special tag just like discord does? Target String seems like: This is a test https://www.google.com/ and detect replace should be like: This is a test <span class="highlight">https://www.google.com/</span> And this replacement should not block user input Source: JavaSript […]

How to change <select> value on Vuejs3?

I wanted to change <select> value getting ul > li value and use this value id on <select> v-model. <div> <select id="selected" @click="show-modal" v-model="subcategory_id"> <option></option> </select> </div> <div class="modal"> <header class="modal-card-head"> <p class="modal-card-title">Choose category</p> <button @click.prevent="close-modal" class="delete" aria-label="close"></button> </header> <section class="modal-card-body"> <div class="card "> <ul class="cl-menu"> <li v-for="category in categories" :key="category.id" > <a href="#">{{category.name}} <ul> […]

Vue 3 mobile event listeners and swipe

In Vue 3, I want to trigger a function when a user swipes left / right. (I made a calendar and interested in having months changed on swiping) I found this package: https://github.com/robinrodricks/vue3-touch-events (npm install vue3-touch-events) but it’s not working and I get the following errors: and imported the relevant packages in main.js: import Vue […]

Vue: Best approach to access possible existing nested properties in error object

I’m looking for a good and reusable approach to access possible existing nested properties (nested object and array of objects) inside an error object without typeErrors. I have a createCompany form/page with the following data data() { return { company: { same_billing_address: true, physical_address: {}, billing_address: {}, contacts: [ { function: ”, first_name: ”, last_name: […]

What function can be used to keep playing audio after current one is done

I am trying to play the next song in a playlist/album after the current one has finished playing. I was able to get a song to play but it does not move to the next one after the current one finish playing. Here is my code: <button class="controlButton play" title="Play" @click="play" v-if="!isPlaying"> <img src="storage/icons/play.png" alt="Play"> […]

Vue3 How to return value from a component

Using Vue3, I’ve got a Datepicker component using the litepie-datepicker <template> <div class="flex"> <litepie-datepicker as-single v-model="dateValue" ></litepie-datepicker> </div> </template> <script> import { ref } from ‘vue’; import LitepieDatepicker from ‘litepie-datepicker’; export default { components: { LitepieDatepicker }, setup() { const dateValue = ref([]); return { dateValue }; }, }; </script> When I pick a date, […]

Problems with adding FileUpload from PrimeVue

I had a project on Vue 3. Wanted to add some tags from PrimeVue. Installed it vue npm, add code to main.js: import { createApp } from ‘vue’ import App from ‘./App.vue’ import router from ‘./router’ import PrimeVue from ‘primevue/config’; import FileUpload from ‘primevue/fileupload’; import TextArea from ‘primevue/textarea’; const app = createApp(App); Vue.use(VAnimateCss); app.use(PrimeVue); app.component(‘FileUpload’, […]

Quasar q-img inside of q-select is not visible

I am trying to do a language switcher. However, although my images are in the right location, q-img do not show anything when I get src from my options array. When I directly enter the image location to the q-img src, it works fine, but I want to use the options array to be more […]

Drop Right menu vuejs

How can I do dropright menu like that on vuejs-3 ? Source: CSS – Stack Overflow

Is it possible to attach multiple functions in V-for?

I have an array of elements, I need to render those elements in to a div and attach different on-click functions to each. <template> <div class="container"> <div v-for="option in options" :key="option.id" @click="option.clickFunction">. {{option}} </div> </div> </template> <script> export default{ data(){ return{ options: [ { id: 1, text: "option 1", clickFunction: "function1", }, { id: 2, […]

Even though I installed axios on my Vue project, it still returns an error

This dependency was not found: axios in ./src/components/history.js To install it, you can run: npm install –save axios I prepared the history.js file for the response. no matter how I try, no matter how many times I reload the axios, the same error occurs. Source: Vue – Stack Overflow

Vue 3 computed not refreshing

I’m trying to make a login form with Vue 3, but I have difficoulties with getting a state in ‘realtime’ or computed. So when I try to login user from template it look like this. <button class="login-button" type="button" @click="$store.dispatch(‘login’, {email, password})"> Sign In </button> And this button is working fine, it’s sending data and making […]

trying to deploy a vue 3 site on netlify and getting "Uncaught TypeError"

it looks like it’s complaining about this part of my code : import { createApp } from ‘vue’ where I import computed and ref from ‘vue’ do I have to spell out the file path to node modules so that netlify can find the import? It works fine on my local build, and netlify builds […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.