Questions tagged [vue-composition-api]
Introducing an innovative collection of VueJS APIs that empower the seamless integration of component logic through additive and function-based capabilities.
Within my code, I have a simple file structured like this: <script setup> import { ref } from 'vue' import TheHeader from '@/components/_headerbar/TheHeader.vue' import TheSidebar from '@/components/_sidebar/TheSidebar.vue&ap ...
Currently, I am working on implementing a select component that can accept an array of any type. However, I am facing some challenges in defining the generic and where to specify it. My project involves using <script setup> with TypeScript. Here is ...
I recently built a Vue App and incorporated Vuex for state management. Here is how I set up my app initially: import { createApp } from "vue"; import axios from "axios"; import App from "./App.vue"; import router from "./ ...
When using the Vue 3 Composition API, it is necessary for each view to include the following: import { useRouter, useRoute } from 'vue-router' import { useStore } from 'vuex' export default { setup() { const router = useRo ...
Our goal is to activate a query when a string reaches a length of 3 characters or more, and keep it activated once triggered. Leveraging the Vue 2 Composition API, we have implemented a reactive object to manage the status of queries: import { computed, de ...
I am currently in the process of incorporating an IntersectionOberver that will update the url once the viewport transitions into a new section. I came across This thread and now endeavoring to apply it in vue 3 compositon api. The script is being integra ...
Utilizing <Suspense>, I am handling multiple requests in my child component using the await keyword: await store.dispatch("product/getProduct", route.params.id).then(res => productData.value = res); await store.dispatch("product/get ...
My current approach involves utilizing a setup() method to bring in an external component that exclusively supports the Options API. Once I have imported this component, I need to set it up using the Options API data. The challenge I face is accessing the ...
As a newcomer to Vue.js, I encountered an issue while working on my initial project that seems to be related to the component's lifecycle. Here is the scenario: I am using Vue 3 with the composition API. Within my "Map" component, I utilize d3.js to disp ...
In my Vue3 project, I have defined global variables like this: app.config.globalproperties.$locale = locale A composable function has been created to dynamically retrieve these global variables: import { getCurrentInstance ) from 'vue' export function us ...
After transitioning to Vue3 and embracing the Composition API style, I find myself missing a small convenience that I had when developing in the previous Options API pattern. In WebStorm/IntelliJ IDE, I used to be able to command-click (Mac) on the "export ...
Is there a way to initialize a reactive variable without assigning it a value initially? After trying various methods, I found that using null as the initial value doesn't seem to work: const workspaceReact = reactive(null) // incorrect! Cannot pass null a ...
Greetings to the Vue.js user community! I'm facing a challenging issue that I can't seem to resolve: I am currently using Vue.js 2.x on Windows 11. Whenever I run yarn install or npm install, I encounter an error as displayed in the console. Vi ...
Incorporating the Options API, I implemented form validation in this manner: template: <v-form ref="form" v-model="valid" lazy-validation @submit.prevent> ... script: methods: { validate() { this.$refs.form.validate(); ...
Let's dive into this simplified scenario: interface Pup { name: string; age: number; } const puppy: Pup = { name: 'Rex', age: 3, }; The goal here is to establish a reactive link for each attribute within the puppy object. The usua ...
I'm looking for the best approach to update a reactive object with data after fetching it: setup(){ const formData = reactive({}) onMounted(() => { fetchData().then((data) => { if (data) { formData = data //is ...
I have a function that listens for viewport dimensions when the project is first mounted and also after each resize event. However, I am unsure of the correct way to remove this listener. const { createApp, onMounted, ref } = Vue; const app = createA ...
There is an example discussed in this particular article. It mentions that a normal object is not 'reactive'. Upon testing in this codesandbox environment, it was observed that changes made to the normal object, including a plain string, can automatically ...
I've been diving into the world of Vue 3 and exploring the Composition API, but I'm struggling to get multiple instances of the same component to work properly. <Loader /> <Loader /> <Loader /> In my Loader.vue file: export default { ...
I previously developed Vue2 components using the class-based style and am now looking to transition my codebase to utilize the composition API. According to the documentation, the composition API and the script setup method for writing single file componen ...
I am experiencing an issue with a computed function that I want to use. Every time I attempt to remove the forward slashes and 'SYG' at the end of the string "99/KRFS/010572//SYG" pasted into a v-model input, I receive the error message "Computed property ...
I am currently facing a challenge with utilizing dynamic refs in the Vue Composition API. According to the Vue documentation, it suggests using the following approach: <div v-for="item in list" :ref="setItemRef"></div> impor ...
Currently facing a dilemma with Vue 3 (alpha 4): Within the setup() function, I am attempting to access the parent component. According to the guidance provided on , the parent should be accessible via the context argument, either as a property of context ...
Is there a way to fetch data from an API and populate my store (such as user info) before the entire page and components load? I have been struggling to find a solution. I recently came across the beforeRouteEnter method that can be used with the options ...
My goal is to automatically fetch all products when the specified URL is loaded: '/Admin/ProductsAdmin' Unfortunately, the mounted function is not functioning properly as it fails to load anything upon URL loading. Below is the main.js code snip ...
I've been diving into the new composition-api within VueJS and have encountered a problem that I need help with. I am seeking advice on how to effectively tackle this issue. Previously, when everything was vuex-based, dispatching an action to another ...
Greetings to the Vue.js community! As a newcomer to Vue.js, I am seeking guidance on fetching data using vue-query, Vue.js 3, and the composition API. The data returned to me is ObjectRefImpl, but when I try to print the values, I encounter the error: "Pro ...
Currently utilizing Vue2, Vuetify, and the Vue Composition API (@vue/composition-api). Encountering an issue with the reactivity of the composition API. Let's delve into some code snippets: ---- companies.vue ---- <template> ... <v-data-tabl ...
I'm currently dealing with a Vue code that incorporates anime.js. My code has grown substantially to over 1500 lines. In order for Stack Overflow to accept my question, I have only included 5 items of my sampleText, even though it actually consists of ...
I have a question about the ValidateCheckboxes component I am working with. ValidateCheckboxes is a specialized list of checkboxes that I pass to the component as props. Here's how it typically looks: view image here view image here I use v-for to dis ...
Having recently made the switch from Vue2 to Vue3, I find myself a bit perplexed about the best approach for sharing props among multiple components. My goal is to create input components that can share common props such as "type", "name", and so on. Previ ...
Is there a way to retrieve the list of custom directives applied to a component? When using the getCurrentInstance method, the directives property is null for the current component. I was expecting to see 'highlight' listed. How can I access the list of di ...
While I understand that in Vue we can access template refs to use getBoundingClientRect() with the options API like this: const rect = this.$refs.image.$el.getBoundingClientRect(); I am now attempting to achieve the same using template refs within the com ...
Exploring the Vue Composition API RFC Reference site, it's easy to find various uses of the watch module, but there is a lack of examples on how to watch component props. This crucial information is not highlighted on the main page of Vue Composition ...
While upgrading an app from vue 2 to vue 3, I encountered some difficulties with composables. My issue revolves around using props in the composable, which doesn't seem to work as expected. The code snippet is extracted from a functioning component and beh ...
I am facing an issue with a functional component: export default defineComponent({ name: 'MovieOverview', components: { ExpandedMovieInformation, }, setup() { let toggleValue = false; const toggleExpandedMovieInformation = (m ...
I'm having trouble setting up a basic button click feature in Vue 3 Composition API to play a sound effect. In my setup function, I have imported an mp3 sound effect from the assets folder and passed it into a ref method with an HTMLAudioElement type, wh ...
When working with a component that retrieves API data and passes it down to child components, I encountered an issue. I attempted to split the information into separate ref objects for each child component but ran into a problem - reactivity was lost. The ...
In my template, I have one form element and one button element: <button type="submit" id="ms_sign_in_submit" ref="submitButton" class="btn btn-lg btn-primary w-100 mb-5"> </button> Wi ...
I'm struggling to display a dynamic v-icon within a v-select component. I want to replace the icon name with its imported value <v-select v-model="data.type" dense :items="typeItems" :label="$tc('Type')"> <template v-s ...
Within the code snippet below, there are two radio buttons present. Initially, both of them are unchecked. When the first radio button is checked, the log message in change_() function prints "male". On the other hand, when the second radio button is check ...
I am truly grateful for the help from @zim as it allowed me to drastically simplify my code for 2 buttons that store true/false values locally. However, I am facing an issue where the button click is registering as [object MouseEvent] instead of True/False ...
Having trouble implementing a context menu in my SyncFusion TreeGrid. Despite following the instructions, nothing seems to be working for me. Here's a snippet of my code: <template> <ej2-treegrid :dataSource="tabla" :context ...
Working on a Vue 3 project, my setup includes a stuff.ts file with helpful functions that I need to utilize in my template. <script lang="ts"> import { defineComponent, onMounted } from 'vue' import { doSomething } from ' ...
After fetching data from the API, I noticed that my reactive form object was not updating on the DOM even though it changed in the console.log() when I refreshed the page. When the DOM is mounted, I populate my form object, but because it's a reactive obj ...
Currently working on upgrading from vue 2 to vue 3 and encountering an error with the @Component decorator: "Decorators are not valid here.ts(1206) (alias) Component(options: Vue.ComponentOptionsBase<Vue, any, any, any, any, any, any, any, string, ...
A Vue component I've created is using v3's composition API: <template> <input type="checkbox" v-model="playing" id="playing" @input="$emit('play', $event.target.value)" /> <label for="playing& ...
I created a custom "loading state" mixin specifically for Vue 2: export default { props: { loading: { type: Boolean, default: false }, }, data () { return { innerLoading: false, } }, mounted () { this.innerLo ...
<script lang="ts"> import { createComponent } from "@vue/composition-api"; import { SplashPage } from "../../lib/vue-viewmodels"; export default createComponent({ async setup(props, context) { await SplashPage.init(2000, context.root.$router, ...
<template> <div> <button @click="handleClick">toggle</button> <span v-if="isToggled()"> hidden message </span> </div> </template> <script setup lang="ts" ...
Having a reactive relationship with an initially empty map: const map = reactive({});, I also have a computed property that checks if the map contains a key named "key": const mapContainsKeyComputed = computed(() => map.hasOwnProperty("key")). However, ...
When working with Vue 2.x in our production applications, we utilize a toast component. This toast component is mounted once through a plugin (code provided below) and then added to the Vue prototype for easy access in every component instance. This setup ...
Currently, I am in the process of learning how to use Vue3 + Typescript. Previously, I have developed Vue2 applications using plain JavaScript. In my current project, I am attempting to define a reactive variable within the setup() function: setup() { ...
I am encountering an issue while attempting to create a custom child component with props as row data. The error message "rows.slice is not a function" keeps appearing, and upon inspecting the parent data, I found that it is an Object. However, the props r ...
I have been using @nuxtjs/composition-api(0.15.1), but I encountered some issues when trying to access Vuex getters within computed(). Below is the code snippet using composition API: import { computed, useContext, useFetch, reactive } from '@nuxtjs/compo ...
Is it recommended to add @vue/composition-api to the dependencies section of the package.json instead of devDependencies? I noticed that on the npm registry it is listed under dependencies. ...
After defining a variable in the setup function: setup(props, context) { let name = "Tommy"; } How can this variable be accessed and used within the component? data() { return { myName: name } }, The variable is accessib ...
I'm currently facing an issue while developing a Vue3 Perfect Scrollbar plugin. The problem arises when I try to initialize the object, resulting in the following error: Error: no element is specified to initialize PerfectScrollbar The code for the Scro ...
Just started working with TypeScript and encountered an issue while trying to set the state. Encountered this error message: 'string' is a type and cannot be used as a value here. const state = reactive({ user: { uid: "", pro ...
I am currently utilizing the Nuxt 3 / Vue 3 defineProps in conjunction with TypeScript and I am looking to automatically deduce prop types from TypeScript types. import { User } from '~/types/types' const props = defineProps({ users: { typ ...