Tag vue.js tutorial

Why will vue draggable items not move between lists?

I am trying to create a card builder using Vue draggable. I have a row full of cardElements and these can be dragged to the card builder. The card builder is a rectangle made up of individual "...

After commit, variable is still reactive

I'm trying to commit a new task. The expected result should be 'created task with title' but the title is empty because 'formData' is still reactive. Here is code example: // index.vue <form class=&...

Using npm package in Administration component Shopware 6

I want to use an npm package like this Vue.use(npmPackageName) but when I import vue form 'vue' this message appear "Can’t resolve vue" my question is how can I use npm package in the ...

Why is my $emit not transfering my id and working right

i have an id emitted in my component but in the parent component the id is then suddenly undefined. but it is definitely defined. i wonder why the id is suddenly undefined after the emit and is not ...

How make different request in Vuetify Chip

I would like to make different API call for each chip. Let me explain I currently have 4 vuetify chips and I would like for example in the chip 'ideal', get the url of this axios request: '/lnk/plant/...

Vuex Mutation: Cannot read properties of undefined (reading 'Id')

I seem to be running into an odd problem. I have a mutation that removes an object from two different arrays in my state. It works fine most of the time, I add them and remove them with my buttons. ...

Vue3 The template root requires exactly one element.eslint-plugin-vue [4, 4] error

Yesterday I set my enviroment for my project using git lab clone, but this error occurs and all my code appears error, I'm using Laravel Breeze starter kit, and I don't find my .eslintrc.js and vue....

Building Chrome Extensions with Vuejs and Vuecli

I'm currently building a Chrome Extension with a vuejs powered frontend. This worked pretty great using vuecli. Up until the point at which the app started using the Webextension-API. Normal websites ...

Is there a way to measure height of the element before render in Vue.js?

I need to render many text items on the page by grouping them into several blocks. To group items to blocks I need to kno number of lines each text item will have to calculate how many items each ...

Vue.js computed property showing wrong data

I have a leaflet project and I am using a Vue computed property to show the coordinates of a layer. I am implementing functionality to edit the coordinates directly in the block that renders the ...

Vue.js component inline style concatenation

I'm stuck with a vue.js component inline style concatenation. My code is the following: components: { 'twitter-item': { props: ['procolors'], template: '\ <div class="color-quadrat"...

Creating a dynamically stepper in vue

I found some great stepper examples here: https://vuetifyjs.com/en/components/steppers/ Yet, I have multiple steps and most of the code is the same. Only thing that is really changing is: The title ...

How can i use async and await in action object in vuex?

I'm gonna use an API and take it off some information, I use async/ await in mutations but as you know it's not standard that we used async data in mutation, and we have to use it in actions but how ...

Convert multiple class name to one class in html

i am using tailwind pre defined css in my vue project . <p class="bg-white text-black focus:text-red focus:bg-white-2 dark:text-white dark:bg-black dark:focus:bg-black-2 dark:focus:text-yellow&...

Firebase onSnapshot listener: How to handle if doc does not exist yet?

I am building an app where users can tag subjects they are interested in. I am looking for best practices on how to handle the following issue: I have a page that mounts an onSnapshot listener during ...

TypeError: Cannot read properties of undefined (reading 'iconType') in render function - vue 3

I am migrating my vue application from vue 2 to vue 3. I am getting this error while deleting (functional: true) option from a functional component. In my vue 2 application,i was using render function ...

Uppy Dashboard options not being centered in VueJS

The options in the Uppy Dashboard when displayed are being displayed left aligned instead of it being display in center which we thought was the default behavior. Also, how can we customize the ...

V-model on existing data from external api

ran into a bit of an issue. I'm running a next js frontend with a laravel + inertia custom cms, I have my next js app setup so that I can read translation files via an API call to display inside of ...

TypeError: this.getOptions is not a function

I am facing a weird error when I installed Bootstrap. The error is below. I tried uninstalling less-loader and installing [email protected], because I saw it online, but it did nothing. I am unsure ...

Async Jasmine unit test wrong order

I have a onBlur function which gets executed when the blur on an input is activated. Inside this async onBlur function I await the response from another function. When I try to test this the order of ...

How do I capture acceleration of DeviceMotionEvent after button is pressed

I want to capture and save (maybe console.log() too), the acceleration from the moment I press the start button which has startTest(). But I don't know how to do such thing as I have never used these ...

Vuetify treeshaking not working with webpack

I can't figure out why vuetify treeshaking isn't working on my app, since i followed every steps described here. Am I missing something ? I'm not using vue CLI, but webpack 5 with vuetify loader. Here ...

How to define route parameters in Router.js depends on Urls in Nuxt Js?

I use Nuxt composition api in my project. I have 1 detail page and 2 different url comes from my API. I don't want to create different detail pages for every url. I use extendRoutes in my project and ...

Keep alive for just one particular route

Is there any way to restrict keep-alive to only one specific route? https://router.vuejs.org/api/#router-view This keeps all the routes in memory: <keep-alive> <router-view></...

12345678910 Last