Questions tagged [vue.js]

Vue.js is an open-source, progressive JavaScript framework for building user interfaces that aims to be incrementally adoptable. Vue.js is mainly used for front-end development and requires an intermediate level of HTML and CSS. Vue.js questions are highly version specific and should always be tagged with [vuejs2] or [vuejs3] in addition to this tag.

Filter by
Sorted by
Tagged with
790 votes
21 answers

What is "not assignable to parameter of type never" error in TypeScript?

Code is: const foo = (foo: string) => { const result = [] result.push(foo) } I get the following TS error: [ts] Argument of type 'string' is not assignable to parameter of type 'never'. What ...
Lev's user avatar
  • 14k
698 votes
16 answers

Vue.js - How to properly watch for nested data

I'm trying to understand how to properly watch for some prop variation. I have a parent component (.vue files) that receive data from an ajax call, put the data inside an object and use it to render ...
Plastic's user avatar
  • 9,884
564 votes
49 answers

Why does Prettier not format code in VS Code?

In my Nuxt application where ESlint and Prettier are installed and enabled, I switched to Visual Studio Code. When I open a .vue file and press CMD+ Shift + P and choose Format Document, my file does ...
Billal Begueradj's user avatar
537 votes
13 answers

How can I get query parameters from a URL in Vue.js?

How can I fetch query parameters in Vue.js? E.g. Can’t find a way to fetch or do I need to use pure JS or some library for this?
Rob's user avatar
  • 10.9k
492 votes
21 answers

How to listen for 'props' changes

In the VueJs 2.0 docs I can't find any hooks that would listen on props changes. Does VueJs have such hooks like onPropsUpdated() or similar? Update As @wostex suggested, I tried to watch my property ...'s user avatar
  • 20.8k
475 votes
18 answers

How to fix 'Unchecked runtime.lastError: The message port closed before a response was received' chrome issue?

I'm using VueJS and Laravel for my project. This issue started to show lately and it shows even in the old git branches. This error only shows in the Chrome browser.
3UMF's user avatar
  • 5,212
434 votes
16 answers

Disable input conditionally (Vue.js)

I have an input: <input type="text" id="name" class="form-control" name="name" v-model="" :disabled="validated ? ''...
Zaffar Saffee's user avatar
428 votes
13 answers

What does the @ mean inside an import path?

I'm starting out a new vue.js project so I used the vue-cli tool to scaffold out a new webpack project (i.e. vue init webpack). As I was walking through the generated files I noticed the following ...
Chris Schmitz's user avatar
397 votes
22 answers

Can you force Vue.js to reload/re-render?

Just a quick question. Can you force Vue.js to reload/recalculate everything? If so, how?
Dave's user avatar
  • 12.1k
368 votes
6 answers

Difference between v-model and v-bind on Vue.js?

I'm learning Vue with an online course and the instructor gave me an exercise to make an input text with a default value. I completed it using v-model but, the instructor chose v-bind:value, and I don'...
Gustavo Dias's user avatar
  • 3,811
363 votes
16 answers

Vue.js - How to remove hashbang #! from url?

How to remove hashbang #! from url? I found option to disable hashbang in vue router documentation ( ) but this option removes #! and just put # Is ...
DokiCRO's user avatar
  • 4,575
349 votes
17 answers

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 ...
Juliette's user avatar
  • 4,309
340 votes
13 answers

Can I pass parameters in computed properties in Vue.Js

is this possible to pass parameter in computed properties in Vue.Js. I can see when having getters/setter using computed, they can take a parameter and assign it to a variable. like here from ...
Saurabh's user avatar
  • 71.6k
336 votes
15 answers

Call a Vue.js component method from outside the component

Let's say I have a main Vue instance that has child components. Is there a way of calling a method belonging to one of these components from outside the Vue instance entirely? Here is an example: ...
harryg's user avatar
  • 23.3k
309 votes
22 answers

How to watch store values from vuex?

I am using vuex and vuejs 2 together. I am new to vuex, I want to watch a store variable change. I want to add the watch function in my vue component This is what I have so far: import Vue from '...
raffffffff's user avatar
  • 3,457
309 votes
9 answers

Vue v-on:click does not work on component

I'm trying to use the on click directive inside a component but it does not seem to work. When I click the component nothings happens when I should get a 'test clicked' in the console. I don't see any ...
Javier Cárdenas's user avatar
308 votes
22 answers

