Questions tagged [vuejs3]
Use this tag for questions specific to version 3 of Vue.js, an open-source, progressive Javascript framework for building user interfaces.
vuejs3
13,539
questions
253
votes
8
answers
129k
views
ref vs reactive in Vue 3?
Looking at some examples of some people's preview tutorials for Vue 3. [Currently beta right now]
I've found two examples:
Reactive
<template>
<button @click="increment">
...
- 10.1k
180
votes
9
answers
315k
views
How to watch props change with Vue Composition API / Vue 3?
While Vue Composition API RFC Reference site has many advanced use scenarios with the watch module, there are no examples of how to watch component props.
Neither is it mentioned in Vue Composition ...
- 11k
174
votes
8
answers
200k
views
Using Bootstrap 5 with Vue 3
I want to use Bootstrap 5 with Vue 3. As Bootstrap 5 uses vanilla JS (no JQuery), can I use Bootstrap 5 directly in a Vue 3 project (without using Bootstrap-Vue)? Can someone guide me how to use ...
- 1,901
142
votes
14
answers
154k
views
`Vue3 - Vite` project alias src to @ not working
I have installed the project with vue3 - vite importing a component like
import Component from '../../../../components/Component.vue'
i just want to alias the src folder and do
import Component from '...
- 2,696
121
votes
10
answers
103k
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,083
119
votes
8
answers
125k
views
How can I use Vite env variables in vite.config.js?
With the following .env in my Vite project:
# To prevent accidentally leaking env variables to the client, only
# variables prefixed with VITE_ are exposed to your Vite-processed code
VITE_NAME=...
- 9,978
108
votes
6
answers
92k
views
vue 3 emit warning " Extraneous non-emits event listeners"
I am trying to emit data from child to parent using the composition API
I get the following warning.
[Vue warn]: Extraneous non-emits event listeners (updatedcount) were passed to component but could ...
- 2,188
105
votes
8
answers
127k
views
How to use props in <script setup> in vue3
Just like the title says,
related Links:
New script setup (without ref sugar)
<template>
<TopNavbar title="room" />
<div>
{{ no }}
</div>
</template>
...
- 1,232
93
votes
10
answers
116k
views
Vue 3 passing array warning: Extraneous non-props attributes were passed to component but could not be automatically inherited
please, I'm learning a VueJS 3 and I have probably begineer problem. I have warn in browser developer console like this one:
The Message is:
[Vue warn]: Extraneous non-props attributes (class) were ...
- 1,288
84
votes
8
answers
161k
views
Add global variable in Vue.js 3
How to add a global variable in Vue.js 3?
In Vue.js 2 we use this in the main.js file:
Vue.prototype.$myGlobalVariable = globalVariable
- 2,900
79
votes
8
answers
178k
views
How to disable eslint rule max line length for paragraph in <template> of vue.js?
I am using airbnb eslint and currently I am getting error:
error: Line 6 exceeds the maximum line length of 100 (max-len) at
path/to/file.vue:6:1:
<template lang="pug">
div
....
- 16.3k
73
votes
6
answers
137k
views
How to configure proxy in Vite?
I was trying to follow the docs and created vite.config.js like this:
const config = {
outDir: '../wwwroot/',
proxy: {
// string shorthand
'/foo': 'http://localhost:4567',
// with ...
- 4,872
73
votes
18
answers
100k
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
73
votes
8
answers
158k
views
How to get $refs using Composition API in Vue3?
I am trying to get $refs in Vue 3 using Composition API. This is my template that has two child components and I need to get reference to one child component instance:
<template>
<comp-...
user5182503
65
votes
8
answers
102k
views
How to define type for ref(binding on template) In Vue3, using TypeScript?
Template:
<tremplate>
<div ref="element"></div>
</template>
Script:
export default {
setup() {
const element = ref(null);
return {
element,
};
...
- 1,293