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.
vue.js
6,039
questions
83
votes
6
answers
55k
views
Use arrow function in vue computed does not work
I am learning Vue and facing a problem while using arrow function in computed property.
My original code works fine (See snippet below).
new Vue({
el: '#app',
data: {
turnRed: false,
...
- 5,880
93
votes
4
answers
66k
views
VueJS: why is "this" undefined?
I'm creating a component with Vue.js.
When I reference this in any of the the lifecycle hooks (created, mounted, updated, etc.) it evaluates to undefined:
mounted: () => {
console.log(this); // ...
- 55.3k
186
votes
25
answers
1.8m
views
How to solve 'Redirect has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header'?
I am working on an app using Vue js.
According to my setting I need to pass to a variable to my URL when setting change.
<!-- language: lang-js -->
$.get('http://172.16.1.157:8002/...
- 2,938
174
votes
23
answers
257k
views
Vue.js dynamic images not working with webpack
I have a case where in my Vue.js with webpack web app, I need to display dynamic images. I want to show img where file name of images are stored in a variable. That variable is a computed property ...
- 73k
34
votes
8
answers
77k
views
How to use .env variables in Nuxt 2 or 3?
I have .env file in the project root, and in my nuxt config I am using variables to configure ReCaptcha like this:
import dotenv from 'dotenv'
dotenv.config()
export default {
modules: [
[...
- 5,041
5
votes
1
answer
11k
views
How to fix navigator / window / document is undefined in Nuxt
I was trying to determined UserAgent and Retina info inside Nuxt application. But the application is throwing an error and showing navigatior / window is undefined. How can i get these info inside ...
- 689
313
votes
24
answers
475k
views
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 ...
- 11.6k
94
votes
22
answers
104k
views
Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered
I am using Nuxt.js / Vuejs for my app, and I keep facing this error in different places:
The client-side rendered virtual DOM tree is not matching server-rendered content.
This is likely caused ...
- 4,180
13
votes
3
answers
30k
views
CORS error even after setting Access-Control-Allow-Origin or other Access-Control-Allow-* headers on client side
I have a Vue application generated with webpack-simple option. I am trying to make a GET request to https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en but I get the error: ...
- 1,168
192
votes
9
answers
228k
views
How do I use /deep/ or >>> or ::v-deep in Vue.js?
So, I've read here that in Vue.js, you can use /deep/ or >>> in a selector in order to create style rules that apply to elements inside of child components. However, attempting to use this in ...
- 6,775
245
votes
18
answers
291k
views
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 ...
- 7,232
139
votes
7
answers
73k
views
How can I solve "Interpolation inside attributes has been removed. Use v-bind or the colon shorthand"? Vue.js 2
My Vue.js component is like this:
<template>
<div>
<div class="panel-group" v-for="item in list">
...
<...
- 7,006
610
votes
51
answers
815k
views
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 ...
- 22.2k
309
votes
28
answers
366k
views
Vue 2 - Mutating props vue-warn
I started https://laracasts.com/series/learning-vue-step-by-step series. I stopped on the lesson Vue, Laravel, and AJAX with this error:
vue.js:2574 [Vue warn]: Avoid mutating a prop directly since ...
- 3,208
2
votes
1
answer
13k
views
How to add a 3rd party script code into Nuxt?
I'm trying to add the snippet provided by Segment Analytics into nuxt.config.js but I'm getting the following error:
FATAL $config is not defined
What am I doing wrong?
nuxt.config.js:
head: {
...
- 2,641
173
votes
7
answers
82k
views
Communication between sibling components in Vue.js 2.0
Overview
In Vue.js 2.x, model.sync will be deprecated.
So, what is a proper way to communicate between sibling components in Vue.js 2.x?
Background
As I understand Vue.js 2.x, the preferred method ...
- 17.3k
435
votes
13
answers
170k
views
What does the @ mean inside an import path?
I'm starting 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 imports ...
- 20.6k
70
votes
23
answers
130k
views
Vue Router return 404 when revisit to the url
I just enable Vue router history mode. And it work fine when I visit to vue routing via v-href or href. But, when I try to refresh that page or go directly from browser address bar, it just return 404....
- 4,596
7
votes
3
answers
17k
views
How to use any icons with Nuxt or Vue?
I'm facing an error with Nuxtjs when I try to use the vue-fontawesome framework and also the @nuxtjs/fontawesome framework, this is the error:
[nuxt] [request error] Cannot read properties of ...
- 397
73
votes
18
answers
98k
views
Vue 3 Vite - dynamic image src
I'm using Vue 3 with Vite. And I have a problem with dynamic img src after Vite build for production. For static img src there's no problem.
<img src="/src/assets/images/my-image.png" alt=...
- 3,448
21
votes
2
answers
24k
views
Make VueJS and jQuery play nice
This question is related/similar to Using intl-tel-input and vuejs2 together , which is still unanswered.
And VueJS Use prop as data-attribute value which has a solution, but explains a bit the "...
- 1,905
213
votes
42
answers
304k
views
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, ...
user6102188
172
votes
5
answers
171k
views
Returning Promises from Vuex actions
I recently started migrating things from jQ to a more structured framework being VueJS, and I love it!
Conceptually, Vuex has been a bit of a paradigm shift for me, but I'm confident I know what its ...
- 3,973
121
votes
10
answers
102k
views
Vue.js 3 Event Bus
How to create Event Bus in Vue 3?
In Vue 2, it was:
export const bus = new Vue();
bus.$on(...)
bus.$emit(...)
In Vue 3, Vue is not a constructor anymore, and Vue.createApp({}); returns an object ...
- 3,073
41
votes
3
answers
25k
views
Why not always use the index as the key in a vue.js for loop?
I have used vue.js for a couple of projects and I have been using the index as the key in the for loops
<div v-for="(item, index) in items" :key="index"></div>
...and have started to ...
- 1,878
713
votes
16
answers
611k
views
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 ...
- 10.2k
154
votes
6
answers
350k
views
Why is 'type: module' in package.json file?
I upgraded the node and built the existing file.
But it didn't build, and there was an error.
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: │
│ ~~/nuxt....
- 1,817
361
votes
13
answers
402k
views
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 ...
- 73k
110
votes
12
answers
277k
views
How to import and use image in a Vue single file component?
I think this should be simple, but I am facing some trouble on how to import and use an image in Vue single file component. Can someone help me how to do this? Here is my code snippet:
<template ...
- 9,341
5
votes
2
answers
16k
views
How to make a dynamic import in Nuxt?
In my nuxt component I want to use the ace editor:
import Ace from "ace-builds/src-noconflict/ace"
when the component is mounted I am doing the following:
this.editor = Ace.edit...
...
- 264
417
votes
24
answers
719k
views
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?
- 12.4k
113
votes
5
answers
268k
views
Vuejs and Vue.set(), update array
I'm new to Vuejs. Made something, but I don't know it's the simple / right way.
what I want
I want some dates in an array and update them on a event. First I tried Vue.set, but it dind't work out. ...
- 3,686
5
votes
1
answer
5k
views
Nuxt.js vuex store not persisted
I've got some strange issues with my Nuxt.js Setup.
Some States in Store arent persistent, everytime I load another view, they went back to the default value.
pages/test.vue
<template>
<...
- 73
176
votes
14
answers
330k
views
How to reference static assets within vue javascript
I'm looking for the right url to reference static assets, like images within Vue javascript.
For example, I'm creating a leaflet marker using a custom icon image, and I've tried several urls, but ...
- 14.3k
161
votes
13
answers
101k
views
VueJs 2.0 emit event from grand child to his grand parent component
It seems that Vue.js 2.0 doesn't emit events from a grand child to his grand parent component.
Vue.component('parent', {
template: '<div>I am the parent - {{ action }} <child @...
- 8,897
29
votes
3
answers
47k
views
running a vite dev server inside a docker container
I have a Vue-cli app that I'm trying to convert to vite. I am using Docker to run the server. I looked at a couple tutorials and got vite to run in development mode without errors. However, the ...
- 2,262
13
votes
2
answers
12k
views
Vue 3 reactivity not triggered from inside a class instance
Codepen: https://codepen.io/codingkiwi_/pen/XWMBRpW
Lets say you have a class:
class MyClass {
constructor(){
this.entries = ["a"];
//=== example change triggered from INSIDE the ...
- 746
341
votes
17
answers
375k
views
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:
...
- 23.8k
178
votes
8
answers
173k
views
Vuex state on page refresh
My app uses the Firebase API for User Authentication, saving the Login status as a boolean value in a Vuex State.
When the user logs in I set the login status and conditionally display the Login/...
- 2,404
157
votes
34
answers
333k
views
How can I solve error "gypgyp ERR!ERR! find VSfind VS msvs_version not set from command line or npm config"?
I want to install Adonis Admin. When I run npm install I get:
> [email protected] install C:\laragon\www\adonis-admin\node_modules\sqlite3
> node-pre-gyp install --fallback-to-build
node-pre-gyp ...
- 12.9k
65
votes
4
answers
182k
views
importing a package in ES6: "Failed to resolve module specifier "vue""
Trying to follow some Vue tutorials and I can't currently import Vue in a .js file and then import this file in my index.html. This is how I'm importing the script in my index.html:
<script src="./...
- 3,525
285
votes
6
answers
260k
views
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: {
...
- 5,678
256
votes
5
answers
308k
views
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.id"> {{ r.job_title }} </a>
</div>
I can't figure out how to add the value of r.id ...
- 6,245
233
votes
19
answers
239k
views
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 ...
- 10.8k
188
votes
29
answers
517k
views
[Vue warn]: Property or method is not defined on the instance but referenced during render
The following code has been written to handle an event after a button click
var MainTable = Vue.extend({
template: "<ul>" +
"<li v-for='(set,index) in settings'>" ...
- 2,199
47
votes
2
answers
47k
views
Axios can't set data
Here's my data:
data: function(){
return {
contas: [{id: 3,
nome: "Conta de telefone",
pago: false,
valor: 55.99,
vencimento: "22/08/2016"}]...
375
votes
6
answers
231k
views
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'...
- 3,881
312
votes
22
answers
429k
views
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 '...
- 3,487
312
votes
9
answers
268k
views
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 ...
- 3,995
307
votes
2
answers
180k
views
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 ...
- 15.9k