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.
13,187
questions
237
votes
8
answers
118k
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">
...
- 9,868
176
votes
9
answers
300k
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 ...
- 10.9k
168
votes
7
answers
189k
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,841
136
votes
14
answers
141k
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,636
116
votes
10
answers
98k
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 ...
- 2,963
105
votes
8
answers
110k
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,650
102
votes
8
answers
121k
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,202
100
votes
6
answers
86k
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,068
86
votes
10
answers
103k
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,198
81
votes
8
answers
154k
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,682
76
votes
8
answers
172k
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.2k
70
votes
14
answers
92k
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,398
64
votes
9
answers
142k
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-...
- 11.6k
64
votes
3
answers
111k
views
Vue 3 Composition API - How to get the component element ($el) on which the component is mounted?
I want to use onMounted to initiate a third-party library. To do that I need the component element as its context. In Vue 2 I would get it with this.$el but not sure how to do it with composition ...
- 1,334
63
votes
7
answers
68k
views
Props typing in Vue.js 3 with TypeScript
I'm trying to type hint my props in a Vue 3 component, with composition API.
So, I'm doing this:
<script lang="ts">
import FlashInterface from '@/interfaces/FlashInterface';
import { ...
- 959
62
votes
6
answers
119k
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,682
62
votes
3
answers
184k
views
Vue.js run a code in mounted and again for restart functionality
I am creating a game in VueJS, where, when the page loads, I want a method to fire, make an ajax call to an external API and create a bunch of data properties. When the player wins the round, I want ...
- 1,701
59
votes
7
answers
91k
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,233
58
votes
7
answers
60k
views
Vue.js 3 and typescript : Property '$store' does not exist on type 'ComponentPublicInstance
Can't find anything to solve this seemingly obvious issue.
Just upgraded from Vue 2 to Vue 3 and Vuex with Typescript.
this.$store doesn't seem to be accessible, despite following the Vue 3 ...
- 864
58
votes
1
answer
56k
views
How to define component name in Vue3 setup tag? [duplicate]
In the export default {} method, there is a name property to define the component name, which is useful for the Vue Devtools, but what's the equivalent in the new <script setup> syntax?
- 1,170
57
votes
5
answers
131k
views
Vue Composition API: Defining emits
When defining custom events Vue encourages us to define emitted events on the component via the emits option:
app.component('custom-form', {
emits: ['inFocus', 'submit']
})
Using Vue 3's ...
- 2,280
57
votes
6
answers
69k
views
Vue.js 3 - replace/update reactive object without losing reactivity
I need to update a reactive object with some data after fetching:
setup(){
const formData = reactive({})
onMounted(() => {
fetchData().then((data) => {
if (data) {
...
- 1,723
54
votes
2
answers
36k
views
What is the difference between ref, toRef and toRefs?
I have just started working with Vue 3 and the Composition API.
What are the differences between ref, toRef and toRefs?
- 1,027
53
votes
4
answers
70k
views
Vue 3 ::v-deep usage as a combinator has been deprecated. Use ::v-deep(<inner-selector>) instead
I started getting the following warning in Vue 3 with the ::v-deep usage.
::v-deep usage as a combinator has been deprecated. Use
::v-deep(<inner-selector>) instead
The CSS looks like as ...
- 4,474
52
votes
4
answers
99k
views
How can I use async/await in the Vue 3.0 setup() function using Typescript
(This question has been answered for JavaScript, see below, but this question is specific for TypeScript, which behaves differently)
I'm trying to use async functionality in Vue3.0 using typescript.
...
- 4,682
49
votes
12
answers
44k
views
Vue 3 – <Transition> renders non-element root node that cannot be animated
App.vue has a transition tag to fade the pages out and in.
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in" appear>
<...
- 657
48
votes
13
answers
130k
views
How to set compilerOptions.isCustomElement for VueJS 3 in Laravel project
I'm working on VueJS 3 inside Laravel project and I'm using a JS file which providing me with elements that I use for markdown toolbar. Basically it's a set of functions that provides me with buttons ...
- 947
48
votes
2
answers
39k
views
Why did I get blank (empty) content when I used async setup() in Vue.js 3?
Problem
I use async setup() in Vue.js 3, but I got my HTML content to disappear. My component template did not insert to HTML, but when I remove the async and await prefix, my HTML content comes back. ...
- 491
47
votes
2
answers
66k
views
Vue 3 Composition API data() function
Reading the composition api documentation for Vue 3, I didn't quite understand how the new Composition API works. Could you please explain where the data() function has gone? And if it is no longer ...
- 780
46
votes
4
answers
83k
views
How to get params of router in Vue 3?
I created a project in Vue.js 3 and TypeScript.
router.js
{
path: "/app/:id",
name: "Detail",
component: Detail,
props: true
},
App.js
<script lang="ts">
....
- 763
44
votes
5
answers
56k
views
Using Font Awesome in Vue 3
I'm trying to use Font Awesome with Vue 3.
I have it in my package.json
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-brands-...
- 593
43
votes
2
answers
67k
views
How to emit event from child to parent in Vue3 with <script setup> syntax?
I have the following component:
<SomeModal :is-modal-active="isAddingThing" @close="isAddingThing = false" />
Inside that component looks like this:
<script setup>
...
- 16.4k
43
votes
4
answers
69k
views
Vuejs 3 webpack : Problem with vue-template-compiler
I am trying to integrate vuejs 3 to an existing project which uses webpack. I read about vue-loader, so I am trying to use it.
In the official documentation I have this:
Every time a new version of ...
- 2,458
42
votes
2
answers
58k
views
How to use Vue.prototype or global variable in Vue 3?
Like the title, I want to add Axios into Vue prototype. So when I want to use it, I can use it like this.$axios instead of importing it every time.
CODE:
//plugins/axios.ts
import axios from 'axios'
...
- 423
42
votes
2
answers
50k
views
How to re-mount a component in VueJS?
I have a component which is mounted as part of the DOM rendering. The skeleton of the application is
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title&...
- 28.7k
42
votes
5
answers
29k
views
Vitest - @ src folder alias not resolved in test files
I have a vue3 project using Vite/Vitest, as recommanded in Vue.js documentation.
Here is the structure of the project:
src
components
// my Vue components here, potentially in sub-folders. For ...
- 2,942
40
votes
7
answers
48k
views
How to `emit` event out of `setup` method in vue3?
I know I can call the emit method from the setup method, but is there any way to emit event from any other functions without passing the emit method from setup method(not the the functions in the ...
- 7,018
39
votes
6
answers
39k
views
can't use template ref on component in vue 3 composition api
I want to get the dimensions of a vue.js component from the parent (I'm working with the experimental script setup).
When I use the ref inside a component, it works as expected. I get the dimensions:
/...
- 4,142
37
votes
2
answers
41k
views
Vue Router - catch all wildcard not working
I'm using Vue Router with Vue 3 and am trying to add a catch-all route to redirect the user if they try and access an invalid URL. When I try and use the wildcard (*), i get the following error logged ...
- 928
37
votes
2
answers
53k
views
How do I do Vue.set() in Vue 3?
As explained here, Vue 3 has moved a bunch of functions that were available on the global Vue instance. They are now named imports. This leads me to think I should be able to do import {set} from 'vue'...
- 28.1k
37
votes
7
answers
56k
views
After upgrading to vue 3 : "Cannot find module '@vue/compiler-sfc/package.json' "
After upgrading to vue 3 :
yarn add vue@next
I get this error: "Cannot find module '@vue/compiler-sfc/package.json" when executing yarn electron:serve
(base) marco@pc01:~/webMatters/...
- 2,940
35
votes
7
answers
86k
views
how to use sass using in vuejs3/vite
I starting with vite / vuejs 3
after installing sass with npm install -D sass I tried to add my _variables.js file this to vite.config.js
css: {preprocessorOptions: {scss: {additionalData: `@import&...
- 1,197
35
votes
5
answers
53k
views
Vue Array converted to Proxy object
I'm new to Vue. While making this component I got stuck here.
I'm making an AJAX request to an API that returns an array using this code:
import axios from 'axios';
export default {
data() {
...
- 515
34
votes
9
answers
34k
views
How to properly reset Vue Composition Api's reactive values
I'm wondering how should I reset a reactive in vuejs setup? (i know if change it to the ref and using view.value will solve this problem, but there should be an answer to this for using reactive)
...
- 5,617
34
votes
2
answers
78k
views
How does Computed work in Vue 3 script setup?
I'm trying to get computed to work in <script setup>:
<template>
<div>
<p>{{ whatever.get() }}</p>
</div>
</template>
<script setup>
import {...
- 4,845
34
votes
9
answers
83k
views
Vue.js - Component is missing template or render function
In Vue 3, I created the following Home component, 2 other components (Foo and Bar), and passed it to vue-router as shown below. The Home component is created using Vue's component function, whereas ...
- 3,578
33
votes
18
answers
72k
views
Vue 3 The template root requires exactly one element. eslint-plugin-vue
After scaffolding a Vue 3 project I noticed an error in my App.vue.
A functional component that renders the matched component for the given path. Components rendered in can also contain its own , ...
- 3,179
33
votes
2
answers
18k
views
Why Pinia vs Vuex for Vue 3? [closed]
I am a Vue.js developer who is coming up to speed with the the new features added to Vue 3, from Vue 2, namely the Composition API (added in Vue 3).
For State Management, it appears that along with ...
- 4,163
33
votes
3
answers
22k
views
String replacements in index.html in vite
I am trying to inject some strings into the index.html of a Vite app (using vue3 template). In a vue-cli project for example we would have
<link rel="icon" href="<%= BASE_URL %>...
- 1,323
33
votes
5
answers
145k
views
Vue 3 - "Failed to resolve component" with global components
My Vue components work fine when declared in the top level HTML file, like this
<body>
<div class='app' id='app'>
<header-bar id='headerBar'></header-bar>
...
- 15.9k