How to set URL query params in Vue with Vue-Router

I am trying to set query params with Vue-router when changing input fields, I don't want to navigate to some other page but just want to modify url query params on the same page, I am doing like...

How to run VueJS code only after Vue is fully loaded and initialized?

I am working on a Vue component that will be placed on multiple websites via a CMS system. The issue I encounter is that even if my js scripts loading order is correct, sometime I get this...

Vue Router: Keep query parameter and use same view for children

I'm rewriting an existing Angular 1 application with Vue. The application always needs to authenticate an user by locale, id and token before entering any views. Respecting the conventions of our...

Intellisense not working for .vue files

I am working with Vue and Typescript in Visual Studio Code and the Vetur extension. The problem: when I update any code, intellisense won't recognise the changes when working in a .vue file. In...

Deploy Vue to GitHub Pages. Error with vue-router

I was experiencing some trouble while deploying a Vue application build with vue-cli v3.0. to GitHub Pages. I'm using subtree to send the dist folder only to gh-pages branch. First the problem was...

plyr and vue.js: accessing the video duration by a computed property

I'm trying to dynamically load content based on the duration of the video I'm showing. I'm having trouble reading the duration property. Does it have something to do with the timing of when plyr...

Toggle floating filter in Ag-Grid?

I am trying to have the display of the floating filter be determined by a switch or button click. Seems simple enough. I should just be able to toggle between true and false, supply that value to...

On click outside of some element in vue without packages

I am wondering how can we hide all shown elements on click outside from those elements in vue: <button @click="div1=true">Show div 1</button> <div v-if="div1">DIV 1</div> <button...

How to call Vue components in my .cshtml pages?

I have a ASP.NET Core MVC project in conjunction with Vue.js. I am only using Vue.js to make my pages reactive. My goal is to create a main vue instance based on a div in the _layout.cshtml file...

entrypoint size limit: code splitting to limit the size of entrypoints in vue cli 3.x

I get the following warning after building my project with vue cli 3: After some look up I found out that there is no need to create a webpack.config.js as it is written here (or here): The...

VueJS and FontAwesome Import - Module not found: Error: Can't resolve '@fortawesome/fontawesome-svg-core'

Module not found: Error: Can't resolve '@fortawesome/fontawesome-svg-core' in '/project/src/plugins' Been trying to follow up this tutorial...

use `mapActions` or `mapGetters` with Vuex 4 and Vue 3

Anybody knows how to use mapState or mapGetters with Vue 3 in the setup function ? I know that is possible to use the store with the useStore hook but with this hook We import all the store while...

How make tinymce able to upload image in vue js

I am using tinymce in my vue js app but it is not allowing me to upload image . i am using this package import Editor from '@tinymce/tinymce-vue' I think i am missing any plugin or tool...

AOS in Nuxt doesn't work when switching between pages

I am trying to use AOS in my Nuxt project in "universal" mode but I am experiencing an issue when I switch pages. The tool works fine when I manually reload the page but for some reason AOS stops...

How to correctly inherit from a parent component in Typescript?

I'm using Vue v2 with Typescript and I'm trying to extend a parent class: My parent class is called BaseSelect and looks like this: <template> <select :value="value" @change="$emit('change',...

Error: PostCSS plugin tailwindcss requires PostCSS 8

I installed the new tailwindcss version 2.0 and I've got the following error. I tried to uninstall postcss and tailwindcss but it does not work. Need help. Module build failed (from...

Vue's composition API ref contains data returns null when .value is called

I have a composable that fetches and returns ref documents in real-time from Firestore. The ref contains data but when I call .value in the setup(), null is returned. The composable is as...

Dynamic component in Vue3

A simple working example of a Vue2 dynamic component <template> <div> <h1>O_o</h1> <component :is="name"/> <button @click="onClick">Click me !</button> ...

CORS Error: What is the correct way to configure Symfony 5 to accept CORS?

Objective I'm attempting to send a request from a Vue 3 typescript frontend to a Symfony 5 API. Using the NelmioCorsBundle The request is working in Insommia (postman) but is not working in...

How can I pass class and style attributes on a vue component to a different element like $attrs?

I have a single file component called confirm-document that looks something like this: Sandbox <template> <v-dialog> <template v-slot:activator="{ on }"> <v-btn v-bind="$attrs"...

How to use ion-nav with Vue?

I'm interested in the usage of ion-nav and I want to learn how to use it with Vue. Though, I cannot find any example or specific documentation that clarifies the way we can use it. I only found...

Vue 3 Date time Format in moment.js?

I am struggling to convert the date-time formate in Vue.js 3. Somehow moment.js not working in Vue 3 version as I see. can anyone help me? Thanks vue file <template> <div> <p...

Personal Vue 3 component package missing template or render function

I recently uploaded my own Vue 3 component to NPM to make it usable for others. When using it in other projects it gives this warning: [Vue warn]: Component is missing template or render function....

warning in vue-router 3.5.1: In Vue Router 4, the v-slot API will by default wrap its content with an <a> element

While using "vue": "^2.6.12" & "vue-router": "^3.5.1", I receive this warning after each reload of the page: [vue-router] In Vue Router 4, the v-slot API will by default wrap its content with an...

vue test utils TypeError: Cannot destructure property `config` of 'undefined' or 'null'

I'm doing just simple unit test with vue test utils. but It's not working. I've no clue.... help me I installed this things..... > $ npm i -D jest @vue/test-utils vue-jest jest-serializer-vue...

Failed to install Vuex in Vue3

I want to install Vuex but I get an error. // error npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found:...

How do I use Vue3 with vue-jest?

I have the following dependency... "vue-jest": "latest", But when I run npm install I get... npm WARN ERESOLVE overriding peer dependency npm WARN Found: [email protected] npm WARN node_modules/vue npm...

Vue 3 / Typescript: "Cannot find name" in template variable

In Vue 3 / Typescript, I am getting the following error: "Cannot find name", when referencing a data variable into the ... area. How can I solve this? Please see the attached screenshot. Many...

Unable to use swiper/vue dependencies not found

"vue": "^2.6.14" "swiper": "^7.0.5", import { Swiper, SwiperSlide } from 'swiper/vue'; import 'swiper/css'; i try default import as per example but: These dependencies were not...

How to extract common props with vue3 in SFC `<script setup>`

Sometimes we can extract common props using props in defineComponent function as below. Both works in vue2/vue3 but not in SFC. // common-props.js export default { commonProps: { enabled:...