How to add external JS scripts to VueJS Components?

I've to use two external scripts for the payment gateways. Right now both are put in the index.html file. However, I don't want to load these files at the beginning itself. The payment gateway is ...
Gijo Varghese's user avatar
304 votes
22 answers

'Property does not exist on type 'never'

This is similar to #40796374 but that is around types, while I am using interfaces. Given the code below: interface Foo { name: string; } function go() { let instance: Foo | null = null; ...
Ray Booysen's user avatar
301 votes
28 answers

Vue 2 - Mutating props vue-warn

I started series. I stopped on the lesson Vue, Laravel, and AJAX with this error: vue.js:2574 [Vue warn]: Avoid mutating a prop directly since ...
Dariusz Chowański's user avatar
301 votes
2 answers

Difference between the created and mounted events in Vue.js

Vue.js documentation describes the created and mounted events as follows: created Called synchronously after the instance is created. At this stage, the instance has finished processing the ...
lesssugar's user avatar
  • 15.5k
300 votes
11 answers

How to call function on child component on parent events

Context In Vue 2.0 the documentation and others clearly indicate that communication from parent to child happens via props. Question How does a parent tell its child an event has happened via props?...
jbodily's user avatar
  • 3,653
288 votes
12 answers

Methods vs Computed in Vue

What is the main difference between a method and a computed value in Vue.js? They seem the same and interchangeable to me.
Bootstrap4's user avatar
  • 3,671
284 votes
4 answers

Passing event and argument to v-on in Vue.js

I pass a parameter in v-on:input directives. If I don't pass it, I can access the event in the method. Is there any way I can still access the event when passing the parameter to the function? Note ...
geckob's user avatar
  • 7,700
277 votes
32 answers

error /node_modules/node-sass: Command failed

When I tried install vue store front in my local but when I tried "yarn install" command I get following error. How can I solve this error? How can I solve this error? error /var/www/html/vue-...
Adil's user avatar
  • 3,271
275 votes
6 answers

Display unescaped HTML in Vue.js

