Category "vue-composition-api"

How to integrate paypal Payment Button Vuejs3 Composition API (setup function)

I'm trying to integrate PayPal buttons with my Vuejs3 project using Composition API (setup ) but all what i get is errors i try to integrate it without using se

Dynamic component doesn't display anything in Vue3?

I have a dynamic component in my project like that can be "Login" or "RegisterForm" But it doesn't display anything. <script setup lang="ts"> import { re

How to use Axios with Vue 3 Composition API

I am attempting to build a Pokemon filtered search app with Vue 3 and Composition API based on the following tutorial: https://www.youtube.com/watch?v=QJhqr7jqx

Vue 3 Composition API - How to get the component element ($el) on which component is mounted

I want to use onMounted to initiate 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 s

How to define `name` and `inheritAttrs` in `<script setup>`?

Options API: <script> import { defineComponent } from 'vue' export default defineComponent({ name: 'CustomName', // 👈 inheritAttrs: f

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 w

Vue 3 Composition API - How to specify a prop in setup()

I wrote a "loading state" mixin for Vue 2: export default { props: { loading: { type: Boolean, default: false }, }, data () { retu

Vue3 TypeError: template ref.value is null

how can I clean my console from the following error: TypeError: ref.value is null The error comes only with a resize event. Each time I resize the window, I re

Vue3- Using Vitest toHaveBeenCalled() method

I am running a vue3 application using the Composition API and the setup() hook. I am using Vitest as unit-test framework. (v 0.6.1) I have the following sample

How to trigger graphql useQuery on demand only once?

With the help of graphql-codegenerator we created a graphql useQuery that correctly retrieves data from the backend. When a string is entered into an input fiel

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 '@/interfac

How to call method in setup of vuejs3 app?

In vuejs3 app I retrieve data from db with axios in method, like : <script> import appMixin from '@/appMixin' import app from './../../App.vue' // esl

How to validate a form with ref in Vue Composition API

With the Options API, I validated my form like this: template: <v-form ref="form" v-model="valid" lazy-validation @submit.prevent> ... script: methods: {

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> <butto

Call a function from another component using composition API

Below is a code for a header and a body (different components). How do you call the continue function of the component 2 and pass a parameter when you are insid

How to use v-model on component in vue 3 script setup

I want to add a v-model on a component but I got this warning: [Vue warn]: Component emitted event "input" but it is neither declared in the emits option nor as

Vue 3 - emit is not a function

I'm having a strange problem using emit in Vue 3 Composition API + Vite. I want to make a simple emit from a child component to a parent. The code of the child:

Vue.js 3 use autofocus on input with ref inside a method

I worked with Vue2, but I recently try Vue 3. I have simple problem: <input ref="myinput" /> <button @click="submitData" /> I want to set "focus"

Extract modelValue logic to composable

I'm transitioning from Vue 2 to Vue 3 and I'm having trouble with composables. I have a bunch of components that inherits modelValue. So, for every component th

Vue 3 how to get information about $children

This my old code with VUE 2 in Tabs component: created() { this.tabs = this.$children; } Tabs: <Tabs> <Tab title="tab title"> .... <