Category "vuejs3"

How to add Vue 3 components programmatically?

Vue 3 doesn't have Vue.extend() method, so example here doesn't work: https://css-tricks.com/creating-vue-js-component-instances-programmatically/ I have tried

Vuejs 3 createApp using firestorePlugin from vuefire getting Uncaught TypeError: Cannot set property '$unbind' of undefined and no render

in my vuejs3 app I'm having this simple code in my main.js import { createApp } from "vue"; import App from "./App.vue"; import { firestorePlugin } from "vuefir

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='h

vue3 performance warning using ref

vue is throwing this message: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoid

@meforma/vue-toaster clear function only works when pulled into local project folder, not from node_modules

As stated, the package @meforma/vue-toaster has a clear() function in the API here. My vue and vite project setup: main.js import Toaster from '@meforma/vue-toa

Implementing route based models in Vue3 (Inertia.js)

I am following the following this guide, that shows how to enable "Route Based Modals" in Inertia.js. The post is written for Vue2, and I am using Vue3 - and I

Failed to resolve component <router-view> VueRouter

I have a project build with Vue.js 3.2.13 and Vue-Router 4.0.14. I think I do everything right but the browser raises an error "[Vue warn]: Failed to resolve co

I can't add Vue page transition with inertia js in vue js

The transition Does not work in inertia page . if add appLayout between transition tag . its working . but all content gives transition. Dashboard.vue <templ

Vue 3: global import for ref, reactive and computed

How do I import globally with Vue 3 in the main.js the ref, reactive and computed? I'm trying to avoid doing this in each component: import { ref, reactive, com

How to use vue2-leaflet in vue3 App, what changes need to be made?

I'm adding an Openstreetmap component. Newbie, straight to Vue3 (do not ask me to start from Vue2), MapLeaflet.vue : I took the code from here: https://vue2-lea

Vue 3 refs is undefined in render function

I have a simple Vue component with root element as ref="divRef". However, in onMounted function, divRef.value returns undefined. Any help will be appreciated. i

websocket + vue :get error connecting to websocket

I am beginner with websocket and i am trying to connect it with vue3 like this onMounted(() => { var connection = new WebSocket("wss://echo.websocket.org"

How do you export default from inside script setup in Vue 3?

The export default statement does not seem to work inside <script setup>. If I try to export it in test.vue: <template> <div id="test" class="t

Is it possible to turn that into '<script setup>' ? I try many ways but missing something maybe

Is it possible to turn that into <script setup> ? I try many ways but missing something maybe. Need help ! <script> import ProductsAPI from '../

ESLint Vue multiword components

Is there a way to stop getting error from ESLint for single word view name in Vue3? Every time I run ESLint, I get following message: 1:1 error Component na

Vue3 default value in select options

how would I add a default value to this template. the default value would be the first option in the list which is 'Please Select...' <template #dropDownSe

jest with vue3 typescript TypeError: Cannot read property 'deep' of undefined

I am doing unit test using jest. The things I am working with is vue3 (typescript) with quasar. I am facing the following error: TypeError: Cannot read property

How to set the type for the state object in pinia?

I'm making a chess game and I am using Vue 3 and TypeScript with Pinia for the state management. I want to do something like the following: export const useStor