How can I manage to get HTML interpreted inside a mustache binding? At the moment the break (<br />) is just displayed/escaped. Small Vue app: var logapp = new Vue({ el: '#logapp', data: { ...
Mike's user avatar
  • 5,446
267 votes
15 answers

Vue Js - Loop via v-for X times (in a range)

How can I repeat a loop via v-for X (e.g. 10) times? <!-- want to repeat this (e.g.) 10 times --> <ul> <li v-for="item in shoppingItems"> {{ }} - {{ item....
MikeCaine's user avatar
  • 3,401
264 votes
13 answers

Vuex Action vs Mutations

In Vuex, what is the logic of having both "actions" and "mutations?" I understand the logic of components not being able to modify state (which seems smart), but having both actions and mutations ...
Kobi's user avatar
  • 4,013
259 votes
13 answers

forEach is not a function error with JavaScript array

I'm trying to make a simple loop: const parent = this.el.parentElement console.log(parent.children) parent.children.forEach(child => { console.log(child) }) But I get the following error: ...
alexchenco's user avatar
  • 53.6k
256 votes
2 answers

Is there a way to dispatch actions between two namespaced vuex modules?

Is it possible to dispatch an action between namespaced modules? E.g. I have Vuex modules "gameboard" and "notification". Each are namespaced. I would like to dispatch an action ...
Chris Schmitz's user avatar
247 votes
5 answers

How to pass a value from Vue data to href?

I'm trying to do something like this: <div v-for="r in rentals"> <a bind-href="'/job/'"> {{ r.job_title }} </a> </div> I can't figure out how to add the value of ...
bbennett36's user avatar
  • 6,075
241 votes
18 answers

vuejs update parent data from child component

I'm starting to play with vuejs (2.0). I built a simple page with one component in it. The page has one Vue instance with data. On that page I registered and added the component to html. The ...
Gal Ziv's user avatar
  • 6,942
241 votes
4 answers

Difference between @click and v-on:click Vuejs

The questions should be enough clear. But I can see that someone use: <button @click="function()">press</button> Someone use: <button v-on:click="function()">...
LorenzoBerti's user avatar
  • 6,734
240 votes
15 answers

What is the difference between the views and components folders in a Vue project?

I just used the command line (CLI) to initialize a Vue.js project. The CLI created a src/components and src/views folder. It has been a few months since I have worked with a Vue project and the ...
drsnark's user avatar
  • 2,823
239 votes
19 answers

Vue.js redirection to another page

I'd like to make a redirection in Vue.js similar to the vanilla javascript window.location.href = 'some_url' How could I achieve this in Vue.js?
Jimmy Obonyo Abor's user avatar
236 votes
12 answers

Vuejs: Event on route change

On my main page I have dropdowns that show v-show=show by clicking on the link @click = "show=!show" and I want to set show=false when I change the route. Please advise me on how to realize ...
kipris's user avatar
  • 2,919
235 votes
12 answers

VueJS conditionally add an attribute for an element

In VueJS we can add or remove a DOM element using v-if: <button v-if="isRequired">Important Button</button> but is there a way to add / remove attributes of a dom element eg for the ...
Don Smythe's user avatar
  • 9,254
229 votes
18 answers

How to implement debounce in Vue2?

I have a simple input box in a Vue template and I would like to use debounce more or less like this: <input type="text" v-model="filterKey" debounce="500"> However ...
MartinTeeVarga's user avatar
229 votes
15 answers

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 this: ...
Saurabh's user avatar
  • 71.6k
225 votes
5 answers

How to call an action from within another action in Vuex?

I have the following setup for my actions: get1: ({commit}) => { //things this.get2(); //this is my question! }, get2: ({commit}) => { //things }, I want to be able to call one action ...
muttley91's user avatar
  • 12.3k
218 votes
21 answers

How to change port number in vue-cli project

How to change Port number in Vue-cli project so that it run's on another port instead of 8080.
salman's user avatar
  • 2,317
215 votes
3 answers

Vuex - passing multiple parameters to mutation

I am trying to authenticate a user using vuejs and laravel's passport.I am not able to figure out how to send multiple parameters to the vuex mutation via an action. - store - export default new Vuex....
Schwesi's user avatar
  • 4,753
214 votes
4 answers

Vue 'export default' vs 'new Vue'

I just installed Vue and have been following some tutorials to create a project using the vue-cli webpack template. When it creates the component, I notice it binds our data inside of the following: ...
rockzombie2's user avatar
  • 2,845
209 votes
41 answers

Detect click outside element

How can I detect a click outside my element? I'm using Vue.js so it's gonna be outside my templates element. I know how to do it in Vanilla JS, but I'm not sure if there's a more proper way to do it, ...
user avatar
203 votes
14 answers

Using Environment Variables with Vue.js

I've been reading the official docs and I'm unable to find anything on environment variables. Apparently there are some community projects that support environment variables but this might be overkill ...
Edgar Quintero's user avatar
203 votes
6 answers

[Vue warn]: Cannot find element

I'm using Vuejs. This is my markup: <body> <div id="main"> <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div> </div> </body> ...
dopatraman's user avatar
  • 13.4k
202 votes
3 answers

Optional param in vuejs router

I need to route to a certain component in two ways - one with a param, one without. I have searched for optional params and somehow can't find much info. So my route: { path: '/offers/:member', ...
yoyoma's user avatar
  • 3,356
196 votes
18 answers

Do we have router.reload in vue-router?

I see in this pull request: Add a router.reload() Reload with current path and call data hook again But when I try issuing the following command from a Vue component: this.$router.reload() I get ...
Saurabh's user avatar
  • 71.6k
195 votes
12 answers

How do I hide the VueJS syntax while the page is loading?

maybe this is a trivial question. so, when I run my vuejs application on browser with enables throttling download speed (sets to low connection). I got unfinished vue syntax output in browser. I ...
antoniputra's user avatar
  • 4,261
193 votes
20 answers

Vue: How do I call multiple functions with @click?

How can I call multiple functions in a single @click? (aka v-on:click)? So far I tried Splitting the functions with a semicolon: <div @click="fn1('foo');fn2('bar')"> </div>; ...
S Panfilov's user avatar
  • 16.7k
190 votes
4 answers

Default values for Vue component props & how to check if a user did not set the prop?

1. How can I set the default value for a component prop in Vue 2? For example, there is a simple movies component that can be used in this way: <movies year="2016"><movies> Vue.component(...
PeraMika's user avatar
  • 3,559

2 3 4 5